Add generic specs

This commit is contained in:
Jeremy Thomas 2022-05-08 09:21:02 +01:00
parent 54c9c81e88
commit 2a1e0d9606
3 changed files with 177 additions and 0 deletions

View File

@ -0,0 +1,33 @@
---
layout: cypress
title: Base/Generic
---
<article>article</article>
<aside>aside</aside>
<figure>figure</figure>
<footer>footer</footer>
<header>header</header>
<hgroup>hgroup</hgroup>
<section>section</section>
<body>body</body>
<button>button</button>
<input>input</button>
<optgroup>optgroup</optgroup>
<select>select</select>
<textarea>textarea</textarea>
<code>code</code>
<pre>pre<code>code</code></pre>
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
<a>Link <strong>strong</strong></a>>
<hr>hr</pre>
<img>img</pre>
<small>small</small>
<span>span</span>
<strong>strong</strong>
<fieldset>fieldset</fieldset>
<table><tr><th>th</th><td>td</td></tr></table>
<fieldset>
<input type="checkbox" name="check">
<input type="radio" name="rad">
</fieldset>

View File

@ -68,6 +68,8 @@
"text-light": "rgb(122, 122, 122)", "text-light": "rgb(122, 122, 122)",
"text-invert": "rgb(255, 255, 255)", "text-invert": "rgb(255, 255, 255)",
"code": "rgb(218, 16, 57)",
"control-radius": "4px", "control-radius": "4px",
"control-radius-small": "2px", "control-radius-small": "2px",
"control-border-width": "1px", "control-border-width": "1px",
@ -89,6 +91,9 @@
"weight-semibold": "600", "weight-semibold": "600",
"weight-bold": "700", "weight-bold": "700",
"family-primary": "\"system-ui\", -apple-system, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
"family-code": "monospace",
"viewports": { "viewports": {
"mobile": [320, 480], "mobile": [320, 480],
"tablet": [769, 640], "tablet": [769, 640],

View File

@ -0,0 +1,139 @@
describe("Base/Generic", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/base/generic/");
});
it("has a correct html", () => {
cy.get("html").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
expect(cs.fontSize).to.equal("16px");
expect(cs.minWidth).to.equal("300px");
expect(cs.overflowX).to.equal("hidden");
expect(cs.overflowY).to.equal("scroll");
expect(cs.textRendering).to.equal("optimizelegibility");
expect(cs.textSizeAdjust).to.equal("100%");
expect(cs.webkitFontSmoothing).to.equal("antialiased");
});
});
it("has correct HTML5 elements", () => {
cy.get("article, aside, figure, footer, header, hgroup, section").then(
($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
}
);
});
it("has correct form elements", () => {
cy.get("body, button, input, optgroup, select, textarea").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontFamily).to.equal(Cypress.env("family-primary"));
});
});
it("has correct monospace elements", () => {
cy.get("pre, code").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontFamily).to.equal(Cypress.env("family-code"));
expect(cs.webkitFontSmoothing).to.equal("auto");
});
});
it("has a correct body", () => {
cy.get("body").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.fontFamily).to.equal(Cypress.env("family-primary"));
expect(cs.fontSize).to.equal("16px");
expect(cs.fontWeight).to.equal("400");
expect(cs.lineHeight).to.equal("24px");
});
});
it("has a correct a", () => {
cy.get("a").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("link"));
expect(cs.cursor).to.equal("pointer");
expect(cs.textDecorationLine).to.equal("none");
});
});
it("has a correct code", () => {
cy.get("code").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.color).to.equal(Cypress.env("code"));
});
});
it("has a correct hr", () => {
cy.get("hr").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.borderStyle).to.equal("none");
expect(cs.display).to.equal("block");
expect(cs.height).to.equal("2px");
expect(cs.margin).to.equal("24px 0px");
});
});
it("has a correct img", () => {
cy.get("img").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal("28px");
expect(cs.width).to.equal("112px");
});
});
it("has a correct checkbox", () => {
cy.get("input[type='checkbox']").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.verticalAlign).to.equal("baseline");
});
});
it("has a correct radio", () => {
cy.get("input[type='radio']").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.verticalAlign).to.equal("baseline");
});
});
it("has a correct small", () => {
cy.get("small").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("14px");
});
});
it("has a correct fieldset", () => {
cy.get("fieldset").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderStyle).to.equal("none");
});
});
it("has a correct pre", () => {
cy.get("pre").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.fontSize).to.equal("14px");
expect(cs.overflowX).to.equal("auto");
expect(cs.padding).to.equal("20px 24px");
expect(cs.whiteSpace).to.equal("pre");
expect(cs.wordWrap).to.equal("normal");
});
cy.get("pre code").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.fontSize).to.equal("14px");
expect(cs.padding).to.equal("0px");
});
});
});