Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Content updates to Candidate Review page #1186

Merged
merged 17 commits into from
Aug 14, 2024
Merged

feat: Content updates to Candidate Review page #1186

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e1217eb
Add version string to candidate test plan run
stalgiag Jul 31, 2024
997ff46
Link to 'test-review' for test plan version on CandidateTestPlanRun
stalgiag Jul 31, 2024
7efaeb3
Update snapshot
stalgiag Jul 31, 2024
b2b5a38
Add At Version name to Candidate Review heading
stalgiag Jul 31, 2024
f4b5570
Add Run History to /candidate-test-plan/
stalgiag Aug 1, 2024
3ef251f
Update snapshots
stalgiag Aug 1, 2024
5d207c6
Merge branch 'development' into tpvs-candidate-review-page
stalgiag Aug 1, 2024
215c62e
Update snapshots
stalgiag Aug 1, 2024
2f31ab1
Revert incorrect snapshot update
stalgiag Aug 1, 2024
32ad7bb
Component for Run History
stalgiag Aug 6, 2024
f22112d
Update snapshot
stalgiag Aug 6, 2024
0e54f9c
Merge branch 'development' into tpvs-candidate-review-page
stalgiag Aug 6, 2024
c221484
Merge branch 'development' into tpvs-candidate-review-page
stalgiag Aug 6, 2024
4f229f1
Use dates object
stalgiag Aug 6, 2024
6caa980
Merge branch 'development' into tpvs-candidate-review-page
stalgiag Aug 13, 2024
b43f9f5
Use proptypes
stalgiag Aug 13, 2024
1ef3d9d
Update snapshots
stalgiag Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 20 additions & 8 deletions client/components/CandidateReview/CandidateTestPlanRun/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import DisclosureComponent from '../../common/DisclosureComponent';
import createIssueLink, {
getIssueSearchLink
} from '../../../utils/createIssueLink';
import { getTestersRunHistory } from '../../Reports/getTestersRunHistory';

const CandidateTestPlanRun = () => {
const { atId, testPlanVersionId } = useParams();
Expand Down Expand Up @@ -64,6 +65,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 @@ -376,7 +378,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 @@ -392,9 +395,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>
Comment on lines +399 to +403
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note to ourselves to also bring this to the TestRun page as well!

</div>
</div>
<div className="test-info-entity review-status">
Expand Down Expand Up @@ -461,13 +466,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 @@ -498,7 +505,12 @@ const CandidateTestPlanRun = () => {
/>
</>
);
})
}),
getTestersRunHistory(
testPlanReport,
currentTest.id,
testPlanReport.draftTestPlanRuns
)
]}
stacked
></DisclosureComponent>
Expand Down
49 changes: 1 addition & 48 deletions client/components/Reports/SummarizeTestPlanReport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,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 { getTestersRunHistory } from './getTestersRunHistory';

const ResultsContainer = styled.div`
padding: 1em 1.75em;
Expand All @@ -28,54 +29,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 {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
50 changes: 50 additions & 0 deletions client/components/Reports/getTestersRunHistory.js
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not entirely satisfied by this placement but there wasn't a strong enough organization strategy in place for content-related utilities used by more than one component. Ideally, it would be a useMemo custom hook but that would've required some restructuring. Open to alternatives but this seemed acceptable for now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose something like this could go into client/common as its own component but this is okay. Tweaks to organization of these shared components could be its own task.

it would be a useMemo custom hook

Good thought for the future!

Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from 'react';
import { convertDateToString } from '../../utils/formatter';

export 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 {convertDateToString(testResult.completedAt, 'MMMM DD, YYYY')}.
</li>
);
}
});

return (
<ul
style={{
marginBottom: '0'
}}
>
{lines}
</ul>
);
};
52 changes: 48 additions & 4 deletions client/tests/e2e/snapshots/saved/_candidate-test-plan_24_1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,13 +262,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 @@ -437,9 +440,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 @@ -607,6 +610,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>
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 July 30, 2024.
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions client/tests/e2e/snapshots/saved/_data-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ <h3>
<option value="66">Breadcrumb Example</option>
<option value="67">Checkbox Example (Mixed-State)</option>
<option value="36">Checkbox Example (Two State)</option>
<option value="84">Color Viewer Slider</option>
<option value="83">Color Viewer Slider</option>
<option value="38">
Combobox with Both List and Inline Autocomplete Example
</option>
Expand All @@ -233,7 +233,7 @@ <h3>
<option value="43">
Date Picker Spin Button Example
</option>
<option value="83">
<option value="69">
Disclosure Navigation Menu Example
</option>
<option value="44">
Expand All @@ -256,19 +256,19 @@ <h3>
<option value="49">Main Landmark</option>
<option value="60">Media Seek Slider</option>
<option value="54">Meter</option>
<option value="85">Modal Dialog Example</option>
<option value="84">Modal Dialog Example</option>
<option value="52">Navigation Menu Button</option>
<option value="74">
Radio Group Example Using Roving tabindex
</option>
<option value="86">
<option value="85">
Radio Group Example Using aria-activedescendant
</option>
<option value="59">Rating Slider</option>
<option value="7">Select Only Combobox Example</option>
<option value="61">Switch Example</option>
<option value="62">Tabs with Manual Activation</option>
<option value="87">Toggle Button</option>
<option value="86">Toggle Button</option>
<option value="64">Vertical Temperature Slider</option>
</select>
</div>
Expand Down Expand Up @@ -622,7 +622,7 @@ <h2>Test Plans Status Summary</h2>
<span
class="full-width auto-width css-36z7cz"
role="listitem"
><a href="/test-review/85"
><a href="/test-review/84"
><span
><svg
aria-hidden="true"
Expand Down Expand Up @@ -1004,7 +1004,7 @@ <h2>Test Plans Status Summary</h2>
<span
class="full-width auto-width css-36z7cz"
role="listitem"
><a href="/test-review/87"
><a href="/test-review/86"
><span
><svg
aria-hidden="true"
Expand Down Expand Up @@ -1352,7 +1352,7 @@ <h2>Test Plans Status Summary</h2>
<span
class="full-width auto-width css-36z7cz"
role="listitem"
><a href="/test-review/84"
><a href="/test-review/83"
><span
><svg
aria-hidden="true"
Expand Down Expand Up @@ -1659,15 +1659,15 @@ <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 23, 2023</b></p>
</div>
</td>
<td>
<div role="list" aria-setsize="2" class="css-1bj5ml9">
<span
class="full-width auto-width css-36z7cz"
role="listitem"
><a href="/test-review/83"
><a href="/test-review/69"
><span
><svg
aria-hidden="true"
Expand All @@ -1682,7 +1682,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>V23.08.23</b></span
></a
></span
><button
Expand Down Expand Up @@ -2343,7 +2343,7 @@ <h2>Test Plans Status Summary</h2>
<span
class="full-width auto-width css-36z7cz"
role="listitem"
><a href="/test-review/86"
><a href="/test-review/85"
><span
><svg
aria-hidden="true"
Expand Down
4 changes: 2 additions & 2 deletions client/tests/e2e/snapshots/saved/_test-queue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ <h3>
<option value="1">Alert Example</option>
<option value="67">Checkbox Example (Mixed-State)</option>
<option value="68">Command Button Example</option>
<option value="85">Modal Dialog Example</option>
<option value="84">Modal Dialog Example</option>
<option value="7">Select Only Combobox Example</option>
<option value="31">Toggle Button</option>
</select>
Expand Down Expand Up @@ -552,7 +552,7 @@ <h3>
aria-labelledby="disclosure-btn-modal-dialog-0"
class="css-19fsyrg">
<div class="css-25wfk">
<a href="/test-review/85"
<a href="/test-review/84"
><svg
aria-hidden="true"
focusable="false"
Expand Down
Loading