Skip to content

Commit eb09843

Browse files
severinoAmmiratiseverinoAmmirati
authored
Added PanelSidebar cypress test (#33)
- Added several PanelSidebar cypress tests - Toggle PanelSidebar on any screen size - Added DateHandler HH replace test
1 parent b4758f2 commit eb09843

3 files changed

Lines changed: 153 additions & 1 deletion

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
### Added
11+
12+
- PanelSidebar cypress test and toggle it on any screen size
13+
1014
### Removed
1115

1216
- `DateHandler` utils as it belongs to another package and will be replaced in the future

‎cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import React from "react";
2+
import {PanelSideBarLayoutProvider, PanelSideBarProvider, PanelSideBarLayout, PanelItem, PanelLinkRendererProps} from "react-pattern-ui";
3+
import { faBars, faCogs } from "@fortawesome/free-solid-svg-icons";
4+
5+
type CustomPanelItem<TLocalPanelIds = ""> = {
6+
id: "home" | "settings" | TLocalPanelIds;
7+
};
8+
9+
type TSideBarMenuItem<TLocalPanelIds = ""> = PanelItem<CustomPanelItem<TLocalPanelIds>>;
10+
11+
const PanelSidebar = (items: TSideBarMenuItem[]) => (<PanelSideBarLayoutProvider>
12+
<PanelSideBarProvider
13+
globalItems={items}
14+
LinkRenderer={(elem: PanelLinkRendererProps<Record<string, unknown>>) => (
15+
<div id={elem.item.id}
16+
onClick={() => {
17+
const pageContent = document.getElementById("pageContent");
18+
if (pageContent) {
19+
pageContent.innerText = elem.item.id;
20+
}
21+
}}>
22+
<>{elem.item.title}</>
23+
</div>
24+
)}>
25+
<PanelSideBarLayout>
26+
<div id="pageContent">Cypress</div>
27+
</PanelSideBarLayout>
28+
</PanelSideBarProvider>
29+
</PanelSideBarLayoutProvider>)
30+
31+
const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem[] => [
32+
{
33+
id: "home",
34+
title: "Home",
35+
icon: faBars,
36+
disabled,
37+
items: [
38+
{
39+
title: "Home",
40+
id: "home",
41+
active,
42+
},
43+
],
44+
},
45+
{
46+
id: "settings",
47+
title: "Settings",
48+
icon: faCogs,
49+
disabled,
50+
items: [
51+
{
52+
title: "Settings",
53+
id: "settings",
54+
},
55+
{
56+
title: "Dropdown",
57+
id: "dropdownTest",
58+
children: [
59+
{
60+
title: "Dropdown test 1",
61+
id: "dropdown-test1",
62+
},
63+
{
64+
title: "Dropdown test 2",
65+
id: "dropdown-test2",
66+
active,
67+
}
68+
]
69+
}
70+
],
71+
},
72+
];
73+
74+
describe("PanelSidebar.cy.tsx", () => {
75+
76+
it("icon and titles rendered correctly", () => {
77+
const sidebarItems = getSidebarItems();
78+
cy.mount(PanelSidebar(sidebarItems));
79+
80+
// Check if icon are rendered
81+
cy.get('[data-icon="bars"]').should("be.visible");
82+
cy.get('[data-icon="gears"]').should("be.visible");
83+
84+
// Check if is titles are rendered
85+
cy.get("#home").invoke("text").should("equal", "Home");
86+
cy.get("button[title=Settings]").click();
87+
cy.get("#settings").invoke("text").should("equal", "Settings");
88+
});
89+
90+
it("flat menu entry", () => {
91+
const sidebarItems = getSidebarItems();
92+
cy.mount(PanelSidebar(sidebarItems));
93+
94+
// Check page content changes
95+
cy.get("#home").click();
96+
cy.get("#pageContent").invoke("text").should("equal", "home");
97+
cy.get("button[title=Settings]").click();
98+
cy.get("#settings").click();
99+
cy.get("#pageContent").invoke("text").should("equal", "settings");
100+
});
101+
102+
it("nested menu entries", () => {
103+
const sidebarItems = getSidebarItems();
104+
cy.mount(PanelSidebar(sidebarItems));
105+
106+
// Check page content changes
107+
cy.get("button[title=Settings]").click();
108+
cy.get("#settings").click();
109+
cy.get(".dropdown-toggle").click();
110+
cy.get("#dropdown-test1").click();
111+
cy.get("#pageContent").invoke("text").should("equal", "dropdown-test1");
112+
cy.get("#dropdown-test2").click();
113+
cy.get("#pageContent").invoke("text").should("equal", "dropdown-test2");
114+
});
115+
116+
it("disabled entries", () => {
117+
const sidebarItems = getSidebarItems(false, true);
118+
cy.mount(PanelSidebar(sidebarItems));
119+
120+
// Check are disabled and page content not doesn't change
121+
cy.get("button[title=Home]").should("have.attr", "disabled");
122+
cy.get("button[title=Home]").click({ force: true });
123+
cy.get("#pageContent").invoke("text").should("equal", "Cypress");
124+
cy.get("button[title=Settings]").should("have.attr", "disabled");
125+
cy.get("button[title=Settings]").click({ force: true })
126+
cy.get("#pageContent").invoke("text").should("equal", "Cypress");
127+
});
128+
129+
it("toggle sidebar", () => {
130+
const sidebarItems = getSidebarItems();
131+
cy.mount(PanelSidebar(sidebarItems));
132+
133+
// Check toggle sidebar
134+
cy.get('[data-icon="angle-left"]').should("be.visible");
135+
cy.get("#side-nav-toggle").click();
136+
cy.get('[data-icon="angle-right"]').should("be.visible");
137+
cy.get(".toggled").should("exist");
138+
cy.get(".side-nav__items").should("not.be.visible")
139+
});
140+
141+
it("selected flat entry", () => {
142+
const sidebarItems = getSidebarItems(true);
143+
cy.mount(PanelSidebar(sidebarItems));
144+
145+
// Check active entries
146+
cy.get("#home").parent("li").should("have.class", "active");
147+
});
148+
});

‎styles/Layout/PanelSideBarLayout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ section.content:first-of-type {
246246
}
247247
}
248248

249-
@include media-breakpoint-up(md) {
249+
@include media-breakpoint-up(xs) {
250250
$toggled-width: #{$tile-size + $slim-scrollbar-base-width};
251251

252252
section.toggled {

0 commit comments

Comments
 (0)