feat(ws): Notebooks 2.0 // Frontend // Fetch workspaces

Signed-off-by: Yehudit Kerido <yehudit.kerido@nokia.com>

Author: Yehudit Kerido

workspaces/frontend/src/__tests__/cypress/cypress/support/commands/axe.ts

@@ -5,15 +5,10 @@ declare global {
   namespace Cypress {
     interface Chainable {
       testA11y: (context?: Parameters<cy['checkA11y']>[0]) => void;
-      getDataTest(dataTestSelector: string): Chainable<JQuery<HTMLElement>>;
     }
   }
 }
 
-Cypress.Commands.add('getDataTest', (dataTestSelector) => {
-  return cy.get(`[data-test="${dataTestSelector}"]`);
-});
-
 Cypress.Commands.add('testA11y', { prevSubject: 'optional' }, (subject, context) => {
   const test = (c: Parameters<typeof cy.checkA11y>[0]) => {
     cy.window({ log: false }).then((win) => {

workspaces/frontend/src/__tests__/cypress/cypress/tests/e2e/Workspaces.cy.ts

@@ -10,20 +10,20 @@ import { mockBFFResponse } from '~/__mocks__/utils';
 // Helper function to validate the content of a single workspace row in the table
 const validateWorkspaceRow = (workspace: any, index: number) => {
   // Validate the workspace name
-  cy.getDataTest(`workspace-row-${index}`)
-    .find('[data-test="workspace-name"]')
+  cy.findByTestId(`workspace-row-${index}`)
+    .find('[data-testid="workspace-name"]')
     .should('have.text', workspace.name);
 
   // Map workspace state to the expected label
   const expectedLabel = WorkspaceState[workspace.status.state];
 
   // Validate the state label and pod configuration
-  cy.getDataTest(`workspace-row-${index}`)
-    .find('[data-test="state-label"]')
+  cy.findByTestId(`workspace-row-${index}`)
+    .find('[data-testid="state-label"]')
     .should('have.text', expectedLabel);
 
-  cy.getDataTest(`workspace-row-${index}`)
-    .find('[data-test="pod-config"]')
+  cy.findByTestId(`workspace-row-${index}`)
+    .find('[data-testid="pod-config"]')
     .should('have.text', workspace.options.podConfig);
 };
 
@@ -38,7 +38,7 @@ describe('Workspaces tests', () => {
   });
 
   it('should display the correct number of workspaces', () => {
-    cy.getDataTest('workspaces-table')
+    cy.findByTestId('workspaces-table')
       .find('tbody tr')
       .should('have.length', mockWorkspaces.length);
   });
@@ -54,7 +54,7 @@ describe('Workspaces tests', () => {
     cy.intercept('GET', '/api/v1/workspaces', { statusCode: 200, body: { data: [] } });
     cy.visit('/');
 
-    cy.getDataTest('workspaces-table').find('tbody tr').should('not.exist');
+    cy.findByTestId('workspaces-table').find('tbody tr').should('not.exist');
   });
 });
 
@@ -81,7 +81,7 @@ describe('Workspace by namespace functionality', () => {
   it('should update workspaces when namespace changes', () => {
     // Verify initial state (default namespace)
     cy.wait('@getWorkspaces');
-    cy.getDataTest('workspaces-table')
+    cy.findByTestId('workspaces-table')
       .find('tbody tr')
       .should('have.length', mockWorkspaces.length);
 
@@ -95,7 +95,7 @@ describe('Workspace by namespace functionality', () => {
       .should('include', '/api/v1/workspaces/kubeflow');
 
     // Verify the length of workspaces list is updated
-    cy.getDataTest('workspaces-table')
+    cy.findByTestId('workspaces-table')
       .find('tbody tr')
       .should('have.length', mockWorkspacesByNS.length);
   });

workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx

@@ -357,7 +357,7 @@ export const Workspaces: React.FunctionComponent = () => {
       <Title headingLevel="h1">Kubeflow Workspaces</Title>
       <p>View your existing workspaces or create new workspaces.</p>
       {toolbar}
-      <Table data-test="workspaces-table" aria-label="Sortable table" ouiaId="SortableTable">
+      <Table data-testid="workspaces-table" aria-label="Sortable table" ouiaId="SortableTable">
         <Thead>
           <Tr>
             <Th sort={getSortParams(0)}>{columnNames.name}</Th>
@@ -379,17 +379,17 @@ export const Workspaces: React.FunctionComponent = () => {
         </Thead>
         <Tbody>
           {sortedWorkspaces.map((workspace, rowIndex) => (
-            <Tr key={rowIndex} data-test={`workspace-row-${rowIndex}`}>
-              <Td dataLabel={columnNames.name} data-test="workspace-name">
+            <Tr key={rowIndex} data-testid={`workspace-row-${rowIndex}`}>
+              <Td dataLabel={columnNames.name} data-testid="workspace-name">
                 {workspace.name}
               </Td>
               <Td dataLabel={columnNames.kind}>{workspace.kind}</Td>
               <Td dataLabel={columnNames.image}>{workspace.options.imageConfig}</Td>
-              <Td dataLabel={columnNames.podConfig} data-test="pod-config">
+              <Td dataLabel={columnNames.podConfig} data-testid="pod-config">
                 {workspace.options.podConfig}
               </Td>
               <Td dataLabel={columnNames.state}>
-                <Label color={stateColors[workspace.status.state]} data-test="state-label">
+                <Label color={stateColors[workspace.status.state]} data-testid="state-label">
                   {WorkspaceState[workspace.status.state]}
                 </Label>
               </Td>