Merge pull request #2898 from pnaik1/cypress-home

create page objects for cypress home page test

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

@@ -4,8 +4,13 @@ class EnabledPage {
     this.wait();
   }
 
-  private wait() {
+  shouldHaveEnabledPageSection() {
     cy.findByTestId('enabled-application').should('be.visible');
+    return this;
+  }
+
+  private wait() {
+    this.shouldHaveEnabledPageSection();
     cy.testA11y();
   }
 }

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

@@ -0,0 +1,69 @@
+import { mockDashboardConfig } from '~/__mocks__';
+import { HomeAdminSection } from './homeAdmin';
+import { HomeAIFlow } from './homeAIFlow';
+import { HomeProject } from './homeProject';
+import { HomeResource } from './homeResource';
+
+class HomePage {
+  visit(wait = true) {
+    cy.visitWithLogin('/');
+    if (wait) {
+      this.wait();
+    }
+  }
+
+  private wait() {
+    cy.findByTestId('home-page').should('be.visible');
+    cy.testA11y();
+  }
+
+  findJupyterIcon() {
+    return cy.findByTestId('jupyter-hint-icon');
+  }
+
+  findHint() {
+    return cy.findByTestId('home-page-hint');
+  }
+
+  findHintText() {
+    return cy.findByTestId('hint-body-text');
+  }
+
+  findHintLink() {
+    return cy.findByTestId('home-page-hint-navigate');
+  }
+
+  findHintCloseButton() {
+    return cy.findByTestId('home-page-hint-close');
+  }
+
+  findAppPageTitle() {
+    return cy.findByTestId('app-page-title');
+  }
+
+  initHomeIntercepts(config: Parameters<typeof mockDashboardConfig>[0] = {}) {
+    cy.interceptOdh('GET /api/config', mockDashboardConfig(config));
+  }
+
+  getHomeAdminSection() {
+    return new HomeAdminSection(() => cy.findByTestId('landing-page-admin'));
+  }
+
+  getHomeAISection() {
+    return new HomeAIFlow(() => cy.findByTestId('home-page-ai-flows'));
+  }
+
+  getHomeProjectSection() {
+    return new HomeProject(() => cy.findByTestId('landing-page-projects'));
+  }
+
+  getHomeResourceSection() {
+    return new HomeResource(() => cy.findByTestId('landing-page-resources'));
+  }
+
+  returnToHome() {
+    cy.go('back');
+  }
+}
+
+export const homePage = new HomePage();

frontend/src/__tests__/cypress/cypress/pages/home/homeAIFlow.ts

@@ -0,0 +1,81 @@
+import { Contextual } from '~/__tests__/cypress/cypress/pages/components/Contextual';
+
+class AIFlowCard extends Contextual<HTMLElement> {}
+
+export class HomeAIFlow extends Contextual<HTMLElement> {
+  getProjectCard(): AIFlowCard {
+    return new AIFlowCard(() => this.find().findByTestId('ai-flow-projects-card'));
+  }
+
+  getTrainFlowCard(): AIFlowCard {
+    return new AIFlowCard(() => this.find().findByTestId('ai-flow-train-card'));
+  }
+
+  getModelsFlowCard(): AIFlowCard {
+    return new AIFlowCard(() => this.find().findByTestId('ai-flow-models-card'));
+  }
+
+  findWorkbenchesAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-workbenches-info');
+  }
+
+  findProjectsAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-projects-info');
+  }
+
+  findConnectionsAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-connections-info');
+  }
+
+  findStorageAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-storage-info');
+  }
+
+  findPipelinesAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-pipelines-info');
+  }
+
+  findRunsAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-runs-info');
+  }
+
+  findModelServerAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-model-servers-info');
+  }
+
+  findModelDeployAIFlowInfo(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-model-deploy-info');
+  }
+
+  findAIFlowClose(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('ai-flows-close-info');
+  }
+
+  findModelMeshDescriptionAdditionalText(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('project-workbenches--trailer-model-mesh');
+  }
+
+  findNoModelMeshDescriptionAdditionalText(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('project-workbenches--trailer-no-model-mesh');
+  }
+
+  findNoModelServingDescriptionAdditionalText(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('project-workbenches--trailer-no-model-serving');
+  }
+
+  findNoPipelinesDescriptionAdditionalText(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('project-workbenches--trailer-no-pipelines');
+  }
+
+  findPipelinesTrainDescriptionText(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId(`create-and-train-pipelines-trailer`);
+  }
+
+  findModelMeshEnabledText(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('project-workbenches--trailer-no-model-mesh');
+  }
+
+  findModelMeshDisabledText(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('project-workbenches--trailer-no-model-serving');
+  }
+}

frontend/src/__tests__/cypress/cypress/pages/home/homeAdmin.ts

@@ -0,0 +1,35 @@
+import { Contextual } from '~/__tests__/cypress/cypress/pages/components/Contextual';
+
+export class HomeAdminSection extends Contextual<HTMLElement> {
+  findNotebookImageCard(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-admin--notebook-images');
+  }
+
+  findNotebookImageButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-admin--notebook-images-button');
+  }
+
+  findServingRuntimeButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-admin--serving-runtimes-button');
+  }
+
+  findClusterSettingButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-admin--cluster-settings-button');
+  }
+
+  findUserManagementButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-admin--user-management-button');
+  }
+
+  findServingRuntimeCard(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-admin--serving-runtimes');
+  }
+
+  findClusterSettingCard(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-admin--cluster-settings');
+  }
+
+  findUserManagementCard(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.findByTestId('landing-page-admin--user-management');
+  }
+}

frontend/src/__tests__/cypress/cypress/pages/home/homeProject.ts

@@ -0,0 +1,35 @@
+import { Contextual } from '~/__tests__/cypress/cypress/pages/components/Contextual';
+
+export class HomeProject extends Contextual<HTMLElement> {
+  findEmptyProjectCard(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('landing-page-projects-empty');
+  }
+
+  findCreateProjectButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('create-project-button');
+  }
+
+  findSectionHeaderCreateProjectButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('create-project');
+  }
+
+  findCreateProjectCard(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('create-project-card');
+  }
+
+  findProjectRequestIcon(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('request-project-help');
+  }
+
+  findRequestProjectCard(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('request-project-card');
+  }
+
+  findProjectLinkButton(projectName: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId(`project-link-${projectName}`);
+  }
+
+  findGoToProjectLink(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('goto-projects-link');
+  }
+}

frontend/src/__tests__/cypress/cypress/pages/home/homeResource.ts

@@ -0,0 +1,11 @@
+import { Contextual } from '~/__tests__/cypress/cypress/pages/components/Contextual';
+
+export class HomeResource extends Contextual<HTMLElement> {
+  findCard(name: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId(`resource-card-${name}`);
+  }
+
+  findGoToResourceLink(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.find().findByTestId('goto-resources-link');
+  }
+}

frontend/src/__tests__/cypress/cypress/tests/mocked/applications/notebookServer.cy.ts

@@ -7,7 +7,7 @@ import { mockStartNotebookData } from '~/__mocks__/mockStartNotebookData';
 import { notebookServer } from '~/__tests__/cypress/cypress/pages/notebookServer';
 import { asProductAdminUser, asProjectEditUser } from '~/__tests__/cypress/cypress/utils/users';
 import { notebookController } from '~/__tests__/cypress/cypress/pages/administration';
-import { homePage } from '~/__tests__/cypress/cypress/pages/home';
+import { homePage } from '~/__tests__/cypress/cypress/pages/home/home';
 
 const groupSubjects: RoleBindingSubject[] = [
   {

frontend/src/__tests__/cypress/cypress/tests/mocked/home/home.cy.ts

@@ -1,6 +1,7 @@
 import { enabledPage } from '~/__tests__/cypress/cypress/pages/enabled';
 import { mockComponents } from '~/__mocks__/mockComponents';
-import { homePage } from '~/__tests__/cypress/cypress/pages/home';
+import { homePage } from '~/__tests__/cypress/cypress/pages/home/home';
+import { verifyRelativeURL } from '~/__tests__/cypress/cypress/utils/url';
 
 describe('Home page', () => {
   beforeEach(() => {
@@ -9,43 +10,39 @@ describe('Home page', () => {
   });
   it('should be shown by default', () => {
     homePage.visit();
-
     // enabled applications page is still navigable
     enabledPage.visit();
   });
   it('should be not shown when disabled', () => {
     homePage.initHomeIntercepts({ disableHome: true });
-    cy.visit('/');
-    cy.findByTestId('app-page-title').should('have.text', 'Enabled');
+    homePage.visit(false);
+    enabledPage.shouldHaveEnabledPageSection();
   });
   it('should show the home page hint', () => {
     homePage.visit();
+    homePage.findJupyterIcon().should('be.visible');
+    homePage.findHintText().should('contain', 'Jupyter');
 
-    cy.findByTestId('jupyter-hint-icon').should('be.visible');
-    cy.findByTestId('hint-body-text').should('contain', 'Jupyter');
-
-    // enabled applications page is still navigable
-    cy.findByTestId('home-page-hint-navigate').click();
-
-    cy.findByTestId('enabled-application').should('be.visible');
+    // // enabled applications page is still navigable
+    homePage.findHintLink().click();
+    verifyRelativeURL('/enabled');
   });
+
   it('should hide the home page hint when the notebook controller is disabled.', () => {
     homePage.initHomeIntercepts({ disableNotebookController: true });
-    cy.visit('/');
-
-    cy.findByTestId('home-page-hint').should('not.exist');
+    homePage.visit();
+    homePage.findHint().should('not.exist');
   });
+
   it('should hide the home page hint when closed', () => {
     homePage.visit();
-
-    cy.findByTestId('home-page-hint-close').click();
-    cy.findByTestId('home-page-hint').should('not.exist');
+    homePage.findHintCloseButton().click();
+    homePage.findHint().should('not.exist');
 
     // hint should not reappear when home page is navigated to
-    cy.visit('/enabled');
-    cy.findByTestId('enabled-application').should('be.visible');
-
-    homePage.visit();
-    cy.findByTestId('home-page-hint').should('not.exist');
+    enabledPage.visit();
+    enabledPage.shouldHaveEnabledPageSection();
+    homePage.returnToHome();
+    homePage.findHint().should('not.exist');
   });
 });