Skip to content

Commit b848b10

Browse files
evmiguelhoward-e
evmiguel
and
howard-e
authored
Fix missing rows test management (#622)
* fix for adding missing rows * initial test * test management test * fixing graphql test * Set vertical alignment of content in table cells --------- Co-authored-by: Howard Edwards <[email protected]>
1 parent d062676 commit b848b10

File tree

9 files changed

+1120
-63
lines changed

9 files changed

+1120
-63
lines changed

‎client/components/TestManagement/StatusSummaryRow/index.jsx

+65-54
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ const PhaseDot = styled.span`
5151
}
5252
`;
5353

54+
const NoPhaseText = styled.span`
55+
margin-left: 12px;
56+
margin-right: 12px;
57+
`;
58+
5459
const StatusSummaryRow = ({ reportResult, testPlanVersion }) => {
5560
const [bulkUpdateTestPlanReportStatusMutation] = useMutation(
5661
BULK_UPDATE_TEST_PLAN_REPORT_STATUS_MUTATION
@@ -114,63 +119,69 @@ const StatusSummaryRow = ({ reportResult, testPlanVersion }) => {
114119
<tr>
115120
<th>
116121
{testPlanVersion.title}
117-
<PhaseText className={phase.toLowerCase()}>
118-
{phase}
119-
</PhaseText>
122+
{Object.entries(reportResult).length > 0 && (
123+
<PhaseText className={phase.toLowerCase()}>
124+
{phase}
125+
</PhaseText>
126+
)}
120127
</th>
121128
<td>
122-
<Dropdown className="change-phase">
123-
<Dropdown.Toggle
124-
id={nextId()}
125-
ref={dropdownUpdateReportStatusButtonRef}
126-
variant="secondary"
127-
aria-label={`Change test plan phase for ${testPlanVersion.title}`}
128-
>
129-
<PhaseDot className={phase.toLowerCase()} />
130-
{phase}
131-
</Dropdown.Toggle>
132-
<Dropdown.Menu role="menu">
133-
<Dropdown.Item
134-
role="menuitem"
135-
disabled={phase === 'Draft'}
136-
onClick={async () => {
137-
await bulkUpdateReportStatus(
138-
testPlanReports.map(i => i.id),
139-
'DRAFT'
140-
);
141-
}}
142-
>
143-
<PhaseDot className="draft" />
144-
Draft
145-
</Dropdown.Item>
146-
<Dropdown.Item
147-
role="menuitem"
148-
disabled={phase === 'Candidate'}
149-
onClick={async () => {
150-
await bulkUpdateReportStatus(
151-
testPlanReports.map(i => i.id),
152-
'CANDIDATE'
153-
);
154-
}}
155-
>
156-
<PhaseDot className="candidate" />
157-
Candidate
158-
</Dropdown.Item>
159-
<Dropdown.Item
160-
role="menuitem"
161-
disabled={phase === 'Recommended'}
162-
onClick={async () => {
163-
await bulkUpdateReportStatus(
164-
testPlanReports.map(i => i.id),
165-
'RECOMMENDED'
166-
);
167-
}}
129+
{(Object.entries(reportResult).length <= 0 && (
130+
<NoPhaseText>Not tested</NoPhaseText>
131+
)) || (
132+
<Dropdown className="change-phase">
133+
<Dropdown.Toggle
134+
id={nextId()}
135+
ref={dropdownUpdateReportStatusButtonRef}
136+
variant="secondary"
137+
aria-label={`Change test plan phase for ${testPlanVersion.title}`}
168138
>
169-
<PhaseDot className="recommended" />
170-
Recommended
171-
</Dropdown.Item>
172-
</Dropdown.Menu>
173-
</Dropdown>
139+
<PhaseDot className={phase.toLowerCase()} />
140+
{phase}
141+
</Dropdown.Toggle>
142+
<Dropdown.Menu role="menu">
143+
<Dropdown.Item
144+
role="menuitem"
145+
disabled={phase === 'Draft'}
146+
onClick={async () => {
147+
await bulkUpdateReportStatus(
148+
testPlanReports.map(i => i.id),
149+
'DRAFT'
150+
);
151+
}}
152+
>
153+
<PhaseDot className="draft" />
154+
Draft
155+
</Dropdown.Item>
156+
<Dropdown.Item
157+
role="menuitem"
158+
disabled={phase === 'Candidate'}
159+
onClick={async () => {
160+
await bulkUpdateReportStatus(
161+
testPlanReports.map(i => i.id),
162+
'CANDIDATE'
163+
);
164+
}}
165+
>
166+
<PhaseDot className="candidate" />
167+
Candidate
168+
</Dropdown.Item>
169+
<Dropdown.Item
170+
role="menuitem"
171+
disabled={phase === 'Recommended'}
172+
onClick={async () => {
173+
await bulkUpdateReportStatus(
174+
testPlanReports.map(i => i.id),
175+
'RECOMMENDED'
176+
);
177+
}}
178+
>
179+
<PhaseDot className="recommended" />
180+
Recommended
181+
</Dropdown.Item>
182+
</Dropdown.Menu>
183+
</Dropdown>
184+
)}
174185
</td>
175186
</tr>
176187

‎client/components/TestManagement/TestManagement.css

+5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55

66
.test-management.table tbody tr th {
77
padding: 20px;
8+
vertical-align: middle;
9+
}
10+
11+
.test-management.table tbody tr td {
12+
vertical-align: middle;
813
}
914

1015
.test-management.table th.phase {

‎client/components/TestManagement/index.jsx

+40-9
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const TestManagement = () => {
2525
const [pageReady, setPageReady] = useState(false);
2626
const [ats, setAts] = useState([]);
2727
const [browsers, setBrowsers] = useState([]);
28+
const [testPlans, setTestPlans] = useState([]);
2829
const [testPlanVersions, setTestPlanVersions] = useState([]);
2930
const [testPlanReports, setTestPlanReports] = useState([]);
3031

@@ -34,11 +35,13 @@ const TestManagement = () => {
3435
ats = [],
3536
browsers = [],
3637
testPlanVersions = [],
37-
testPlanReports = []
38+
testPlanReports = [],
39+
testPlans = []
3840
} = data;
3941
setAts(ats);
4042
setTestPlanVersions(testPlanVersions);
4143
setTestPlanReports(testPlanReports);
44+
setTestPlans(testPlans);
4245
setBrowsers(browsers);
4346
setPageReady(true);
4447
}
@@ -102,6 +105,7 @@ const TestManagement = () => {
102105
] = null;
103106
});
104107
});
108+
105109
testPlanReports.forEach(testPlanReport => {
106110
const { testPlanVersion, at, browser } = testPlanReport;
107111
const directory = testPlanVersion.testPlan.directory;
@@ -117,6 +121,12 @@ const TestManagement = () => {
117121
].testPlanVersion = testPlanVersion;
118122
});
119123

124+
testPlans.forEach(testPlan => {
125+
if (!(testPlan.directory in tabularReportsByDirectory)) {
126+
tabularReportsByDirectory[testPlan.directory] = testPlan;
127+
}
128+
});
129+
120130
const combineObject = originalObject => {
121131
let combinedTestPlanVersionIdArray = [];
122132
let resultTestPlanTargets = Object.values(originalObject)[0];
@@ -223,21 +233,42 @@ const TestManagement = () => {
223233
<tbody>
224234
{/* Sort the summary items by title */}
225235
{Object.values(tabularReportsByDirectory)
226-
.sort((a, b) =>
227-
Object.values(a)[0].testPlanVersion
228-
.title <
229-
Object.values(b)[0].testPlanVersion
230-
.title
231-
? -1
232-
: 1
233-
)
236+
.sort((a, b) => {
237+
return (
238+
a.title ||
239+
Object.values(a)[0].testPlanVersion
240+
.title
241+
).localeCompare(
242+
b.title ||
243+
Object.values(b)[0]
244+
.testPlanVersion.title
245+
);
246+
})
234247
.map(tabularReport => {
235248
let reportResult = null;
236249
let testPlanVersionId = null;
237250

238251
// Evaluate what is prioritised across the
239252
// collection of testPlanVersions
240253
if (
254+
typeof Object.values(
255+
tabularReport
256+
)[0] !== 'object'
257+
) {
258+
return (
259+
<StatusSummaryRow
260+
key={
261+
tabularReport
262+
.latestTestPlanVersion
263+
.id
264+
}
265+
testPlanVersion={
266+
tabularReport.latestTestPlanVersion
267+
}
268+
reportResult={{}}
269+
/>
270+
);
271+
} else if (
241272
Object.values(tabularReport)
242273
.length > 1
243274
) {

‎client/components/TestManagement/queries.js

+9
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ export const TEST_MANAGEMENT_PAGE_QUERY = gql`
1515
id
1616
name
1717
}
18+
testPlans {
19+
directory
20+
id
21+
title
22+
latestTestPlanVersion {
23+
id
24+
title
25+
}
26+
}
1827
testPlanVersions {
1928
id
2029
title

‎client/tests/TestManagement.test.jsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* @jest-environment jsdom
3+
*/
4+
5+
import React from 'react';
6+
import { render, waitFor } from '@testing-library/react';
7+
import { InMemoryCache } from '@apollo/client';
8+
import { MockedProvider } from '@apollo/client/testing';
9+
import { BrowserRouter } from 'react-router-dom';
10+
import '@testing-library/jest-dom/extend-expect';
11+
12+
import TestManagement from '../components/TestManagement';
13+
14+
// eslint-disable-next-line jest/no-mocks-import
15+
import { TEST_MANAGEMENT_PAGE_POPULATED } from './__mocks__/GraphQLMocks';
16+
17+
const setup = (mocks = []) => {
18+
return render(
19+
<BrowserRouter>
20+
<MockedProvider
21+
mocks={mocks}
22+
cache={new InMemoryCache({ addTypename: false })}
23+
>
24+
<TestManagement />
25+
</MockedProvider>
26+
</BrowserRouter>
27+
);
28+
};
29+
30+
describe('Test Management page', () => {
31+
let wrapper;
32+
33+
beforeEach(() => {
34+
wrapper = setup(TEST_MANAGEMENT_PAGE_POPULATED);
35+
});
36+
37+
it('renders loading state on initialization', async () => {
38+
const { getByTestId } = wrapper;
39+
const element = getByTestId('page-status');
40+
41+
expect(element).toBeTruthy();
42+
expect(element).toHaveTextContent('Loading');
43+
});
44+
45+
it('renders Status Summary component', async () => {
46+
// allow page time to load
47+
await waitFor(() => new Promise(res => setTimeout(res, 0)));
48+
49+
const { queryAllByText } = wrapper;
50+
const statusSummaryElement = queryAllByText(/Status Summary/i);
51+
const testPlansElement = queryAllByText(/Test Plans/i);
52+
const phaseElement = queryAllByText(/Phase/i);
53+
const candidateElements = queryAllByText(/Candidate/i);
54+
const notTestedElements = queryAllByText(/Not tested/i);
55+
56+
expect(statusSummaryElement.length).toBeGreaterThanOrEqual(1);
57+
expect(testPlansElement.length).toBeGreaterThanOrEqual(1);
58+
expect(phaseElement.length).toBeGreaterThanOrEqual(1);
59+
expect(candidateElements.length).toBeGreaterThanOrEqual(1);
60+
expect(notTestedElements.length).toBeGreaterThanOrEqual(1);
61+
});
62+
});

0 commit comments

Comments
 (0)