Skip to content

Commit 897c6ea

Browse files
fhlavacfhlavac
committed
fix(empty): Test table empty states
1 parent c79ec2a commit 897c6ea

File tree

8 files changed

+232
-12
lines changed

8 files changed

+232
-12
lines changed

‎cypress.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export default defineConfig({
1313
},
1414

1515
component: {
16+
viewportHeight: 1024,
17+
viewportWidth: 1400,
1618
devServer: {
1719
framework: "react",
1820
bundler: "webpack",

‎cypress/component/DataViewTableBasic.cy.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,21 @@ describe('DataViewTableBasic', () => {
4343
cy.get('[data-ouia-component-id="data-td-4-3"]').contains('Workspace five');
4444
cy.get('[data-ouia-component-id="data-td-5-4"]').contains('Timestamp six');
4545
});
46+
47+
it('renders a basic data view table with an empty state', () => {
48+
const ouiaId = 'data';
49+
50+
cy.mount(
51+
<DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} emptyState="No data found" />
52+
);
53+
54+
cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
55+
cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
56+
cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
57+
cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
58+
cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
59+
60+
cy.get('[data-ouia-component-id="data-tr-empty"]').should('be.visible');
61+
cy.get('[data-ouia-component-id="data-tr-empty"]').contains('No data found');
62+
});
4663
});

‎cypress/component/DataViewTableTree.cy.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,4 +125,21 @@ describe('DataViewTableTree', () => {
125125

126126
cy.get('[data-ouia-component-id="tree-td-4-0"]').should('not.be.visible');
127127
});
128+
129+
it('renders a tree data view table with an empty state', () => {
130+
const ouiaId = 'tree';
131+
132+
cy.mount(
133+
<DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} emptyState="No data found" />
134+
);
135+
136+
cy.get('[data-ouia-component-id="tree-th-0"]').contains('Repositories');
137+
cy.get('[data-ouia-component-id="tree-th-1"]').contains('Branches');
138+
cy.get('[data-ouia-component-id="tree-th-2"]').contains('Pull requests');
139+
cy.get('[data-ouia-component-id="tree-th-3"]').contains('Workspaces');
140+
cy.get('[data-ouia-component-id="tree-th-4"]').contains('Last commit');
141+
142+
cy.get('[data-ouia-component-id="tree-tr-empty"]').should('be.visible');
143+
cy.get('[data-ouia-component-id="tree-tr-empty"]').contains('No data found');
144+
});
128145
});

‎packages/module/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
395395
aria-posinset="1"
396396
aria-setsize="2"
397397
class="pf-v5-c-table__tr"
398-
data-ouia-component-id="OUIA-Generated-TableRow-9"
398+
data-ouia-component-id="TableExample-tr-0"
399399
data-ouia-component-type="PF5/TableRow"
400400
data-ouia-safe="true"
401401
>
@@ -519,7 +519,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
519519
aria-posinset="1"
520520
aria-setsize="0"
521521
class="pf-v5-c-table__tr"
522-
data-ouia-component-id="OUIA-Generated-TableRow-10"
522+
data-ouia-component-id="TableExample-tr-1"
523523
data-ouia-component-type="PF5/TableRow"
524524
data-ouia-safe="true"
525525
hidden=""
@@ -611,7 +611,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
611611
aria-posinset="2"
612612
aria-setsize="0"
613613
class="pf-v5-c-table__tr"
614-
data-ouia-component-id="OUIA-Generated-TableRow-11"
614+
data-ouia-component-id="TableExample-tr-2"
615615
data-ouia-component-type="PF5/TableRow"
616616
data-ouia-safe="true"
617617
hidden=""
@@ -703,7 +703,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
703703
aria-posinset="2"
704704
aria-setsize="1"
705705
class="pf-v5-c-table__tr"
706-
data-ouia-component-id="OUIA-Generated-TableRow-12"
706+
data-ouia-component-id="TableExample-tr-3"
707707
data-ouia-component-type="PF5/TableRow"
708708
data-ouia-safe="true"
709709
>
@@ -827,7 +827,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
827827
aria-posinset="1"
828828
aria-setsize="0"
829829
class="pf-v5-c-table__tr"
830-
data-ouia-component-id="OUIA-Generated-TableRow-13"
830+
data-ouia-component-id="TableExample-tr-4"
831831
data-ouia-component-type="PF5/TableRow"
832832
data-ouia-safe="true"
833833
hidden=""
@@ -919,7 +919,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
919919
aria-posinset="3"
920920
aria-setsize="0"
921921
class="pf-v5-c-table__tr"
922-
data-ouia-component-id="OUIA-Generated-TableRow-14"
922+
data-ouia-component-id="TableExample-tr-5"
923923
data-ouia-component-type="PF5/TableRow"
924924
data-ouia-safe="true"
925925
>

‎packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,11 @@ describe('DataViewTable component', () => {
3434
);
3535
expect(container).toMatchSnapshot();
3636
});
37+
38+
test('should render with an empty state', () => {
39+
const { container } = render(
40+
<DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
41+
);
42+
expect(container).toMatchSnapshot();
43+
});
3744
});

‎packages/module/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,3 +322,88 @@ exports[`DataViewTable component should render correctly 1`] = `
322322
</table>
323323
</div>
324324
`;
325+
326+
exports[`DataViewTable component should render with an empty state 1`] = `
327+
<div>
328+
<table
329+
aria-label="Repositories table"
330+
class="pf-v5-c-table pf-m-grid-md"
331+
data-ouia-component-id="TableExample"
332+
data-ouia-component-type="PF5/Table"
333+
data-ouia-safe="true"
334+
role="grid"
335+
>
336+
<thead
337+
class="pf-v5-c-table__thead"
338+
data-ouia-component-id="TableExample-thead"
339+
>
340+
<tr
341+
class="pf-v5-c-table__tr"
342+
data-ouia-component-id="TableExample-tr-head"
343+
data-ouia-component-type="PF5/TableRow"
344+
data-ouia-safe="true"
345+
>
346+
<th
347+
class="pf-v5-c-table__th"
348+
data-ouia-component-id="TableExample-th-0"
349+
scope="col"
350+
tabindex="-1"
351+
>
352+
Repositories
353+
</th>
354+
<th
355+
class="pf-v5-c-table__th"
356+
data-ouia-component-id="TableExample-th-1"
357+
scope="col"
358+
tabindex="-1"
359+
>
360+
Branches
361+
</th>
362+
<th
363+
class="pf-v5-c-table__th"
364+
data-ouia-component-id="TableExample-th-2"
365+
scope="col"
366+
tabindex="-1"
367+
>
368+
Pull requests
369+
</th>
370+
<th
371+
class="pf-v5-c-table__th"
372+
data-ouia-component-id="TableExample-th-3"
373+
scope="col"
374+
tabindex="-1"
375+
>
376+
Workspaces
377+
</th>
378+
<th
379+
class="pf-v5-c-table__th"
380+
data-ouia-component-id="TableExample-th-4"
381+
scope="col"
382+
tabindex="-1"
383+
>
384+
Last commit
385+
</th>
386+
</tr>
387+
</thead>
388+
<tbody
389+
class="pf-v5-c-table__tbody"
390+
role="rowgroup"
391+
>
392+
<tr
393+
class="pf-v5-c-table__tr"
394+
data-ouia-component-id="TableExample-tr-empty"
395+
data-ouia-component-type="PF5/TableRow"
396+
data-ouia-safe="true"
397+
>
398+
<td
399+
class="pf-v5-c-table__td"
400+
colspan="5"
401+
tabindex="-1"
402+
>
403+
No data found
404+
</td>
405+
</tr>
406+
</tbody>
407+
</table>
408+
</div>
409+
`;

‎packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,11 @@ describe('DataViewTableTree component', () => {
8282
);
8383
expect(container).toMatchSnapshot();
8484
});
85+
86+
test('should render tree table with an empty state', () => {
87+
const { container } = render(
88+
<DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
89+
);
90+
expect(container).toMatchSnapshot();
91+
});
8592
});

‎packages/module/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap‎

Lines changed: 91 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
8080
aria-posinset="1"
8181
aria-setsize="2"
8282
class="pf-v5-c-table__tr"
83-
data-ouia-component-id="OUIA-Generated-TableRow-2"
83+
data-ouia-component-id="TreeTableExample-tr-0"
8484
data-ouia-component-type="PF5/TableRow"
8585
data-ouia-safe="true"
8686
>
@@ -244,7 +244,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
244244
aria-posinset="1"
245245
aria-setsize="0"
246246
class="pf-v5-c-table__tr"
247-
data-ouia-component-id="OUIA-Generated-TableRow-3"
247+
data-ouia-component-id="TreeTableExample-tr-1"
248248
data-ouia-component-type="PF5/TableRow"
249249
data-ouia-safe="true"
250250
hidden=""
@@ -376,7 +376,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
376376
aria-posinset="2"
377377
aria-setsize="0"
378378
class="pf-v5-c-table__tr"
379-
data-ouia-component-id="OUIA-Generated-TableRow-4"
379+
data-ouia-component-id="TreeTableExample-tr-2"
380380
data-ouia-component-type="PF5/TableRow"
381381
data-ouia-safe="true"
382382
hidden=""
@@ -508,7 +508,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
508508
aria-posinset="2"
509509
aria-setsize="1"
510510
class="pf-v5-c-table__tr"
511-
data-ouia-component-id="OUIA-Generated-TableRow-5"
511+
data-ouia-component-id="TreeTableExample-tr-3"
512512
data-ouia-component-type="PF5/TableRow"
513513
data-ouia-safe="true"
514514
>
@@ -672,7 +672,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
672672
aria-posinset="1"
673673
aria-setsize="0"
674674
class="pf-v5-c-table__tr"
675-
data-ouia-component-id="OUIA-Generated-TableRow-6"
675+
data-ouia-component-id="TreeTableExample-tr-4"
676676
data-ouia-component-type="PF5/TableRow"
677677
data-ouia-safe="true"
678678
hidden=""
@@ -804,7 +804,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
804804
aria-posinset="3"
805805
aria-setsize="0"
806806
class="pf-v5-c-table__tr"
807-
data-ouia-component-id="OUIA-Generated-TableRow-7"
807+
data-ouia-component-id="TreeTableExample-tr-5"
808808
data-ouia-component-type="PF5/TableRow"
809809
data-ouia-safe="true"
810810
>
@@ -935,3 +935,88 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
935935
</div>
936936
</div>
937937
`;
938+
939+
exports[`DataViewTableTree component should render tree table with an empty state 1`] = `
940+
<div>
941+
<table
942+
aria-label="Repositories table"
943+
class="pf-v5-c-table pf-m-tree-view-grid-md pf-m-tree-view"
944+
data-ouia-component-id="TreeTableExample"
945+
data-ouia-component-type="PF5/Table"
946+
data-ouia-safe="true"
947+
role="treegrid"
948+
>
949+
<thead
950+
class="pf-v5-c-table__thead"
951+
data-ouia-component-id="TreeTableExample-thead"
952+
>
953+
<tr
954+
class="pf-v5-c-table__tr"
955+
data-ouia-component-id="TreeTableExample-tr-head"
956+
data-ouia-component-type="PF5/TableRow"
957+
data-ouia-safe="true"
958+
>
959+
<th
960+
class="pf-v5-c-table__th"
961+
data-ouia-component-id="TreeTableExample-th-0"
962+
scope="col"
963+
tabindex="-1"
964+
>
965+
Repositories
966+
</th>
967+
<th
968+
class="pf-v5-c-table__th"
969+
data-ouia-component-id="TreeTableExample-th-1"
970+
scope="col"
971+
tabindex="-1"
972+
>
973+
Branches
974+
</th>
975+
<th
976+
class="pf-v5-c-table__th"
977+
data-ouia-component-id="TreeTableExample-th-2"
978+
scope="col"
979+
tabindex="-1"
980+
>
981+
Pull requests
982+
</th>
983+
<th
984+
class="pf-v5-c-table__th"
985+
data-ouia-component-id="TreeTableExample-th-3"
986+
scope="col"
987+
tabindex="-1"
988+
>
989+
Workspaces
990+
</th>
991+
<th
992+
class="pf-v5-c-table__th"
993+
data-ouia-component-id="TreeTableExample-th-4"
994+
scope="col"
995+
tabindex="-1"
996+
>
997+
Last commit
998+
</th>
999+
</tr>
1000+
</thead>
1001+
<tbody
1002+
class="pf-v5-c-table__tbody"
1003+
role="rowgroup"
1004+
>
1005+
<tr
1006+
class="pf-v5-c-table__tr"
1007+
data-ouia-component-id="TreeTableExample-tr-empty"
1008+
data-ouia-component-type="PF5/TableRow"
1009+
data-ouia-safe="true"
1010+
>
1011+
<td
1012+
class="pf-v5-c-table__td"
1013+
colspan="5"
1014+
tabindex="-1"
1015+
>
1016+
No data found
1017+
</td>
1018+
</tr>
1019+
</tbody>
1020+
</table>
1021+
</div>
1022+
`;

0 commit comments

Comments
 (0)