Add first e2e test; Add e2e section in the README.md file; implement Chat PO and commands

Signed-off-by: Francesco Torchia <[email protected]>

Author: torchiaf

.gitignore

@@ -107,3 +107,6 @@ shell/rancher-components
 scripts/standalone/ui
 scripts/standalone/cert
 scripts/standalone/node
+
+# Cypress
+browser-logs

README.md

@@ -34,6 +34,18 @@ Bump the app version on `package.json` file, then run:
 yarn serve-pkgs
 ```
 
+## E2E tests
+Running locally:
+```bash
+# Build and Run the mock Agent
+cd mock-agent
+yarn install
+yarn mock:agent:start
+
+# Launch Cypress dashboard
+API=https://your-rancher VUE_APP_AGENT_MESSAGES_WS_PATH=ws://localhost:8000/ws/agent yarn dev
+```
+
 License
 =======
 Check Rancher AI UI Apache License details [here](LICENSE)

cypress.config.ts

@@ -162,6 +162,7 @@ export default defineConfig({
     VAI_ENABLED:         process.env.VAI_ENABLED,
     accessibility:       !!process.env.TEST_A11Y, // Are we running accessibility tests?
     a11yFolder:          path.join('.', 'cypress', 'accessibility'),
+    mockAgentApi:        'http://localhost:8000',
   },
   e2e: {
     fixturesFolder:               'cypress/e2e/blueprints',

cypress/e2e/po/extensions/ai/chat.po.ts

@@ -0,0 +1,23 @@
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
+
+export default class ChatPo extends ComponentPo {
+  constructor() {
+    super('[data-testid="rancher-ai-ui-chat-container"]');
+  }
+
+  checkExists(): Cypress.Chainable<boolean> {
+    return this.self().should('exist');
+  }
+
+  messages() {
+    return this.self().get('[data-testid="rancher-ai-ui-chat-message"]');
+  }
+
+  getMessage(index: number) {
+    return this.messages().eq(index);
+  }
+
+  getTemplateMessage(templateName: string) {
+    return this.self().get(`[data-testid="rancher-ai-ui-chat-message-template-${ templateName }"]`);
+  }
+}

cypress/e2e/po/extensions/ai/chat.ts

@@ -0,0 +1,116 @@
+import { HeaderPo } from '@/cypress/e2e/po/components/header.po';
+import HomePagePo from '@/cypress/e2e/po/pages/home.po';
+import ClusterDashboardPagePo from '@/cypress/e2e/po/pages/explorer/cluster-dashboard.po';
+import ClusterManagerListPagePo from '@/cypress/e2e/po/pages/cluster-manager/cluster-manager-list.po';
+import { FleetDashboardListPagePo } from '@/cypress/e2e/po/pages/fleet/fleet-dashboard.po';
+import UsersPo from '@/cypress/e2e/po/pages/users-and-auth/users.po';
+import ExtensionsPagePo from '@/cypress/e2e/po/pages/extensions.po';
+import { SettingsPagePo } from '@/cypress/e2e/po/pages/global-settings/settings.po';
+
+import ChatPo from '@/cypress/e2e/po/extensions/ai/chat.po';
+
+describe('Chat', () => {
+  const header = new HeaderPo();
+  const chat = new ChatPo();
+
+  beforeEach(() => {
+    cy.login();
+  });
+
+  describe('Open Chat from different UI areas', () => {
+    it('Home', () => {
+      HomePagePo.goTo();
+
+      header.askLizButton().click();
+      chat.checkExists();
+    });
+
+    it('Cluster dashboard', () => {
+      const localClusterDashboard = new ClusterDashboardPagePo('local');
+
+      localClusterDashboard.goTo();
+
+      header.askLizButton().click();
+      chat.checkExists();
+    });
+
+    it('Cluster management', () => {
+      const clusterList = new ClusterManagerListPagePo();
+
+      clusterList.goTo();
+      clusterList.waitForPage();
+
+      header.askLizButton().click();
+      chat.checkExists();
+    });
+
+    it('Fleet', () => {
+      const fleetDashboardPage = new FleetDashboardListPagePo('_');
+
+      fleetDashboardPage.goTo();
+      fleetDashboardPage.waitForPage();
+
+      header.askLizButton().click();
+      chat.checkExists();
+    });
+
+    it('Users', () => {
+      const usersPo = new UsersPo();
+
+      usersPo.goTo();
+      usersPo.waitForPage();
+
+      header.askLizButton().click();
+      chat.checkExists();
+    });
+
+    it('Extensions', () => {
+      const extensionsPo = new ExtensionsPagePo();
+
+      extensionsPo.goTo();
+      extensionsPo.waitForPage();
+
+      header.askLizButton().click();
+      chat.checkExists();
+    });
+
+    it('Settings', () => {
+      const settingsPage = new SettingsPagePo('_');
+
+      settingsPage.goTo();
+      settingsPage.waitForPage();
+
+      header.askLizButton().click();
+      chat.checkExists();
+    });
+  });
+
+  describe('Welcome Message', () => {
+    it('Show welcome message template and suggestions', () => {
+      cy.login();
+
+      HomePagePo.goTo();
+
+      cy.enqueueAIAgentResponse({
+        content:   'Providing mock response from the agent, containing suggestions for the welcome message. <suggestion>View resources</suggestion><suggestion>Analyze logs</suggestion><suggestion>Do action</suggestion>',
+        chunkSize: 30
+      });
+
+      header.askLizButton().click();
+      chat.checkExists();
+
+      const welcomeMessage = chat.getTemplateMessage('welcome');
+
+      welcomeMessage.should('exist');
+      welcomeMessage.within(() => {
+        cy.contains("I'm Liz, your personal AI assistant. How can I help you?").should('be.visible');
+
+        const suggestions = ['View resources', 'Analyze logs', 'Do action'];
+
+        suggestions.forEach((s) => {
+          cy.contains(s, { timeout: 5000 }).should('be.visible');
+        });
+      });
+    });
+  });
+});

cypress/e2e/tests/chat.spec.ts

@@ -232,6 +232,10 @@ declare global {
        */
       checkElementAccessibility(selector: any, description?: string);
 
+      /**
+       * enqueue a request to mock AI Agent response
+       */
+      enqueueAIAgentResponse(args: { content: string, chunkSize?: number }): Chainable;
     }
   }
 }

cypress/globals.d.ts

@@ -0,0 +1,17 @@
+
+/**
+ * Enqueue a request to mock AI Agent response
+ */
+Cypress.Commands.add('enqueueAIAgentResponse', (args: { content: string, chunkSize?: number }) => {
+  return cy.request({
+    method: 'POST',
+    url:    `${ Cypress.env('mockAgentApi') }/control/enqueue`,
+    body:   {
+      content: args.content || '',
+      chunkSize: args.chunkSize || 30
+    }
+  })
+    .then((resp) => {
+      expect(resp.status).to.eq(200);
+    });
+});

cypress/support/commands/mock-ai-agent-api.ts

@@ -3,6 +3,7 @@ import './commands/commands';
 import './commands/chainable';
 import './commands/rancher-api-commands';
 import './commands/accessiblity';
+import './commands/mock-ai-agent-api';
 
 import registerCypressGrep from '@cypress/grep/src/support';
 import { addCustomCommand } from 'cypress-delete-downloads-folder';

cypress/support/e2e.ts

@@ -105,6 +105,7 @@ onBeforeUnmount(() => {
       'chat-message-user': props.message.role === RoleEnum.User,
       disabled: props.disabled
     }"
+    :data-testid="`rancher-ai-ui-chat-message-${ props.message.id }`"
   >
     <component
       :is="props.message.role === RoleEnum.User ? UserAvatar : SystemAvatar"