Skip to content

Commit

Permalink
test: migrate Responsiveness tests to cy
Browse files Browse the repository at this point in the history
  • Loading branch information
@dobrinyonkov
dobrinyonkov committed Feb 6, 2025
1 parent d6d6991 commit 9214373
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 201 deletions.
138 changes: 97 additions & 41 deletions packages/fiori/cypress/specs/ShellBar.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe("Responsiveness", () => {
id="shellbar"
primaryTitle="Product Title"
secondaryTitle="Solution name"
notifications-count="99+"
notificationsCount="99+"
showNotifications={true}
showProductSwitch={true}
>
Expand Down Expand Up @@ -100,67 +100,123 @@ describe("Responsiveness", () => {
cy.viewport(1920, 1080);
});

it("tests XXL Breakpoint 1920px", () => {
it("tests XL Breakpoint 1920px", () => {
cy.viewport(1920, 1080);
cy.get("@shellbar")
.find("ui5-button[slot='startButton']")
.as("backButton");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-title")
.as("primaryTitle");
cy.get("@shellbar").should("have.prop", "breakpointSize", "XL");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-secondary-title")
.as("secondaryTitle");
cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
cy.get("@shellbar").shadow().find(".ui5-shellbar-title").as("primaryTitle");
cy.get("@shellbar").shadow().find(".ui5-shellbar-secondary-title").as("secondaryTitle");
cy.get("@shellbar").shadow().find(".ui5-shellbar-custom-item").as("customActionIcon1");
cy.get("@shellbar").shadow().find(".ui5-shellbar-bell-button").as("notificationsIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-image-button").as("profileIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-search-button")
.as("searchButton");
cy.get("@assistant").should("be.visible");
cy.get("@overflowButton").should("not.be.visible");
cy.get("@backButton").should("be.visible");
cy.get("@primaryTitle").should("be.visible");
cy.get("@secondaryTitle").should("be.visible");
cy.get("@customActionIcon1").should("be.visible");
cy.get("@notificationsIcon").should("be.visible");
cy.get("@profileIcon").should("be.visible");
cy.get("@productSwitchIcon").should("be.visible");
});

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-custom-item")
.as("customActionIcon1");
it("tests M Breakpoint and overflow 570px", () => {
cy.viewport(570, 1680);

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-bell-button")
.as("notificationsIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-image-button")
.as("profileIcon");
cy.get("@searchIcon").should("be.visible");
cy.get("@overflowButton").should("be.visible");
});

cy.get("@shellbar")
.shadow()
.find(".ui5-shellbar-button-product-switch")
.as("productSwitchIcon");
it("tests XL Breakpoint 1820px", () => {
cy.viewport(1820, 1680);

cy.get("@shellbar")
.find("ui5-toggle-button[slot='assistant']")
.as("assistant");
cy.get("@shellbar").should("have.prop", "breakpointSize", "XL");
});

it("tests L Breakpoint 1400px", () => {
cy.viewport(1400, 1680);

cy.get("@shellbar").should("have.prop", "breakpointSize", "L");

cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
cy.get("@shellbar").shadow().find(".ui5-shellbar-title").as("primaryTitle");
cy.get("@shellbar").shadow().find(".ui5-shellbar-secondary-title").as("secondaryTitle");
cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-custom-item").as("customActionIcon1");
cy.get("@shellbar").shadow().find(".ui5-shellbar-bell-button").as("notificationsIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-image-button").as("profileIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");

cy.get("@assistant").should("be.visible");
cy.get("@overflowButton").should("not.be.visible");
cy.get("@backButton").should("be.visible");
cy.get("@primaryTitle").should("be.visible");
cy.get("@secondaryTitle").should("be.visible");
cy.get("@searchIcon").should("be.visible");
cy.get("@customActionIcon1").should("be.visible");
cy.get("@notificationsIcon").should("be.visible");
cy.get("@profileIcon").should("be.visible");
cy.get("@productSwitchIcon").should("be.visible");
});

it("tests M Breakpoint 870px", () => {
cy.viewport(810, 1680);

cy.get("@shellbar").should("have.prop", "breakpointSize", "M");

cy.get("@shellbar").find("ui5-toggle-button[slot='assistant']").as("assistant");
cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
cy.get("@shellbar").shadow().find(".ui5-shellbar-title").as("primaryTitle");
cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-bell-button").as("notificationsIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-image-button").as("profileIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");

cy.get("@assistant").should("be.visible");
cy.get("@backButton").should("be.visible");
cy.get("@primaryTitle").should("be.visible");
cy.get("@searchIcon").should("be.visible");
cy.get("@notificationsIcon").should("be.visible");
cy.get("@profileIcon").should("be.visible");
cy.get("@productSwitchIcon").should("be.visible");
});

cy.get("@searchButton").click();
it("tests S Breakpoint and overflow 510px", () => {
cy.viewport(510, 1680);

cy.get("@shellbar")
.find("ui5-input[slot='searchField']")
.as("searchField").should("be.visible");
cy.get("@shellbar").should("have.prop", "breakpointSize", "S");

cy.get("@shellbar").find("[slot='assistant']").as("assistant");
cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-button").as("overflowButton");
cy.get("@shellbar").find("ui5-button[slot='startButton']").as("backButton");
cy.get("@shellbar").shadow().find(".ui5-shellbar-search-button").as("searchIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-bell-button").as("notificationsIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-image-button").as("profileIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-button-product-switch").as("productSwitchIcon");
cy.get("@shellbar").shadow().find(".ui5-shellbar-overflow-popover").as("overflowPopover");

cy.get("@assistant").should("be.visible");
cy.get("@overflowButton").should("be.visible");
cy.get("@backButton").should("be.visible");
cy.get("@shellbar").shadow().find(".ui5-shellbar-title").should("not.exist");
cy.get("@shellbar").shadow().find(".ui5-shellbar-secondary-title").should("not.exist");
cy.get("@searchIcon").should("be.visible");
cy.get("@notificationsIcon").should("be.visible");
cy.get("@profileIcon").should("be.visible");
cy.get("@productSwitchIcon").should("be.visible");

cy.get("@searchButton").click();
cy.get("@overflowPopover").find("ui5-li").should("have.length", 2);
});

it("tests S Breakpoint 320px", () => {
Expand Down
160 changes: 0 additions & 160 deletions packages/fiori/test/specs/ShellBar.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,166 +122,6 @@ describe("Component Behavior", () => {
});
});

describe("Responsiveness", () => {

it("tests XXL Breakpoint 1920px", async () => {

await browser.setWindowSize(1920, 1680);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);

const assistant = await browser.$("#shellbar ui5-toggle-button[slot='assistant'");
const shellbar = await browser.$("#shellbar");
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const backButton = await browser.$("#shellbar ui5-button[slot='startButton'");
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
const secondaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
const searchField = await browser.$("#shellbar [slot='searchField']");
const customActionIcon1 = await browser.$("#shellbar").shadow$(".ui5-shellbar-custom-item");
const notificationsIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-bell-button");
const profileIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
const productSwitchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");

assert.ok(await assistant.isDisplayed(), "assistant is visible");
assert.strictEqual(await shellbar.getProperty("breakpointSize"), "XXL", "XXL Breakpoint class should be set");
assert.notOk(await overflowButton.isDisplayed(), "Overflow button should be hidden");
assert.ok(await backButton.isDisplayed(), "Back icon is visible");
assert.ok(await primaryTitle.isDisplayed(), "Primary title should be visible");
assert.ok(await secondaryTitle.isDisplayed(), "Secondary title should be visible");
assert.ok(await searchField.isDisplayed(), "Search field should be visible");
assert.ok(await customActionIcon1.isDisplayed(), "Custom Action 1 should be visible");
assert.ok(await notificationsIcon.isDisplayed(), "Notifications icon should be visible");
assert.ok(await profileIcon.isDisplayed(), "Profile icon should be visible");
assert.ok(await productSwitchIcon.isDisplayed(), "Product switch should be visible");
});

it("tests XL Breakpoint 1820px", async () => {
await browser.setWindowSize(1820, 1680);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);

const shellbar = await browser.$("#shellbar");

assert.strictEqual(await shellbar.getProperty("breakpointSize"), "XL", "XL Breakpoint class should be set");
});

it("tests L Breakpoint 1400px", async () => {
await browser.setWindowSize(1400, 1680);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);

const assistant = await browser.$("#shellbar ui5-toggle-button[slot='assistant'");
const shellbar = await browser.$("#shellbar");
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const backButton = await browser.$("#shellbar ui5-button[slot='startButton'");
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
const secondaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
const searchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
const customActionIcon1 = await browser.$("#shellbar").shadow$(".ui5-shellbar-custom-item");
const notificationsIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-bell-button");
const profileIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
const productSwitchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");

assert.ok(await assistant.isDisplayed(), "assistant is visible");
assert.strictEqual(await shellbar.getProperty("breakpointSize"), "L", "L Breakpoint class should be set");
assert.notOk(await overflowButton.isDisplayed(), "Overflow button should be hidden");
assert.ok(await backButton.isDisplayed(), "Back icon is visible");
assert.ok(await primaryTitle.isDisplayed(), "Primary title should be visible");
assert.ok(await secondaryTitle.isDisplayed(), "Secondary title should be visible");
assert.ok(await searchIcon.isDisplayed(), "Search icon should be visible");
assert.ok(await customActionIcon1.isDisplayed(), "Custom Action 1 should be visible");
assert.ok(await notificationsIcon.isDisplayed(), "Notifications icon should be visible");
assert.ok(await profileIcon.isDisplayed(), "Profile icon should be visible");
assert.ok(await productSwitchIcon.isDisplayed(), "Product switch should be visible");
});

it("tests M Breakpoint 870px", async () => {
await browser.setWindowSize(810, 1680);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);

const assistant = await browser.$("#shellbar ui5-toggle-button[slot='assistant'");
const shellbar = await browser.$("#shellbar");
const backButton = await browser.$("#shellbar ui5-button[slot='startButton'");
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
const searchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
const notificationsIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-bell-button");
const profileIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
const productSwitchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");

assert.ok(await assistant.isDisplayed(), "assistant is visible");
assert.strictEqual(await shellbar.getProperty("breakpointSize"), "M", "M Breakpoint class should be set");
assert.ok(await backButton.isDisplayed(), "Back icon is visible");
assert.ok(await primaryTitle.isDisplayed(), "Primary title should be visible");
assert.ok(await searchIcon.isDisplayed(), "Search icon should be visible");
assert.ok(await notificationsIcon.isDisplayed(), "Notifications icon should be visible");
assert.ok(await profileIcon.isDisplayed(), "Profile icon should be visible");
assert.ok(await productSwitchIcon.isDisplayed(), "Product switch should be visible");
});

it("tests M Breakpoint 780px", async () => {
await browser.setWindowSize(780, 1680);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);

const shellbar = await browser.$("#shellbar");

assert.strictEqual(await shellbar.getProperty("breakpointSize"), "M", "M Breakpoint class should be set");
});

it("tests M Breakpoint 710px", async () => {
await browser.setWindowSize(710, 1680);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);

const shellbar = await browser.$("#shellbar");

assert.strictEqual(await shellbar.getProperty("breakpointSize"), "M", "M Breakpoint class should be set");
});

it("tests M Breakpoint and overflow 570px", async () => {
await browser.setWindowSize(570, 1080);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const searchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");

assert.ok(await searchIcon.isDisplayed(), "Search should be visible");
assert.ok(await overflowButton.isDisplayed(), "Overflow should be visible");
});

it("tests S Breakpoint and overflow 510px", async () => {
await browser.setWindowSize(510, 1680);

await browser.pause(HANDLE_RESIZE_DEBOUNCE_RATE_WAIT);

const assistant = await browser.$("[slot='assistant']");
const shellbar = await browser.$("#shellbar");
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const backButton = await browser.$("#shellbar ui5-button[slot='startButton'");
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button-title");
const secondaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-secondary-title");
const searchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
const notificationsIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-bell-button");
const profileIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
const productSwitchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");
const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
const listItemsCount = (await overflowPopover.getHTML()).split("</ui5-li>").length - 1;

assert.ok(await assistant.isDisplayed(), "assistant is visible");
assert.strictEqual(await shellbar.getProperty("breakpointSize"), "S", "S Breakpoint class should be set");
assert.ok(await overflowButton.isDisplayed(), "Overflow button should be visible");
assert.ok(await backButton.isDisplayed(), "Back icon is visible");
assert.notOk(await primaryTitle.isDisplayed(), "Primary title should be hidden");
assert.notOk(await secondaryTitle.isDisplayed(), "Secondary title should be hidden");
assert.ok(await searchIcon.isDisplayed(), "Search icon should be visible");
assert.ok(await notificationsIcon.isDisplayed(), "Notifications icon should be hidden");
assert.ok(await profileIcon.isDisplayed(), "Profile icon should be visible");
assert.ok(await productSwitchIcon.isDisplayed(), "Product switch should be hidden");
assert.strictEqual(listItemsCount, 2, "2 actions should overflow");
});
});

describe("Events", () => {

describe("Big screen", () => {
Expand Down

0 comments on commit 9214373

Please sign in to comment.