library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add navbar specs

Browse Source
This commit is contained in:
Jeremy Thomas 2021-11-06 00:14:35 +00:00
parent 9aefad3561
commit 8e9f79860d
2 changed files with 429 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
docs/cyp/components/navbar.html Normal file
View File

@ -0,0 +1,168 @@
---
layout: cypress
title: Components/Navbar
---
{% capture content %}
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-burger">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item is-active">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
{% endcapture %}
<nav id="navbar" class="navbar">
{{ content }}
</nav>
<nav id="navbar-container" class="navbar">
<div class="container">
{{ content }}
</div>
</nav>
<nav id="navbar-has-shadow" class="navbar has-shadow">
{{ content }}
</nav>
<nav id="navbar-is-fixed-top" class="navbar is-fixed-top">
{{ content }}
</nav>
<nav id="navbar-is-fixed-bottom" class="navbar is-fixed-bottom">
{{ content }}
</nav>
{% for color in site.data.colors.justColors %}
<nav id="navbar-{{ color }}" class="navbar is-{{ color }}">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
{% if include.light %}
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
{% else %}
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
{% endif %}
</a>
<div class="navbar-burger" data-target="navMenuColor{{ color }}-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenuColor{{ color }}-example" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{ site.url }}/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
Modifiers
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="{{ site.data.meta.download }}">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
{% endfor %}

261
docs/cypress/integration/components/navbar.spec.js Normal file
View File

@ -0,0 +1,261 @@
describe("Components/Navbar", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
});
it("has a Navbar", () => {
cy.get(".navbar").should("exist");
});
it("has a correct Navbar", () => {
cy.get("#navbar").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.minHeight).to.equal("52px");
expect(cs.position).to.equal("relative");
expect(cs.zIndex).to.equal("30");
});
});
it(`has correct color Navbars`, () => {
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(`#navbar-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#navbar-${name} .navbar-burger`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(invertColor);
});
}
});
it("has a correct Navbar Shadow", () => {
cy.get("#navbar-has-shadow").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.boxShadow).to.equal(
`${Cypress.env("white-ter")} 0px 2px 0px 0px`
);
});
});
it("has correct fixed Navbar", () => {
cy.get("#navbar-is-fixed-top").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.position).to.equal("fixed");
expect(cs.top).to.equal("0px");
expect(cs.zIndex).to.equal("30");
});
cy.get("#navbar-is-fixed-bottom").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.bottom).to.equal("0px");
expect(cs.position).to.equal("fixed");
expect(cs.zIndex).to.equal("30");
});
});
it("has a correct Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(Cypress.env("text"));
expect(cs.flexGrow).to.equal("0");
expect(cs.flexShrink).to.equal("0");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("8px 12px");
});
cy.get("#navbar .navbar-start .navbar-item.has-dropdown").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.padding).to.equal("0px");
});
});
it("has a correct Navbar Link", () => {
cy.get("#navbar .navbar-link").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.paddingRight).to.equal("40px");
});
});
it("has a correct Navbar Drodpown", () => {
cy.get("#navbar .navbar-dropdown").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.fontSize).to.equal("14px");
expect(cs.paddingBottom).to.equal("8px");
expect(cs.paddingTop).to.equal("8px");
});
cy.get("#navbar .navbar-dropdown .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.paddingLeft).to.equal("24px");
expect(cs.paddingRight).to.equal("24px");
});
});
it("has a correct Navbar Divider", () => {
cy.get("#navbar .navbar-divider").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
expect(cs.height).to.equal("2px");
expect(cs.margin).to.equal("8px 0px");
});
});
it("has a correct Navbar Brand", () => {
cy.get("#navbar .navbar-brand").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.alignItems).to.equal("stretch");
expect(cs.display).to.equal("flex");
expect(cs.flexShrink).to.equal("0");
expect(cs.minHeight).to.equal("52px");
});
});
});
// Mobile
describe("Components/NavbarMobile", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
cy.viewport(
Cypress.env("viewports").mobile[0],
Cypress.env("viewports").mobile[1]
);
});
it("has a Navbar", () => {
cy.get(".navbar").should("exist");
});
it("has a correct Navbar Container", () => {
cy.get("#navbar-container > .container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
});
it("has a correct Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
});
it("has a correct active Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white-bis"));
});
});
it("has a correct Navbar Burger", () => {
cy.get("#navbar .navbar-burger").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.appearance).to.equal("none");
});
});
it("has a correct Navbar Menu", () => {
cy.get("#navbar .navbar-menu").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("none");
});
});
it("has a correct Navbar Divider", () => {
cy.get("#navbar .navbar-divider").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("none");
});
});
});
// Desktop
describe("Components/NavbarDesktop", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/components/navbar/");
cy.viewport(
Cypress.env("viewports").desktop[0],
Cypress.env("viewports").desktop[1]
);
});
it("has a Navbar", () => {
cy.get(".navbar").should("exist");
});
it("has a correct Navbar Container", () => {
cy.get("#navbar-container > .container").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has a correct Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has a correct active Navbar Item", () => {
cy.get("#navbar .navbar-start .navbar-item.is-active").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
});
});
it("has a correct Navbar Burger", () => {
cy.get("#navbar .navbar-burger").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.appearance).to.equal("none");
expect(cs.display).to.equal("none");
expect(cs.margin).to.equal("0px 0px 0px auto");
});
});
it("has a correct Navbar Menu", () => {
cy.get("#navbar .navbar-menu").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("flex");
});
});
it("has a correct Navbar Divider", () => {
cy.get("#navbar .navbar-divider").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.display).to.equal("block");
});
});
it(`has correct color Navbars`, () => {
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(`#navbar-${name} .navbar-link`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#navbar-${name} .navbar-dropdown a.navbar-item.is-active`).then(
($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
}
);
}
});
});