More frontend tests

package.json

@@ -93,13 +93,12 @@
         ],
         "coverageThreshold": {
             "global": {
-                "statements": 73,
-                "branches": 39,
-                "functions": 49,
-                "lines": 68
+                "statements": 80,
+                "branches": 80,
+                "functions": 80,
+                "lines": 80
             }
         },
-        "testEnvironment": "node",
         "transform": {
             "^.+\\.tsx?$": "ts-jest"
         },
@@ -109,7 +108,7 @@
         "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
         "moduleNameMapper": {
             "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/testFileStub.tsx",
-            "\\.(css|sass)$": "<rootDir>/src/__mocks__/emptyModule.tsx"
+            "\\.(css|scss)$": "<rootDir>/src/__mocks__/emptyModule.tsx"
         },
         "moduleFileExtensions": [
             "ts",

src/__mocks__/clickMock.tsx

@@ -1,3 +1,3 @@
 // Copyright (c) 2018 Ultimaker B.V.
 
-export const mockClickEvent = { stopPropagation: () => { } };
+export const mockClickEvent = { stopPropagation: jest.fn(), preventDefault: jest.fn() };

src/__mocks__/testFileStub.tsx

@@ -0,0 +1,2 @@
+// Copyright (c) 2018 Ultimaker B.V.
+module.exports = 'test-file-stub';

src/components/__tests__/__snapshots__/button.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`The Button component renders a anchor when prop \`type\` is link 1`] = `
+exports[`The Button component renders a anchor when prop \`type\` is link and an external link is given 1`] = `
 <a
   className="btn btn--primary btn--rectangle "
   href="https://ultimaker.com/"
@@ -14,6 +14,20 @@ exports[`The Button component renders a anchor when prop \`type\` is link 1`] =
 </a>
 `;
 
+exports[`The Button component renders a link when prop \`type\` is link and an internal link is given 1`] = `
+<Link
+  className="btn btn--primary btn--rectangle "
+  replace={false}
+  to="/print_jobs"
+>
+  <span
+    className="text"
+  >
+    Button text
+  </span>
+</Link>
+`;
+
 exports[`The Button component should render 1`] = `
 <button
   className="btn btn--primary btn--rectangle "

src/components/__tests__/__snapshots__/form.test.tsx.snap

@@ -5,5 +5,116 @@ exports[`The Form component should render 1`] = `
   className="form"
   noValidate={true}
   onSubmit={[Function]}
-/>
+>
+  <div
+    className="form__actions"
+  >
+    <div
+      className="form__btn-container"
+    >
+      <Button
+        className=""
+        disabled={true}
+        linkToNewTab={false}
+        shape="rectangle"
+        style="primary"
+        type="submit"
+      >
+        primaryBtnText
+      </Button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`The Form component should render with a form item 1`] = `
+<Form
+  onSubmitHandler={[MockFunction]}
+  primaryBtnText="primaryBtnText"
+>
+  <form
+    className="form"
+    noValidate={true}
+    onSubmit={[Function]}
+  >
+    <div
+      className="form__item"
+      key=".0"
+    >
+      <InputField
+        id="test"
+        labelLayoutWidth="1/1"
+        labelWidthBreakpoint="sm"
+        onChangeHandler={[MockFunction]}
+        type="text"
+        value={null}
+      >
+        <div
+          className="input-field input-field--text layout"
+        >
+          <InputFieldInput
+            id="test"
+            labelLayoutWidth="1/1"
+            labelWidthBreakpoint="sm"
+            onChangeHandler={[Function]}
+            type="text"
+            value={null}
+          >
+            <div
+              className="layout__item u-fill layout__item--middle"
+            >
+              <div
+                className="input-container layout layout--gutter-xs"
+              >
+                <div
+                  className="layout__item u-fill"
+                >
+                  <input
+                    className="input"
+                    id="test"
+                    max={null}
+                    min={null}
+                    name="test"
+                    onChange={[Function]}
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </InputFieldInput>
+        </div>
+      </InputField>
+    </div>
+    <div
+      className="form__actions"
+    >
+      <div
+        className="form__btn-container"
+      >
+        <Button
+          className=""
+          disabled={true}
+          linkToNewTab={false}
+          shape="rectangle"
+          style="primary"
+          type="submit"
+        >
+          <button
+            className="btn btn--primary btn--rectangle  disabled"
+            disabled={true}
+            onClick={[Function]}
+            type="submit"
+          >
+            <span
+              className="text"
+            >
+              primaryBtnText
+            </span>
+          </button>
+        </Button>
+      </div>
+    </div>
+  </form>
+</Form>
 `;

src/components/__tests__/__snapshots__/image_upload.test.tsx.snap

@@ -1,13 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`The ImageFile component should render 1`] = `
-<Component
+<t
   accept="image/jpeg, image/png"
   className="image-upload"
+  disableClick={false}
+  disablePreview={false}
+  disabled={false}
+  getDataTransferItems={[Function]}
+  inputProps={Object {}}
+  maxSize={Infinity}
+  minSize={0}
   multiple={false}
   onDragEnter={[Function]}
   onDragLeave={[Function]}
   onDrop={[Function]}
+  preventDropOnDocument={true}
   style={
     Object {
       "height": "18rem",
@@ -27,5 +35,5 @@ exports[`The ImageFile component should render 1`] = `
   <div
     className="placeholder placeholder--round"
   />
-</Component>
+</t>
 `;

src/components/__tests__/__snapshots__/input_field_input.test.tsx.snap

@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`The InputFieldInput component should render 1`] = `
+exports[`The InputFieldInput component should render a static text field 1`] = `
+<Fragment>
+  <div
+    className="layout__item u-fit layout__item--middle"
+  >
+    Test input
+  </div>
+</Fragment>
+`;
+
+exports[`The InputFieldInput component should render a text input 1`] = `
 <Fragment>
   <div
     className="layout__item u-fill layout__item--middle"
@@ -26,3 +36,37 @@ exports[`The InputFieldInput component should render 1`] = `
   </div>
 </Fragment>
 `;
+
+exports[`The InputFieldInput component should render children after the input 1`] = `
+<Fragment>
+  <div
+    className="layout__item u-fill layout__item--middle"
+  >
+    <div
+      className="input-container layout layout--gutter-xs"
+    >
+      <div
+        className="layout__item u-fill"
+      >
+        <input
+          className="input"
+          id="testInputField"
+          max={null}
+          min={null}
+          name="testInputField"
+          onChange={[Function]}
+          type="text"
+          value="Test input"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="layout__item u-fit"
+  >
+    <div
+      className="child"
+    />
+  </div>
+</Fragment>
+`;

src/components/__tests__/__snapshots__/input_field_label.test.tsx.snap

@@ -19,3 +19,84 @@ exports[`The InputFieldLabel component should render 1`] = `
   </div>
 </div>
 `;
+
+exports[`The InputFieldLabel component should render info link 1`] = `
+<div
+  className="input-field__label layout__item u-1/1-sm"
+>
+  <div
+    className="layout layout--gutter-sm"
+  >
+    <div
+      className="layout__item u-fit"
+    >
+      <label
+        htmlFor="testInputField"
+      >
+        Input label
+      </label>
+    </div>
+    <div
+      className="layout__item u-fit input-field__label-addition"
+    >
+      <InfoLink
+        infoLinkURL="https://ultimaker.com/"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`The InputFieldLabel component should render info tooltip 1`] = `
+<div
+  className="input-field__label layout__item u-1/1-sm"
+>
+  <div
+    className="layout layout--gutter-sm"
+  >
+    <div
+      className="layout__item u-fit"
+    >
+      <label
+        htmlFor="testInputField"
+      >
+        Input label
+      </label>
+    </div>
+    <div
+      className="layout__item u-fit input-field__label-addition"
+    >
+      <InfoTooltip
+        infoText="Test tooltip text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`The InputFieldLabel component should render pre label element before the label 1`] = `
+<div
+  className="input-field__label layout__item u-1/1-sm"
+>
+  <div
+    className="layout layout--gutter-sm"
+  >
+    <div
+      className="layout__item u-fit input-field__pre-element"
+    >
+      <div
+        className="pre-label-element"
+      />
+    </div>
+    <div
+      className="layout__item u-fit"
+    >
+      <label
+        htmlFor="testInputField"
+      >
+        Input label
+      </label>
+    </div>
+  </div>
+</div>
+`;