add functional test for sidecar (#1141)

* add function test for sidecar Signed-off-by: tygao <[email protected]> * test: update tests for sidecar integration Signed-off-by: tygao <[email protected]> * Update cypress/integration/plugins/dashboards-assistant/chatbot_sidecar_spec.js Co-authored-by: Hailong Cui <[email protected]> Signed-off-by: tygao <[email protected]> --------- Signed-off-by: tygao <[email protected]> Co-authored-by: Hailong Cui <[email protected]>
opensearch-project · Mar 20, 2024 · 4cd28e2 · 4cd28e2
1 parent 53bd5f8
commit 4cd28e2
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 7 deletions.
diff --git a/cypress/integration/plugins/dashboards-assistant/chatbot_interaction_trace_spec.js b/cypress/integration/plugins/dashboards-assistant/chatbot_interaction_trace_spec.js
@@ -82,9 +82,11 @@ if (Cypress.env('DASHBOARDS_ASSISTANT_ENABLED')) {
       });
 
       it('trace page display correctly in fullscreen mode', () => {
-        cy.get(`.llm-chat-flyout-header`)
-          .find(`button[aria-label="fullScreen"]`)
-          .click({ force: true });
+        // switch to takeover mode for fullscreen
+        cy.get('[id="sidecarModeIcon"]').click();
+        cy.get(
+          '[data-test-subj="sidecar-mode-icon-menu-item-takeover"]'
+        ).click();
 
         // show close button
         cy.get(`.llm-chat-flyout .llm-chat-flyout-body`).as('tracePage');

diff --git a/cypress/integration/plugins/dashboards-assistant/chatbot_sidecar_spec.js b/cypress/integration/plugins/dashboards-assistant/chatbot_sidecar_spec.js
@@ -0,0 +1,165 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { BASE_PATH } from '../../../utils/constants';
+
+if (Cypress.env('DASHBOARDS_ASSISTANT_ENABLED')) {
+  describe('Assistant sidecar spec', () => {
+    beforeEach(() => {
+      // Set welcome screen tracking to false
+      localStorage.setItem('home:welcome:show', 'false');
+      // Set new theme modal to false
+      localStorage.setItem('home:newThemeModal:show', 'false');
+    });
+
+    beforeEach(() => {
+      // Visit OSD
+      cy.visit(`${BASE_PATH}/app/home`);
+
+      // Common text to wait for to confirm page loaded, give up to 60 seconds for initial load
+      cy.get(`input[placeholder="Ask question"]`, { timeout: 120000 }).should(
+        'be.length',
+        1
+      );
+    });
+
+    describe('sidecar spec', () => {
+      it('open sidecar and render normally, support show and hide', () => {
+        // The header may render multiple times, wait for UI to be stable
+        cy.wait(5000);
+
+        // enable to toggle and open sidecar, OSD will be pushed accordingly.
+        cy.get(`img[aria-label="toggle chat flyout icon"]`).click();
+        cy.get('[class~="chatbot-sidecar"]').should('be.visible');
+        cy.get('[class~="chatbot-sidecar"]').should(
+          'have.css',
+          'width',
+          '460px'
+        );
+        //Wrapper and header have related padding style.
+        cy.get('[class~="app-wrapper"]').should(
+          'have.css',
+          'padding-right',
+          '460px'
+        );
+        cy.get('[id="globalHeaderBars"]')
+          .children()
+          .should('have.css', 'padding-right', '460px');
+
+        // click toggle to call sidecar hide, sidecar will be hidden and paddingSize on header and wrapper will be zero.
+        cy.get(`img[aria-label="toggle chat flyout icon"]`).click();
+        cy.get('[class~="chatbot-sidecar"]').should(
+          'have.css',
+          'display',
+          'none'
+        );
+        cy.get('[class~="app-wrapper"]').should(
+          'not.have.attr',
+          'padding-right'
+        );
+        cy.get('[id="globalHeaderBars"]')
+          .children()
+          .should('not.have.attr', 'padding-right');
+
+        // click toggle to call sidecar show
+        cy.get(`img[aria-label="toggle chat flyout icon"]`).click();
+        cy.get('[class~="chatbot-sidecar"]').should('be.visible');
+        cy.get('[class~="app-wrapper"]').should(
+          'have.css',
+          'padding-right',
+          '460px'
+        );
+        cy.get('[id="globalHeaderBars"]')
+          .children()
+          .should('have.css', 'padding-right', '460px');
+      });
+
+      it('open sidecar and support to switch docked mode', () => {
+        // The header may render multiple times, wait for UI to be stable
+        cy.wait(5000);
+
+        // enable to toggle and open sidecar, OSD will be pushed accordingly.
+        cy.get(`img[aria-label="toggle chat flyout icon"]`).click();
+        cy.get('[class~="chatbot-sidecar"]').should('be.visible');
+        cy.get('[class~="app-wrapper"]').should(
+          'have.css',
+          'padding-right',
+          '460px'
+        );
+
+        // switch to docked left
+        cy.get('[id="sidecarModeIcon"]').click();
+        cy.get('[data-test-subj="sidecar-mode-icon-menu-item-left"]').click();
+        cy.get('[class~="app-wrapper"]').should(
+          'have.css',
+          'padding-left',
+          '460px'
+        );
+
+        // switch to docked take over
+        cy.get('[id="sidecarModeIcon"]').click();
+        cy.get(
+          '[data-test-subj="sidecar-mode-icon-menu-item-takeover"]'
+        ).click();
+        cy.get('[class~="app-wrapper"]').should(
+          'not.have.attr',
+          'padding-left'
+        );
+        cy.get('[class~="app-wrapper"]').should(
+          'not.have.attr',
+          'padding-right'
+        );
+      });
+
+      it('open sidecar and support resizable', () => {
+        // The header may render multiple times, wait for UI to be stable
+        cy.wait(5000);
+
+        // enable to toggle and open sidecar, OSD will be pushed accordingly.
+        cy.get(`img[aria-label="toggle chat flyout icon"]`).click();
+        // switch to docked left
+        cy.get('[id="sidecarModeIcon"]').click();
+        cy.get('[data-test-subj="sidecar-mode-icon-menu-item-left"]').click();
+        cy.get('[class~="chatbot-sidecar"]').should('be.visible');
+        cy.get('[class~="chatbot-sidecar"]').should(
+          'have.css',
+          'width',
+          '460px'
+        );
+
+        //drag from left to right
+        cy.get('[data-test-subj="resizableButton"]').trigger('mousedown', {
+          clientX: 0,
+          pageX: 0,
+          pageY: 0,
+        });
+        cy.window().trigger('mousemove', { clientX: 1000, pageX: 0, pageY: 0 });
+        cy.window().trigger('mouseup', { force: true });
+        cy.get('[class~="chatbot-sidecar"]').should(
+          'have.css',
+          'width',
+          `${1000 + 460}px`
+        );
+
+        //drag from right to left
+        cy.get('[data-test-subj="resizableButton"]').trigger('mousedown', {
+          clientX: 0,
+          pageX: 0,
+          pageY: 0,
+        });
+        cy.window().trigger('mousemove', {
+          clientX: -1000,
+          pageX: 0,
+          pageY: 0,
+        });
+        cy.window().trigger('mouseup', { force: true });
+        cy.get('[class~="chatbot-sidecar"]').should(
+          'have.css',
+          'width',
+          `${1460 - 1000}px`
+        );
+      });
+    });
+  });
+}
diff --git a/cypress/integration/plugins/dashboards-assistant/conversation_history_spec.js b/cypress/integration/plugins/dashboards-assistant/conversation_history_spec.js
@@ -79,8 +79,12 @@ if (Cypress.env('DASHBOARDS_ASSISTANT_ENABLED')) {
         cy.get('textarea[placeholder="Ask me anything..."]').should('exist');
       });
 
-      it('should hide back button in fullscreen mode', () => {
-        cy.get('.llm-chat-flyout button[aria-label="fullScreen"]').click();
+      it('should hide back button in takeover fullscreen mode', () => {
+        //switch to takeover mode for fullscreen
+        cy.get('[id="sidecarModeIcon"]').click();
+        cy.get(
+          '[data-test-subj="sidecar-mode-icon-menu-item-takeover"]'
+        ).click();
         cy.get('.llm-chat-flyout button[aria-label="history"]').click();
 
         cy.get('.llm-chat-flyout')
@@ -91,8 +95,9 @@ if (Cypress.env('DASHBOARDS_ASSISTANT_ENABLED')) {
           .contains('Back', { timeout: 3000 })
           .should('not.exist');
 
-        // Back to default mode
-        cy.get('.llm-chat-flyout button[aria-label="fullScreen"]').click();
+        // Switch to default docked right mode
+        cy.get('[id="sidecarModeIcon"]').click();
+        cy.get('[data-test-subj="sidecar-mode-icon-menu-item-right"]').click();
         cy.get('.llm-chat-flyout button[aria-label="history"]').click();
       });
     });