feat(loading): Fix the cypress tests

Author: fhlavac

cypress/component/DataViewTableBasic.cy.tsx

@@ -50,7 +50,7 @@ describe('DataViewTableBasic', () => {
 
     cy.mount(
       <DataView activeState="empty">
-        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} states={{ empty: "No data found" }} />
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ empty: <div data-ouia-component-id="data-tr-empty">No data found</div> }} />
       </DataView>
     );
 
@@ -69,7 +69,7 @@ describe('DataViewTableBasic', () => {
 
     cy.mount(
       <DataView activeState="error">
-        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ error: "Some error" }} />
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ error: <div data-ouia-component-id="data-tr-error">Some error</div> }} />
       </DataView>
     );
 
@@ -88,7 +88,7 @@ describe('DataViewTableBasic', () => {
 
     cy.mount(
       <DataView activeState="loading">
-        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ loading: "Data is loading" }} />
+        <DataViewTableBasic aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ loading: <div data-ouia-component-id="data-tr-loading">Data is loading</div> }} />
       </DataView>
     );
 

cypress/component/DataViewTableTree.cy.tsx

@@ -132,7 +132,7 @@ describe('DataViewTableTree', () => {
 
     cy.mount(
       <DataView activeState="empty">
-        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ empty: "No data found" }} />
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ empty: <div data-ouia-component-id="tree-tr-empty">No data found</div> }} />
       </DataView>
     );
 
@@ -151,7 +151,7 @@ describe('DataViewTableTree', () => {
 
     cy.mount(
       <DataView activeState="error">
-        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ error: "Some error" }} />
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ error: <div data-ouia-component-id="tree-tr-error">Some error</div> }} />
       </DataView>
     );
 
@@ -161,16 +161,16 @@ describe('DataViewTableTree', () => {
     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-error"]').should('be.visible');
-    cy.get('[data-ouia-component-id="data-tr-error"]').contains('Some error');
+    cy.get('[data-ouia-component-id="tree-tr-error"]').should('be.visible');
+    cy.get('[data-ouia-component-id="tree-tr-error"]').contains('Some error');
   });
 
   it('renders a tree data view table with a loading state', () => {
     const ouiaId = 'tree';
 
     cy.mount(
       <DataView activeState="loading">
-        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ loading: "Data is loading" }} />
+        <DataViewTable isTreeTable aria-label='Repositories table' ouiaId={ouiaId} columns={columns} rows={[]} bodyStates={{ loading: <div data-ouia-component-id="tree-tr-loading">Data is loading</div> }} />
       </DataView>
     );
 

cypress/e2e/DataView.spec.cy.ts

@@ -5,8 +5,8 @@ describe('Test the Data view docs page', () => {
 
     cy.visit('http://localhost:8006/extensions/data-view/layout');
 
-    cy.get(`[data-ouia-component-id="${ouiaId}Heade-pagination"]`).should('exist');
-    cy.get(`[data-ouia-component-id="${ouiaId}Heade-bulk-select"]`).should('exist');
+    cy.get(`[data-ouia-component-id="${ouiaId}Header-pagination"]`).should('exist');
+    cy.get(`[data-ouia-component-id="${ouiaId}Header-bulk-select"]`).should('exist');
 
     cy.get(`[data-ouia-component-id="${ouiaId}Footer-pagination"]`).should('exist');
     cy.get(`[data-ouia-component-id="${ouiaId}Footer-bulk-select"]`).should('not.exist');