library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add panel specs

Browse Source
This commit is contained in:
Jeremy Thomas 2021-11-07 18:38:30 +00:00
parent 492cfb6950
commit db4e1604c6
3 changed files with 206 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
docs/cyp/components/panel.html Normal file
View File

@ -0,0 +1,80 @@
---
layout: cypress
title: Components/Panel
---
{% capture content %}
<p class="panel-heading">
Repositories
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Public</a>
<a>Private</a>
<a>Sources</a>
<a>Forks</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
bulma
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
marksheet
</a>
<a class="panel-block is-wrapped">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
minireset.css
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book" aria-hidden="true"></i>
</span>
jgthms.github.io
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
daniellowtw/infboard
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-code-branch" aria-hidden="true"></i>
</span>
mojs
</a>
<label class="panel-block">
<input type="checkbox">
remember me
</label>
<div class="panel-block">
<button class="button is-link is-outlined is-fullwidth">
Reset all filters
</button>
</div>
{% endcapture %}
<nav id="panel" class="panel">
{{ content }}
</nav>
{% for color in site.data.colors.justColors %}
<nav id="panel-{{ color }}" class="panel is-{{ color }}">
{{ content }}
</nav>
{% endfor %}

124
docs/cypress/integration/components/panel.spec.js Normal file
View File

@ -0,0 +1,124 @@
describe("Components/Panel", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/panel/");
});
it("has a Panel", () => {
cy.get(".panel").should("exist");
});
it("has a correct Panel", () => {
cy.get("#panel").then(($) => {
const cs = window.getComputedStyle($[0]);
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.fontSize).to.equal("16px");
});
});
it("has a correct Panel 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(`#panel-${name} .panel-heading`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#panel-${name} .panel-tabs a.is-active`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(baseColor);
});
cy.get(`#panel-${name} .panel-block.is-active .panel-icon`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(baseColor);
});
}
});
it("has a correct Panel Heading", () => {
cy.get("#panel .panel-heading").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("grey-lightest"));
expect(cs.borderRadius).to.equal("6px 6px 0px 0px");
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.fontSize).to.equal("20px");
expect(cs.fontWeight).to.equal("700");
expect(cs.lineHeight).to.equal("25px");
expect(cs.padding).to.equal("15px 20px");
});
});
it("has correct Panel Tabs", () => {
cy.get("#panel .panel-tabs").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("flex-end");
expect(cs.display).to.equal("flex");
expect(cs.fontSize).to.equal("14px");
expect(cs.justifyContent).to.equal("center");
});
cy.get("#panel .panel-tabs a:not(.is-active)").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(Cypress.env("border"));
expect(cs.borderBottomStyle).to.equal("solid");
expect(cs.borderBottomWidth).to.equal("1px");
expect(cs.marginBottom).to.equal("-1px");
expect(cs.padding).to.equal("7px");
});
cy.get("#panel .panel-tabs a.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomColor).to.equal(Cypress.env("grey-dark"));
expect(cs.color).to.equal(Cypress.env("grey-darker"));
});
});
it("has correct Panel Block", () => {
cy.get("#panel .panel-block").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("center");
expect(cs.color).to.equal(Cypress.env("text-strong"));
expect(cs.display).to.equal("flex");
expect(cs.justifyContent).to.equal("flex-start");
expect(cs.padding).to.equal("8px 12px");
});
cy.get("#panel .panel-block.is-wrapped").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.flexWrap).to.equal("wrap");
});
cy.get("#panel .panel-block.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderLeftColor).to.equal(Cypress.env("link"));
expect(cs.color).to.equal(Cypress.env("grey-darker"));
});
cy.get("#panel .panel-block.is-active .panel-icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("link"));
});
cy.get("#panel .panel-block:last-child").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderBottomLeftRadius).to.equal("6px");
expect(cs.borderBottomRightRadius).to.equal("6px");
});
});
it("has correct Panel Icon", () => {
cy.get("#panel .panel-block:not(.is-active) .panel-icon").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text-light"));
});
});
});