From: Jeremy Thomas Date: Sat, 6 Nov 2021 00:14:35 +0000 (+0000) Subject: Add navbar specs X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8e9f79860d3b28c743a934f313796e84fcce91ef;p=thirdparty%2Fbulma.git Add navbar specs --- diff --git a/docs/cyp/components/navbar.html b/docs/cyp/components/navbar.html new file mode 100644 index 000000000..6a39783d5 --- /dev/null +++ b/docs/cyp/components/navbar.html @@ -0,0 +1,168 @@ +--- +layout: cypress +title: Components/Navbar +--- + +{% capture content %} +
+ + + + + + + + + +
+ +
+
+ + Home + + + + Documentation + + +
+ + More + + +
+ + About + + + Jobs + + + Contact + +
+ + Report an issue + +
+
+
+ +
+
+
+ + Sign up + + + Log in + +
+
+
+
+{% endcapture %} + + + + + + + + + + + +{% for color in site.data.colors.justColors %} + +{% endfor %} diff --git a/docs/cypress/integration/components/navbar.spec.js b/docs/cypress/integration/components/navbar.spec.js new file mode 100644 index 000000000..477d51154 --- /dev/null +++ b/docs/cypress/integration/components/navbar.spec.js @@ -0,0 +1,261 @@ +describe("Components/Navbar", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/components/navbar/"); + }); + + it("has a Navbar", () => { + cy.get(".navbar").should("exist"); + }); + + it("has a correct Navbar", () => { + cy.get("#navbar").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white")); + expect(cs.minHeight).to.equal("52px"); + expect(cs.position).to.equal("relative"); + expect(cs.zIndex).to.equal("30"); + }); + }); + + it(`has correct color Navbars`, () => { + for (let i = 0; i < Cypress.env("color-names").length; i++) { + const name = Cypress.env("color-names")[i]; + const baseColor = Cypress.env(name); + const invertColor = Cypress.env(`${name}-invert`); + const lightColor = Cypress.env(`${name}-light`); + const darkColor = Cypress.env(`${name}-dark`); + + cy.get(`#navbar-${name}`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(baseColor); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#navbar-${name} .navbar-burger`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.color).to.equal(invertColor); + }); + } + }); + + it("has a correct Navbar Shadow", () => { + cy.get("#navbar-has-shadow").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.boxShadow).to.equal( + `${Cypress.env("white-ter")} 0px 2px 0px 0px` + ); + }); + }); + + it("has correct fixed Navbar", () => { + cy.get("#navbar-is-fixed-top").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.position).to.equal("fixed"); + expect(cs.top).to.equal("0px"); + expect(cs.zIndex).to.equal("30"); + }); + + cy.get("#navbar-is-fixed-bottom").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.bottom).to.equal("0px"); + expect(cs.position).to.equal("fixed"); + expect(cs.zIndex).to.equal("30"); + }); + }); + + it("has a correct Navbar Item", () => { + cy.get("#navbar .navbar-start .navbar-item").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.color).to.equal(Cypress.env("text")); + expect(cs.flexGrow).to.equal("0"); + expect(cs.flexShrink).to.equal("0"); + expect(cs.lineHeight).to.equal("24px"); + expect(cs.padding).to.equal("8px 12px"); + }); + + cy.get("#navbar .navbar-start .navbar-item.has-dropdown").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.padding).to.equal("0px"); + }); + }); + + it("has a correct Navbar Link", () => { + cy.get("#navbar .navbar-link").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.paddingRight).to.equal("40px"); + }); + }); + + it("has a correct Navbar Drodpown", () => { + cy.get("#navbar .navbar-dropdown").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.fontSize).to.equal("14px"); + expect(cs.paddingBottom).to.equal("8px"); + expect(cs.paddingTop).to.equal("8px"); + }); + + cy.get("#navbar .navbar-dropdown .navbar-item").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.paddingLeft).to.equal("24px"); + expect(cs.paddingRight).to.equal("24px"); + }); + }); + + it("has a correct Navbar Divider", () => { + cy.get("#navbar .navbar-divider").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white-ter")); + expect(cs.height).to.equal("2px"); + expect(cs.margin).to.equal("8px 0px"); + }); + }); + + it("has a correct Navbar Brand", () => { + cy.get("#navbar .navbar-brand").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.alignItems).to.equal("stretch"); + expect(cs.display).to.equal("flex"); + expect(cs.flexShrink).to.equal("0"); + expect(cs.minHeight).to.equal("52px"); + }); + }); +}); + +// Mobile +describe("Components/NavbarMobile", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/components/navbar/"); + cy.viewport( + Cypress.env("viewports").mobile[0], + Cypress.env("viewports").mobile[1] + ); + }); + + it("has a Navbar", () => { + cy.get(".navbar").should("exist"); + }); + + it("has a correct Navbar Container", () => { + cy.get("#navbar-container > .container").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("block"); + }); + }); + + it("has a correct Navbar Item", () => { + cy.get("#navbar .navbar-start .navbar-item").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("block"); + }); + }); + + it("has a correct active Navbar Item", () => { + cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white-bis")); + }); + }); + + it("has a correct Navbar Burger", () => { + cy.get("#navbar .navbar-burger").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.appearance).to.equal("none"); + }); + }); + + it("has a correct Navbar Menu", () => { + cy.get("#navbar .navbar-menu").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("none"); + }); + }); + + it("has a correct Navbar Divider", () => { + cy.get("#navbar .navbar-divider").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("none"); + }); + }); +}); + +// Desktop +describe("Components/NavbarDesktop", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/components/navbar/"); + cy.viewport( + Cypress.env("viewports").desktop[0], + Cypress.env("viewports").desktop[1] + ); + }); + + it("has a Navbar", () => { + cy.get(".navbar").should("exist"); + }); + + it("has a correct Navbar Container", () => { + cy.get("#navbar-container > .container").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + }); + }); + + it("has a correct Navbar Item", () => { + cy.get("#navbar .navbar-start .navbar-item").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + }); + }); + + it("has a correct active Navbar Item", () => { + cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("transparent")); + }); + }); + + it("has a correct Navbar Burger", () => { + cy.get("#navbar .navbar-burger").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.appearance).to.equal("none"); + expect(cs.display).to.equal("none"); + expect(cs.margin).to.equal("0px 0px 0px auto"); + }); + }); + + it("has a correct Navbar Menu", () => { + cy.get("#navbar .navbar-menu").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + }); + }); + + it("has a correct Navbar Divider", () => { + cy.get("#navbar .navbar-divider").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("block"); + }); + }); + + it(`has correct color Navbars`, () => { + for (let i = 0; i < Cypress.env("color-names").length; i++) { + const name = Cypress.env("color-names")[i]; + const baseColor = Cypress.env(name); + const invertColor = Cypress.env(`${name}-invert`); + const lightColor = Cypress.env(`${name}-light`); + const darkColor = Cypress.env(`${name}-dark`); + + cy.get(`#navbar-${name} .navbar-link`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#navbar-${name} .navbar-dropdown a.navbar-item.is-active`).then( + ($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(baseColor); + expect(cs.color).to.equal(invertColor); + } + ); + } + }); +});