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.

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
Show file tree
Hide file tree
Changes from 14 commits
Commits
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
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';

const CandidateTestPlanRun = () => {
const { atId, testPlanVersionId } = useParams();
Expand Down Expand Up @@ -63,6 +64,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 @@ -375,7 +377,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 @@ -391,9 +394,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 @@ -460,13 +465,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 @@ -497,7 +504,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';

const ResultsContainer = styled.div`
padding: 1em 1.75em;
Expand All @@ -27,55 +28,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 @@ -364,11 +316,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';

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>
);
};

// TODO: Add prop types when the proptypes definitions are merged
RunHistory.propTypes = {
testPlanReports: PropTypes.arrayOf(PropTypes.object),
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 @@ -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 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 06, 2024.
</li>
</ul>
</div>
</div>
</div>
</div>
Expand Down
Loading