fix(empty): Test table empty states

patternfly · Sep 19, 2024 · 897c6ea · 897c6ea
1 parent c79ec2a
commit 897c6ea
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 12 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -13,6 +13,8 @@ export default defineConfig({
   },
 
   component: {
+    viewportHeight: 1024,
+    viewportWidth: 1400,
     devServer: {
       framework: "react",
       bundler: "webpack",

diff --git a/cypress/component/DataViewTableBasic.cy.tsx b/cypress/component/DataViewTableBasic.cy.tsx
@@ -43,4 +43,21 @@ describe('DataViewTableBasic', () => {
     cy.get('[data-ouia-component-id="data-td-4-3"]').contains('Workspace five');
     cy.get('[data-ouia-component-id="data-td-5-4"]').contains('Timestamp six');
   });
+
+  it('renders a basic data view table with an empty state', () => {
+    const ouiaId = 'data';
+
+    cy.mount(
+      <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} emptyState="No data found" />
+    );
+
+    cy.get('[data-ouia-component-id="data-th-0"]').contains('Repositories');
+    cy.get('[data-ouia-component-id="data-th-1"]').contains('Branches');
+    cy.get('[data-ouia-component-id="data-th-2"]').contains('Pull requests');
+    cy.get('[data-ouia-component-id="data-th-3"]').contains('Workspaces');
+    cy.get('[data-ouia-component-id="data-th-4"]').contains('Last commit');
+
+    cy.get('[data-ouia-component-id="data-tr-empty"]').should('be.visible');
+    cy.get('[data-ouia-component-id="data-tr-empty"]').contains('No data found');
+  });
 });
diff --git a/cypress/component/DataViewTableTree.cy.tsx b/cypress/component/DataViewTableTree.cy.tsx
@@ -125,4 +125,21 @@ describe('DataViewTableTree', () => {
 
     cy.get('[data-ouia-component-id="tree-td-4-0"]').should('not.be.visible');
   });
+
+  it('renders a tree data view table with an empty state', () => {
+    const ouiaId = 'tree';
+
+    cy.mount(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} emptyState="No data found" />
+    );
+
+    cy.get('[data-ouia-component-id="tree-th-0"]').contains('Repositories');
+    cy.get('[data-ouia-component-id="tree-th-1"]').contains('Branches');
+    cy.get('[data-ouia-component-id="tree-th-2"]').contains('Pull requests');
+    cy.get('[data-ouia-component-id="tree-th-3"]').contains('Workspaces');
+    cy.get('[data-ouia-component-id="tree-th-4"]').contains('Last commit');
+
+    cy.get('[data-ouia-component-id="tree-tr-empty"]').should('be.visible');
+    cy.get('[data-ouia-component-id="tree-tr-empty"]').contains('No data found');
+  });
 });
diff --git a/packages/module/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap b/packages/module/src/DataViewTable/__snapshots__/DataViewTable.test.tsx.snap
@@ -395,7 +395,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="2"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-9"
+        data-ouia-component-id="TableExample-tr-0"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -519,7 +519,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-10"
+        data-ouia-component-id="TableExample-tr-1"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -611,7 +611,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-11"
+        data-ouia-component-id="TableExample-tr-2"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -703,7 +703,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="2"
         aria-setsize="1"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-12"
+        data-ouia-component-id="TableExample-tr-3"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >
@@ -827,7 +827,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="1"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-13"
+        data-ouia-component-id="TableExample-tr-4"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
         hidden=""
@@ -919,7 +919,7 @@ exports[`DataViewTable component should render a tree table correctly 1`] = `
         aria-posinset="3"
         aria-setsize="0"
         class="pf-v5-c-table__tr"
-        data-ouia-component-id="OUIA-Generated-TableRow-14"
+        data-ouia-component-id="TableExample-tr-5"
         data-ouia-component-type="PF5/TableRow"
         data-ouia-safe="true"
       >

diff --git a/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx b/packages/module/src/DataViewTableBasic/DataViewTableBasic.test.tsx
@@ -34,4 +34,11 @@ describe('DataViewTable component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render with an empty state', () => {
+    const { container } = render(
+      <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/module/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap b/packages/module/src/DataViewTableBasic/__snapshots__/DataViewTableBasic.test.tsx.snap
@@ -322,3 +322,88 @@ exports[`DataViewTable component should render correctly 1`] = `
   </table>
 </div>
 `;
+
+exports[`DataViewTable component should render with an empty state 1`] = `
+<div>
+  <table
+    aria-label="Repositories table"
+    class="pf-v5-c-table pf-m-grid-md"
+    data-ouia-component-id="TableExample"
+    data-ouia-component-type="PF5/Table"
+    data-ouia-safe="true"
+    role="grid"
+  >
+    <thead
+      class="pf-v5-c-table__thead"
+      data-ouia-component-id="TableExample-thead"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-head"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          Repositories
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-1"
+          scope="col"
+          tabindex="-1"
+        >
+          Branches
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-2"
+          scope="col"
+          tabindex="-1"
+        >
+          Pull requests
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-3"
+          scope="col"
+          tabindex="-1"
+        >
+          Workspaces
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TableExample-th-4"
+          scope="col"
+          tabindex="-1"
+        >
+          Last commit
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="pf-v5-c-table__tbody"
+      role="rowgroup"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TableExample-tr-empty"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          colspan="5"
+          tabindex="-1"
+        >
+          No data found
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
diff --git a/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx b/packages/module/src/DataViewTableTree/DataViewTableTree.test.tsx
@@ -82,4 +82,11 @@ describe('DataViewTableTree component', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  test('should render tree table with an empty state', () => {
+    const { container } = render(
+      <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} emptyState="No data found" rows={[]} />
+    );
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/module/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap b/packages/module/src/DataViewTableTree/__snapshots__/DataViewTableTree.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="1"
             aria-setsize="2"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-2"
+            data-ouia-component-id="TreeTableExample-tr-0"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
@@ -244,7 +244,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="1"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-3"
+            data-ouia-component-id="TreeTableExample-tr-1"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
             hidden=""
@@ -376,7 +376,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="2"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-4"
+            data-ouia-component-id="TreeTableExample-tr-2"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
             hidden=""
@@ -508,7 +508,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="2"
             aria-setsize="1"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-5"
+            data-ouia-component-id="TreeTableExample-tr-3"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
@@ -672,7 +672,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="1"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-6"
+            data-ouia-component-id="TreeTableExample-tr-4"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
             hidden=""
@@ -804,7 +804,7 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
             aria-posinset="3"
             aria-setsize="0"
             class="pf-v5-c-table__tr"
-            data-ouia-component-id="OUIA-Generated-TableRow-7"
+            data-ouia-component-id="TreeTableExample-tr-5"
             data-ouia-component-type="PF5/TableRow"
             data-ouia-safe="true"
           >
@@ -935,3 +935,88 @@ exports[`DataViewTableTree component should render the tree table correctly 1`]
   </div>
 </div>
 `;
+
+exports[`DataViewTableTree component should render tree table with an empty state 1`] = `
+<div>
+  <table
+    aria-label="Repositories table"
+    class="pf-v5-c-table pf-m-tree-view-grid-md pf-m-tree-view"
+    data-ouia-component-id="TreeTableExample"
+    data-ouia-component-type="PF5/Table"
+    data-ouia-safe="true"
+    role="treegrid"
+  >
+    <thead
+      class="pf-v5-c-table__thead"
+      data-ouia-component-id="TreeTableExample-thead"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TreeTableExample-tr-head"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-0"
+          scope="col"
+          tabindex="-1"
+        >
+          Repositories
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-1"
+          scope="col"
+          tabindex="-1"
+        >
+          Branches
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-2"
+          scope="col"
+          tabindex="-1"
+        >
+          Pull requests
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-3"
+          scope="col"
+          tabindex="-1"
+        >
+          Workspaces
+        </th>
+        <th
+          class="pf-v5-c-table__th"
+          data-ouia-component-id="TreeTableExample-th-4"
+          scope="col"
+          tabindex="-1"
+        >
+          Last commit
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class="pf-v5-c-table__tbody"
+      role="rowgroup"
+    >
+      <tr
+        class="pf-v5-c-table__tr"
+        data-ouia-component-id="TreeTableExample-tr-empty"
+        data-ouia-component-type="PF5/TableRow"
+        data-ouia-safe="true"
+      >
+        <td
+          class="pf-v5-c-table__td"
+          colspan="5"
+          tabindex="-1"
+        >
+          No data found
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;