Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add functional test for sidecar #1141

Merged
merged 3 commits into from
Mar 20, 2024
Merged

add functional test for sidecar #1141

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f26ea2d
add function test for sidecar
raintygao Mar 12, 2024
41b63b1
test: update tests for sidecar integration
raintygao Mar 19, 2024
2b656a8
Update cypress/integration/plugins/dashboards-assistant/chatbot_sidec…
raintygao Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions cypress/integration/plugins/dashboards-assistant/chatbot_interaction_trace_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
165 changes: 165 additions & 0 deletions cypress/integration/plugins/dashboards-assistant/chatbot_sidecar_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ISM OSD
raintygao marked this conversation as resolved.
Show resolved Hide resolved
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`
);
});
});
});
}
13 changes: 9 additions & 4 deletions cypress/integration/plugins/dashboards-assistant/conversation_history_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall we change to cy.get("#sidecarModeIcon")?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think both ways are OK.

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')
Expand All @@ -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();
});
});
Expand Down
Loading