Add input textarea specs

docs/cyp/form/input-textarea.html

@@ -0,0 +1,26 @@
+---
+layout: cypress
+title: Form/Input Textarea
+---
+
+<input id="input" class="input" type="text" placeholder="Text input">
+
+{% for color in site.data.colors.justColors %}
+  <input id="input-{{ color }}" class="input is-{{ color }}" type="text" placeholder="{{ color | capitalize }} input">
+{% endfor %}
+
+{% for size in site.data.sizes %}
+  <input id="input-{{ size }}" class="input is-{{ size }}" type="text" placeholder="{{ size | capitalize }} input">
+{% endfor %}
+
+<input id="input-fullwidth" class="input is-fullwidth" type="text" placeholder="Fullwidth input">
+
+<input id="input-inline" class="input is-inline" type="text" placeholder="Inline input">
+
+<input id="input-rounded" class="input is-rounded" type="text" placeholder="Rounded input">
+
+<input id="input-static" class="input is-static" type="text" placeholder="Static input">
+
+<textarea id="textarea" class="textarea" placeholder="Textarea"></textarea>
+
+<textarea id="textarea-fixed" class="textarea has-fixed-size" placeholder="Textarea fixed"></textarea>

docs/cypress.json

@@ -68,6 +68,21 @@
     "text-light": "rgb(122, 122, 122)",
     "text-invert": "rgb(255, 255, 255)",
 
+    "control-radius": "4px",
+    "control-radius-small": "2px",
+    "control-border-width": "1px",
+    "control-height": "40px",
+    "control-line-height": "24px",
+    "control-padding-vertical": "7px",
+    "control-padding-horizontal": "11px",
+
+    "input-shadow": "rgba(10, 10, 10, 0.05) 0px 1px 2px 0px inset",
+
+    "size-small": "12px",
+    "size-normal": "16px",
+    "size-medium": "20px",
+    "size-large": "24px",
+
     "viewports": {
       "mobile": [320, 480],
       "tablet": [769, 640],
@@ -88,6 +103,8 @@
       "normal": 16,
       "medium": 20,
       "large": 24
-    }
+    },
+
+    "just-sizes": ["small", "normal", "medium", "large"]
   }
 }

docs/cypress/integration/form/input-textarea.spec.js

@@ -0,0 +1,153 @@
+describe("Form/Input", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/input-textarea/");
+  });
+
+  it("has a Input", () => {
+    cy.get(".input").should("exist");
+  });
+
+  it("has a correct Input", () => {
+    cy.get("#input").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.borderStyle).to.equal("solid");
+      expect(cs.borderWidth).to.equal("1px");
+      expect(cs.borderRadius).to.equal(Cypress.env("control-radius"));
+      expect(cs.boxShadow).to.equal(Cypress.env("input-shadow"));
+      expect(cs.display).to.equal("inline-flex");
+      expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+      expect(cs.height).to.equal(Cypress.env("control-height"));
+      expect(cs.justifyContent).to.equal("flex-start");
+      expect(cs.lineHeight).to.equal(Cypress.env("control-line-height"));
+      expect(cs.paddingBottom).to.equal(
+        Cypress.env("control-padding-vertical")
+      );
+      expect(cs.paddingLeft).to.equal(
+        Cypress.env("control-padding-horizontal")
+      );
+      expect(cs.paddingRight).to.equal(
+        Cypress.env("control-padding-horizontal")
+      );
+      expect(cs.paddingTop).to.equal(Cypress.env("control-padding-vertical"));
+      expect(cs.position).to.equal("relative");
+      expect(cs.verticalAlign).to.equal("top");
+    });
+  });
+
+  it(`has correct color File`, () => {
+    for (let i = 0; i < Cypress.env("color-names").length; i++) {
+      const name = Cypress.env("color-names")[i];
+      const baseColor = Cypress.env(name);
+      const invertColor = Cypress.env(`${name}-invert`);
+      const lightColor = Cypress.env(`${name}-light`);
+      const darkColor = Cypress.env(`${name}-dark`);
+
+      cy.get(`#input-${name}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.borderColor).to.equal(baseColor);
+      });
+    }
+  });
+
+  it("has correct File sizes", () => {
+    for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+      const size = Cypress.env("just-sizes")[i];
+
+      cy.get(`#input-${size}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
+      });
+    }
+  });
+
+  it("has a correct fullwidth Input", () => {
+    let viewport;
+
+    cy.document()
+      .then((doc) => {
+        return doc.documentElement.getBoundingClientRect();
+      })
+      .then((rect) => {
+        viewport = rect;
+      });
+
+    cy.get("#input-fullwidth").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+  });
+
+  it("has a correct fullwidth Input", () => {
+    cy.get("#input-inline").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("inline");
+    });
+  });
+
+  it("has a correct rounded Input", () => {
+    cy.get("#input-rounded").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.borderRadius).to.equal("9999px");
+      expect(cs.paddingLeft).to.equal("17px");
+      expect(cs.paddingRight).to.equal("17px");
+    });
+  });
+
+  it("has a correct static Input", () => {
+    cy.get("#input-static").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
+      expect(cs.borderColor).to.equal(Cypress.env("transparent"));
+      expect(cs.boxShadow).to.equal("none");
+      expect(cs.paddingLeft).to.equal("0px");
+      expect(cs.paddingRight).to.equal("0px");
+    });
+  });
+});
+
+describe("Form/Textarea", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/input-textarea/");
+  });
+
+  it("has a Textarea", () => {
+    cy.get(".textarea").should("exist");
+  });
+
+  it("has a correct Textarea", () => {
+    cy.get("#textarea").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.borderStyle).to.equal("solid");
+      expect(cs.borderWidth).to.equal("1px");
+      expect(cs.borderRadius).to.equal(Cypress.env("control-radius"));
+      expect(cs.boxShadow).to.equal(Cypress.env("input-shadow"));
+      expect(cs.display).to.equal("block");
+      expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+      expect(cs.justifyContent).to.equal("flex-start");
+      expect(cs.lineHeight).to.equal(Cypress.env("control-line-height"));
+      expect(cs.paddingBottom).to.equal(
+        Cypress.env("control-padding-horizontal")
+      );
+      expect(cs.paddingLeft).to.equal(
+        Cypress.env("control-padding-horizontal")
+      );
+      expect(cs.paddingRight).to.equal(
+        Cypress.env("control-padding-horizontal")
+      );
+      expect(cs.paddingTop).to.equal(Cypress.env("control-padding-horizontal"));
+      expect(cs.position).to.equal("relative");
+      expect(cs.resize).to.equal("vertical");
+      expect(cs.verticalAlign).to.equal("top");
+    });
+  });
+
+  it("has a correct Textarea fixed", () => {
+    cy.get("#textarea-fixed").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.resize).to.equal("none");
+    });
+  });
+});