From 69a991ade1dc877d13578f009824c5023b13dc0d Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 30 Oct 2021 21:13:53 +0100 Subject: [PATCH] Setup Cypress tests for box and button --- cypress.json | 65 + cypress/fixtures/example.json | 5 + cypress/integration/.gitignore | 2 + cypress/integration/elements/box.spec.js | 23 + cypress/integration/elements/button.spec.js | 124 + cypress/plugins/index.js | 22 + cypress/support/commands.js | 31 + cypress/support/index.js | 20 + docs/_layouts/cypress.html | 16 + docs/_layouts/default.html | 18 +- docs/_sass/components/categories.scss | 2 + docs/bulma.scss | 2 + docs/css/bulma.css | 11790 ++++++++++++++++++ docs/cypress/elements/box.html | 8 + docs/cypress/elements/button.html | 66 + docs/package.json | 2 + package-lock.json | 1132 +- package.json | 1 + 18 files changed, 13312 insertions(+), 17 deletions(-) create mode 100644 cypress.json create mode 100644 cypress/fixtures/example.json create mode 100644 cypress/integration/.gitignore create mode 100644 cypress/integration/elements/box.spec.js create mode 100644 cypress/integration/elements/button.spec.js create mode 100644 cypress/plugins/index.js create mode 100644 cypress/support/commands.js create mode 100644 cypress/support/index.js create mode 100644 docs/_layouts/cypress.html create mode 100644 docs/bulma.scss create mode 100644 docs/css/bulma.css create mode 100644 docs/cypress/elements/box.html create mode 100644 docs/cypress/elements/button.html diff --git a/cypress.json b/cypress.json new file mode 100644 index 00000000..25998d1a --- /dev/null +++ b/cypress.json @@ -0,0 +1,65 @@ +{ + "env": { + "black": "rgb(10, 10, 10)", + "black-bis": "rgb(18, 18, 18)", + "black-ter": "rgb(36, 36, 36)", + "grey-darker": "rgb(54, 54, 54)", + "grey-dark": "rgb(74, 74, 74)", + "grey": "rgb(122, 122, 122)", + "grey-light": "rgb(181, 181, 181)", + "grey-lighter": "rgb(219, 219, 219)", + "grey-lightest": "rgb(237, 237, 237)", + "white-ter": "rgb(245, 245, 245)", + "white-bis": "rgb(250, 250, 250)", + "white": "rgb(255, 255, 255)", + + "transparent": "rgba(0, 0, 0, 0)", + "black-transparent": "rgba(0, 0, 0, 0.7)", + + "orange": "rgb(255, 71, 15)", + "yellow": "rgb(255, 224, 138)", + "green": "rgb(72, 199, 142)", + "turquoise": "rgb(0, 209, 178)", + "cyan": "rgb(62, 142, 208)", + "blue": "rgb(72, 95, 199)", + "purple": "rgb(184, 107, 255)", + "red": "rgb(241, 70, 104)", + + "color-names": ["primary", "link", "info", "success", "warning", "danger"], + + "primary": "rgb(0, 209, 178)", + "primary-invert": "rgb(255, 255, 255)", + "primary-light": "rgb(235, 255, 252)", + "primary-dark": "rgb(0, 148, 126)", + + "link": "rgb(72, 95, 199)", + "link-invert": "rgb(255, 255, 255)", + "link-light": "rgb(239, 241, 250)", + "link-dark": "rgb(56, 80, 183)", + + "info": "rgb(62, 142, 208)", + "info-invert": "rgb(255, 255, 255)", + "info-light": "rgb(239, 245, 251)", + "info-dark": "rgb(41, 111, 168)", + + "success": "rgb(72, 199, 142)", + "success-invert": "rgb(255, 255, 255)", + "success-light": "rgb(239, 250, 245)", + "success-dark": "rgb(37, 121, 83)", + + "warning": "rgb(255, 224, 138)", + "warning-invert": "rgba(0, 0, 0, 0.7)", + "warning-light": "rgb(255, 250, 235)", + "warning-dark": "rgb(148, 108, 0)", + + "danger": "rgb(241, 70, 104)", + "danger-invert": "rgb(255, 255, 255)", + "danger-light": "rgb(254, 236, 240)", + "danger-dark": "rgb(204, 15, 53)", + + "scheme-main": "rgb(255, 255, 255)", + "border": "rgb(219, 219, 219)", + "text": "rgb(74, 74, 74)", + "text-strong": "rgb(54, 54, 54)" + } +} diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/integration/.gitignore b/cypress/integration/.gitignore new file mode 100644 index 00000000..3a00336a --- /dev/null +++ b/cypress/integration/.gitignore @@ -0,0 +1,2 @@ +1-getting-started +2-advanced-examples diff --git a/cypress/integration/elements/box.spec.js b/cypress/integration/elements/box.spec.js new file mode 100644 index 00000000..9b2d55f5 --- /dev/null +++ b/cypress/integration/elements/box.spec.js @@ -0,0 +1,23 @@ +describe("Elements/Box", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cypress/elements/box/"); + }); + + it("has a .box element", () => { + cy.get(".box").should("exist"); + }); + + it("has a correct .box element", () => { + cy.get(".box").then(($) => { + const el = $[0]; + const cs = window.getComputedStyle(el); + expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main")); + expect(cs.borderRadius).to.equal("6px"); + expect(cs.boxShadow).to.equal( + "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px" + ); + expect(cs.color).to.equal(Cypress.env("text")); + expect(cs.padding).to.equal("20px"); + }); + }); +}); diff --git a/cypress/integration/elements/button.spec.js b/cypress/integration/elements/button.spec.js new file mode 100644 index 00000000..59d884c2 --- /dev/null +++ b/cypress/integration/elements/button.spec.js @@ -0,0 +1,124 @@ +describe("Elements/Button", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cypress/elements/button/"); + }); + + it("has a Button", () => { + cy.get(".button").should("exist"); + }); + + it("has a correct Button", () => { + cy.get("#button-default").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white")); + expect(cs.borderColor).to.equal(Cypress.env("grey-lighter")); + expect(cs.borderRadius).to.equal("4px"); + expect(cs.color).to.equal(Cypress.env("grey-darker")); + expect(cs.height).to.equal("40px"); + expect(cs.lineHeight).to.equal("24px"); + expect(cs.padding).to.equal("7px 16px"); + }); + }); + + // States + it("has a correct hover Button", () => { + cy.get("#button-hover").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white")); + expect(cs.borderColor).to.equal(Cypress.env("grey-light")); + expect(cs.borderRadius).to.equal("4px"); + expect(cs.color).to.equal(Cypress.env("grey-darker")); + expect(cs.height).to.equal("40px"); + expect(cs.lineHeight).to.equal("24px"); + expect(cs.padding).to.equal("7px 16px"); + }); + }); + + it("has a correct focus Button", () => { + cy.get("#button-focus").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("white")); + expect(cs.borderColor).to.equal(Cypress.env("blue")); + expect(cs.borderRadius).to.equal("4px"); + expect(cs.boxShadow).to.equal( + `rgba${Cypress.env("blue").slice(3, -1)}, 0.25) 0px 0px 0px 2px` + ); + expect(cs.color).to.equal(Cypress.env("grey-darker")); + expect(cs.height).to.equal("40px"); + expect(cs.lineHeight).to.equal("24px"); + expect(cs.padding).to.equal("7px 16px"); + }); + }); + + // Colors + it(`has correct color Buttons`, () => { + 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(`#button-${name}`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(baseColor); + expect(cs.borderColor).to.equal(Cypress.env("transparent")); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#button-${name}-hover`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderColor).to.equal(Cypress.env("transparent")); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#button-${name}-focus`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.boxShadow).to.equal( + `rgba${baseColor.slice(3, -1)}, 0.25) 0px 0px 0px 2px` + ); + expect(cs.borderColor).to.equal(Cypress.env("transparent")); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#button-${name}-active`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.borderColor).to.equal(Cypress.env("transparent")); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#button-${name}-inverted`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(invertColor); + expect(cs.color).to.equal(baseColor); + }); + + cy.get(`#button-${name}-outlined`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("transparent")); + expect(cs.borderColor).to.equal(baseColor); + expect(cs.color).to.equal(baseColor); + }); + + cy.get(`#button-${name}-outlined-hover`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(baseColor); + expect(cs.borderColor).to.equal(baseColor); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#button-${name}-inverted-outlined`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(Cypress.env("transparent")); + expect(cs.borderColor).to.equal(invertColor); + expect(cs.color).to.equal(invertColor); + }); + + cy.get(`#button-${name}-light`).then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.backgroundColor).to.equal(lightColor); + expect(cs.color).to.equal(darkColor); + }); + } + }); +}); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 00000000..59b2bab6 --- /dev/null +++ b/cypress/plugins/index.js @@ -0,0 +1,22 @@ +/// +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +/** + * @type {Cypress.PluginConfig} + */ +// eslint-disable-next-line no-unused-vars +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 00000000..dacb7baa --- /dev/null +++ b/cypress/support/commands.js @@ -0,0 +1,31 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add('login', (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) + +// function colorDarken(color, amount) { +// return cy.wrap(color); +// } + +// Cypress.Commands.add("colorDarken", colorDarken); diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/cypress/support/index.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/index.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands' + +// Alternatively you can use CommonJS syntax: +// require('./commands') diff --git a/docs/_layouts/cypress.html b/docs/_layouts/cypress.html new file mode 100644 index 00000000..0b16c983 --- /dev/null +++ b/docs/_layouts/cypress.html @@ -0,0 +1,16 @@ + + + + + + + + {% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %} + + + + + + {{ content }} + + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index fb1b169b..1cc269c9 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -9,13 +9,25 @@ > {% include global/deprecated.html %} {{ content }} - {% include global/footer.html %} + {% include + global/footer.html %} {% include global/scripts.html %}