From 481c746e2f312e6051bec516dc24b0216152c603 Mon Sep 17 00:00:00 2001 From: Ashley McEntee Date: Mon, 8 Apr 2024 11:37:51 -0400 Subject: [PATCH] Update ModelServingGlobal Cypress test to account for sorting and filtering --- .../e2e/modelServing/ModelServingGlobal.cy.ts | 57 +++++++++++++++++++ .../cypress/pages/components/TableToolbar.ts | 6 +- .../cypress/cypress/pages/modelServing.ts | 14 +++++ 3 files changed, 74 insertions(+), 3 deletions(-) diff --git a/frontend/src/__tests__/cypress/cypress/e2e/modelServing/ModelServingGlobal.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/modelServing/ModelServingGlobal.cy.ts index 93bb6696db..eeb810f880 100644 --- a/frontend/src/__tests__/cypress/cypress/e2e/modelServing/ModelServingGlobal.cy.ts +++ b/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'); + }); + }); }); diff --git a/frontend/src/__tests__/cypress/cypress/pages/components/TableToolbar.ts b/frontend/src/__tests__/cypress/cypress/pages/components/TableToolbar.ts index 259f698df4..a005266550 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/components/TableToolbar.ts +++ b/frontend/src/__tests__/cypress/cypress/pages/components/TableToolbar.ts @@ -2,7 +2,7 @@ import { Contextual } from './Contextual'; export class TableToolbar extends Contextual { private findToggleButton(id: string) { - return cy.pfSwitch(id).click(); + return this.find().pfSwitch(id).click(); } findFilterMenuOption(id: string, name: string): Cypress.Chainable> { @@ -10,10 +10,10 @@ export class TableToolbar extends Contextual { } findSearchInput(): Cypress.Chainable> { - return cy.findByLabelText('Search input'); + return this.find().findByLabelText('Search input'); } findResetButton(): Cypress.Chainable> { - return cy.findByRole('button', { name: 'Reset' }); + return this.find().findByRole('button', { name: 'Reset' }); } } diff --git a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts b/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts index 9094ad8ed4..ff91d4fd3d 100644 --- a/frontend/src/__tests__/cypress/cypress/pages/modelServing.ts +++ b/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 {