Add Progress and Table specs

docs/cyp/elements/progress.html

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

docs/cyp/elements/table.html

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

docs/cypress.json

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

docs/cypress/integration/elements/notification.spec.js

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

docs/cypress/integration/elements/progress.spec.js

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

docs/cypress/integration/elements/table.spec.js

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