Add pagination specs

diff --git a/docs/cyp/components/pagination.html b/docs/cyp/components/pagination.html
new file mode 100644 (file)
index 0000000..d485706
--- /dev/null
+++ b/docs/cyp/components/pagination.html
@@ -0,0 +1,70 @@
+---
+layout: cypress
+title: Components/Pagination
+---
+
+{% capture content %}
+  <a class="pagination-previous">Previous</a>
+  <a class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
+    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
+    <li><span class="pagination-ellipsis">&hellip;</span></li>
+    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
+  </ul>
+{% endcapture %}
+
+<nav id="pagination" class="pagination">
+  <a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
+  <a class="pagination-next">Next page</a>
+  <ul class="pagination-list">
+    <li>
+      <a class="pagination-link" aria-label="Goto page 1">1</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a class="pagination-link" aria-label="Goto page 45">45</a>
+    </li>
+    <li>
+      <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+    </li>
+    <li>
+      <a class="pagination-link" aria-label="Goto page 47">47</a>
+    </li>
+    <li>
+      <span class="pagination-ellipsis">&hellip;</span>
+    </li>
+    <li>
+      <a class="pagination-link" aria-label="Goto page 86">86</a>
+    </li>
+  </ul>
+</nav>
+
+<nav id="pagination-centered" class="pagination is-centered">
+  {{ content }}
+</nav>
+
+<nav id="pagination-right" class="pagination is-right">
+  {{ content }}
+</nav>
+
+<nav id="pagination-rounded" class="pagination is-rounded">
+  {{ content }}
+</nav>
+
+<nav id="pagination-small" class="pagination is-small">
+  {{ content }}
+</nav>
+
+<nav id="pagination-medium" class="pagination is-medium">
+  {{ content }}
+</nav>
+
+<nav id="pagination-large" class="pagination is-large">
+  {{ content }}
+</nav>

diff --git a/docs/cypress/integration/components/pagination.spec.js b/docs/cypress/integration/components/pagination.spec.js
new file mode 100644 (file)
index 0000000..d8ecdb8
--- /dev/null
+++ b/docs/cypress/integration/components/pagination.spec.js
@@ -0,0 +1,189 @@
+describe("Components/Pagination", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+  });
+
+  it("has a Pagination", () => {
+    cy.get(".pagination").should("exist");
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get("#pagination").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+      expect(cs.textAlign).to.equal("center");
+    });
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("16px");
+      expect(cs.justifyContent).to.equal("center");
+      expect(cs.paddingLeft).to.equal("12px");
+      expect(cs.paddingRight).to.equal("12px");
+      expect(cs.textAlign).to.equal("center");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled),#pagination .pagination-link:not(.is-current)"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderColor).to.equal(Cypress.env("border"));
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.minWidth).to.equal("40px");
+    });
+
+    cy.get("#pagination .pagination-previous.is-disabled").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("border"));
+      expect(cs.borderColor).to.equal(Cypress.env("border"));
+      expect(cs.boxShadow).to.equal("none");
+      expect(cs.color).to.equal(Cypress.env("text-light"));
+      expect(cs.opacity).to.equal("0.5");
+    });
+
+    cy.get("#pagination .pagination-link.is-current").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+      expect(cs.borderColor).to.equal(Cypress.env("link"));
+      expect(cs.color).to.equal(Cypress.env("link-invert"));
+    });
+
+    cy.get(
+      "#pagination .pagination-previous:not(.is-disabled),#pagination .pagination-next:not(.is-disabled)"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.paddingLeft).to.equal("12px");
+      expect(cs.paddingRight).to.equal("12px");
+      expect(cs.whiteSpace).to.equal("nowrap");
+    });
+
+    cy.get("#pagination .pagination-ellipsis").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("grey-light"));
+      expect(cs.pointerEvents).to.equal("none");
+    });
+
+    cy.get("#pagination .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexWrap).to.equal("wrap");
+    });
+  });
+});
+
+// Mobile
+describe("Components/Pagination Mobile", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+    cy.viewport(
+      Cypress.env("viewports").mobile[0],
+      Cypress.env("viewports").mobile[1]
+    );
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get("#pagination").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexWrap).to.equal("wrap");
+      expect(cs.justifyContent).to.equal("center");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-list li"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("1");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.margin).to.equal("4px");
+    });
+  });
+});
+
+// Tablet
+describe("Components/Navbar Tablet", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/pagination/");
+    cy.viewport(
+      Cypress.env("viewports").tablet[0],
+      Cypress.env("viewports").tablet[1]
+    );
+  });
+
+  it("has a correct Pagination", () => {
+    cy.get("#pagination .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+      expect(cs.marginTop).to.equal("0px");
+    });
+
+    cy.get("#pagination .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("1");
+      expect(cs.justifyContent).to.equal("flex-start");
+      expect(cs.order).to.equal("1");
+    });
+
+    cy.get(
+      "#pagination .pagination-previous,#pagination .pagination-next,#pagination .pagination-link,#pagination .pagination-ellipsis"
+    ).then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+      expect(cs.marginTop).to.equal("0px");
+    });
+
+    cy.get("#pagination .pagination-previous").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("2");
+    });
+
+    cy.get("#pagination .pagination-next").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("3");
+    });
+  });
+
+  it("has a correct Pagination alignments", () => {
+    cy.get("#pagination-centered .pagination-previous").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("1");
+    });
+
+    cy.get("#pagination-centered .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("center");
+      expect(cs.order).to.equal("2");
+    });
+
+    cy.get("#pagination-centered .pagination-next").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("3");
+    });
+
+    cy.get("#pagination-right .pagination-previous").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("1");
+    });
+
+    cy.get("#pagination-right .pagination-list").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("flex-end");
+      expect(cs.order).to.equal("3");
+    });
+
+    cy.get("#pagination-right .pagination-next").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.order).to.equal("2");
+    });
+  });
+});