Add more specs

docs/cypress/integration/components/card.spec.js

@@ -0,0 +1,76 @@
+describe("Components/Card", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/card/");
+  });
+
+  it("has a Card", () => {
+    cy.get(".card").should("exist");
+  });
+
+  it("has a correct Card", () => {
+    cy.get("#card").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.boxShadow).to.equal(
+        "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+      );
+    });
+  });
+
+  it("has correct Card Item border-radius", () => {
+    cy.get("#card-only-content > .card-content:first-child").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderTopLeftRadius).to.equal("4px");
+      expect(cs.borderTopRightRadius).to.equal("4px");
+    });
+
+    cy.get("#card-only-content > .card-content:last-child").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderBottomLeftRadius).to.equal("4px");
+      expect(cs.borderBottomRightRadius).to.equal("4px");
+    });
+  });
+
+  it("has correct Card Header", () => {
+    cy.get("#card-header-content > .card-header").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+      expect(cs.boxShadow).to.equal("rgba(10, 10, 10, 0.1) 0px 2px 4px 0px");
+    });
+
+    cy.get("#card-header-content .card-header-title").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text-strong"));
+      expect(cs.fontWeight).to.equal("700");
+      expect(cs.padding).to.equal("12px 16px");
+    });
+
+    cy.get("#card-header-content .card-header-icon").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("12px 16px");
+    });
+  });
+
+  it("has correct Card Content", () => {
+    cy.get("#card .card-content").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("24px");
+    });
+  });
+
+  it("has correct Card Footer", () => {
+    cy.get("#card .card-footer").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+      expect(cs.borderTopColor).to.equal(Cypress.env("grey-lightest"));
+      expect(cs.borderTopStyle).to.equal("solid");
+      expect(cs.borderTopWidth).to.equal("1px");
+    });
+
+    cy.get("#card .card-footer-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("12px");
+    });
+  });
+});

docs/cypress/integration/components/dropdown.spec.js

@@ -0,0 +1,64 @@
+describe("Components/Dropdown", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/components/dropdown/");
+  });
+
+  it("has a Dropdown", () => {
+    cy.get(".dropdown").should("exist");
+  });
+
+  it("has a correct Dropdown Content", () => {
+    cy.get("#dropdown .dropdown-content").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("white"));
+      expect(cs.borderRadius).to.equal("4px");
+      expect(cs.boxShadow).to.equal(
+        "rgba(10, 10, 10, 0.1) 0px 8px 16px -2px, rgba(10, 10, 10, 0.02) 0px 0px 0px 1px"
+      );
+      expect(cs.paddingBottom).to.equal("8px");
+      expect(cs.paddingTop).to.equal("8px");
+    });
+  });
+
+  it("has a correct Dropdown Menu", () => {
+    cy.get("#dropdown .dropdown-menu").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("none");
+      expect(cs.paddingTop).to.equal("4px");
+      expect(cs.position).to.equal("absolute");
+      expect(cs.zIndex).to.equal("20");
+    });
+
+    cy.get("#dropdown-active .dropdown-menu").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+    });
+  });
+
+  it("has a correct Dropdown Item", () => {
+    cy.get("#dropdown .dropdown-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.color).to.equal(Cypress.env("text"));
+      expect(cs.display).to.equal("block");
+    });
+
+    cy.get("#dropdown a.dropdown-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("100%");
+    });
+
+    cy.get("#dropdown a.dropdown-item.is-active").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("link"));
+      expect(cs.color).to.equal(Cypress.env("link-invert"));
+    });
+  });
+
+  it("has a correct Dropdown Divider", () => {
+    cy.get("#dropdown .dropdown-divider").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("grey-lightest"));
+      expect(cs.height).to.equal("1px");
+    });
+  });
+});

docs/cypress/integration/layout/level.spec.js

@@ -0,0 +1,50 @@
+describe("Layout/Level", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/layout/level/");
+  });
+
+  it("has a Level", () => {
+    cy.get(".level").should("exist");
+  });
+
+  it("has a correct Level", () => {
+    cy.get("#level").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct Level Item", () => {
+    cy.get("#level .level-item").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+    });
+
+    cy.get("#level-centered .level-item .title").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+    });
+  });
+
+  it("has correct Level Left and Right", () => {
+    cy.get("#level .level-left").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.justifyContent).to.equal("flex-start");
+    });
+
+    cy.get("#level .level-right").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.flexGrow).to.equal("0");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.justifyContent).to.equal("flex-end");
+    });
+  });
+});