From 1829e07f721cfaf351b1480c8647ae43f213f3ab Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 1 Nov 2021 20:43:26 +0000 Subject: [PATCH] Add Tags specs --- docs/cyp/elements/tag.html | 74 ++++++++++++ .../integration/elements/table.spec.js | 37 ++++++ docs/cypress/integration/elements/tag.spec.js | 107 ++++++++++++++++++ 3 files changed, 218 insertions(+) create mode 100644 docs/cyp/elements/tag.html create mode 100644 docs/cypress/integration/elements/tag.spec.js diff --git a/docs/cyp/elements/tag.html b/docs/cyp/elements/tag.html new file mode 100644 index 00000000..819630e9 --- /dev/null +++ b/docs/cyp/elements/tag.html @@ -0,0 +1,74 @@ +--- +layout: cypress +title: Elements/Tag +--- + +
+ + Tag + + + + Rounded + +
+ +
+ + Normal + + + + Medium + + + + Large + +
+ +
+ Tag + Tag + Tag +
+ +
+ Tag + Tag + Tag +
+ +
+ Tag + Tag + Tag +
+ +
+ Tag + Tag + Tag +
+ +
+ Tag + Tag + Tag +
+ +
+ {% for color in site.data.colors.justColors %} + + {{ color | capitalize }} + + {% endfor %} +
+ +
+ {% for color in site.data.colors.justColors %} + + {{ color | capitalize }} + + {% endfor %} +
diff --git a/docs/cypress/integration/elements/table.spec.js b/docs/cypress/integration/elements/table.spec.js index 07c914d8..a4ae23b3 100644 --- a/docs/cypress/integration/elements/table.spec.js +++ b/docs/cypress/integration/elements/table.spec.js @@ -11,6 +11,43 @@ describe("Elements/Table", () => { cy.get("#table").then(($) => { const cs = window.getComputedStyle($[0]); expect(cs.backgroundColor).to.equal(Cypress.env("white")); + expect(cs.color).to.equal(Cypress.env("text-strong")); + }); + + cy.get("#table tr.is-selected").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("primary")); + expect(cs.color).to.equal(Cypress.env("primary-invert")); + }); + }); + + it("has a correct bordered Table", () => { + cy.get("#table-bordered th, #table-bordered td").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderWidth).to.equal("1px"); + }); + }); + + it("has a correct striped Table", () => { + cy.get("#table-striped tbody tr:not(.is-selected):nth-child(even)").then( + ($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white-bis")); + } + ); + }); + + it("has a correct narrow Table", () => { + cy.get("#table-narrow th, #table-narrow td").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.padding).to.equal("4px 8px"); + }); + }); + + it("has a correct fullwidth Table", () => { + cy.get("#table-fullwidth").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.width).to.equal("800px"); }); }); }); diff --git a/docs/cypress/integration/elements/tag.spec.js b/docs/cypress/integration/elements/tag.spec.js new file mode 100644 index 00000000..403ff809 --- /dev/null +++ b/docs/cypress/integration/elements/tag.spec.js @@ -0,0 +1,107 @@ +describe("Elements/Tag", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/elements/tag/"); + }); + + it("has a Tag", () => { + cy.get(".tag").should("exist"); + }); + + it("has a correct Tag", () => { + cy.get("#tag").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white-ter")); + expect(cs.borderRadius).to.equal("4px"); + expect(cs.color).to.equal(Cypress.env("grey-dark")); + expect(cs.fontSize).to.equal("12px"); + expect(cs.height).to.equal("24px"); + expect(cs.padding).to.equal("0px 9px"); + }); + + cy.get("#tag-rounded").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderRadius).to.equal("9999px"); + }); + }); + + it("has a correct Tag sizes", () => { + cy.get("#tag-normal").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.fontSize).to.equal("12px"); + expect(cs.height).to.equal("24px"); + }); + + cy.get("#tag-medium").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.fontSize).to.equal("16px"); + expect(cs.height).to.equal("32px"); + }); + + cy.get("#tag-large").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.fontSize).to.equal("20px"); + expect(cs.height).to.equal("40px"); + }); + }); + + // Colors + it(`has correct color Tags`, () => { + 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(`#tag-${name}`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(baseColor); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#tag-${name}-light`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(lightColor); + expect(cs.color).to.equal(darkColor); + }); + } + }); + + it("has correct Tags containers", () => { + cy.get("#tags").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + }); + + cy.get("#tags .tag").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.marginBottom).to.equal("8px"); + }); + + cy.get("#tags-medium .tag").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.fontSize).to.equal("16px"); + }); + + cy.get("#tags-large .tag").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.fontSize).to.equal("20px"); + }); + + cy.get("#tags-centered").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.justifyContent).to.equal("center"); + }); + + cy.get("#tags-right").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.justifyContent).to.equal("flex-end"); + }); + + cy.get("#tags-addons .tag:nth-child(2)").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderRadius).to.equal("0px"); + expect(cs.marginRight).to.equal("0px"); + }); + }); +});