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

Fix missing rows test management #622

Merged
merged 5 commits into from
Jun 7, 2023
Merged

Fix missing rows test management #622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
06abba8
fix for adding missing rows
evmiguel May 2, 2023
248118f
initial test
evmiguel May 2, 2023
1005e18
test management test
evmiguel May 3, 2023
ed7e428
fixing graphql test
evmiguel May 3, 2023
568279f
Set vertical alignment of content in table cells
howard-e Jun 1, 2023
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
119 changes: 65 additions & 54 deletions client/components/TestManagement/StatusSummaryRow/index.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

REVIEWERS: even if we do not go with a separate Test Plan table, this is the query I would like to use.

directory
id
title
latestTestPlanVersion {
id
title
}
}
testPlanVersions {
id
title
Expand Down
62 changes: 62 additions & 0 deletions client/tests/TestManagement.test.jsx
View file
Open in desktop
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