Add navbar specs

diff --git a/docs/cyp/components/navbar.html b/docs/cyp/components/navbar.html
new file mode 100644 (file)
index 0000000..6a39783
--- /dev/null
+++ b/docs/cyp/components/navbar.html
@@ -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 %}

diff --git a/docs/cypress/integration/components/navbar.spec.js b/docs/cypress/integration/components/navbar.spec.js
new file mode 100644 (file)
index 0000000..477d511
--- /dev/null
+++ b/docs/cypress/integration/components/navbar.spec.js
@@ -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);
+        }
+      );
+    }
+  });
+});