Skip to content

Commit

Permalink
feat: Content updates to Candidate Review page (#1186)
Browse files Browse the repository at this point in the history
* Add version string to candidate test plan run

* Link to 'test-review' for test plan version on CandidateTestPlanRun

* Update snapshot

* Add At Version name to Candidate Review heading

* Add Run History to /candidate-test-plan/

* Update snapshots

* Update snapshots

* Revert incorrect snapshot update

* Component for Run History

* Update snapshot

* Use dates object

* Use proptypes

* Update snapshots
  • Loading branch information
stalgiag committed Aug 14, 2024
1 parent b0d91ba commit c64e584
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 70 deletions.
28 changes: 20 additions & 8 deletions client/components/CandidateReview/CandidateTestPlanRun/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import DisclosureComponent from '../../common/DisclosureComponent';
import createIssueLink, {
getIssueSearchLink
} from '../../../utils/createIssueLink';
import RunHistory from '../../common/RunHistory';
import { useUrlTestIndex } from '../../../hooks/useUrlTestIndex';

const CandidateTestPlanRun = () => {
Expand Down Expand Up @@ -65,6 +66,7 @@ const CandidateTestPlanRun = () => {
const [thankYouModalShowing, setThankYouModalShowing] = useState(false);
const [showInstructions, setShowInstructions] = useState(false);
const [showBrowserBools, setShowBrowserBools] = useState([]);
const [showRunHistory, setShowRunHistory] = useState(false);
const [showBrowserClicks, setShowBrowserClicks] = useState([]);

const isLaptopOrLarger = useMediaQuery({
Expand Down Expand Up @@ -377,7 +379,8 @@ const CandidateTestPlanRun = () => {
</span>
<h1>
{`${currentTest.seq}. ${currentTest.title}`}{' '}
<span className="using">using</span> {`${at}`}
<span className="using">using</span> {`${at}`}{' '}
{`${testPlanReport?.latestAtVersionReleasedAt?.name ?? ''}`}
{viewedTests.includes(currentTest.id) && !firstTimeViewing && ' '}
{viewedTests.includes(currentTest.id) && !firstTimeViewing && (
<Badge className="viewed-badge" pill variant="secondary">
Expand All @@ -393,9 +396,11 @@ const CandidateTestPlanRun = () => {
<div className="test-info-entity apg-example-name">
<div className="info-label">
<b>Candidate Test Plan:</b>{' '}
{`${
testPlanVersion.title || testPlanVersion.testPlan?.directory || ''
}`}
<a href={`/test-review/${testPlanVersion.id}`}>
{`${
testPlanVersion.title || testPlanVersion.testPlan?.directory || ''
} ${testPlanVersion.versionString}`}
</a>
</div>
</div>
<div className="test-info-entity review-status">
Expand Down Expand Up @@ -462,13 +467,15 @@ const CandidateTestPlanRun = () => {
'Test Instructions',
...testPlanReports.map(
testPlanReport => `Test Results for ${testPlanReport.browser.name}`
)
),
'Run History'
]}
onClick={[
() => setShowInstructions(!showInstructions),
...showBrowserClicks
...showBrowserClicks,
() => setShowRunHistory(!showRunHistory)
]}
expanded={[showInstructions, ...showBrowserBools]}
expanded={[showInstructions, ...showBrowserBools, showRunHistory]}
disclosureContainerView={[
<InstructionsRenderer
key={`instructions-${currentTest.id}`}
Expand Down Expand Up @@ -499,7 +506,12 @@ const CandidateTestPlanRun = () => {
/>
</>
);
})
}),
<RunHistory
key="run-history"
testPlanReports={testPlanReports}
testId={currentTest.id}
/>
]}
stacked
></DisclosureComponent>
Expand Down
61 changes: 7 additions & 54 deletions client/components/Reports/SummarizeTestPlanReport.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import TestPlanResultsTable from '../common/TestPlanResultsTable';
import DisclosureComponent from '../common/DisclosureComponent';
import { Link, Navigate, useLocation, useParams } from 'react-router-dom';
import createIssueLink from '../../utils/createIssueLink';
import RunHistory from '../common/RunHistory';
import {
TestPlanReportPropType,
TestPlanVersionPropType
Expand All @@ -31,55 +32,6 @@ const ResultsContainer = styled.div`
margin-bottom: 0.5em;
`;

const getTestersRunHistory = (
testPlanReport,
testId,
draftTestPlanRuns = []
) => {
const { id: testPlanReportId, at, browser } = testPlanReport;
let lines = [];

draftTestPlanRuns.forEach(draftTestPlanRun => {
const { testPlanReport, testResults, tester } = draftTestPlanRun;

const testResult = testResults.find(item => item.test.id === testId);
if (testPlanReportId === testPlanReport.id && testResult?.completedAt) {
lines.push(
<li
key={`${testResult.atVersion.id}-${testResult.browserVersion.id}-${testResult.test.id}-${tester.username}`}
>
Tested with{' '}
<b>
{at.name} {testResult.atVersion.name}
</b>{' '}
and{' '}
<b>
{browser.name} {testResult.browserVersion.name}
</b>{' '}
by{' '}
<b>
<a href={`https://github.com/${tester.username}`}>
{tester.username}
</a>
</b>{' '}
on{' '}
{dates.convertDateToString(testResult.completedAt, 'MMMM DD, YYYY')}.
</li>
);
}
});

return (
<ul
style={{
marginBottom: '0'
}}
>
{lines}
</ul>
);
};

const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
const { exampleUrl, designPatternUrl } = testPlanVersion.metadata;
const location = useLocation();
Expand Down Expand Up @@ -368,11 +320,12 @@ const SummarizeTestPlanReport = ({ testPlanVersion, testPlanReports }) => {
<DisclosureComponent
componentId={`run-history-${testResult.id}`}
title="Run History"
disclosureContainerView={getTestersRunHistory(
testPlanReport,
testResult.test.id,
testPlanReport.draftTestPlanRuns
)}
disclosureContainerView={
<RunHistory
testPlanReports={[testPlanReport]}
testId={testResult.test.id}
/>
}
/>
</Fragment>
);
Expand Down
77 changes: 77 additions & 0 deletions client/components/common/RunHistory/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';

import styled from '@emotion/styled';
import { dates } from 'shared';
import { TestPlanReportPropType } from '../proptypes';

const RunListItem = styled.li`
margin-bottom: 0.5rem;
`;

const RunHistory = ({ testPlanReports, testId }) => {
if (!testPlanReports || testPlanReports.length === 0) {
return null;
}

const lines = useMemo(() => {
const l = [];
for (const testPlanReport of testPlanReports) {
const { draftTestPlanRuns, at, browser } = testPlanReport;
for (const draftTestPlanRun of draftTestPlanRuns) {
const { testResults, tester } = draftTestPlanRun;
const testResult = testResults.find(item => item.test.id === testId);
if (testResult?.completedAt) {
l.push(
<RunListItem
key={`${testResult.atVersion.id}-${testResult.browserVersion.id}-${testResult.test.id}-${tester.username}`}
>
Tested with{' '}
<b>
{at.name} {testResult.atVersion.name}
</b>{' '}
and{' '}
<b>
{browser.name} {testResult.browserVersion.name}
</b>{' '}
by{' '}
<b>
<a href={`https://github.com/${tester.username}`}>
{tester.username}
</a>
</b>{' '}
on{' '}
{dates.convertDateToString(
testResult.completedAt,
'MMMM DD, YYYY'
)}
.
</RunListItem>
);
}
}
}
return l;
}, [testPlanReports, testId]);

if (lines.length === 0) {
return null;
}

return (
<ul
style={{
marginBottom: '0'
}}
>
{lines}
</ul>
);
};

RunHistory.propTypes = {
testPlanReports: PropTypes.arrayOf(TestPlanReportPropType),
testId: PropTypes.string
};

export default RunHistory;
52 changes: 48 additions & 4 deletions client/tests/e2e/snapshots/saved/_candidate-test-plan_24_1.html
Original file line number Diff line number Diff line change
Expand Up @@ -263,13 +263,16 @@
<span class="task-label">Reviewing Test 1 of 18:</span>
<h1>
1. Open a Modal Dialog in reading mode
<span class="using">using</span> JAWS
<span class="using">using</span> JAWS 2021.2111.13
</h1>
</div>
<div class="test-info-wrapper">
<div class="test-info-entity apg-example-name">
<div class="info-label">
<b>Candidate Test Plan:</b> Modal Dialog Example
<b>Candidate Test Plan:</b>
<a href="/test-review/24"
>Modal Dialog Example V22.05.26</a
>
</div>
</div>
<div class="test-info-entity review-status">
Expand Down Expand Up @@ -438,9 +441,9 @@ <h1>
<button
id="disclosure-btn-test-instructions-and-results-Test Results for Chrome"
type="button"
aria-expanded="false"
aria-controls="disclosure-btn-controls-test-instructions-and-results-Test Results for Chrome"
class="css-10jxhio"
aria-expanded="false">
class="css-10jxhio">
Test Results for Chrome<svg
aria-hidden="true"
focusable="false"
Expand Down Expand Up @@ -608,6 +611,47 @@ <h3>
</div>
Other behaviors that create negative impact: None
</div>
<h1>
<button
id="disclosure-btn-test-instructions-and-results-Run History"
type="button"
aria-controls="disclosure-btn-controls-test-instructions-and-results-Run History"
class="css-10jxhio"
aria-expanded="false">
Run History<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="chevron-down"
class="svg-inline--fa fa-chevron-down disclosure-icon"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path
fill="currentColor"
d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
</svg>
</button>
</h1>
<div
role="region"
id="disclosure-container-test-instructions-and-results-Run History"
aria-labelledby="disclosure-btn-test-instructions-and-results-Run History"
class="css-19fsyrg">
<ul style="margin-bottom: 0px">
<li class="css-j662fd">
Tested with <b>JAWS 2021.2111.13</b> and
<b>Chrome 99.0.4844.84</b> by
<b
><a
href="https://github.com/esmeralda-baggins"
>esmeralda-baggins</a
></b
>
on August 13, 2024.
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions client/tests/e2e/snapshots/saved/_data-management.html
Original file line number Diff line number Diff line change
Expand Up @@ -1087,7 +1087,7 @@ <h2>Test Plans Status Summary</h2>
<td>
<div class="css-bpz90">
<span class="rd full-width css-be9e2a">R&amp;D</span>
<p class="review-text">Complete <b>Aug 8, 2024</b></p>
<p class="review-text">Complete <b>Aug 12, 2024</b></p>
</div>
</td>
<td>
Expand All @@ -1110,7 +1110,7 @@ <h2>Test Plans Status Summary</h2>
<path
fill="currentColor"
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg
><b>V24.08.08</b></span
><b>V24.08.12</b></span
></a
></span
><button
Expand Down Expand Up @@ -1660,7 +1660,7 @@ <h2>Test Plans Status Summary</h2>
<td>
<div class="css-bpz90">
<span class="rd full-width css-be9e2a">R&amp;D</span>
<p class="review-text">Complete <b>Jul 31, 2024</b></p>
<p class="review-text">Complete <b>Aug 12, 2024</b></p>
</div>
</td>
<td>
Expand All @@ -1683,7 +1683,7 @@ <h2>Test Plans Status Summary</h2>
<path
fill="currentColor"
d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"></path></svg
><b>V24.07.31</b></span
><b>V24.08.12</b></span
></a
></span
><button
Expand Down

0 comments on commit c64e584

Please sign in to comment.