From b3884fa8428901a5f6cc6ab2c31fbb9dd7e5bfc4 Mon Sep 17 00:00:00 2001 From: tygao Date: Wed, 20 Mar 2024 10:45:39 +0800 Subject: [PATCH] add functional test for sidecar (#1141) * add function test for sidecar Signed-off-by: tygao * test: update tests for sidecar integration Signed-off-by: tygao * Update cypress/integration/plugins/dashboards-assistant/chatbot_sidecar_spec.js Co-authored-by: Hailong Cui Signed-off-by: tygao --------- Signed-off-by: tygao Co-authored-by: Hailong Cui (cherry picked from commit 4cd28e252a01e46ee8d4b711851787eeba0254cc) --- .../chatbot_interaction_trace_spec.js | 8 +- .../chatbot_sidecar_spec.js | 165 ++++++++++++++++++ .../conversation_history_spec.js | 13 +- 3 files changed, 179 insertions(+), 7 deletions(-) create mode 100644 cypress/integration/plugins/dashboards-assistant/chatbot_sidecar_spec.js diff --git a/cypress/integration/plugins/dashboards-assistant/chatbot_interaction_trace_spec.js b/cypress/integration/plugins/dashboards-assistant/chatbot_interaction_trace_spec.js index c86f342d0..343fe899c 100644 --- 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 new file mode 100644 index 000000000..a80591d3c --- /dev/null +++ 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 index 0349481b9..432103676 100644 --- 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(); }); });