Add Progress and Table specs

This commit is contained in:
Jeremy Thomas 2021-11-01 09:51:24 +00:00
parent 6ec2520b1a
commit 7e989d5121
6 changed files with 134 additions and 1 deletions

View File

@ -0,0 +1,15 @@
---
layout: cypress
title: Elements/Progress
---
<div class="block">
<progress id="progress" class="progress" value="15" max="100">15%</progress>
</div>
<div class="block">
<progress id="progress-small" class="progress is-small" value="15" max="100">15%</progress>
<progress id="progress-normal" class="progress" value="15" max="100">30%</progress>
<progress id="progress-medium" class="progress is-medium" value="15" max="100">45%</progress>
<progress id="progress-large" class="progress is-large" value="15" max="100">60%</progress>
</div>

View File

@ -0,0 +1,50 @@
---
layout: cypress
title: Elements/Table
---
{% capture table_content %}
<thead>
<tr>
{% for j in (1..10) %}
<th>{{ j }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for i in (1..5) %}
<tr>
{% for j in (1..10) %}
<td>{{ j | times: i }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr class="is-selected">
{% for j in (1..10) %}
<td>{{ j }}</td>
{% endfor %}
</tr>
</tbody>
{% endcapture %}
<table id="table" class="table">
{{ table_content }}
</table>
<table id="table-bordered" class="table is-bordered">
{{ table_content }}
</table>
<table id="table-striped" class="table is-striped">
{{ table_content }}
</table>
<table id="table-narrow" class="table is-narrow">
{{ table_content }}
</table>
<div style="width: 800px;">
<table id="table-fullwidth" class="table is-fullwidth">
{{ table_content }}
</table>
</div>

View File

@ -69,6 +69,20 @@
"desktop": [1024, 800],
"widescreen": [1216, 900],
"fullhd": [1408, 1200]
},
"sizes": {
"1": 48,
"2": 40,
"3": 32,
"4": 24,
"5": 20,
"6": 16,
"7": 12,
"small": 12,
"normal": 16,
"medium": 20,
"large": 24
}
}
}

View File

@ -1,4 +1,4 @@
describe("Elements/notification", () => {
describe("Elements/Notification", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/notification/");
});

View File

@ -0,0 +1,38 @@
describe("Elements/Progress", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/progress/");
});
it("has a Progress element", () => {
cy.get("#progress").should("exist");
});
it("has a correct Progress", () => {
cy.get("#progress").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").normal}px`);
});
});
it("has correct Progress sizes", () => {
cy.get("#progress-small").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").small}px`);
});
cy.get("#progress-normal").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").normal}px`);
});
cy.get("#progress-medium").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").medium}px`);
});
cy.get("#progress-large").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.height).to.equal(`${Cypress.env("sizes").large}px`);
});
});
});

View File

@ -0,0 +1,16 @@
describe("Elements/Table", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/table/");
});
it("has a Table element", () => {
cy.get("#table").should("exist");
});
it("has a correct Table", () => {
cy.get("#table").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
});
});
});