From: Jeremy Thomas Date: Fri, 5 Nov 2021 22:47:51 +0000 (+0000) Subject: Add modal specs X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9aefad35612b2e6c518126337325a461c67bb6c6;p=thirdparty%2Fbulma.git Add modal specs --- diff --git a/docs/cyp/components/message.html b/docs/cyp/components/message.html new file mode 100644 index 000000000..d329bab17 --- /dev/null +++ b/docs/cyp/components/message.html @@ -0,0 +1,46 @@ +--- +layout: cypress +title: Components/Message +--- + +{% capture messageHeader %} +
+

Hello World

+ +
+{% endcapture %} + +{% capture messageBody %} +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. +
+{% endcapture %} + +
+ {{ messageHeader }} + {{ messageBody }} +
+ +
+ {{ messageBody }} +
+ +{% for size in site.data.sizes %} +
+ {{ messageHeader }} + {{ messageBody }} +
+{% endfor %} + +{% for color in site.data.colors.justColors %} +
+
+

{{ color | capitalize }}

+ +
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. +
+
+{% endfor %} diff --git a/docs/cyp/components/modal.html b/docs/cyp/components/modal.html new file mode 100644 index 000000000..fd7dbef2d --- /dev/null +++ b/docs/cyp/components/modal.html @@ -0,0 +1,48 @@ +--- +layout: cypress +title: Components/Modal +--- + + + + + + diff --git a/docs/cypress.json b/docs/cypress.json index 48bdb2cad..5851930e9 100644 --- a/docs/cypress.json +++ b/docs/cypress.json @@ -64,6 +64,7 @@ "text": "rgb(74, 74, 74)", "text-strong": "rgb(54, 54, 54)", "text-light": "rgb(122, 122, 122)", + "text-invert": "rgb(255, 255, 255)", "viewports": { "mobile": [320, 480], diff --git a/docs/cypress/integration/components/message.spec.js b/docs/cypress/integration/components/message.spec.js new file mode 100644 index 000000000..78b70ce01 --- /dev/null +++ b/docs/cypress/integration/components/message.spec.js @@ -0,0 +1,74 @@ +describe("Components/Message", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/components/message/"); + }); + + it("has a Message", () => { + cy.get(".message").should("exist"); + }); + + it("has a correct Message", () => { + cy.get("#message").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white-ter")); + expect(cs.borderRadius).to.equal("4px"); + expect(cs.fontSize).to.equal("16px"); + }); + }); + + it(`has a correct Message Header`, () => { + cy.get("#message .message-header").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("text")); + expect(cs.color).to.equal(Cypress.env("text-invert")); + expect(cs.display).to.equal("flex"); + expect(cs.fontWeight).to.equal("700"); + expect(cs.padding).to.equal("12px 16px"); + }); + }); + + it(`has a correct Message Body`, () => { + cy.get("#message-no-header .message-body").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderColor).to.equal(Cypress.env("border")); + expect(cs.borderRadius).to.equal("4px"); + expect(cs.borderWidth).to.equal("0px 0px 0px 4px"); + expect(cs.color).to.equal(Cypress.env("text")); + expect(cs.padding).to.equal("20px 24px"); + }); + + cy.get("#message .message-body").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderTopLeftRadius).to.equal("0px"); + expect(cs.borderTopRightRadius).to.equal("0px"); + expect(cs.borderWidth).to.equal("0px"); + }); + }); + + it(`has correct color Messages`, () => { + 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(`#message-${name}`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(lightColor); + }); + + cy.get(`#message-${name} .message-header`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(baseColor); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#message-${name} .message-body`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderColor).to.equal(baseColor); + expect(cs.color).to.equal(darkColor); + }); + } + }); +}); diff --git a/docs/cypress/integration/components/modal.spec.js b/docs/cypress/integration/components/modal.spec.js new file mode 100644 index 000000000..f9d82cfac --- /dev/null +++ b/docs/cypress/integration/components/modal.spec.js @@ -0,0 +1,95 @@ +describe("Components/Modal", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/components/modal/"); + }); + + it("has a Modal", () => { + cy.get(".modal").should("exist"); + }); + + it("has a correct Modal", () => { + cy.get("#modal").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("none"); + expect(cs.flexDirection).to.equal("column"); + expect(cs.overflow).to.equal("hidden"); + expect(cs.position).to.equal("fixed"); + expect(cs.zIndex).to.equal("40"); + }); + + cy.get("#modal-active").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + }); + }); + + it("has a correct Modal Background", () => { + cy.get("#modal .modal-background").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal("rgba(10, 10, 10, 0.86)"); + expect(cs.position).to.equal("absolute"); + }); + }); + + it("has a correct Modal Content", () => { + cy.get("#modal .modal-content").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.margin).to.equal("0px auto"); + expect(cs.width).to.equal("640px"); + }); + }); + + it("has a correct Modal Card", () => { + cy.get("#modal-card .modal-card").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + }); + + cy.get("#modal-card .modal-card-head, #modal-card .modal-card-foot").then( + ($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white-ter")); + expect(cs.display).to.equal("flex"); + expect(cs.flexShrink).to.equal("0"); + expect(cs.padding).to.equal("20px"); + expect(cs.position).to.equal("relative"); + } + ); + + cy.get("#modal-card .modal-card-head").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderBottomColor).to.equal(Cypress.env("border")); + expect(cs.borderBottomStyle).to.equal("solid"); + expect(cs.borderBottomWidth).to.equal("1px"); + expect(cs.borderTopLeftRadius).to.equal("6px"); + expect(cs.borderTopRightRadius).to.equal("6px"); + }); + + cy.get("#modal-card .modal-card-foot").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderTopColor).to.equal(Cypress.env("border")); + expect(cs.borderTopStyle).to.equal("solid"); + expect(cs.borderTopWidth).to.equal("1px"); + expect(cs.borderBottomLeftRadius).to.equal("6px"); + expect(cs.borderBottomRightRadius).to.equal("6px"); + }); + + cy.get("#modal-card .modal-card-title").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.color).to.equal(Cypress.env("text-strong")); + expect(cs.flexGrow).to.equal("1"); + expect(cs.flexShrink).to.equal("0"); + expect(cs.fontSize).to.equal("24px"); + expect(cs.lineHeight).to.equal("24px"); + }); + + cy.get("#modal-card .modal-card-body").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white")); + expect(cs.flexGrow).to.equal("1"); + expect(cs.flexShrink).to.equal("1"); + expect(cs.overflow).to.equal("auto"); + expect(cs.padding).to.equal("20px"); + }); + }); +});