Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 12:24:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add other elements specs

Browse Source
This commit is contained in:
Jeremy Thomas
2022-05-07 15:39:42 +01:00
parent 38abcc3138
commit 1eb7ec311e
4 changed files with 323 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
docs/cypress/integration/form/tools.spec.js
View File

@@ -1,71 +1,71 @@
import { setDesktop } from "../utils";
// describe("Form/Label", () => {
// beforeEach(() => {
// cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
// });
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 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 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];
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`);
// });
// }
// });
// });
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/");
// });
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 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 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`);
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);
// });
// }
// });
// });
cy.get(`#help-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(baseColor);
});
}
});
});
describe("Form/Field", () => {
beforeEach(() => {
@@ -225,3 +225,92 @@ describe("Form/Field Body", () => {
});
});
});
describe("Form/Control", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
setDesktop();
});
it("has a Control", () => {
cy.get(".control").should("exist");
});
it("has a correct Control", () => {
cy.get("#control").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.boxSizing).to.equal("border-box");
expect(cs.clear).to.equal("both");
expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
expect(cs.position).to.equal("relative");
expect(cs.textAlign).to.equal("start");
});
});
it("has a correct Control with icons left", () => {
cy.get("#control-has-icons-left .icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("grey-lighter"));
expect(cs.height).to.equal(Cypress.env("control-height"));
expect(cs.left).to.equal("0px");
expect(cs.pointerEvents).to.equal("none");
expect(cs.position).to.equal("absolute");
expect(cs.top).to.equal("0px");
expect(cs.width).to.equal(Cypress.env("control-height"));
expect(cs.zIndex).to.equal("4");
});
});
it("has a correct Control with icons right", () => {
cy.get("#control-has-icons-right .icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("grey-lighter"));
expect(cs.height).to.equal(Cypress.env("control-height"));
expect(cs.pointerEvents).to.equal("none");
expect(cs.position).to.equal("absolute");
expect(cs.right).to.equal("0px");
expect(cs.top).to.equal("0px");
expect(cs.width).to.equal(Cypress.env("control-height"));
expect(cs.zIndex).to.equal("4");
});
});
it("has a correct loading Control", () => {
cy.get("#control-loading").then(($) => {
const after = window.getComputedStyle($[0], "after");
expect(after.animationDuration).to.equal("0.5s");
expect(after.animationIterationCount).to.equal("infinite");
expect(after.animationName).to.equal("spinAround");
expect(after.animationTimingFunction).to.equal("linear");
expect(after.borderBottomColor).to.equal(Cypress.env("grey-lighter"));
expect(after.borderLeftColor).to.equal(Cypress.env("grey-lighter"));
expect(after.borderRightColor).to.equal(Cypress.env("transparent"));
expect(after.borderTopColor).to.equal(Cypress.env("transparent"));
expect(after.borderRadius).to.equal("9999px");
expect(after.borderStyle).to.equal("solid");
expect(after.borderWidth).to.equal("2px");
expect(after.content).to.equal('""');
expect(after.display).to.equal("block");
expect(after.height).to.equal("16px");
expect(after.position).to.equal("absolute");
expect(after.top).to.equal(`${0.625 * 16}px`);
expect(after.width).to.equal("16px");
expect(after.zIndex).to.equal("4");
});
cy.get("#control-loading-small").then(($) => {
const after = window.getComputedStyle($[0], "after");
expect(after.fontSize).to.equal(Cypress.env("size-small"));
});
cy.get("#control-loading-medium").then(($) => {
const after = window.getComputedStyle($[0], "after");
expect(after.fontSize).to.equal(Cypress.env("size-medium"));
});
cy.get("#control-loading-large").then(($) => {
const after = window.getComputedStyle($[0], "after");
expect(after.fontSize).to.equal(Cypress.env("size-large"));
});
});
});