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 pagination specs

Browse Source
This commit is contained in:
Jeremy Thomas 2021-11-07 17:50:46 +00:00
parent 8e9f79860d
commit 492cfb6950
2 changed files with 259 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/cyp/components/pagination.html Normal file
View File

@ -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>

189
docs/cypress/integration/components/pagination.spec.js Normal file
View File

@ -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");
});
});
});