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

Jump to bottom

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 9 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 August 01, 2024.
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
Loading