Update ModelServingGlobal Cypress test to account for sorting and filtering

frontend/src/__tests__/cypress/cypress/e2e/modelServing/ModelServingGlobal.cy.ts

@@ -21,6 +21,7 @@ import {
 } from '~/__tests__/cypress/cypress/pages/modelServing';
 import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
 import { ServingRuntimePlatform } from '~/types';
+import { be } from '~/__tests__/cypress/cypress/utils/should';
 
 type HandlersProps = {
   disableKServeConfig?: boolean;
@@ -572,4 +573,60 @@ describe('Model Serving Global', () => {
     modelServingGlobal.findDeployModelButton().click();
     cy.findByText('Error creating model server').should('not.exist');
   });
+
+  describe('Table filter', () => {
+    it('filter by name', () => {
+      initIntercepts({});
+      modelServingGlobal.visit('test-project');
+
+      // Verify initial run rows exist
+      modelServingGlobal.getModelRow('Test Inference Service').should('have.length', 1);
+
+      // Select the "Name" filter
+      const modelServingGlobalToolbar = modelServingGlobal.getTableToolbar();
+      modelServingGlobalToolbar.findFilterMenuOption('filter-dropdown-select', 'Name').click();
+      modelServingGlobalToolbar.findSearchInput().type('Test Inference Service');
+      // Verify only rows with the typed run name exist
+      modelServingGlobal.getModelRow('Test Inference Service').should('exist');
+      // Verify sort button works
+      modelServingGlobal.findSortButton('Model name').click();
+      modelServingGlobal.findSortButton('Model name').should(be.sortDescending);
+      modelServingGlobal.findSortButton('Model name').click();
+      modelServingGlobal.findSortButton('Model name').should(be.sortAscending);
+
+      // Search for non-existent run name
+      modelServingGlobalToolbar.findSearchInput().clear().type('Test Service');
+
+      // Verify no results were found
+      modelServingGlobal.findEmptyResults().should('exist');
+    });
+
+    it('filter by project', () => {
+      initIntercepts({
+        projectEnableModelMesh: true,
+      });
+      modelServingGlobal.visit('test-project');
+
+      // Verify initial run rows exist
+      modelServingGlobal.getModelRow('Test Inference Service').should('have.length', 1);
+
+      // Select the "Project" filter
+      const modelServingGlobalToolbar = modelServingGlobal.getTableToolbar();
+      modelServingGlobalToolbar.findFilterMenuOption('filter-dropdown-select', 'Project').click();
+      modelServingGlobalToolbar.findSearchInput().type('test project');
+      // Verify only rows with the typed run name exist
+      modelServingGlobal.getModelRow('Test Inference Service').should('exist');
+      // Verify sort button works
+      modelServingGlobal.findSortButton('Project').click();
+      modelServingGlobal.findSortButton('Project').should(be.sortAscending);
+      modelServingGlobal.findSortButton('Project').click();
+      modelServingGlobal.findSortButton('Project').should(be.sortDescending);
+
+      // Search for non-existent run name
+      modelServingGlobalToolbar.findSearchInput().clear().type('Test Service');
+
+      // Verify no results were found
+      modelServingGlobal.findEmptyResults().should('exist');
+    });
+  });
 });

frontend/src/__tests__/cypress/cypress/pages/components/TableToolbar.ts

@@ -2,18 +2,18 @@ import { Contextual } from './Contextual';
 
 export class TableToolbar extends Contextual<HTMLElement> {
   private findToggleButton(id: string) {
-    return cy.pfSwitch(id).click();
+    return this.find().pfSwitch(id).click();
   }
 
   findFilterMenuOption(id: string, name: string): Cypress.Chainable<JQuery<HTMLElement>> {
     return this.findToggleButton(id).parents().findByRole('menuitem', { name });
   }
 
   findSearchInput(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return cy.findByLabelText('Search input');
+    return this.find().findByLabelText('Search input');
   }
 
   findResetButton(): Cypress.Chainable<JQuery<HTMLElement>> {
-    return cy.findByRole('button', { name: 'Reset' });
+    return this.find().findByRole('button', { name: 'Reset' });
   }
 }

frontend/src/__tests__/cypress/cypress/pages/modelServing.ts

@@ -3,7 +3,9 @@ import { Modal } from '~/__tests__/cypress/cypress/pages/components/Modal';
 import { TableRow } from '~/__tests__/cypress/cypress/pages/components/table';
 import { mixin } from '~/__tests__/cypress/cypress/utils/mixin';
 import { Contextual } from './components/Contextual';
+import { TableToolbar } from './components/TableToolbar';
 
+class ModelServingToolbar extends TableToolbar {}
 class ModelServingGlobal {
   visit(project?: string) {
     cy.visitWithLogin(`/modelServing${project ? `/${project}` : ''}`);
@@ -58,6 +60,18 @@ class ModelServingGlobal {
   getModelRow(name: string) {
     return this.findModelsTable().find(`[data-label=Name]`).contains(name).parents('tr');
   }
+
+  findEmptyResults() {
+    return cy.findByTestId('no-result-found-title');
+  }
+
+  findSortButton(name: string) {
+    return this.findModelsTable().find('thead').findByRole('button', { name });
+  }
+
+  getTableToolbar() {
+    return new ModelServingToolbar(() => cy.findByTestId('dashboard-table-toolbar'));
+  }
 }
 
 class InferenceServiceModal extends Modal {