Skip to content

chore(ui5-toast): migrate tests to cypress #11787

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

chore(ui5-toast): migrate tests to cypress #11787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f2196c2
chore(ui5-toast): migrate tests to cypress
StefanDimitrov04 Jun 24, 2025
6875412
chore(ui5-toast): resolve comments
StefanDimitrov04 Jun 24, 2025
9c281e6
chore(ui5-toast): resolve comments
StefanDimitrov04 Jun 25, 2025
ab390b8
chore(ui5-toast): delete wdio spec
StefanDimitrov04 Jun 25, 2025
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
243 changes: 221 additions & 22 deletions packages/main/cypress/specs/Toast.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,221 @@ import ListItemStandard from "../../src/ListItemStandard.js";
import ResponsivePopover from "../../src/ResponsivePopover.js";
import Button from "../../src/Button.js";

describe("Toast general interaction", () => {
beforeEach(() => {
cy.mount(
<>
<Toast id="wcToastME" placement="MiddleEnd">MiddleEnd</Toast>
</>
);
});

it("tests open attribute before show", () => {
cy.get("[ui5-toast]")
.should("not.have.attr", "open");
});

it("tests open property and attribute after show", () => {

cy.get("[ui5-toast]")
.should("not.be.visible");

cy.get("[ui5-toast]")
.invoke("prop", "open", true);

cy.get("[ui5-toast]")
.should("be.visible");

cy.get("[ui5-toast]")
.should("have.attr", "open");
});

it("tests placement property", () => {
cy.get("[ui5-toast]")
.invoke("prop", "open", true);

cy.get("[ui5-toast]")
.should("be.visible")
.and("have.attr", "placement", "MiddleEnd")
.should(($el) => {
const rect = $el[0].getBoundingClientRect();

expect(rect.top + rect.height / 2).to.be.closeTo(window.innerHeight / 2, 20);
expect(window.innerWidth - (rect.left + rect.width)).to.be.lessThan(50);
});
});

it("tests shadow content div role", () => {
cy.get("[ui5-toast]")
.invoke("prop", "open", true);

cy.get("[ui5-toast]")
.shadow()
.find(".ui5-toast-root")
.should("have.attr", "role", "alert");
});

it("tests shadow content div inline styles with default duration", () => {
const EXPECTED_STYLES = "transition-duration: 1000ms; transition-delay: 2000ms; opacity: 0;";
cy.get("[ui5-toast]")
.invoke("prop", "open", true);

cy.get("[ui5-toast]")
.should("have.attr", "style", EXPECTED_STYLES);
});

it("tests shadow content div inline styles with long duration", () => {
const maximumAllowedTransition = 1000;
const duration = 10000;
const calculatedDelay = `${duration - maximumAllowedTransition}ms`;
const EXPECTED_STYLES = `transition-duration: ${maximumAllowedTransition}ms; transition-delay: ${calculatedDelay}; opacity: 0;`;

cy.get("[ui5-toast]")
.invoke("attr", "duration", duration.toString())
.invoke("prop", "open", true)
.should("have.attr", "style", EXPECTED_STYLES);
});

it("tests shadow content div inline styles with short duration", () => {
const duration = 1500;
const calculatedTransition = duration / 3;
const calculatedDelay = `${duration - calculatedTransition}ms`;
const EXPECTED_STYLES = `transition-duration: ${calculatedTransition}ms; transition-delay: ${calculatedDelay}; opacity: 0;`;

cy.get("[ui5-toast]")
.invoke("attr", "duration", duration.toString())
.invoke("prop", "open", true)
.should("have.attr", "style", EXPECTED_STYLES);
});

it("tests closing of toast", () => {
cy.get("[ui5-toast]")
.invoke("prop", "open", true);

cy.get("[ui5-toast]")
.and("be.visible");

cy.get("[ui5-toast]")
.should("have.attr", "open");

//waiting the duration of the toast
cy.get("[ui5-toast]", {timeout: 3000});

cy.get("[ui5-toast]")
.should("not.be.visible");

cy.get("[ui5-toast]")
.should("not.have.attr", "open");
});

it("tests minimum allowed duration", () => {
cy.get("[ui5-toast]")
.invoke("attr", "duration", "-1")
.should("have.prop", "effectiveDuration", 500);
});
});

describe("Keyboard handling", () => {
beforeEach(() => {
cy.mount(
<>
<Button id="wcBtnShowToastME">Show MiddleEnd Toast</Button>
<Toast id="wcToastME" placement="MiddleEnd">MiddleEnd</Toast>
</>
);
});

it("toast should be closed on pressing esc key", async () => {
cy.get("[ui5-button]")
.realClick();

cy.get("[ui5-toast]")
.invoke("prop", "open", true);

cy.get("[ui5-toast]")
.should("be.visible");

cy.get("[ui5-toast]")
.should("have.attr", "open");

cy.realPress(["Control", "Shift", "m"]);

cy.get("[ui5-toast]")
.should("be.focused");

cy.get("[ui5-toast]")
.realPress("Escape");

// //waiting the duration of the toast
cy.get("[ui5-toast]", {timeout: 3000});

cy.get("[ui5-toast]")
.should("not.have.attr", "open");
});

it("Opens two toasts in a row and focuses the last open", async () => {
cy.mount(
<>
<Button id="wcBtnShowToastTS">Show Toast TS</Button>
<Toast id="wcToastTS" placement="TopStart">TopStart</Toast>

<Button id="wcBtnShowToastTC">Show Toast TC</Button>
<Toast id="wcToastTC" placement="TopCenter">TopCenter</Toast>
</>
);

cy.get("#wcToastTS")
.invoke("prop", "open", true);

cy.get("#wcToastTC")
.invoke("prop", "open", true);

cy.realPress(["Control", "Shift", "m"]);

//waiting the duration of the toast
cy.get("[ui5-toast]", {timeout: 3000});

cy.get("#wcToastTC")
.should("be.visible");

cy.get("#wcToastTC")
.should("have.attr", "open");

cy.get("#wcToastTS")
.should("not.be.visible");

cy.get("#wcToastTS")
.should("not.have.attr", "open");
});
});

describe("Customization", () => {
it("should check sizes to the toast", () => {
cy.mount(
<>
<Toast id="wcToastStyled" duration={100000} style={{ width: "300px", height: "64px", maxWidth: "300px" }} placement="BottomCenter">
<div tabindex={-1}>
<span>Styled Toast</span>
<div class="actions">
<Button design="Transparent">UNDO</Button>
<Button design="Transparent">DISMISS</Button>
</div>
</div>
</Toast>
</>
);

cy.get("[ui5-toast]")
.invoke("prop", "open", true);

cy.get("[ui5-toast]").should(($toast) => {
const rect = $toast[0].getBoundingClientRect();
expect(Math.round(rect.width)).to.equal(300);
expect(Math.round(rect.height)).to.equal(64);
});
});
});

describe("Toast - test popover API", () => {
it("Should verify the toast has the popover attribute set to manual", () => {
cy.mount(
Expand Down Expand Up @@ -62,33 +277,17 @@ describe("Toast - test popover API", () => {
popover[0].addEventListener("close", cy.stub().as("popoverClose"));
});

cy.get("#openResponsivePopoverBtn").then($button => {
$button[0].addEventListener("click", () => {
cy.get("[ui5-responsive-popover]").then($popover => {
const popover = $popover[0] as ResponsivePopover;
popover.setAttribute("open", "true");
});
});
});

cy.get("#openToastBtn").then($button => {
$button[0].addEventListener("click", () => {
cy.get("[ui5-toast]").then($toast => {
const toast = $toast[0] as Toast;
toast.setAttribute("open", "true");
});
});
});

cy.get("[ui5-toast]").should("exist").then(($toast) => {
$toast[0].addEventListener("close", cy.stub().as("toastClose"));
});

cy.get("#openResponsivePopoverBtn")
.realClick();
cy.get("#responsivePopover")
.invoke("prop", "open", true);

cy.get("#openToastBtn")
.realClick();
cy.get("#toast")
.invoke("prop", "open", true);

cy.get("#toast", {timeout: 500});

cy.get("@toastClose")
.should("be.calledOnce");
Expand Down
7 changes: 3 additions & 4 deletions packages/main/src/ToastTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import type Toast from "./Toast.js";
export default function ToastTemplate(this: Toast) {
return <>
{
this.open &&
<div class="ui5-toast-root" role="alert" tabindex={this._tabindex}>
<bdi><slot></slot></bdi>
</div>
<div class="ui5-toast-root" role="alert" tabindex={this._tabindex}>
<bdi><slot></slot></bdi>
</div>
}
</>;
}
Loading
Loading