mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add navbar specs
This commit is contained in:
Jeremy Thomas
parent
9aefad3561
commit
8e9f79860d
168
docs/cyp/components/navbar.html
Normal file
168
docs/cyp/components/navbar.html
Normal 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&hashtags=bulmaio&url=https://bulma.io&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
261
docs/cypress/integration/components/navbar.spec.js
Normal 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);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user