mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add generic specs
This commit is contained in:
parent
54c9c81e88
commit
2a1e0d9606
33
docs/cyp/base/generic.html
Normal file
33
docs/cyp/base/generic.html
Normal 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>
|
@ -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],
|
||||||
|
139
docs/cypress/integration/base/generic.spec.js
Normal file
139
docs/cypress/integration/base/generic.spec.js
Normal 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");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user