Skip to content

Commit 484d5bd

Browse files
fhlavacfhlavac
committed
Test table rendering via Cypress
1 parent 0697b94 commit 484d5bd

File tree

2 files changed

+84
-6
lines changed

2 files changed

+84
-6
lines changed

‎cypress/component/DataView.cy.tsx‎

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,86 @@
11
import React from 'react';
22
import { Pagination } from '@patternfly/react-core';
3+
import { Table, Tbody, Th, Thead, Tr, Td } from '@patternfly/react-table';
34
import DataView from '../../packages/module/dist/dynamic/DataView';
45
import DataViewToolbar from '../../packages/module/dist/esm/DataViewToolbar';
56

7+
interface Repository {
8+
name: string;
9+
branches: string | null;
10+
prs: string | null;
11+
workspaces: string;
12+
lastCommit: string;
13+
}
14+
615
const PAGINATION = {
716
page: 1,
8-
perPage: 1
17+
perPage: 10
918
}
1019

20+
const repositories: Repository[] = [
21+
{ name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' },
22+
{ name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' },
23+
{ name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' },
24+
{ name: 'one - 4', branches: 'two - 4', prs: 'null', workspaces: 'four - 4', lastCommit: 'five - 4' },
25+
{ name: 'one - 5', branches: 'two - 5', prs: 'three - 5', workspaces: 'four - 5', lastCommit: 'five - 5' },
26+
{ name: 'one - 6', branches: 'two - 6', prs: 'three - 6', workspaces: 'four - 6', lastCommit: 'five - 6' }
27+
];
28+
29+
const cols: Record<keyof Repository, string> = {
30+
name: 'Repositories',
31+
branches: 'Branches',
32+
prs: 'Pull requests',
33+
workspaces: 'Workspaces',
34+
lastCommit: 'Last commit'
35+
};
36+
1137
describe('DataView', () => {
1238
it('renders the data view layout', () => {
1339
cy.mount(<DataView><>Data view content</></DataView>)
1440
cy.get('[data-ouia-component-id="DataView-stack-item-0"]').contains('Data view content');
1541
});
1642

17-
it('renders the data view with toolbar, data section and footer', () => {
43+
it('renders the data view with toolbar, tabular data section and footer', () => {
44+
const ouiaId = 'data';
45+
1846
cy.mount(
1947
<DataView>
2048
<DataViewToolbar pagination={<Pagination {...PAGINATION} ouiaId="DataViewToolbar-pagination" />} />
21-
<>Data section</>
49+
<Table aria-label="Repositories table" ouiaId={ouiaId}>
50+
<Thead data-ouia-component-id={`${ouiaId}-thead`}>
51+
<Tr ouiaId={`${ouiaId}-tr-head`}>
52+
{Object.values(cols).map((column, index) => <Th key={index} data-ouia-component-id={`${ouiaId}-th-${index}`}>{column}</Th>)}
53+
</Tr>
54+
</Thead>
55+
<Tbody>
56+
{repositories.map((repo, rowIndex) => (
57+
<Tr key={repo.name}>
58+
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-name`} dataLabel={cols.name}>{repo.name}</Td>
59+
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-branches`} dataLabel={cols.branches}>{repo.branches}</Td>
60+
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-prs`} dataLabel={cols.prs}>{repo.prs}</Td>
61+
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-workspaces`} dataLabel={cols.workspaces}>{repo.workspaces}</Td>
62+
<Td data-ouia-component-id={`${ouiaId}-td-${rowIndex}-last-commit`} dataLabel={cols.lastCommit}>{repo.lastCommit}</Td>
63+
</Tr>
64+
))}
65+
</Tbody>
66+
</Table>
2267
<DataViewToolbar pagination={<Pagination isCompact {...PAGINATION} ouiaId="DataViewFooter-pagination" />} ouiaId="DataViewFooter" />
2368
</DataView>
2469
);
2570
cy.get('[data-ouia-component-id="DataViewToolbar-pagination"]').should('exist');
26-
cy.get('[data-ouia-component-id="DataView-stack-item-1"]').contains('Data section');
71+
72+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
73+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
74+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
75+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
76+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
77+
78+
cy.get('[data-ouia-component-id="data-td-0-name"]').contains('one');
79+
cy.get('[data-ouia-component-id="data-td-2-branches"]').contains('two - 3');
80+
cy.get('[data-ouia-component-id="data-td-3-prs"]').contains('null');
81+
cy.get('[data-ouia-component-id="data-td-4-workspaces"]').contains('four - 5');
82+
cy.get('[data-ouia-component-id="data-td-5-last-commit"]').contains('five - 6');
83+
2784
cy.get('[data-ouia-component-id="DataViewFooter-pagination"]').should('exist');
2885
});
2986
});

‎cypress/e2e/DataView.spec.cy.ts‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,27 @@
11
describe('Test the Data view docs page', () => {
22

3-
it.skip('renders the docs', () => {
4-
cy.visit('http://localhost:8006/extensions/data-view/data-view');
3+
it('displays a layout with a table and paginates', () => {
4+
const ouiaId = 'LayoutExample';
5+
6+
cy.visit('http://localhost:8006/extensions/data-view/data-view-layout');
7+
8+
cy.get(`[data-ouia-component-id="${ouiaId}Header-pagination"]`).should('exist');
9+
10+
cy.get(`[data-ouia-component-id="${ouiaId}Footer-pagination"]`).should('exist');
11+
12+
cy.get(`[data-ouia-component-id="${ouiaId}-th-0"]`).contains('Repositories');
13+
cy.get(`[data-ouia-component-id="${ouiaId}-th-4"]`).contains('Last commit');
14+
15+
cy.get(`[data-ouia-component-id="${ouiaId}-td-0-0"]`).contains('one');
16+
cy.get(`[data-ouia-component-id="${ouiaId}-td-4-4"]`).contains('five - 5');
17+
cy.get(`[data-ouia-component-id="${ouiaId}-td-5-4"]`).should('not.exist');
18+
19+
// move to the next page
20+
cy.get(`[data-action="next"`).first().click({ force: true });
21+
cy.get(`[data-ouia-component-id="${ouiaId}-td-0-4"]`).contains('five - 6');
22+
23+
// move to previous page
24+
cy.get(`[data-action="previous"`).eq(1).click({ force: true });
25+
cy.get(`[data-ouia-component-id="${ouiaId}-td-0-4"]`).contains('five');
526
})
627
})

0 commit comments

Comments
 (0)