Skip to content

Commit c06128c

Browse files
GDamyanovGDamyanov
authored
test(ui5-switch): migrate tests to Cypress
migrate tests from Switch.spec.ts to Cypress
1 parent 727a7f3 commit c06128c

File tree

4 files changed

+135
-90
lines changed

4 files changed

+135
-90
lines changed

‎packages/main/cypress/specs/Switch.cy.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import Button from "../../src/Button.js";
2+
import Label from "../../src/Label.js";
3+
import Switch from "../../src/Switch.js";
4+
5+
describe("General events interactions", () => {
6+
it("Should fire change event", () => {
7+
cy.mount(<Switch onChange={cy.stub().as("changed")}>Click me</Switch>);
8+
9+
cy.get("[ui5-switch]")
10+
.as("switch")
11+
12+
cy.get("@switch")
13+
.realClick();
14+
15+
cy.get("@changed")
16+
.should("have.been.calledOnce");
17+
18+
cy.get("@switch")
19+
.should("have.attr", "checked");
20+
});
21+
22+
it("Should not change checked property", () => {
23+
cy.mount(<Switch>Click me</Switch>);
24+
25+
cy.get("[ui5-switch]")
26+
.as("switch")
27+
.then($switch => {
28+
$switch.get(0).addEventListener("ui5-change", (e) => e.preventDefault());
29+
$switch.get(0).addEventListener("ui5-change", cy.stub().as("changed"));
30+
});
31+
32+
cy.get("@switch")
33+
.realClick();
34+
35+
cy.get("@changed")
36+
.should("have.been.calledOnce");
37+
38+
cy.get("@switch")
39+
.should("not.have.attr", "checked");
40+
});
41+
});
42+
43+
describe("General accesibility attributes", () => {
44+
const geoLocationDescr = "Geographical location";
45+
const gpsLocationDescr = "Use GPS location";
46+
47+
it("Should set correct 'accessible-name' attribute on the root", () => {
48+
cy.mount(<Switch accessible-name={geoLocationDescr} text-on="Yes" text-off="No"></Switch>);
49+
50+
cy.get("[ui5-switch]").as("switch")
51+
.ui5SwitchCheckAttributeInShadowDomRoot("role", "switch");
52+
53+
cy.get("@switch")
54+
.ui5SwitchCheckAttributeInShadowDomRoot("aria-label", `${geoLocationDescr} No`);
55+
56+
});
57+
58+
it("Should set correct 'accessible-name-ref' attribute on the root", () => {
59+
cy.mount(
60+
<>
61+
<Label id="descriptionText">{gpsLocationDescr}</Label>
62+
<Switch accessible-name-ref="descriptionText" text-on="Yes" text-off="No"></Switch>
63+
</>
64+
);
65+
66+
cy.get("[ui5-switch]").as("switch")
67+
.ui5SwitchCheckAttributeInShadowDomRoot("role", "switch");
68+
69+
cy.get("@switch")
70+
.ui5SwitchCheckAttributeInShadowDomRoot("aria-label", `${gpsLocationDescr} No`);
71+
});
72+
73+
it("Should set correct correct tooltip on the root", () => {
74+
cy.mount(<Switch tooltip={gpsLocationDescr} text-on="Yes" text-off="No"></Switch>);
75+
76+
cy.get("[ui5-switch]")
77+
.ui5SwitchCheckAttributeInShadowDomRoot("title", gpsLocationDescr);
78+
});
79+
80+
it("Should set correct attribute 'aria-label' when 'text-on' and 'text-off' attributes aren't set", () => {
81+
cy.mount(<Switch></Switch>);
82+
83+
cy.get("[ui5-switch]")
84+
.ui5SwitchCheckAttributeInShadowDomRoot("aria-label", "");
85+
});
86+
87+
it("Should propagate 'required' attribute properly on the root", () => {
88+
cy.mount(<Switch required></Switch>);
89+
90+
cy.get("[ui5-switch]")
91+
.ui5SwitchCheckAttributeInShadowDomRoot("aria-required", "true");
92+
});
93+
94+
it("Should not propagate 'required' attribute on the root", () => {
95+
cy.mount(<Switch></Switch>);
96+
97+
cy.get("[ui5-switch]")
98+
.ui5SwitchCheckAttributeInShadowDomRoot("aria-required", "false");
99+
});
100+
});
101+
102+
describe("General interactions in form", () => {
103+
it("Should submit form only when 'required' switch is checked", () => {
104+
cy.mount(
105+
<form id="switchForm">
106+
<Switch checked></Switch>
107+
<Switch id="requiredTestSwitch" required></Switch>
108+
<Button id="switchSubmit" type="Submit">Submit</Button>
109+
</form>
110+
);
111+
112+
cy.get<HTMLFormElement>("#switchForm").should(($form) => {
113+
expect($form[0].checkValidity()).to.be.false;
114+
});
115+
116+
cy.get("#requiredTestSwitch")
117+
.realClick();
118+
119+
cy.get<HTMLFormElement>("#switchForm").should(($form) => {
120+
expect($form[0].checkValidity()).to.be.true;
121+
});
122+
});
123+
});

‎packages/main/cypress/support/commands.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import "./commands/DatePicker.commands.js";
5353
import "./commands/Menu.commands.js";
5454
import "./commands/SegmentedButton.commands.js";
5555
import "./commands/StepInput.commands.js";
56+
import "./commands/Switch.commands.js";
5657
import "./commands/TabContainer.commands.js";
5758
import "./commands/TimeSelectionClocks.commands.js";
5859
import "./commands/ToggleButton.commands.js";
@@ -92,6 +93,7 @@ declare global {
9293
ui5DatePickerValueHelpIconPress(): Chainable<void>
9394
ui5SegmentedButtonItemToggleSelect(deselect?: boolean): Chainable<void>
9495
ui5SegmentedButtonFocusFirstItem(): Chainable<void>
96+
ui5SwitchCheckAttributeInShadowDomRoot(attrName: string, attrValue: string): Chainable<void>
9597
ui5TabContainerOpenEndOverflow(): Chainable<void>,
9698
ui5TabContainerDragAndDrop(elementToDrag: HTMLElement, placement: `${MovePlacement}`, target: HTMLElement, orientation?: `${Orientation}`): Chainable<void>,
9799
ui5TimeSelectionClocksInnerButton(name: string, index: number): Chainable<JQuery<HTMLElement>>

‎packages/main/cypress/support/commands/Switch.commands.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Switch from "../../../src/Switch.js";
2+
3+
Cypress.Commands.add("ui5SwitchCheckAttributeInShadowDomRoot", { prevSubject: true }, (subject: JQuery<Switch>, attrName: string, attrValue: string) => {
4+
cy.wrap(subject)
5+
.shadow()
6+
.find(".ui5-switch-root")
7+
.should("be.visible")
8+
.invoke("attr", attrName)
9+
.should("eq", attrValue);
10+
});

‎packages/main/test/specs/Switch.spec.js‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

0 commit comments

Comments
 (0)