Add form tools specs

docs/cyp/form/tools.html

@@ -0,0 +1,110 @@
+---
+layout: cypress
+title: Form/Tools
+---
+
+{% capture content %}
+  <div class="control">
+    <input class="input" type="text" placeholder="Find a repository">
+  </div>
+  <div class="control">
+    <a class="button is-info">
+      Search
+    </a>
+  </div>
+{% endcapture %}
+
+<label id="label" class="label">
+  Form label
+</label>
+
+{% for size in site.data.sizes %}
+  <label id="label-{{ size }}" class="label is-{{ size }}">
+    {{ size | capitalize }} form label
+  </label>
+{% endfor %}
+
+<p id="help" class="help">This username is available</p>
+
+{% for color in site.data.colors.justColors %}
+  <p id="help-{{ color }}" class="help is-{{ color }}">This username is available</p>
+{% endfor %}
+
+<div id="field" class="field">
+  {{ content }}
+</div>
+
+<div id="field-has-addons" class="field has-addons">
+  {{ content }}
+</div>
+
+<div id="field-has-addons-centered" class="field has-addons has-addons-centered">
+  {{ content }}
+</div>
+
+<div id="field-has-addons-right" class="field has-addons has-addons-right">
+  {{ content }}
+</div>
+
+<div id="field-has-addons-fullwidth" class="field has-addons has-addons-fullwidth">
+  {{ content }}
+</div>
+
+<div id="field-is-grouped" class="field is-grouped">
+  {{ content }}
+</div>
+
+<div id="field-is-grouped-centered" class="field is-grouped is-grouped-centered">
+  {{ content }}
+</div>
+
+<div id="field-is-grouped-right" class="field is-grouped is-grouped-right">
+  {{ content }}
+</div>
+
+<div id="field-is-grouped-multiline" class="field is-grouped is-grouped-multiline">
+  {{ content }}
+</div>
+
+<div id="field-is-horizontal" class="field is-horizontal">
+  {{ content }}
+</div>
+
+<div class="field is-horizontal">
+  <div id="field-label" class="field-label is-normal">
+    <label class="label">From</label>
+  </div>
+
+  <div id="field-body" class="field-body">
+    <div class="field">
+      <p class="control is-expanded has-icons-left">
+        <input class="input" type="text" placeholder="Name">
+        <span class="icon is-small is-left">
+          <i class="fas fa-user"></i>
+        </span>
+      </p>
+    </div>
+
+    <div class="field">
+      <p class="control is-expanded has-icons-left has-icons-right">
+        <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
+        <span class="icon is-small is-left">
+          <i class="fas fa-envelope"></i>
+        </span>
+        <span class="icon is-small is-right">
+          <i class="fas fa-check"></i>
+        </span>
+      </p>
+
+      <div class="field"></div>
+    </div>
+  </div>
+</div>
+
+{% for size in site.data.sizes %}
+  <div id="field-label-{{ size }}" class="field-label is-{{ size }}">
+    {{ size | capitalize }} field label
+  </div>
+{% endfor %}
+
+<p>Last element</p>

docs/cypress.json

@@ -83,6 +83,12 @@
     "size-medium": "20px",
     "size-large": "24px",
 
+    "weight-light": "300",
+    "weight-normal": "400",
+    "weight-medium": "500",
+    "weight-semibold": "600",
+    "weight-bold": "700",
+
     "viewports": {
       "mobile": [320, 480],
       "tablet": [769, 640],

docs/cypress/.gitignore

@@ -1 +1,2 @@
-videos
+/screenshots
+/videos

docs/cypress/integration/form/select.spec.js

@@ -1,4 +1,4 @@
-describe("Form/select", () => {
+describe("Form/Select", () => {
   beforeEach(() => {
     cy.visit("http://127.0.0.1:4000/cyp/form/select/");
   });

docs/cypress/integration/form/tools.spec.js

@@ -0,0 +1,227 @@
+import { setDesktop } from "../utils";
+
+// describe("Form/Label", () => {
+//   beforeEach(() => {
+//     cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+//   });
+
+//   it("has a Label", () => {
+//     cy.get(".label").should("exist");
+//   });
+
+//   it("has a correct Label", () => {
+//     cy.get("#label").then(($) => {
+//       const cs = window.getComputedStyle($[0]);
+//       expect(cs.color).to.equal(Cypress.env("text-strong"));
+//       expect(cs.display).to.equal("block");
+//       expect(cs.fontSize).to.equal(Cypress.env("size-normal"));
+//       expect(cs.fontWeight).to.equal(Cypress.env("weight-bold"));
+//     });
+//   });
+
+
+//   it("has correct Label sizes", () => {
+//     for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+//       const size = Cypress.env("just-sizes")[i];
+
+//       cy.get(`#label-${size}`).then(($) => {
+//         const cs = window.getComputedStyle($[0]);
+//         expect(cs.fontSize).to.equal(`${Cypress.env("sizes")[size]}px`);
+//       });
+//     }
+//   });
+// });
+
+// describe("Form/Help", () => {
+//   beforeEach(() => {
+//     cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+//   });
+
+//   it("has a Help", () => {
+//     cy.get(".help").should("exist");
+//   });
+
+//   it("has a correct Help", () => {
+//     cy.get("#help").then(($) => {
+//       const cs = window.getComputedStyle($[0]);
+//       expect(cs.display).to.equal("block");
+//       expect(cs.fontSize).to.equal(Cypress.env("size-small"));
+//       expect(cs.marginTop).to.equal("4px");
+//     });
+//   });
+
+
+//   it("has correct Help colors", () => {
+//     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(`#help-${name}`).then(($) => {
+//       const cs = window.getComputedStyle($[0]);
+//         expect(cs.color).to.equal(baseColor);
+//       });
+//     }
+//   });
+// });
+
+describe("Form/Field", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+    setDesktop();
+  });
+
+  it("has a Field", () => {
+    cy.get(".field").should("exist");
+  });
+
+  it("has a correct Field", () => {
+    cy.get("#field").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("12px");
+    });
+  });
+
+  it("has a correct Field with addons", () => {
+    cy.get("#field-has-addons").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+      expect(cs.justifyContent).to.equal("flex-start");
+    });
+  });
+
+  it("has a correct Field with addons centered", () => {
+    cy.get("#field-has-addons-centered").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("center");
+    });
+  });
+
+  it("has a correct Field with addons right", () => {
+    cy.get("#field-has-addons-right").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("flex-end");
+    });
+  });
+
+  it("has a correct Field with addons fullwidth .control", () => {
+    cy.get("#field-has-addons-fullwidth .control").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("0");
+    });
+  });
+
+  it("has a correct Field grouped", () => {
+    cy.get("#field-is-grouped").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+      expect(cs.justifyContent).to.equal("flex-start");
+    });
+  });
+
+  it("has a correct Field grouped centered", () => {
+    cy.get("#field-is-grouped-centered").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("center");
+    });
+  });
+
+  it("has a correct Field grouped right", () => {
+    cy.get("#field-is-grouped-right").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.justifyContent).to.equal("flex-end");
+    });
+  });
+
+  it("has a correct Field grouped multiline", () => {
+    cy.get("#field-is-grouped-multiline").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexWrap).to.equal("wrap");
+    });
+  });
+
+  it("has a correct Field horizontal", () => {
+    cy.get("#field-is-horizontal").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+  });
+});
+
+describe("Form/Field Label", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+    setDesktop();
+  });
+
+  it("has a Field Label", () => {
+    cy.get(".field-label").should("exist");
+  });
+
+  it("has a correct Field Label", () => {
+    cy.get("#field-label").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexBasis).to.equal("0px");
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("0");
+      expect(cs.textAlign).to.equal("right");
+    });
+
+    cy.get("#field-label .label").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.fontSize).to.equal("16px");
+    });
+  });
+
+  it("has correct Field Label sizes", () => {
+    for (let i = 0; i < Cypress.env("just-sizes").length; i++) {
+      const size = Cypress.env("just-sizes")[i];
+
+      cy.get(`#field-label-${size}`).then(($) => {
+        const cs = window.getComputedStyle($[0]);
+        const sizeValue = Cypress.env("sizes")[size];
+        expect(cs.fontSize).to.equal(`${sizeValue}px`);
+        expect(cs.paddingTop).to.equal(`${sizeValue * 0.375}px`);
+      });
+    }
+  });
+});
+
+describe("Form/Field Body", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/form/tools/");
+    setDesktop();
+  });
+
+  it("has a Field Body", () => {
+    cy.get(".field-body").should("exist");
+  });
+
+  it("has a correct Field Body", () => {
+    cy.get("#field-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+      expect(cs.flexBasis).to.equal("0px");
+      expect(cs.flexGrow).to.equal("5");
+      expect(cs.flexShrink).to.equal("1");
+    });
+
+    cy.get("#field-body .field").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+    });
+
+    cy.get("#field-body > .field").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexShrink).to.equal("1");
+    });
+
+    cy.get("#field-body .field .field").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.marginBottom).to.equal("0px");
+    });
+  });
+});

docs/package.json

@@ -24,6 +24,8 @@
     "css-cleancss": "cleancss -o css/bulma-docs.min.css css/bulma-docs.css",
     "css-sass": "node-sass --output-style expanded bulma-docs.scss css/bulma-docs.css",
     "css-watch": "npm run css-sass -- --watch",
+    "cypress-open": "./node_modules/.bin/cypress open",
+    "cypress-run": "./node_modules/.bin/cypress run",
     "deploy": "npm run css-build && npm run js-build",
     "js-build": "babel _javascript --out-dir lib",
     "js-watch": "npm run js-build -- --watch",