Add Content, Icon, Image specs

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

@@ -9,8 +9,7 @@ describe("Elements/Box", () => {
 
   it("has a correct .box element", () => {
     cy.get(".box").then(($) => {
-      const el = $[0];
-      const cs = window.getComputedStyle(el);
+      const cs = window.getComputedStyle($[0]);
       expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main"));
       expect(cs.borderRadius).to.equal("6px");
       expect(cs.boxShadow).to.equal(

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

@@ -0,0 +1,68 @@
+describe("Elements/Content", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/elements/content/");
+  });
+
+  it("has a Content element", () => {
+    cy.get(".content").should("exist");
+  });
+
+  it("has correct headings", () => {
+    cy.get(".content h1").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("32px");
+    });
+
+    cy.get(".content h2").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("28px");
+    });
+
+    cy.get(".content h3").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("24px");
+    });
+
+    cy.get(".content h4").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("20px");
+    });
+
+    cy.get(".content h5").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("18px");
+    });
+
+    cy.get(".content h6").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("16px");
+    });
+  });
+
+  it("has a correct blockquote", () => {
+    cy.get(".content blockquote").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white-ter"));
+      expect(cs.padding).to.equal("20px 24px");
+    });
+  });
+
+  it("has correct lists", () => {
+    cy.get(".content ol li").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.listStyleType).to.equal("decimal");
+    });
+
+    cy.get(".content ul li").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.listStyleType).to.equal("disc");
+    });
+  });
+
+  it("has a correct pre", () => {
+    cy.get(".content pre").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("17.5px 21px");
+    });
+  });
+});

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

@@ -0,0 +1,60 @@
+describe("Elements/Icon", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/elements/icon/");
+  });
+
+  it("has a .icon element", () => {
+    cy.get(".icon").should("exist");
+  });
+
+  it("has a correct Icon element", () => {
+    cy.get("#icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("24px");
+      expect(cs.width).to.equal("24px");
+    });
+  });
+
+  it("has correct Icon sizes", () => {
+    cy.get("#icon-small").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("16px");
+      expect(cs.width).to.equal("16px");
+    });
+
+    cy.get("#icon-normal").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("24px");
+      expect(cs.width).to.equal("24px");
+    });
+
+    cy.get("#icon-medium").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("32px");
+      expect(cs.width).to.equal("32px");
+    });
+
+    cy.get("#icon-large").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("48px");
+      expect(cs.width).to.equal("48px");
+    });
+  });
+
+  it("has correct Icon Text elements", () => {
+    cy.get("#icon-text").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("inline-flex");
+    });
+
+    cy.get("#icon-text > .icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginRight).to.equal("4px");
+    });
+
+    cy.get("#icon-text-div").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+  });
+});

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

@@ -0,0 +1,63 @@
+describe("Elements/Image", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/elements/image/");
+  });
+
+  it("has a Image", () => {
+    cy.get(".image").should("exist");
+  });
+
+  it("has a correct Image", () => {
+    cy.get("#image").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.height).to.equal("128px");
+      expect(cs.width).to.equal("128px");
+    });
+  });
+
+  it("has a correct rounded Image", () => {
+    cy.get("#image-rounded img").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderRadius).to.equal("9999px");
+    });
+  });
+
+  it("has a correct Image dimensions", () => {
+    [16, 24, 32, 48, 64, 96, 128].forEach((dimension) => {
+      cy.get(`#image-${dimension}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.height).to.equal(`${dimension}px`);
+        expect(cs.width).to.equal(`${dimension}px`);
+      });
+    });
+  });
+
+  it("has correct Image ratios", () => {
+    [
+      ["1by1", 1],
+      ["5by4", 0.8],
+      ["4by3", 0.75],
+      ["3by2", 0.6666],
+      ["5by3", 0.6],
+      ["16by9", 0.5625],
+      ["2by1", 0.5],
+      ["3by1", 0.3333],
+      ["4by5", 1.25],
+      ["3by4", 1.3333],
+      ["2by3", 1.5],
+      ["3by5", 1.6666],
+      ["9by16", 1.7777],
+      ["1by2", 2],
+      ["1by3", 3],
+    ].forEach((ratio) => {
+      cy.get(`#image-${ratio[0]} img`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        const height = cs.height.substring(0, cs.height.length - 2);
+        expect(`${Math.round(height)}px`).to.equal(
+          `${Math.round(100 * ratio[1])}px`
+        );
+        expect(cs.width).to.equal("100px");
+      });
+    });
+  });
+});