Skip to content

Commit

Permalink
Fix missing rows test management (#622)
Browse files Browse the repository at this point in the history 
* 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]>
  • Loading branch information
@evmiguel @howard-e
evmiguel and howard-e authored Jun 7, 2023
1 parent d062676 commit b848b10
Show file tree
Hide file tree
Showing 9 changed files with 1,120 additions and 63 deletions.
119 changes: 65 additions & 54 deletions client/components/TestManagement/StatusSummaryRow/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@ const PhaseDot = styled.span`
}
`;

const NoPhaseText = styled.span`
margin-left: 12px;
margin-right: 12px;
`;

const StatusSummaryRow = ({ reportResult, testPlanVersion }) => {
const [bulkUpdateTestPlanReportStatusMutation] = useMutation(
BULK_UPDATE_TEST_PLAN_REPORT_STATUS_MUTATION
Expand Down Expand Up @@ -114,63 +119,69 @@ const StatusSummaryRow = ({ reportResult, testPlanVersion }) => {
<tr>
<th>
{testPlanVersion.title}
<PhaseText className={phase.toLowerCase()}>
{phase}
</PhaseText>
{Object.entries(reportResult).length > 0 && (
<PhaseText className={phase.toLowerCase()}>
{phase}
</PhaseText>
)}
</th>
<td>
<Dropdown className="change-phase">
<Dropdown.Toggle
id={nextId()}
ref={dropdownUpdateReportStatusButtonRef}
variant="secondary"
aria-label={`Change test plan phase for ${testPlanVersion.title}`}
>
<PhaseDot className={phase.toLowerCase()} />
{phase}
</Dropdown.Toggle>
<Dropdown.Menu role="menu">
<Dropdown.Item
role="menuitem"
disabled={phase === 'Draft'}
onClick={async () => {
await bulkUpdateReportStatus(
testPlanReports.map(i => i.id),
'DRAFT'
);
}}
>
<PhaseDot className="draft" />
Draft
</Dropdown.Item>
<Dropdown.Item
role="menuitem"
disabled={phase === 'Candidate'}
onClick={async () => {
await bulkUpdateReportStatus(
testPlanReports.map(i => i.id),
'CANDIDATE'
);
}}
>
<PhaseDot className="candidate" />
Candidate
</Dropdown.Item>
<Dropdown.Item
role="menuitem"
disabled={phase === 'Recommended'}
onClick={async () => {
await bulkUpdateReportStatus(
testPlanReports.map(i => i.id),
'RECOMMENDED'
);
}}
{(Object.entries(reportResult).length <= 0 && (
<NoPhaseText>Not tested</NoPhaseText>
)) || (
<Dropdown className="change-phase">
<Dropdown.Toggle
id={nextId()}
ref={dropdownUpdateReportStatusButtonRef}
variant="secondary"
aria-label={`Change test plan phase for ${testPlanVersion.title}`}
>
<PhaseDot className="recommended" />
Recommended
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<PhaseDot className={phase.toLowerCase()} />
{phase}
</Dropdown.Toggle>
<Dropdown.Menu role="menu">
<Dropdown.Item
role="menuitem"
disabled={phase === 'Draft'}
onClick={async () => {
await bulkUpdateReportStatus(
testPlanReports.map(i => i.id),
'DRAFT'
);
}}
>
<PhaseDot className="draft" />
Draft
</Dropdown.Item>
<Dropdown.Item
role="menuitem"
disabled={phase === 'Candidate'}
onClick={async () => {
await bulkUpdateReportStatus(
testPlanReports.map(i => i.id),
'CANDIDATE'
);
}}
>
<PhaseDot className="candidate" />
Candidate
</Dropdown.Item>
<Dropdown.Item
role="menuitem"
disabled={phase === 'Recommended'}
onClick={async () => {
await bulkUpdateReportStatus(
testPlanReports.map(i => i.id),
'RECOMMENDED'
);
}}
>
<PhaseDot className="recommended" />
Recommended
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
)}
</td>
</tr>

Expand Down
5 changes: 5 additions & 0 deletions client/components/TestManagement/TestManagement.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@

.test-management.table tbody tr th {
padding: 20px;
vertical-align: middle;
}

.test-management.table tbody tr td {
vertical-align: middle;
}

.test-management.table th.phase {
Expand Down
49 changes: 40 additions & 9 deletions client/components/TestManagement/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const TestManagement = () => {
const [pageReady, setPageReady] = useState(false);
const [ats, setAts] = useState([]);
const [browsers, setBrowsers] = useState([]);
const [testPlans, setTestPlans] = useState([]);
const [testPlanVersions, setTestPlanVersions] = useState([]);
const [testPlanReports, setTestPlanReports] = useState([]);

Expand All @@ -34,11 +35,13 @@ const TestManagement = () => {
ats = [],
browsers = [],
testPlanVersions = [],
testPlanReports = []
testPlanReports = [],
testPlans = []
} = data;
setAts(ats);
setTestPlanVersions(testPlanVersions);
setTestPlanReports(testPlanReports);
setTestPlans(testPlans);
setBrowsers(browsers);
setPageReady(true);
}
Expand Down Expand Up @@ -102,6 +105,7 @@ const TestManagement = () => {
] = null;
});
});

testPlanReports.forEach(testPlanReport => {
const { testPlanVersion, at, browser } = testPlanReport;
const directory = testPlanVersion.testPlan.directory;
Expand All @@ -117,6 +121,12 @@ const TestManagement = () => {
].testPlanVersion = testPlanVersion;
});

testPlans.forEach(testPlan => {
if (!(testPlan.directory in tabularReportsByDirectory)) {
tabularReportsByDirectory[testPlan.directory] = testPlan;
}
});

const combineObject = originalObject => {
let combinedTestPlanVersionIdArray = [];
let resultTestPlanTargets = Object.values(originalObject)[0];
Expand Down Expand Up @@ -223,21 +233,42 @@ const TestManagement = () => {
<tbody>
{/* Sort the summary items by title */}
{Object.values(tabularReportsByDirectory)
.sort((a, b) =>
Object.values(a)[0].testPlanVersion
.title <
Object.values(b)[0].testPlanVersion
.title
? -1
: 1
)
.sort((a, b) => {
return (
a.title ||
Object.values(a)[0].testPlanVersion
.title
).localeCompare(
b.title ||
Object.values(b)[0]
.testPlanVersion.title
);
})
.map(tabularReport => {
let reportResult = null;
let testPlanVersionId = null;

// Evaluate what is prioritised across the
// collection of testPlanVersions
if (
typeof Object.values(
tabularReport
)[0] !== 'object'
) {
return (
<StatusSummaryRow
key={
tabularReport
.latestTestPlanVersion
.id
}
testPlanVersion={
tabularReport.latestTestPlanVersion
}
reportResult={{}}
/>
);
} else if (
Object.values(tabularReport)
.length > 1
) {
Expand Down
9 changes: 9 additions & 0 deletions client/components/TestManagement/queries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@ export const TEST_MANAGEMENT_PAGE_QUERY = gql`
id
name
}
testPlans {
directory
id
title
latestTestPlanVersion {
id
title
}
}
testPlanVersions {
id
title
Expand Down
62 changes: 62 additions & 0 deletions client/tests/TestManagement.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/**
* @jest-environment jsdom
*/

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { InMemoryCache } from '@apollo/client';
import { MockedProvider } from '@apollo/client/testing';
import { BrowserRouter } from 'react-router-dom';
import '@testing-library/jest-dom/extend-expect';

import TestManagement from '../components/TestManagement';

// eslint-disable-next-line jest/no-mocks-import
import { TEST_MANAGEMENT_PAGE_POPULATED } from './__mocks__/GraphQLMocks';

const setup = (mocks = []) => {
return render(
<BrowserRouter>
<MockedProvider
mocks={mocks}
cache={new InMemoryCache({ addTypename: false })}
>
<TestManagement />
</MockedProvider>
</BrowserRouter>
);
};

describe('Test Management page', () => {
let wrapper;

beforeEach(() => {
wrapper = setup(TEST_MANAGEMENT_PAGE_POPULATED);
});

it('renders loading state on initialization', async () => {
const { getByTestId } = wrapper;
const element = getByTestId('page-status');

expect(element).toBeTruthy();
expect(element).toHaveTextContent('Loading');
});

it('renders Status Summary component', async () => {
// allow page time to load
await waitFor(() => new Promise(res => setTimeout(res, 0)));

const { queryAllByText } = wrapper;
const statusSummaryElement = queryAllByText(/Status Summary/i);
const testPlansElement = queryAllByText(/Test Plans/i);
const phaseElement = queryAllByText(/Phase/i);
const candidateElements = queryAllByText(/Candidate/i);
const notTestedElements = queryAllByText(/Not tested/i);

expect(statusSummaryElement.length).toBeGreaterThanOrEqual(1);
expect(testPlansElement.length).toBeGreaterThanOrEqual(1);
expect(phaseElement.length).toBeGreaterThanOrEqual(1);
expect(candidateElements.length).toBeGreaterThanOrEqual(1);
expect(notTestedElements.length).toBeGreaterThanOrEqual(1);
});
});
Loading

0 comments on commit b848b10

Please sign in to comment.