Skip to content

Commit 985eba7

Browse files
duygu-rmdnduygu-rmdn
authored
chore(ui5-side-navigation): migrate wdio tests to cypress (#11348)
1 parent ba4da91 commit 985eba7

File tree

5 files changed

+135
-312
lines changed

5 files changed

+135
-312
lines changed

‎packages/fiori/cypress/specs/SideNavigation.cy.tsx

Lines changed: 76 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import SideNavigationItem from "../../src/SideNavigationItem.js";
33
import SideNavigationSubItem from "../../src/SideNavigationSubItem.js";
44
import group from "@ui5/webcomponents-icons/dist/group.js";
55
import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT } from "../../src/generated/i18n/i18n-defaults.js";
6+
import Title from "@ui5/webcomponents/dist/Title.js";
7+
import Label from "@ui5/webcomponents/dist/Label.js";
68

79
describe("Side Navigation Rendering", () => {
810
it("Tests rendering in collapsed mode", () => {
@@ -78,6 +80,40 @@ describe("Side Navigation Rendering", () => {
7880
.find(".ui5-sn-root")
7981
.should("have.attr", "aria-label", "Main");
8082
});
83+
84+
it("Tests header visibility", () => {
85+
cy.mount(
86+
<SideNavigation id="sn1" accessibleName="Main" collapsed={false}>
87+
<div slot="header" class="header">
88+
<Title>William Brown</Title>
89+
<Label>UX expert</Label>
90+
</div>
91+
</SideNavigation>);
92+
93+
cy.get("#sn1").should("have.prop", "showHeader", true);
94+
95+
cy.get("#sn1").invoke("prop", "collapsed", true);
96+
97+
cy.get("#sn1").should("have.prop", "showHeader", false);
98+
});
99+
100+
it("Tests tooltips", () => {
101+
const TOOLTIP_TEXT = "From My Team tooltip";
102+
cy.mount(
103+
<SideNavigation id="sn1" accessibleName="Main" collapsed={false}>
104+
<SideNavigationItem id="item1" text="People" icon="group" expanded={true}>
105+
<SideNavigationSubItem id="item11" text="From My Team" icon="employee-approvals" tooltip={TOOLTIP_TEXT}></SideNavigationSubItem>
106+
<SideNavigationSubItem id="item21" text="From My Team" icon="employee-approvals"></SideNavigationSubItem>
107+
</SideNavigationItem>
108+
<SideNavigationItem id="item2" text="People" expanded icon="group" tooltip={TOOLTIP_TEXT} />
109+
</SideNavigation>);
110+
111+
cy.get("#item1").should("not.have.attr", "tooltip");
112+
cy.get("#item2").should("have.attr", "tooltip", TOOLTIP_TEXT);
113+
114+
cy.get("#item11").should("have.attr", "tooltip", TOOLTIP_TEXT);
115+
cy.get("#item21").should("not.have.attr", "tooltip");
116+
});
81117
});
82118

83119
describe("Side Navigation interaction", () => {
@@ -342,7 +378,7 @@ describe("Side Navigation interaction", () => {
342378
cy.mount(
343379
<SideNavigation id="sideNav">
344380
<SideNavigationItem id="item" text="1" />
345-
<SideNavigationItem id="unselectableItemWithLink" text="external link" unselectable={true} href="#test"/>
381+
<SideNavigationItem id="unselectableItemWithLink" text="external link" unselectable={true} href="#test" />
346382
</SideNavigation>
347383
);
348384

@@ -364,7 +400,7 @@ describe("Side Navigation interaction", () => {
364400
cy.mount(
365401
<SideNavigation>
366402
<SideNavigationItem id="focusStart" text="focus start" />
367-
<SideNavigationItem text="external link" unselectable={true} href="#test"/>
403+
<SideNavigationItem text="external link" unselectable={true} href="#test" />
368404
</SideNavigation>
369405
);
370406

@@ -388,7 +424,7 @@ describe("Side Navigation interaction", () => {
388424
cy.mount(
389425
<SideNavigation>
390426
<SideNavigationItem id="focusStart" text="focus start" />
391-
<SideNavigationItem id="linkItem" text="external link" unselectable={true} href="#test"/>
427+
<SideNavigationItem id="linkItem" text="external link" unselectable={true} href="#test" />
392428
</SideNavigation>
393429
);
394430

@@ -503,6 +539,20 @@ describe("Side Navigation interaction", () => {
503539
cy.get("@selectionChangeHandler").should("have.callCount", expectedCallCount);
504540
});
505541
});
542+
543+
it("tests avoiding re-selecting already selected item", () => {
544+
const selectionChangeHandler = cy.stub().as("selectionChangeHandler");
545+
cy.mount(
546+
<SideNavigation id="sideNav" onSelectionChange={selectionChangeHandler}>
547+
<SideNavigationItem id="item" text="1" />
548+
</SideNavigation>
549+
);
550+
551+
cy.get("#item").realClick();
552+
cy.get("#item").realClick();
553+
554+
cy.get("@selectionChangeHandler").should("have.been.calledOnce");
555+
});
506556
});
507557

508558
describe("Side Navigation Accessibility", () => {
@@ -689,7 +739,7 @@ describe("Side Navigation Accessibility", () => {
689739
.should("have.attr", "aria-haspopup", "dialog");
690740
});
691741

692-
it("SideNavigationItem aria-role in collapsed SideNavigation", () => {
742+
it("SideNavigationItem aria attributes in collapsed SideNavigation", () => {
693743
cy.mount(
694744
<SideNavigation id="sideNav" collapsed={true}>
695745
<SideNavigationItem id="item" text="1" />
@@ -707,6 +757,16 @@ describe("Side Navigation Accessibility", () => {
707757
.shadow()
708758
.find(".ui5-sn-item")
709759
.should("have.attr", "role", "menuitem");
760+
761+
cy.get("#sideNav")
762+
.shadow()
763+
.find(".ui5-sn-root")
764+
.should("have.prop", "tagName", "NAV");
765+
766+
cy.get("#sideNav")
767+
.shadow()
768+
.find(".ui5-sn-flexible")
769+
.should("have.attr", "aria-roledescription", "Navigation List Menu Bar");
710770
});
711771

712772
it("SideNavigationItem aria-checked in collapsed SideNavigation", () => {
@@ -827,4 +887,16 @@ describe("Focusable items", () => {
827887
.find(".ui5-sn-item")
828888
.should("have.attr", "tabindex", "0");
829889
});
890+
891+
it("Tests external link items", () => {
892+
cy.mount(
893+
<SideNavigation>
894+
<SideNavigationItem id="externalLinkItem" text="External Link Unselectable" icon="chain-link" href="https://sap.com" unselectable target="_blank" />
895+
</SideNavigation>);
896+
897+
cy.get("#externalLinkItem")
898+
.shadow()
899+
.find(".ui5-sn-item-external-link-icon")
900+
.should("exist");
901+
});
830902
});

‎packages/fiori/cypress/specs/SideNavigationWithGroups.cy.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import SideNavigation from "../../src/SideNavigation.js";
2+
import SideNavigationGroup from "../../src/SideNavigationGroup.js";
3+
import SideNavigationItem from "../../src/SideNavigationItem.js";
4+
5+
describe("Component Behavior", () => {
6+
describe("Main functionality", async () => {
7+
it("rendering", async () => {
8+
cy.mount(
9+
<SideNavigation style="height: 90vh; " id="sn1" collapsed={false}>
10+
<SideNavigationGroup id="group1" expanded text="Group">
11+
<SideNavigationItem text="Home 1"
12+
icon="home"
13+
href="#home"
14+
title="Home tooltip" />
15+
</SideNavigationGroup>
16+
</SideNavigation>);
17+
18+
cy.get("#group1")
19+
.shadow()
20+
.find(".ui5-sn-item")
21+
.should("exist");
22+
23+
cy.get("#sn1").invoke("prop", "collapsed", true);
24+
25+
cy.get("#group1")
26+
.shadow()
27+
.find(".ui5-sn-item")
28+
.should("not.exist");
29+
});
30+
31+
it("collapse/expand", async () => {
32+
cy.mount(
33+
<SideNavigation style="height: 90vh; " id="sn1">
34+
<SideNavigationGroup id="group1" expanded text="Group">
35+
<SideNavigationItem text="Home 1"
36+
icon="home"
37+
href="#home"
38+
title="Home tooltip" />
39+
</SideNavigationGroup>
40+
</SideNavigation>);
41+
42+
cy.get("#group1").should("have.prop", "expanded", true);
43+
44+
cy.get("#group1")
45+
.shadow()
46+
.find(".ui5-sn-item")
47+
.realClick();
48+
cy.get("#group1").should("not.have.prop", "expanded");
49+
50+
cy.get("#group1")
51+
.shadow()
52+
.find(".ui5-sn-item")
53+
.realClick();
54+
cy.get("#group1").should("have.prop", "expanded", true);
55+
});
56+
});
57+
});

‎packages/fiori/test/pages/SideNavigation.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@
4848
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
4949
</ui5-side-navigation-item>
5050
<ui5-side-navigation-item id="externalLinkItem" text="External Link Unselectable" icon="chain-link" href="https://sap.com" unselectable target="_blank"></ui5-side-navigation-item>
51-
<ui5-side-navigation-item id="externalLinkItem" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
51+
<ui5-side-navigation-item id="externalLinkItem2" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
5252

5353
<ui5-side-navigation-item id="item4" text="Home" icon="home" tooltip="Home tooltip">
5454
<ui5-side-navigation-sub-item text="Local" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
5555
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
5656
</ui5-side-navigation-item>
57-
<ui5-side-navigation-item disabled id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
57+
<ui5-side-navigation-item disabled id="item1-disabled" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
5858
<ui5-side-navigation-item text="Home (unselectable)" icon="home" unselectable></ui5-side-navigation-item>
5959
<ui5-side-navigation-item text="Home (unselectable)" icon="home" unselectable>
6060
<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>

0 commit comments

Comments
 (0)