Add Title specs

diff --git a/docs/cyp/elements/title.html b/docs/cyp/elements/title.html
new file mode 100644 (file)
index 0000000..2fa714e
--- /dev/null
+++ b/docs/cyp/elements/title.html
@@ -0,0 +1,24 @@
+---
+layout: cypress
+title: Elements/Title
+---
+
+<h1 id="title" class="title">
+  Title <strong>strong</strong>
+</h1>
+
+{% for i in (1..7) %}
+  <p id="title-{{ i }}" class="title is-{{ i }}">
+    Title <strong>size {{ i }}</strong>
+  </p>
+{% endfor %}
+
+<h1 id="subtitle" class="subtitle">
+  Subtitle <strong>strong</strong>
+</h1>
+
+{% for i in (1..7) %}
+  <p id="subtitle-{{ i }}" class="subtitle is-{{ i }}">
+    Subtitle <strong>size {{ i }}</strong>
+  </p>
+{% endfor %}

diff --git a/docs/cypress/integration/elements/title.spec.js b/docs/cypress/integration/elements/title.spec.js
new file mode 100644 (file)
index 0000000..39a236b
--- /dev/null
+++ b/docs/cypress/integration/elements/title.spec.js
@@ -0,0 +1,63 @@
+describe("Elements/Title", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/elements/title/");
+  });
+
+  it("has a Title", () => {
+    cy.get(".title").should("exist");
+  });
+
+  it("has a correct Title", () => {
+    cy.get("#title").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.fontSize).to.equal(`${Cypress.env("sizes")["3"]}px`);
+      expect(cs.fontWeight).to.equal("600");
+      expect(cs.lineHeight).to.equal(`${Cypress.env("sizes")["3"] * 1.125}px`);
+    });
+
+    cy.get("#title strong").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.fontWeight).to.equal("600");
+    });
+  });
+
+  it("has correct Title sizes", () => {
+    for (let i = 1; i <= 7; i++) {
+      cy.get(`#title-${i}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[i]}px`);
+      });
+    }
+  });
+
+  it("has a Subtitle", () => {
+    cy.get(".subtitle").should("exist");
+  });
+
+  it("has a correct Subtitle", () => {
+    cy.get("#subtitle").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.fontSize).to.equal(`${Cypress.env("sizes")["5"]}px`);
+      expect(cs.fontWeight).to.equal("400");
+      expect(cs.lineHeight).to.equal(`${Cypress.env("sizes")["5"] * 1.25}px`);
+    });
+
+    cy.get("#subtitle strong").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.fontWeight).to.equal("600");
+    });
+  });
+
+  it("has correct Subtitle sizes", () => {
+    for (let i = 1; i <= 7; i++) {
+      cy.get(`#subtitle-${i}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[i]}px`);
+      });
+    }
+  });
+});