particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ImagesTable: Update ClonesTable

Browse source 
This updates ClonesTable according to the new mocks.
This commit is contained in:
regexowl 2023-04-25 12:25:39 +02:00 • committed by Lucas Garfield
parent 2e30d93ea1
commit 2f55648310
2 changed files with 49 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/Components/ImagesTable/ClonesTable.js
View file

@ -1,5 +1,6 @@
import React from 'react';
import { ClipboardCopy } from '@patternfly/react-core';
import {
TableComposable,
Tbody,
@ -13,7 +14,6 @@ import { useSelector } from 'react-redux';
import { ImageBuildStatus } from './ImageBuildStatus';
import { useGetAWSSourcesQuery } from '../../store/apiSlice';
import {
selectClonesById,
selectComposeById,
@ -22,26 +22,21 @@ import {
const Row = ({ imageId }) => {
const image = useSelector((state) => selectImageById(state, imageId));
const { data: awsSources, isSuccess } = useGetAWSSourcesQuery();
const getAccount = (image) => {
if (image.share_with_sources?.[0]) {
if (isSuccess) {
const accountId = awsSources.find(
(source) => source.id === image.share_with_sources[0]
)?.account_id;
return accountId;
}
return null;
}
return image.share_with_accounts?.[0];
};
return (
<Tbody>
<Tr>
<Td dataLabel="UUID">{image.id}</Td>
<Td dataLabel="Account">{getAccount(image)}</Td>
<Tr className="no-bottom-border">
<Td dataLabel="AMI">
{image.status === 'success' && (
<ClipboardCopy
hoverTip="Copy"
clickTip="Copied"
variant="inline-compact"
>
{image.ami}
</ClipboardCopy>
)}
</Td>
<Td dataLabel="Region">{image.region}</Td>
<Td dataLabel="Status">
<ImageBuildStatus imageId={image.id} imageRegion={image.region} />
@ -60,13 +55,12 @@ const ClonesTable = ({ composeId }) => {
return (
<TableComposable
variant="compact"
className="pf-u-mb-md"
className="pf-u-mb-md pf-u-mt-md"
data-testid="clones-table"
>
<Thead>
<Tr className="no-bottom-border">
<Th className="pf-m-width-40">UUID</Th>
<Th className="pf-m-width-20">Account</Th>
<Th className="pf-m-width-60">AMI</Th>
<Th className="pf-m-width-20">Region</Th>
<Th className="pf-m-width-20">Status</Th>
</Tr>

78
src/test/Components/ImagesTable/ImagesTable.test.js
View file

@ -198,17 +198,11 @@ describe('Images Table', () => {
name: /details/i,
});
expect(
screen.getAllByText(/1579d95b-8f1d-4982-8c53-8c2afa4ab04c/i)[1]
).not.toBeVisible();
expect(screen.getByText(/ami-0e778053cd490ad21/i)).not.toBeVisible();
await user.click(toggleButton);
expect(
screen.getAllByText(/1579d95b-8f1d-4982-8c53-8c2afa4ab04c/i)[1]
).toBeVisible();
expect(screen.getByText(/ami-0e778053cd490ad21/i)).toBeVisible();
await user.click(toggleButton);
expect(
screen.getAllByText(/1579d95b-8f1d-4982-8c53-8c2afa4ab04c/i)[1]
).not.toBeVisible();
expect(screen.getByText(/ami-0e778053cd490ad21/i)).not.toBeVisible();
});
test('check error details', async () => {
@ -245,7 +239,7 @@ describe('Images Table Toolbar', () => {
describe('Clones table', () => {
test('renders clones table', async () => {
const view = renderWithReduxRouter('', {});
renderWithReduxRouter('', {});
const table = await screen.findByTestId('images-table');
@ -253,8 +247,6 @@ describe('Clones table', () => {
const emptyState = screen.queryByTestId('empty-state');
expect(emptyState).not.toBeInTheDocument();
const state = view.store.getState();
// get rows
const { getAllByRole } = within(table);
const rows = getAllByRole('row');
@ -272,29 +264,24 @@ describe('Clones table', () => {
// remove first row from list since it is just header labels
const header = cloneRows.shift();
// test the header has correct labels
expect(header.cells[0]).toHaveTextContent('UUID');
expect(header.cells[1]).toHaveTextContent('Account');
expect(header.cells[2]).toHaveTextContent('Region');
expect(header.cells[3]).toHaveTextContent('Status');
expect(header.cells[0]).toHaveTextContent('AMI');
expect(header.cells[1]).toHaveTextContent('Region');
expect(header.cells[2]).toHaveTextContent('Status');
expect(cloneRows).toHaveLength(5);
// shift by a parent compose as the row has a different format
cloneRows.shift();
expect(cloneRows).toHaveLength(4);
// prepend parent data
const clonesTableData = {
uuid: [
'1579d95b-8f1d-4982-8c53-8c2afa4ab04c',
...mockClones.data.map((clone) => clone.id),
],
created: [
'2021-04-27 12:31:12.794809 +0000 UTC',
...mockClones.data.map((clone) => clone.created_at),
],
account: [
'123123123123',
...mockClones.data.map((clone) => clone.request.share_with_accounts[0]),
ami: [
...mockClones.data.map(
(clone) => mockCloneStatus[clone.id].options.ami
),
],
created: [...mockClones.data.map((clone) => clone.created_at)],
region: [
'us-east-1',
...mockClones.data.map(
(clone) => mockCloneStatus[clone.id].options.region
),
@ -302,25 +289,28 @@ describe('Clones table', () => {
};
for (const [index, row] of cloneRows.entries()) {
// render UUIDs in correct order
expect(row.cells[0]).toHaveTextContent(clonesTableData.uuid[index]);
// account cell
expect(row.cells[1]).toHaveTextContent(clonesTableData.account[index]);
// render AMIs in correct order
switch (index) {
case (0, 1, 3):
expect(row.cells[0]).toHaveTextContent(clonesTableData.ami[index]);
break;
case 2:
expect(row.cells[0]).toHaveTextContent('');
break;
}
// region cell
expect(row.cells[2]).toHaveTextContent(clonesTableData.region[index]);
const testElement = document.createElement('testElement');
const imageId = clonesTableData.uuid[index];
expect(row.cells[1]).toHaveTextContent(clonesTableData.region[index]);
// status cell
renderWithProvider(
<ImageBuildStatus imageId={imageId} />,
testElement,
state
);
expect(row.cells[3]).toHaveTextContent(testElement.textContent);
switch (index) {
case (0, 1, 3):
expect(row.cells[2]).toHaveTextContent('Ready');
break;
case 2:
expect(row.cells[2]).toHaveTextContent('Image build failed');
break;
}
}
});
});