From 19fdd141a1c75ed40e5b02702ef6ea6ea2cfb7d6 Mon Sep 17 00:00:00 2001 From: SeverinoAmmirati Date: Mon, 28 Aug 2023 14:36:52 +0200 Subject: [PATCH 1/3] Added PanelSidebar cypress test and improved DateHandler test --- .../PanelSidebar/PanelSidebar.cy.tsx | 144 ++++++++++++++++++ .../component/Utils/DateHandler.cy.tsx | 1 + styles/Layout/PanelSideBarLayout.scss | 2 +- 3 files changed, 146 insertions(+), 1 deletion(-) create mode 100644 cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx diff --git a/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx b/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx new file mode 100644 index 0000000..f18e019 --- /dev/null +++ b/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx @@ -0,0 +1,144 @@ +import React from "react"; +import {PanelSideBarLayoutProvider, PanelSideBarProvider, PanelSideBarLayout, PanelItem, PanelLinkRendererProps} from "react-pattern-ui"; +import { faBars, faCogs } from "@fortawesome/free-solid-svg-icons"; + +type CustomPanelItem = { + id: "home" | "settings" | TLocalPanelIds; +}; + +type TSideBarMenuItem = PanelItem>; + +const PanelSidebar = (items: TSideBarMenuItem[]) => ( + >) => ( +
{ + const pageContent = document.getElementById("pageContent"); + if (pageContent) { + pageContent.innerText = elem.item.id; + } + }}> + <>{elem.item.title} +
+ )}> + +
Cypress
+ + + ) + +const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem[] => [ + { + id: "home", + title: "Home", + icon: faBars, + disabled, + items: [ + { + title: "Home", + id: "home", + active, + }, + ], + }, + { + id: "settings", + title: "Settings", + icon: faCogs, + disabled, + items: [ + { + title: "Settings", + id: "settings", + }, + { + title: "Dropdown", + id: "dropdownTest", + children: [ + { + title: "Dropdown test 1", + id: "dropdown-test1", + }, + { + title: "Dropdown test 2", + id: "dropdown-test2", + active, + } + ] + } + ], + }, +]; + +describe("PanelSidebar.cy.tsx", () => { + it("icon and titles rendered correctly", () => { + const sidebarItems = getSidebarItems(); + cy.mount(PanelSidebar(sidebarItems)); + + // Check if icon are rendered + cy.get('[data-icon="bars"]').should("be.visible"); + cy.get('[data-icon="gears"]').should("be.visible"); + + // Check if is titles are rendered + cy.get("#home").invoke("text").should("equal", "Home"); + cy.get("button[title=Settings]").click(); + cy.get("#settings").invoke("text").should("equal", "Settings"); + }); + + it("flat menu entry", () => { + const sidebarItems = getSidebarItems(); + cy.mount(PanelSidebar(sidebarItems)); + + // Check page content changes + cy.get("#home").click(); + cy.get("#pageContent").invoke("text").should("equal", "home"); + cy.get("button[title=Settings]").click(); + cy.get("#settings").click(); + cy.get("#pageContent").invoke("text").should("equal", "settings"); + }); + + it("nested menu entries", () => { + const sidebarItems = getSidebarItems(); + cy.mount(PanelSidebar(sidebarItems)); + + // Check page content changes + cy.get("button[title=Settings]").click(); + cy.get("#settings").click(); + cy.get(".dropdown-toggle").click(); + cy.get("#dropdown-test1").click(); + cy.get("#pageContent").invoke("text").should("equal", "dropdown-test1"); + cy.get("#dropdown-test2").click(); + cy.get("#pageContent").invoke("text").should("equal", "dropdown-test2"); + }); + + it("disabled entries", () => { + const sidebarItems = getSidebarItems(false, true); + cy.mount(PanelSidebar(sidebarItems)); + + // Check are disabled and page content not doesn't change + cy.get("button[title=Home]").should("have.attr", "disabled"); + cy.get("button[title=Settings]").should("have.attr", "disabled"); + cy.get("#pageContent").invoke("text").should("equal", "Cypress"); + }); + + it("toggle sidebar", () => { + const sidebarItems = getSidebarItems(); + cy.mount(PanelSidebar(sidebarItems)); + + // Check toggle sidebar + cy.get('[data-icon="angle-left"]').should("be.visible"); + cy.get("#side-nav-toggle").click(); + cy.get('[data-icon="angle-right"]').should("be.visible"); + cy.get(".toggled").should("exist"); + cy.get(".side-nav__items").should("not.be.visible") + }); + + it("selected flat entry", () => { + const sidebarItems = getSidebarItems(true); + cy.mount(PanelSidebar(sidebarItems)); + + // Check active entries + cy.get("#home").parent("li").should("have.class", "active"); + }); +}); diff --git a/cypress/cypress/component/Utils/DateHandler.cy.tsx b/cypress/cypress/component/Utils/DateHandler.cy.tsx index 528ef45..ea348c4 100644 --- a/cypress/cypress/component/Utils/DateHandler.cy.tsx +++ b/cypress/cypress/component/Utils/DateHandler.cy.tsx @@ -9,6 +9,7 @@ describe("DateHandler.cy.tsx", () => { it("get date string formated", async () => { DateHandler.setMonthTranslationMethod((month) => (month === 11 ? "November" : month.toString())); expect(DateHandler.getDateFormatted(new Date(2022, 10, 15, 12, 33), "dd MMMM yyyy hh:mm")).to.eq("15 November 2022 12:33"); + expect(DateHandler.getDateFormatted(new Date(2022, 10, 15, 12, 22), "dd MMMM yyyy HH:mm")).to.eq("15 November 2022 12:22"); }); it("get date string default", async () => { diff --git a/styles/Layout/PanelSideBarLayout.scss b/styles/Layout/PanelSideBarLayout.scss index e408ffd..9d8e459 100644 --- a/styles/Layout/PanelSideBarLayout.scss +++ b/styles/Layout/PanelSideBarLayout.scss @@ -246,7 +246,7 @@ section.content:first-of-type { } } -@include media-breakpoint-up(md) { +@include media-breakpoint-up(xs) { $toggled-width: #{$tile-size + $slim-scrollbar-base-width}; section.toggled { From 84144072fa577ee14c5d238e63fb6b114cd6402d Mon Sep 17 00:00:00 2001 From: SeverinoAmmirati Date: Mon, 28 Aug 2023 14:40:51 +0200 Subject: [PATCH 2/3] updated changelog --- CHANGELOG.md | 4 ++++ cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3eab2e..f4e0735 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Added + +- PanelSidebar cypress test and toggle it on any screen size + ### Fixed - Fixed PanelSideBarLayout topBarCustomItems displaying diff --git a/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx b/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx index f18e019..491d111 100644 --- a/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx +++ b/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx @@ -72,6 +72,7 @@ const getSidebarItems = (active?: boolean, disabled?: boolean): TSideBarMenuItem ]; describe("PanelSidebar.cy.tsx", () => { + it("icon and titles rendered correctly", () => { const sidebarItems = getSidebarItems(); cy.mount(PanelSidebar(sidebarItems)); From 646d41e51cf38a5a4fe6a66c9dabbe5931118630 Mon Sep 17 00:00:00 2001 From: SeverinoAmmirati Date: Fri, 15 Sep 2023 11:51:01 +0200 Subject: [PATCH 3/3] Fix pr feedbacks --- cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx b/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx index 491d111..a7a1657 100644 --- a/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx +++ b/cypress/cypress/component/PanelSidebar/PanelSidebar.cy.tsx @@ -119,7 +119,10 @@ describe("PanelSidebar.cy.tsx", () => { // Check are disabled and page content not doesn't change cy.get("button[title=Home]").should("have.attr", "disabled"); + cy.get("button[title=Home]").click({ force: true }); + cy.get("#pageContent").invoke("text").should("equal", "Cypress"); cy.get("button[title=Settings]").should("have.attr", "disabled"); + cy.get("button[title=Settings]").click({ force: true }) cy.get("#pageContent").invoke("text").should("equal", "Cypress"); });