From 38abcc3138b1e076388c0af63c9e4f6789d5ac23 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 7 May 2022 14:36:33 +0100 Subject: [PATCH] Add form tools specs --- docs/cyp/form/tools.html | 110 +++++++++ docs/cypress.json | 6 + docs/cypress/.gitignore | 3 +- docs/cypress/integration/form/select.spec.js | 2 +- docs/cypress/integration/form/tools.spec.js | 227 +++++++++++++++++++ docs/package.json | 2 + 6 files changed, 348 insertions(+), 2 deletions(-) create mode 100644 docs/cyp/form/tools.html create mode 100644 docs/cypress/integration/form/tools.spec.js diff --git a/docs/cyp/form/tools.html b/docs/cyp/form/tools.html new file mode 100644 index 00000000..75157152 --- /dev/null +++ b/docs/cyp/form/tools.html @@ -0,0 +1,110 @@ +--- +layout: cypress +title: Form/Tools +--- + +{% capture content %} +
+ +
+
+ + Search + +
+{% endcapture %} + + + +{% for size in site.data.sizes %} + +{% endfor %} + +

This username is available

+ +{% for color in site.data.colors.justColors %} +

This username is available

+{% endfor %} + +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+ {{ content }} +
+ +
+
+ +
+ +
+
+

+ + + + +

+
+ +
+

+ + + + + + + +

+ +
+
+
+
+ +{% for size in site.data.sizes %} +
+ {{ size | capitalize }} field label +
+{% endfor %} + +

Last element

diff --git a/docs/cypress.json b/docs/cypress.json index 51d98366..7058c351 100644 --- a/docs/cypress.json +++ b/docs/cypress.json @@ -83,6 +83,12 @@ "size-medium": "20px", "size-large": "24px", + "weight-light": "300", + "weight-normal": "400", + "weight-medium": "500", + "weight-semibold": "600", + "weight-bold": "700", + "viewports": { "mobile": [320, 480], "tablet": [769, 640], diff --git a/docs/cypress/.gitignore b/docs/cypress/.gitignore index 40943445..733b5fd6 100644 --- a/docs/cypress/.gitignore +++ b/docs/cypress/.gitignore @@ -1 +1,2 @@ -videos +/screenshots +/videos diff --git a/docs/cypress/integration/form/select.spec.js b/docs/cypress/integration/form/select.spec.js index b4169006..22b7c111 100644 --- a/docs/cypress/integration/form/select.spec.js +++ b/docs/cypress/integration/form/select.spec.js @@ -1,4 +1,4 @@ -describe("Form/select", () => { +describe("Form/Select", () => { beforeEach(() => { cy.visit("http://127.0.0.1:4000/cyp/form/select/"); }); diff --git a/docs/cypress/integration/form/tools.spec.js b/docs/cypress/integration/form/tools.spec.js new file mode 100644 index 00000000..49f8eda0 --- /dev/null +++ b/docs/cypress/integration/form/tools.spec.js @@ -0,0 +1,227 @@ +import { setDesktop } from "../utils"; + +// describe("Form/Label", () => { +// beforeEach(() => { +// cy.visit("http://127.0.0.1:4000/cyp/form/tools/"); +// }); + +// it("has a Label", () => { +// cy.get(".label").should("exist"); +// }); + +// it("has a correct Label", () => { +// cy.get("#label").then(($) => { +// const cs = window.getComputedStyle($[0]); +// expect(cs.color).to.equal(Cypress.env("text-strong")); +// expect(cs.display).to.equal("block"); +// expect(cs.fontSize).to.equal(Cypress.env("size-normal")); +// expect(cs.fontWeight).to.equal(Cypress.env("weight-bold")); +// }); +// }); + + +// it("has correct Label sizes", () => { +// for (let i = 0; i < Cypress.env("just-sizes").length; i++) { +// const size = Cypress.env("just-sizes")[i]; + +// cy.get(`#label-${size}`).then(($) => { +// const cs = window.getComputedStyle($[0]); +// expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`); +// }); +// } +// }); +// }); + +// describe("Form/Help", () => { +// beforeEach(() => { +// cy.visit("http://127.0.0.1:4000/cyp/form/tools/"); +// }); + +// it("has a Help", () => { +// cy.get(".help").should("exist"); +// }); + +// it("has a correct Help", () => { +// cy.get("#help").then(($) => { +// const cs = window.getComputedStyle($[0]); +// expect(cs.display).to.equal("block"); +// expect(cs.fontSize).to.equal(Cypress.env("size-small")); +// expect(cs.marginTop).to.equal("4px"); +// }); +// }); + + +// it("has correct Help colors", () => { +// 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(`#help-${name}`).then(($) => { +// const cs = window.getComputedStyle($[0]); +// expect(cs.color).to.equal(baseColor); +// }); +// } +// }); +// }); + +describe("Form/Field", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/form/tools/"); + setDesktop(); + }); + + it("has a Field", () => { + cy.get(".field").should("exist"); + }); + + it("has a correct Field", () => { + cy.get("#field").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.marginBottom).to.equal("12px"); + }); + }); + + it("has a correct Field with addons", () => { + cy.get("#field-has-addons").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + expect(cs.justifyContent).to.equal("flex-start"); + }); + }); + + it("has a correct Field with addons centered", () => { + cy.get("#field-has-addons-centered").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.justifyContent).to.equal("center"); + }); + }); + + it("has a correct Field with addons right", () => { + cy.get("#field-has-addons-right").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.justifyContent).to.equal("flex-end"); + }); + }); + + it("has a correct Field with addons fullwidth .control", () => { + cy.get("#field-has-addons-fullwidth .control").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.flexGrow).to.equal("1"); + expect(cs.flexShrink).to.equal("0"); + }); + }); + + it("has a correct Field grouped", () => { + cy.get("#field-is-grouped").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + expect(cs.justifyContent).to.equal("flex-start"); + }); + }); + + it("has a correct Field grouped centered", () => { + cy.get("#field-is-grouped-centered").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.justifyContent).to.equal("center"); + }); + }); + + it("has a correct Field grouped right", () => { + cy.get("#field-is-grouped-right").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.justifyContent).to.equal("flex-end"); + }); + }); + + it("has a correct Field grouped multiline", () => { + cy.get("#field-is-grouped-multiline").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.flexWrap).to.equal("wrap"); + }); + }); + + it("has a correct Field horizontal", () => { + cy.get("#field-is-horizontal").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + }); + }); +}); + +describe("Form/Field Label", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/form/tools/"); + setDesktop(); + }); + + it("has a Field Label", () => { + cy.get(".field-label").should("exist"); + }); + + it("has a correct Field Label", () => { + cy.get("#field-label").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.flexBasis).to.equal("0px"); + expect(cs.flexGrow).to.equal("1"); + expect(cs.flexShrink).to.equal("0"); + expect(cs.textAlign).to.equal("right"); + }); + + cy.get("#field-label .label").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.fontSize).to.equal("16px"); + }); + }); + + it("has correct Field Label sizes", () => { + for (let i = 0; i < Cypress.env("just-sizes").length; i++) { + const size = Cypress.env("just-sizes")[i]; + + cy.get(`#field-label-${size}`).then(($) => { + const cs = window.getComputedStyle($[0]); + const sizeValue = Cypress.env("sizes")[size]; + expect(cs.fontSize).to.equal(`${sizeValue}px`); + expect(cs.paddingTop).to.equal(`${sizeValue * 0.375}px`); + }); + } + }); +}); + +describe("Form/Field Body", () => { + beforeEach(() => { + cy.visit("http://127.0.0.1:4000/cyp/form/tools/"); + setDesktop(); + }); + + it("has a Field Body", () => { + cy.get(".field-body").should("exist"); + }); + + it("has a correct Field Body", () => { + cy.get("#field-body").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.display).to.equal("flex"); + expect(cs.flexBasis).to.equal("0px"); + expect(cs.flexGrow).to.equal("5"); + expect(cs.flexShrink).to.equal("1"); + }); + + cy.get("#field-body .field").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.marginBottom).to.equal("0px"); + }); + + cy.get("#field-body > .field").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.flexShrink).to.equal("1"); + }); + + cy.get("#field-body .field .field").then(($) => { + const cs = window.getComputedStyle($[0]); + expect(cs.marginBottom).to.equal("0px"); + }); + }); +}); diff --git a/docs/package.json b/docs/package.json index 96f83aa4..6d490fe3 100644 --- a/docs/package.json +++ b/docs/package.json @@ -24,6 +24,8 @@ "css-cleancss": "cleancss -o css/bulma-docs.min.css css/bulma-docs.css", "css-sass": "node-sass --output-style expanded bulma-docs.scss css/bulma-docs.css", "css-watch": "npm run css-sass -- --watch", + "cypress-open": "./node_modules/.bin/cypress open", + "cypress-run": "./node_modules/.bin/cypress run", "deploy": "npm run css-build && npm run js-build", "js-build": "babel _javascript --out-dir lib", "js-watch": "npm run js-build -- --watch",