diff --git a/package.json b/package.json
index 6171b886..d3a6f240 100755
--- a/package.json
+++ b/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",
diff --git a/src/__mocks__/clickMock.tsx b/src/__mocks__/clickMock.tsx
index 3beede51..a39904a5 100644
--- a/src/__mocks__/clickMock.tsx
+++ b/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() };
diff --git a/src/__mocks__/testFileStub.tsx b/src/__mocks__/testFileStub.tsx
new file mode 100644
index 00000000..872eec66
--- /dev/null
+++ b/src/__mocks__/testFileStub.tsx
@@ -0,0 +1,2 @@
+// Copyright (c) 2018 Ultimaker B.V.
+module.exports = 'test-file-stub';
\ No newline at end of file
diff --git a/src/components/__tests__/__snapshots__/button.test.tsx.snap b/src/components/__tests__/__snapshots__/button.test.tsx.snap
index a6872e1e..e30decb3 100644
--- a/src/components/__tests__/__snapshots__/button.test.tsx.snap
+++ b/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 "
diff --git a/src/components/__tests__/__snapshots__/form.test.tsx.snap b/src/components/__tests__/__snapshots__/form.test.tsx.snap
index b1b29a4f..eabb5ab0 100644
--- a/src/components/__tests__/__snapshots__/form.test.tsx.snap
+++ b/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>
 `;
diff --git a/src/components/__tests__/__snapshots__/image_upload.test.tsx.snap b/src/components/__tests__/__snapshots__/image_upload.test.tsx.snap
index 871b5925..be3dad22 100644
--- a/src/components/__tests__/__snapshots__/image_upload.test.tsx.snap
+++ b/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>
 `;
diff --git a/src/components/__tests__/__snapshots__/input_field_input.test.tsx.snap b/src/components/__tests__/__snapshots__/input_field_input.test.tsx.snap
index f43847eb..6b8489b4 100644
--- a/src/components/__tests__/__snapshots__/input_field_input.test.tsx.snap
+++ b/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>
+`;
diff --git a/src/components/__tests__/__snapshots__/input_field_label.test.tsx.snap b/src/components/__tests__/__snapshots__/input_field_label.test.tsx.snap
index 3381e767..d61dc6e5 100644
--- a/src/components/__tests__/__snapshots__/input_field_label.test.tsx.snap
+++ b/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>
+`;
diff --git a/src/components/__tests__/__snapshots__/input_field_validation.test.tsx.snap b/src/components/__tests__/__snapshots__/input_field_validation.test.tsx.snap
index a96992a2..24493ff9 100644
--- a/src/components/__tests__/__snapshots__/input_field_validation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/input_field_validation.test.tsx.snap
@@ -1,5 +1,68 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`The InputFieldValidation component should apply the correct offset class 1`] = `
+<div
+  className="layout__item u-full input-field__validation"
+>
+  <div
+    className="layout"
+  >
+    <div
+      className="layout__item u-1/3-sm"
+    />
+    <div
+      className="layout__item u-fill "
+    >
+      <div
+        className="input-field__error-message"
+      >
+        Validation error
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`The InputFieldValidation component should apply the correct offset class for the required icon 1`] = `
+<div
+  className="layout__item u-full input-field__validation"
+>
+  <div
+    className="layout"
+  >
+    <div
+      className="layout__item u-fill text-right offset-for-required"
+    >
+      <div
+        className="input-field__error-message"
+      >
+        Validation error
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`The InputFieldValidation component should apply the correct positional class 1`] = `
+<div
+  className="layout__item u-full input-field__validation"
+>
+  <div
+    className="layout"
+  >
+    <div
+      className="layout__item u-fill text-right"
+    >
+      <div
+        className="input-field__error-message"
+      >
+        Validation error
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`The InputFieldValidation component should render 1`] = `
 <div
   className="layout__item u-full input-field__validation"
@@ -8,7 +71,7 @@ exports[`The InputFieldValidation component should render 1`] = `
     className="layout"
   >
     <div
-      className="layout__item u-fill null"
+      className="layout__item u-fill "
     >
       <div
         className="input-field__error-message"
diff --git a/src/components/__tests__/__snapshots__/slide_in_panel.test.tsx.snap b/src/components/__tests__/__snapshots__/slide_in_panel.test.tsx.snap
index bde82422..fff4a054 100644
--- a/src/components/__tests__/__snapshots__/slide_in_panel.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/slide_in_panel.test.tsx.snap
@@ -31,6 +31,78 @@ exports[`The SlideInPanel component should render 1`] = `
         Body
       </div>
     </div>
+    <div
+      class="slide-in-panel__footer"
+    >
+      <div>
+        Footer
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`The SlideInPanel component should render header labels 1`] = `
+<div
+  class="slide-in-panel"
+>
+  <div
+    class="slide-in-panel__overlay"
+  />
+  <div
+    class="slide-in-panel__container"
+    style="transform:translate3d(100%,0,0)"
+  >
+    <div
+      class="slide-in-panel__header"
+    >
+      <div
+        class="layout"
+      >
+        <div
+          class="layout__item u-fill"
+        >
+          Panel title
+        </div>
+        <div
+          class="layout__item u-fit"
+        >
+          <div
+            class="header-label"
+          >
+            Test label
+          </div>
+        </div>
+        <div
+          class="layout__item u-fit"
+        >
+          <div
+            class="header-label"
+          >
+            Test label with info
+            <span
+              class="header-label__info"
+            >
+              Test info
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="slide-in-panel__content"
+    >
+      <div>
+        Body
+      </div>
+    </div>
+    <div
+      class="slide-in-panel__footer"
+    >
+      <div>
+        Footer
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/__tests__/__snapshots__/slide_out_container.test.tsx.snap b/src/components/__tests__/__snapshots__/slide_out_container.test.tsx.snap
index 637557d5..024d31aa 100644
--- a/src/components/__tests__/__snapshots__/slide_out_container.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/slide_out_container.test.tsx.snap
@@ -4,6 +4,34 @@ exports[`The SlideOutContainer component should render 1`] = `
 <div
   className="slide-out-container"
 >
+  <div
+    className="slide-out-container__header"
+    onClick={[Function]}
+  >
+    <div
+      className="layout"
+    >
+      <div
+        className="layout__item u-fill"
+        style={
+          Object {
+            "textAlign": "left",
+          }
+        }
+      >
+        Test panel
+      </div>
+      <div
+        className="layout__item arrow-column"
+      >
+        <PanelArrow
+          active={false}
+          color="black"
+          width="1.6rem"
+        />
+      </div>
+    </div>
+  </div>
   <UnmountClosed
     isOpened={false}
   >
diff --git a/src/components/__tests__/__snapshots__/tags_selector.test.tsx.snap b/src/components/__tests__/__snapshots__/tags_selector.test.tsx.snap
index 04700c57..2d6b0dbf 100644
--- a/src/components/__tests__/__snapshots__/tags_selector.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/tags_selector.test.tsx.snap
@@ -27,10 +27,6 @@ exports[`The TagsSelector component should render 1`] = `
           "id": "tag 2",
           "text": "tag 2",
         },
-        Object {
-          "id": "tag 3",
-          "text": "tag 3",
-        },
       ]
     }
   />
diff --git a/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap b/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap
index 43ad19c2..e70df722 100644
--- a/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap
@@ -1,5 +1,117 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`The UserAccountMenu component should display child section 1`] = `
+<div
+  className="user-account-menu"
+  onClick={[Function]}
+  tabIndex={1}
+>
+  <div
+    className="trigger"
+    onClick={[Function]}
+  >
+    <ProfileImage
+      size="3.6rem"
+    />
+  </div>
+  <div
+    className="container"
+  >
+    <div
+      className="menu"
+    >
+      <Collapse
+        fixedHeight={-1}
+        forceInitialAnimation={false}
+        hasNestedCollapse={false}
+        isOpened={false}
+        onMeasure={[Function]}
+        onRender={[Function]}
+        onRest={[Function]}
+        springConfig={
+          Object {
+            "damping": 32,
+            "stiffness": 390,
+          }
+        }
+        style={Object {}}
+        theme={
+          Object {
+            "collapse": "ReactCollapse--collapse",
+            "content": "ReactCollapse--content",
+          }
+        }
+      >
+        <div
+          className="sections"
+        >
+          <div
+            className="other-section"
+          >
+            <div
+              key=".0"
+              onCloseMenuHandler={[Function]}
+            >
+              Child section
+            </div>
+          </div>
+          <div
+            className="account-section"
+          >
+            <div
+              className="account-section__title"
+            >
+              My account
+            </div>
+            <div
+              className="account-section__profile"
+            >
+              <div
+                className="account-section__icon"
+              >
+                <ProfileImage
+                  size="10rem"
+                />
+              </div>
+              <div
+                className="account-section__name"
+              >
+                Test User
+              </div>
+            </div>
+            <div
+              className="account-section__buttons"
+            >
+              <Button
+                className=""
+                linkToNewTab={true}
+                linkURL="https://account-staging.ultimaker.com"
+                shape="rectangle"
+                style="secondary"
+                type="link"
+              >
+                Manage account
+                <LinkIcon />
+              </Button>
+              <Button
+                className=""
+                linkToNewTab={false}
+                onClickHandler={[Function]}
+                shape="rectangle"
+                style="secondary"
+                type="button"
+              >
+                Sign out
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Collapse>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`The UserAccountMenu component should render 1`] = `
 <div
   className="user-account-menu"
diff --git a/src/components/__tests__/about_dialog.test.tsx b/src/components/__tests__/about_dialog.test.tsx
index 6a21ff5d..f69036a4 100644
--- a/src/components/__tests__/about_dialog.test.tsx
+++ b/src/components/__tests__/about_dialog.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,28 +6,28 @@ import { shallow } from 'enzyme';
 import AboutDialog from '../about_dialog';
 
 describe('The AboutDialog component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      closeHandler: jest.fn(),
-      componentsList: [{
-        name: 'testComponent',
-        license: 'MIT',
-        url: 'https://ultimaker.com/',
-      }],
-      appName: 'test app',
-      versionNumber: '1.0.0',
-      supportLinkURL: 'https://ultimaker.support.com/',
-      supportLinkText: 'Support link'
-    };
-    wrapper = shallow(<AboutDialog {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            closeHandler: jest.fn(),
+            componentsList: [{
+                name: 'testComponent',
+                license: 'MIT',
+                url: 'https://ultimaker.com/',
+            }],
+            appName: 'test app',
+            versionNumber: '1.0.0',
+            supportLinkURL: 'https://ultimaker.support.com/',
+            supportLinkText: 'Support link'
+        };
+        wrapper = shallow(<AboutDialog {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.closeHandler).not.toHaveBeenCalled();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.closeHandler).not.toHaveBeenCalled();
+    });
 
 });
diff --git a/src/components/__tests__/app.test.tsx b/src/components/__tests__/app.test.tsx
index c087ebbd..87029b7c 100644
--- a/src/components/__tests__/app.test.tsx
+++ b/src/components/__tests__/app.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import App from '../app';
 
 describe('The App component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      fixedHeader: true
-    };
-    wrapper = shallow(<App {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            fixedHeader: true
+        };
+        wrapper = shallow(<App {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/button.test.tsx b/src/components/__tests__/button.test.tsx
index adcb62dd..a36d62b2 100644
--- a/src/components/__tests__/button.test.tsx
+++ b/src/components/__tests__/button.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -9,98 +7,114 @@ import Button from '../button';
 import Spinner from '../spinner';
 
 // mocks
-import { mockClickEvent } from '../../__mocks__/clickMock'
+import { mockClickEvent } from '../../__mocks__/clickMock';
 
 describe('The Button component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      onClickHandler: jest.fn(),
-      id: 'testButton'
-    };
-    wrapper = shallow(<Button {...props}>Button text</Button>);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onClickHandler).not.toHaveBeenCalled();
-  });
-
-  it('calls onClickHandler when it is clicked', () => {
-    wrapper.simulate('click', mockClickEvent);
-    expect(props.onClickHandler).toHaveBeenCalled();
-  });
-
-  it('does not call onClickHandler when it is clicked and onClickHandler is not passed', () => {
-    wrapper.setProps({ onClickHandler: null });
-    wrapper.simulate('click', mockClickEvent);
-    expect(props.onClickHandler).not.toHaveBeenCalled();
-  });
-
-  it('renders a button with type submit prop `type` is submit', () => {
-    wrapper.setProps({ type: 'submit' });
-    expect(wrapper.find('[type="submit"]')).toHaveLength(1);
-  });
-
-  it('renders a anchor when prop `type` is link', () => {
-    wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/' });
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('is disabled when prop `disabled` is true', () => {
-    wrapper.setProps({ disabled: true });
-    expect(wrapper.find('.disabled')).toHaveLength(1);
-    expect(wrapper.find('[disabled]')).toHaveLength(1);
-    wrapper.simulate('click', mockClickEvent);
-    expect(props.onClickHandler).not.toHaveBeenCalled();
-    wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/' });
-    expect(wrapper.prop('href')).toBeUndefined();
-  });
-
-  it('renders a spinner and disables the button when prop `showSpinner` is true', () => {
-    wrapper.setProps({ showSpinner: true });
-    expect(wrapper.find(Spinner)).toHaveLength(1);
-    expect(wrapper.find('.waiting')).toHaveLength(1);
-    expect(wrapper.find('[disabled]')).toHaveLength(1);
-    wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/' });
-    expect(wrapper.find(Spinner)).toHaveLength(1);
-    expect(wrapper.prop('href')).toBeUndefined();
-  });
-
-  it('applies the correct class when prop `style` is secondary', () => {
-    wrapper.setProps({ style: 'secondary' });
-    expect(wrapper.find('.btn--secondary')).toHaveLength(1);
-  });
-
-  it('applies the correct class when prop `style` is quiet', () => {
-    wrapper.setProps({ style: 'quiet' });
-    expect(wrapper.find('.btn--quiet')).toHaveLength(1);
-  });
-
-  it('applies the correct class when prop `style` is alert', () => {
-    wrapper.setProps({ style: 'alert' });
-    expect(wrapper.find('.btn--alert')).toHaveLength(1);
-  });
-
-  it('applies the correct class when prop `shape` is circle', () => {
-    wrapper.setProps({ shape: 'circle' });
-    expect(wrapper.find('.btn--circle')).toHaveLength(1);
-  });
-
-  it('applies the correct class when prop `shape` is circle', () => {
-    wrapper.setProps({ shape: 'pill' });
-    expect(wrapper.find('.btn--pill')).toHaveLength(1);
-  });
-
-  it('can open a link in a new tab', () => {
-    wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/', linkToNewTab: true });
-    expect(wrapper.prop('target')).toEqual('_blank');
-  });
-
-  it('applies an additional class name when passed', () => {
-    wrapper.setProps({ className: 'additionalClass' });
-    expect(wrapper.find('.additionalClass')).toHaveLength(1);
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            onClickHandler: jest.fn(),
+            id: 'testButton'
+        };
+        wrapper = shallow(<Button {...props}>Button text</Button>);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('calls onClickHandler when it is clicked', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).toHaveBeenCalled();
+    });
+
+    it('does not call onClickHandler when it is clicked and onClickHandler is not passed', () => {
+        wrapper.setProps({ onClickHandler: null });
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('renders a button with type submit prop `type` is submit', () => {
+        wrapper.setProps({ type: 'submit' });
+        expect(wrapper.find('[type="submit"]')).toHaveLength(1);
+    });
+
+    it('renders a anchor when prop `type` is link and an external link is given', () => {
+        wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/' });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders a link when prop `type` is link and an internal link is given', () => {
+        wrapper.setProps({ type: 'link', linkURL: '/print_jobs' });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('is disabled the button when prop `disabled` is true', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('.disabled')).toHaveLength(1);
+        expect(wrapper.prop('disabled')).toBe(true);
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('is disabled the link when prop `disabled` is true', () => {
+        wrapper.setProps({ disabled: true });
+        wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/' });
+        expect(wrapper.prop('href')).toBeUndefined();
+    });
+
+    it('renders a spinner and disables the button when prop `showSpinner` is true', () => {
+        wrapper.setProps({ showSpinner: true });
+        expect(wrapper.find(Spinner)).toHaveLength(1);
+        expect(wrapper.find('.waiting')).toHaveLength(1);
+        expect(wrapper.prop('disabled')).toBe(true);
+    });
+
+    it('renders a spinner and disables the link when prop `showSpinner` is true', () => {
+        wrapper.setProps({ showSpinner: true });
+        wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/' });
+        expect(wrapper.find(Spinner)).toHaveLength(1);
+        expect(wrapper.prop('href')).toBeUndefined();
+    });
+
+    it('applies the correct class when prop `style` is secondary', () => {
+        wrapper.setProps({ style: 'secondary' });
+        expect(wrapper.find('.btn--secondary')).toHaveLength(1);
+        expect(wrapper.find('.btn--primary').exists()).toBe(false);
+    });
+
+    it('applies the correct class when prop `style` is quiet', () => {
+        wrapper.setProps({ style: 'quiet' });
+        expect(wrapper.find('.btn--quiet')).toHaveLength(1);
+        expect(wrapper.find('.btn--primary').exists()).toBe(false);
+    });
+
+    it('applies the correct class when prop `style` is alert', () => {
+        wrapper.setProps({ style: 'alert' });
+        expect(wrapper.find('.btn--alert')).toHaveLength(1);
+        expect(wrapper.find('.btn--primary').exists()).toBe(false);
+    });
+
+    it('applies the correct class when prop `shape` is circle', () => {
+        wrapper.setProps({ shape: 'circle' });
+        expect(wrapper.find('.btn--circle')).toHaveLength(1);
+    });
+
+    it('applies the correct class when prop `shape` is circle', () => {
+        wrapper.setProps({ shape: 'pill' });
+        expect(wrapper.find('.btn--pill')).toHaveLength(1);
+    });
+
+    it('can open a link in a new tab', () => {
+        wrapper.setProps({ type: 'link', linkURL: 'https://ultimaker.com/', linkToNewTab: true });
+        expect(wrapper.prop('target')).toBe('_blank');
+    });
+
+    it('applies an additional class name when passed', () => {
+        wrapper.setProps({ className: 'additionalClass' });
+        expect(wrapper.find('.additionalClass')).toHaveLength(1);
+    });
 })
diff --git a/src/components/__tests__/checkbox.test.tsx b/src/components/__tests__/checkbox.test.tsx
index f16425a1..d4dd9a16 100644
--- a/src/components/__tests__/checkbox.test.tsx
+++ b/src/components/__tests__/checkbox.test.tsx
@@ -1,28 +1,40 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import Checkbox from '../checkbox';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The Checkbox component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      id: 'testCheckbox',
-      value: false,
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<Checkbox {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            id: 'testCheckbox',
+            value: false,
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<Checkbox {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should not propagate click', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
+
+    it('should render a checked checkbox', () => {
+        wrapper.setProps({ value: true });
+        expect(wrapper.find('input').props().checked).toBe(true);
+    });
 
 });
diff --git a/src/components/__tests__/circle_icon.test.tsx b/src/components/__tests__/circle_icon.test.tsx
index 8e083472..b28425f3 100644
--- a/src/components/__tests__/circle_icon.test.tsx
+++ b/src/components/__tests__/circle_icon.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,15 +6,15 @@ import { shallow } from 'enzyme';
 import CircleIcon from '../circle_icon';
 
 describe('The CircleIcon component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<CircleIcon {...props}>1</CircleIcon>);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<CircleIcon {...props}>1</CircleIcon>);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/close_button.test.tsx b/src/components/__tests__/close_button.test.tsx
index 473e7c5e..3dcec1b7 100644
--- a/src/components/__tests__/close_button.test.tsx
+++ b/src/components/__tests__/close_button.test.tsx
@@ -1,26 +1,38 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import CloseButton from '../close_button';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The CloseButton component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      onClickHandler: jest.fn(),
-    };
-    wrapper = shallow(<CloseButton {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onClickHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            onClickHandler: jest.fn(),
+        };
+        wrapper = shallow(<CloseButton {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call onClickHandler when clicked', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).toHaveBeenCalled();
+    });
+
+    it('should not propagate click when clicked', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
 
 });
diff --git a/src/components/__tests__/context_menu.test.tsx b/src/components/__tests__/context_menu.test.tsx
index c090ad82..027b99f8 100644
--- a/src/components/__tests__/context_menu.test.tsx
+++ b/src/components/__tests__/context_menu.test.tsx
@@ -1,25 +1,74 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 // component
 import ContextMenu from '../context_menu';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The ContextMenu component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            menuWidth: 200
+        };
+        wrapper = shallow(<ContextMenu {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render to right', () => {
+        wrapper.setProps({ menuOffsetDirection: 'right' });
+        expect(wrapper.find('.menu').prop('style').left).toBe(-30);
+        expect(wrapper.find('.menu').prop('style').right).toBeUndefined();
+    });
+
+    it('should render to north', () => {
+        wrapper.setProps({ menuDirection: 'north' });
+        expect(wrapper.find('.context-menu--north')).toHaveLength(1);
+        expect(wrapper.find('.context-menu--south').exists()).toBe(false);
+    });
+
+    it('should render for a panel', () => {
+        wrapper.setProps({ positionMenuInPanel: true });
+        expect(wrapper.find('.context-menu--panel')).toHaveLength(1);
+    });
+
+    it('should show menu when the trigger is clicked', () => {
+        wrapper.find('.trigger').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+    });
+
+    it('should hide menu when the trigger is clicked', () => {
+        wrapper.find('.trigger').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        wrapper.find('.trigger').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
 
-  beforeEach(() => {
-    props = {
-      menuWidth: 200
-    };
-    wrapper = shallow(<ContextMenu {...props} />);
-  });
+    it('should hide menu on blur', () => {
+        wrapper.find('.trigger').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        wrapper.simulate('blur');
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should hide menu on menu click', () => {
+        wrapper.find('.trigger').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        wrapper.find('.container').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
 
+    it('should not propagate click', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
 });
diff --git a/src/components/__tests__/context_menu_item.test.tsx b/src/components/__tests__/context_menu_item.test.tsx
index c5a9dc0e..a3298943 100644
--- a/src/components/__tests__/context_menu_item.test.tsx
+++ b/src/components/__tests__/context_menu_item.test.tsx
@@ -1,27 +1,46 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import ContextMenuItem from '../context_menu_item';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The ContextMenuItem component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      label: 'Menu item',
-      onClickHandler: jest.fn(),
-    };
-    wrapper = shallow(<ContextMenuItem {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onClickHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            label: 'Menu item',
+            onClickHandler: jest.fn(),
+        };
+        wrapper = shallow(<ContextMenuItem {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call the click handler when item is clicked', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).toHaveBeenCalled();
+    });
+
+    it('should not call the click handler when item is disabled', () => {
+        wrapper.setProps({ disabled: true });
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
+
+    it('should render item as disabled', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('.disabled')).toHaveLength(1);
+    });
 
 });
diff --git a/src/components/__tests__/date_picker.test.tsx b/src/components/__tests__/date_picker.test.tsx
index 938e1524..73960e6c 100644
--- a/src/components/__tests__/date_picker.test.tsx
+++ b/src/components/__tests__/date_picker.test.tsx
@@ -1,28 +1,32 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import moment = require('moment');
 
 // component
 import DatePicker from '../date_picker';
 
 describe('The DatePicker component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      id: 'testDatePicker',
-      value: false,
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<DatePicker {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            id: 'testDatePicker',
+            value: false,
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<DatePicker {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should display an error state', () => {
+        wrapper.setProps({ error: true });
+        expect(wrapper.find('.error')).toHaveLength(1);
+    });
 
 });
diff --git a/src/components/__tests__/divider.test.tsx b/src/components/__tests__/divider.test.tsx
index 0e143ec8..625859ff 100644
--- a/src/components/__tests__/divider.test.tsx
+++ b/src/components/__tests__/divider.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,15 +6,15 @@ import { shallow } from 'enzyme';
 import Divider from '../divider';
 
 describe('The Divider component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Divider {...props} />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Divider {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/drop_down_menu.test.tsx b/src/components/__tests__/drop_down_menu.test.tsx
index ba7f1007..fc2f775d 100644
--- a/src/components/__tests__/drop_down_menu.test.tsx
+++ b/src/components/__tests__/drop_down_menu.test.tsx
@@ -1,25 +1,58 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import DropDownMenu from '../drop_down_menu';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The DropDownMenu component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      activeLabel: 'Active label'
-    };
-    wrapper = shallow(<DropDownMenu {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            activeLabel: 'Active label'
+        };
+        wrapper = shallow(<DropDownMenu {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should show menu when the label is clicked', () => {
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+    });
+
+    it('should hide menu when the label is clicked', () => {
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
+
+    it('should hide menu on blur', () => {
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        wrapper.simulate('blur');
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
+
+    it('should hide menu on menu click', () => {
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        wrapper.find('.container').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
+
+    it('should not propagate click', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
 
 });
diff --git a/src/components/__tests__/drop_down_menu_item.test.tsx b/src/components/__tests__/drop_down_menu_item.test.tsx
index eb282b37..09544da0 100644
--- a/src/components/__tests__/drop_down_menu_item.test.tsx
+++ b/src/components/__tests__/drop_down_menu_item.test.tsx
@@ -1,27 +1,46 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import DropDownMenuItem from '../drop_down_menu_item';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The DropDownMenuItem component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      active: false,
-      onClickHandler: jest.fn(),
-    };
-    wrapper = shallow(<DropDownMenuItem {...props}>Menu item</DropDownMenuItem>);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onClickHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            active: false,
+            onClickHandler: jest.fn(),
+        };
+        wrapper = shallow(<DropDownMenuItem {...props}>Menu item</DropDownMenuItem>);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call the click handler when item is clicked', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).toHaveBeenCalled();
+    });
+
+    it('should not call the click handler when item is disabled', () => {
+        wrapper.setProps({ disabled: true });
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onClickHandler).not.toHaveBeenCalled();
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
+
+    it('should render item as disabled', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('.disabled')).toHaveLength(1);
+    });
 
 });
diff --git a/src/components/__tests__/file_upload.test.tsx b/src/components/__tests__/file_upload.test.tsx
index 26df5ab0..ac3352b7 100644
--- a/src/components/__tests__/file_upload.test.tsx
+++ b/src/components/__tests__/file_upload.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,20 +6,20 @@ import { shallow } from 'enzyme';
 import FileUpload from '../file_upload';
 
 describe('The FileUpload component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      id: 'testFileUpload',
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<FileUpload {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            id: 'testFileUpload',
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<FileUpload {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
 
 });
diff --git a/src/components/__tests__/footer.test.tsx b/src/components/__tests__/footer.test.tsx
index a7a96543..712c5043 100644
--- a/src/components/__tests__/footer.test.tsx
+++ b/src/components/__tests__/footer.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,14 +6,14 @@ import { shallow } from 'enzyme';
 import Footer from '../footer';
 
 describe('The Footer component', () => {
-  let wrapper;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Footer>About</Footer>);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Footer>About</Footer>);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/form.test.tsx b/src/components/__tests__/form.test.tsx
index 0add1226..e8a6e40a 100644
--- a/src/components/__tests__/form.test.tsx
+++ b/src/components/__tests__/form.test.tsx
@@ -1,26 +1,85 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 // component
-import Form from '../form';
+import { Form } from '../form';
+import { InputField } from '../input_field';
+import { Button } from '../button';
+
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock'
 
 describe('The Form component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      onSubmitHandler: jest.fn(),
-    };
-    wrapper = shallow(<Form {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onSubmitHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            onSubmitHandler: jest.fn(),
+            primaryBtnText: 'primaryBtnText'
+        };
+        wrapper = shallow(<Form {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onSubmitHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call onSubmitHandler when form is submitted', () => {
+        wrapper.simulate('submit', mockClickEvent);
+        expect(props.onSubmitHandler).toHaveBeenCalled();
+        expect(wrapper.state('submitted')).toBe(true);
+        expect(mockClickEvent.preventDefault).toBeCalled();
+    });
+
+    it('should render a secondary button', () => {
+        wrapper.setProps({
+            secondaryBtnText: 'secondaryBtnText',
+            secondaryBtnHandler: jest.fn(),
+            secondaryBtnStyle: 'secondary'
+        });
+        expect(props.onSubmitHandler).not.toHaveBeenCalled();
+        expect(wrapper.find(Button)).toHaveLength(2);
+    });
+
+    it('should render a secondary button link', () => {
+        wrapper.setProps({
+            secondaryBtnText: 'secondaryBtnText',
+            secondaryBtnLink: 'https://ultimaker.com/',
+            secondaryBtnStyle: 'secondary'
+        });
+        expect(wrapper.find(Button).at(1).prop('type')).toBe('link');
+    });
+
+    it('should render with a form item', () => {
+        const mountedWrapper = mount(
+            <Form {...props}>
+                <InputField id="test" onChangeHandler={jest.fn()} value={null} />
+            </Form>
+        );
+        expect(mountedWrapper).toMatchSnapshot();
+    });
+
+    it('should pass validation error to form item', () => {
+        const mountedWrapper = mount(
+            <Form {...props} validationErrors={{ test: 'Validation error' }}>
+                <InputField id="test" onChangeHandler={jest.fn()} value={null} />
+            </Form>
+        );
+        expect(mountedWrapper.find(InputField).prop('validationError')).toBe('Validation error');
+        expect(mountedWrapper.find(Button).prop('disabled')).toBe(true);
+    });
+
+    it('should submit button should ignore validation when always enabled', () => {
+        const mountedWrapper = mount(
+            <Form {...props} validationErrors={{ test: 'Validation error' }}>
+                <InputField id="test" onChangeHandler={jest.fn()} value={null} />
+            </Form>
+        );
+        mountedWrapper.setProps({ alwaysEnableSubmitButton: true });
+        expect(mountedWrapper.find(Button).prop('disabled')).toBe(false);
+    });
 
 });
diff --git a/src/components/__tests__/grid.test.tsx b/src/components/__tests__/grid.test.tsx
index 392d276f..ad1e959b 100644
--- a/src/components/__tests__/grid.test.tsx
+++ b/src/components/__tests__/grid.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,15 +6,15 @@ import { shallow } from 'enzyme';
 import Grid from '../grid';
 
 describe('The Grid component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Grid {...props} />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Grid {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/grid_empty.test.tsx b/src/components/__tests__/grid_empty.test.tsx
index 6f6d0e7f..091122cd 100644
--- a/src/components/__tests__/grid_empty.test.tsx
+++ b/src/components/__tests__/grid_empty.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import GridEmpty from '../grid_empty';
 
 describe('The GridEmpty component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      label: 'Empty grid'
-    };
-    wrapper = shallow(<GridEmpty {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            label: 'Empty grid'
+        };
+        wrapper = shallow(<GridEmpty {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/grid_item.test.tsx b/src/components/__tests__/grid_item.test.tsx
index 6813efce..379eb369 100644
--- a/src/components/__tests__/grid_item.test.tsx
+++ b/src/components/__tests__/grid_item.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,15 +6,15 @@ import { shallow } from 'enzyme';
 import GridItem from '../grid_item';
 
 describe('The GridItem component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<GridItem {...props} />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<GridItem {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/header.test.tsx b/src/components/__tests__/header.test.tsx
index 5a1e43dc..66aec299 100644
--- a/src/components/__tests__/header.test.tsx
+++ b/src/components/__tests__/header.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,14 +6,14 @@ import { shallow } from 'enzyme';
 import Header from '../header';
 
 describe('The Header component', () => {
-  let wrapper;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Header />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Header />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/image.test.tsx b/src/components/__tests__/image.test.tsx
index 9af6ed55..fd3acfd7 100644
--- a/src/components/__tests__/image.test.tsx
+++ b/src/components/__tests__/image.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import Image from '../image';
 
 describe('The Image component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      src: './test_image.png'
-    };
-    wrapper = shallow(<Image {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            src: './test_image.png'
+        };
+        wrapper = shallow(<Image {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/image_upload.test.tsx b/src/components/__tests__/image_upload.test.tsx
index defe57dc..dcea816c 100644
--- a/src/components/__tests__/image_upload.test.tsx
+++ b/src/components/__tests__/image_upload.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,19 +6,37 @@ import { shallow } from 'enzyme';
 import ImageUpload from '../image_upload';
 
 describe('The ImageFile component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      onFileSelection: jest.fn(),
-    };
-    wrapper = shallow(<ImageUpload {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onFileSelection).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            onFileSelection: jest.fn(),
+        };
+        wrapper = shallow(<ImageUpload {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onFileSelection).not.toHaveBeenCalled();
+    });
+
+    it('should handle dropping a file', () => {
+        wrapper.instance()._onDropHandler(['file']);
+        expect(wrapper.state('dropActive')).toBe(false);
+        expect(props.onFileSelection).toHaveBeenCalledWith('file');
+    });
+
+    it('should handle drag enter', () => {
+        wrapper.instance()._onDragEnter();
+        expect(wrapper.state('dropActive')).toBe(true);
+    });
+
+    it('should handle drag leave', () => {
+        wrapper.setState({ dropActive: true });
+        wrapper.instance()._onDragLeave();
+        expect(wrapper.state('dropActive')).toBe(false);
+        expect(props.onFileSelection).not.toHaveBeenCalled();
+    });
 
 });
diff --git a/src/components/__tests__/info_link.test.tsx b/src/components/__tests__/info_link.test.tsx
index f1280a64..b8511c23 100644
--- a/src/components/__tests__/info_link.test.tsx
+++ b/src/components/__tests__/info_link.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import InfoLink from '../info_link';
 
 describe('The InfoLink component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      infoLinkURL: 'https://ultimaker.com/'
-    };
-    wrapper = shallow(<InfoLink {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            infoLinkURL: 'https://ultimaker.com/'
+        };
+        wrapper = shallow(<InfoLink {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/info_tooltip.test.tsx b/src/components/__tests__/info_tooltip.test.tsx
index 7142fe0c..ba135a81 100644
--- a/src/components/__tests__/info_tooltip.test.tsx
+++ b/src/components/__tests__/info_tooltip.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import InfoTooltip from '../info_tooltip';
 
 describe('The InfoTooltip component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      infoText: 'Tooltip text'
-    };
-    wrapper = shallow(<InfoTooltip {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            infoText: 'Tooltip text'
+        };
+        wrapper = shallow(<InfoTooltip {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/input_field.test.tsx b/src/components/__tests__/input_field.test.tsx
index 424e83e8..3608466e 100644
--- a/src/components/__tests__/input_field.test.tsx
+++ b/src/components/__tests__/input_field.test.tsx
@@ -1,28 +1,67 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import InputField from '../input_field';
+import InputFieldLabel from '../input_field_label';
+import InputFieldValidation from '../input_field_validation';
 
 describe('The InputField component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      id: 'testInputField',
-      value: 'Test input',
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<InputField {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
 
+    beforeEach(() => {
+        props = {
+            id: 'testInputField',
+            value: 'Test input',
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<InputField {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a label', () => {
+        wrapper.setProps({ label: 'Test label' });
+        expect(wrapper.find(InputFieldLabel)).toHaveLength(1);
+    });
+
+    it('should render a validation error', () => {
+        wrapper.setProps({ validationError: 'Test validation error' });
+        expect(wrapper.find(InputFieldValidation).exists()).toBe(false);
+        wrapper.setState({ touched: true }); // only show validation message if the field has been edited ('touched')
+        expect(wrapper.find(InputFieldValidation)).toHaveLength(1);
+        wrapper.setState({ touched: false });
+        expect(wrapper.find(InputFieldValidation).exists()).toBe(false);
+        wrapper.setProps({ submitted: true }); // or if the form has been submitted
+        expect(wrapper.find(InputFieldValidation)).toHaveLength(1);
+    });
+
+    it('should handle the user input', () => {
+        expect(wrapper.state('touched')).toBe(false);
+        wrapper.instance()._onChangeHandler('Test input');
+        expect(wrapper.state('touched')).toBe(true);
+        expect(props.onChangeHandler).toHaveBeenCalledWith('testInputField', 'Test input');
+    });
+
+    it('should handle the user clearing the input', () => {
+        wrapper.instance()._onChangeHandler('');
+        expect(props.onChangeHandler).toHaveBeenCalledWith('testInputField', null);
+    });
+
+    it('should handle a number input', () => {
+        wrapper.setProps({ type: 'number' });
+        wrapper.instance()._onChangeHandler('1');
+        expect(props.onChangeHandler).toHaveBeenCalledWith('testInputField', 1);
+    });
+
+    it('should only call onChangeHandler if passed', () => {
+        wrapper.setProps({ onChangeHandler: null });
+        wrapper.instance()._onChangeHandler('Test input');
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
 });
diff --git a/src/components/__tests__/input_field_input.test.tsx b/src/components/__tests__/input_field_input.test.tsx
index 1cb3a8a0..1861fd60 100644
--- a/src/components/__tests__/input_field_input.test.tsx
+++ b/src/components/__tests__/input_field_input.test.tsx
@@ -1,32 +1,201 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 // component
 import InputFieldInput from '../input_field_input';
+import SelectList from '../select_list';
+import Checkbox from '../checkbox';
+import ImageUpload from '../image_upload';
+import DatePicker from '../date_picker';
+import FileUpload from '../file_upload';
+import TagsSelector from '../tags_selector';
+import RequiredIcon from '../icons/required_icon';
+import Image from '../image';
 
 describe('The InputFieldInput component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      id: 'testInputField',
-      value: 'Test input',
-      onChangeHandler: jest.fn(),
-      type: 'text',
-      showValidationError: false,
-      labelLayoutWidth: '1/1',
-      labelWidthBreakpoint: 'sm'
-    };
-    wrapper = shallow(<InputFieldInput {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            id: 'testInputField',
+            value: 'Test input',
+            onChangeHandler: jest.fn(),
+            type: 'text',
+            showValidationError: false,
+            labelLayoutWidth: '1/1',
+            labelWidthBreakpoint: 'sm'
+        };
+        wrapper = shallow(<InputFieldInput {...props} />);
+    });
+
+    it('should render a text input', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a number input', () => {
+        wrapper.setProps({ type: 'number' });
+        expect(wrapper.find('input')).toHaveLength(1);
+        expect(wrapper.find('input').prop('type')).toBe('number');
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a textarea', () => {
+        wrapper.setProps({ type: 'textarea' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find('textarea')).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a password input', () => {
+        wrapper.setProps({ type: 'password' });
+        expect(wrapper.find('input')).toHaveLength(1);
+        expect(wrapper.find('input').prop('type')).toBe('password');
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render an email input', () => {
+        wrapper.setProps({ type: 'email' });
+        expect(wrapper.find('input')).toHaveLength(1);
+        expect(wrapper.find('input').prop('type')).toBe('email');
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a url input', () => {
+        wrapper.setProps({ type: 'url' });
+        expect(wrapper.find('input')).toHaveLength(1);
+        expect(wrapper.find('input').prop('type')).toBe('url');
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a select input', () => {
+        wrapper.setProps({ type: 'select' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find(SelectList)).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a checkbox input', () => {
+        wrapper.setProps({ type: 'checkbox' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find(Checkbox)).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render an image upload input', () => {
+        wrapper.setProps({ type: 'image' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find(ImageUpload)).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render an date picker input', () => {
+        wrapper.setProps({ type: 'date' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find(DatePicker)).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a file upload input', () => {
+        wrapper.setProps({ type: 'file' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find(FileUpload)).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a tag selector input', () => {
+        wrapper.setProps({ type: 'tags' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find(TagsSelector)).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a custom input', () => {
+        wrapper.setProps({ type: 'children', children: <div className="custom-input"></div> });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find('.custom-input')).toHaveLength(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a required icon', () => {
+        wrapper.setProps({ required: 'true' });
+        expect(wrapper.find(RequiredIcon)).toHaveLength(1);
+    });
+
+    it('should focus on the input on load', () => {
+        mount(<InputFieldInput {...props} focusOnLoad="true" />);
+        const focusedElement = document.activeElement;
+        expect(focusedElement.id).toBe('testInputField');
+    });
+
+    it('should render a static text field', () => {
+        wrapper.setProps({ staticField: 'true' });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render a static url link', () => {
+        wrapper.setProps({ staticField: 'true', type: 'url', value: 'https://ultimaker.com/' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find('a')).toHaveLength(1);
+        expect(wrapper.find('a').prop('href')).toBe('https://ultimaker.com/');
+    });
+
+    it('should render a static email link', () => {
+        wrapper.setProps({ staticField: 'true', type: 'email', value: 'test@ultimaker.com' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find('a')).toHaveLength(1);
+        expect(wrapper.find('a').prop('href')).toBe('mailto:test@ultimaker.com');
+    });
+
+    it('should render a static date', () => {
+        wrapper.setProps({ staticField: 'true', type: 'date', value: '2018-09-03T10:06:48' });
+        expect(wrapper.find('input').exists()).toBe(false);
+        expect(wrapper.find('div').text()).toBe('03-09-2018');
+    });
+
+    it('should render a static select value', () => {
+        wrapper.setProps({
+            staticField: 'true',
+            type: 'select', value: 3,
+            selectOptions: [
+                { label: 'Option 1', value: 1 },
+                { label: 'Option 2', value: 2, disabled: true },
+                { label: 'Option 3', value: 3 }
+            ]
+        });
+        expect(wrapper.find(SelectList).exists()).toBe(false);
+        expect(wrapper.find('div').text()).toBe('Option 3');
+    });
+
+    it('should render a static image', () => {
+        wrapper.setProps({ staticField: 'true', type: 'image' });
+        expect(wrapper.find(ImageUpload).exists()).toBe(false);
+        expect(wrapper.find(Image)).toHaveLength(1);
+    });
+
+    it('should render a static checkbox', () => {
+        wrapper.setProps({ staticField: 'true', type: 'checkbox' });
+        expect(wrapper.find(Checkbox)).toHaveLength(1);
+        expect(wrapper.find(Checkbox).prop('disabled')).toBe('true');
+    });
+
+    it('should render children after the input', () => {
+        wrapper.setProps({ children: <div className="child"></div> });
+        expect(wrapper.find('input').exists()).toBe(true);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should handle an input change', () => {
+        wrapper.find('input').simulate('change', { target: { value: 'update' } });
+        expect(props.onChangeHandler).toHaveBeenCalledWith('update');
+    });
+
+    it('should handle an textarea input change', () => {
+        wrapper.setProps({ type: 'textarea' });
+        wrapper.find('textarea').simulate('change', { target: { value: 'update' } });
+        expect(props.onChangeHandler).toHaveBeenCalledWith('update');
+    });
 
 });
diff --git a/src/components/__tests__/input_field_label.test.tsx b/src/components/__tests__/input_field_label.test.tsx
index 519e1c26..be3f7066 100644
--- a/src/components/__tests__/input_field_label.test.tsx
+++ b/src/components/__tests__/input_field_label.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,22 +6,44 @@ import { shallow } from 'enzyme';
 import InputFieldLabel from '../input_field_label';
 
 describe('The InputFieldLabel component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      id: 'testInputField',
-      type: 'text',
-      label: 'Input label',
-      labelLayoutWidth: '1/1',
-      labelWidthBreakpoint: 'sm'
-    };
-    wrapper = shallow(<InputFieldLabel {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            id: 'testInputField',
+            type: 'text',
+            label: 'Input label',
+            labelLayoutWidth: '1/1',
+            labelWidthBreakpoint: 'sm'
+        };
+        wrapper = shallow(<InputFieldLabel {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render pre label element before the label', () => {
+        wrapper.setProps({ preLabelElement: <div className="pre-label-element"></div> });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render info tooltip', () => {
+        wrapper.setProps({ infoText: 'Test tooltip text' });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render info link', () => {
+        wrapper.setProps({ infoLinkURL: 'https://ultimaker.com/' });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should apply a special class for the tags selector label', () => {
+        wrapper.setProps({ type: 'tags' });
+        expect(wrapper.find('.tag-label-position-override').exists()).toBe(false);
+        wrapper.setProps({ labelLayoutWidth: '1/3' });
+        expect(wrapper.find('.tag-label-position-override')).toHaveLength(1);
+    });
 
 });
diff --git a/src/components/__tests__/input_field_validation.test.tsx b/src/components/__tests__/input_field_validation.test.tsx
index 7051a84b..c00efb32 100644
--- a/src/components/__tests__/input_field_validation.test.tsx
+++ b/src/components/__tests__/input_field_validation.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,20 +6,35 @@ import { shallow } from 'enzyme';
 import InputFieldValidation from '../input_field_validation';
 
 describe('The InputFieldValidation component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      validationError: 'Validation error',
-      labelLayoutWidth: '1/1',
-      labelWidthBreakpoint: 'sm'
-    };
-    wrapper = shallow(<InputFieldValidation {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            validationError: 'Validation error',
+            labelLayoutWidth: '1/1',
+            labelWidthBreakpoint: 'sm'
+        };
+        wrapper = shallow(<InputFieldValidation {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should apply the correct positional class', () => {
+        wrapper.setProps({ labelLayoutWidth: 'fill' });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should apply the correct offset class', () => {
+        wrapper.setProps({ labelLayoutWidth: '1/3' });
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should apply the correct offset class for the required icon', () => {
+        wrapper.setProps({ labelLayoutWidth: 'fit', required: true });
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/loading.test.tsx b/src/components/__tests__/loading.test.tsx
index 0d4d1005..ece53ec6 100644
--- a/src/components/__tests__/loading.test.tsx
+++ b/src/components/__tests__/loading.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import Loading from '../loading';
 
 describe('The Loading component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      label: 'loading',
-    };
-    wrapper = shallow(<Loading {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            label: 'loading',
+        };
+        wrapper = shallow(<Loading {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/loading_page.test.tsx b/src/components/__tests__/loading_page.test.tsx
index 8738c359..9dc80176 100644
--- a/src/components/__tests__/loading_page.test.tsx
+++ b/src/components/__tests__/loading_page.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,14 +6,14 @@ import { shallow } from 'enzyme';
 import LoadingPage from '../loading_page';
 
 describe('The LoadingPage component', () => {
-  let wrapper;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<LoadingPage />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<LoadingPage />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/modal.test.tsx b/src/components/__tests__/modal.test.tsx
index d416ebff..e36b1563 100644
--- a/src/components/__tests__/modal.test.tsx
+++ b/src/components/__tests__/modal.test.tsx
@@ -1,31 +1,60 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 // component
 import Modal from '../modal';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The Modal component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      onOverlayClickHandler: jest.fn(),
-    };
-    wrapper = shallow(<Modal {...props} />);
-  });
-
-  it('should render a TransitionMotion', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onOverlayClickHandler).not.toHaveBeenCalled();
-  });
-
-  it('should render', () => {
-    expect(wrapper.render()).toMatchSnapshot();
-    expect(props.onOverlayClickHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            onOverlayClickHandler: jest.fn(),
+        };
+        wrapper = shallow(<Modal {...props} />);
+    });
+
+    it('should render a TransitionMotion', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onOverlayClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render', () => {
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(props.onOverlayClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call onOverlayClickHandler when the overlay is clicked', () => {
+        wrapper.dive().find('.modal').simulate('click', mockClickEvent);
+        expect(props.onOverlayClickHandler).toHaveBeenCalled();
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
+
+    it('should call onOverlayClickHandler when the overlay is clicked and onOverlayClickHandler is not passed', () => {
+        wrapper.setProps({ onOverlayClickHandler: null });
+        wrapper.dive().find('.modal').simulate('click', mockClickEvent);
+        expect(props.onOverlayClickHandler).not.toHaveBeenCalled();
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
+
+    it('should set isOpen to true after mounting', () => {
+        expect(wrapper.state('isOpen')).toBe(true);
+    });
+
+    it('should not allow the background to scroll when open', () => {
+        expect(document.body.classList.contains('noscroll')).toBe(true);
+    });
+
+    it('should allow the background to scroll after unmount', () => {
+        const mountedWrapper = mount(<Modal {...props} />);
+        mountedWrapper.unmount();
+        expect(document.body.classList.contains('noscroll')).toBe(false);
+    });
 
 });
diff --git a/src/components/__tests__/navigation.test.tsx b/src/components/__tests__/navigation.test.tsx
index 63ef6a2c..1324c6f9 100644
--- a/src/components/__tests__/navigation.test.tsx
+++ b/src/components/__tests__/navigation.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import { BrowserRouter } from 'react-router-dom';
@@ -12,25 +10,25 @@ import Navigation from '../navigation';
 import PageNotFoundView from '../../views/page_not_found';
 
 describe('The Navigation component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      navLinks: [
-        {
-          path: '/home',
-          label: 'Home',
-          visible: true,
-          component: PageNotFoundView
-        }
-      ]
-    };
-    wrapper = shallow(<BrowserRouter><Navigation {...props} /></BrowserRouter>);
-  });
+    beforeEach(() => {
+        props = {
+            navLinks: [
+                {
+                    path: '/home',
+                    label: 'Home',
+                    visible: true,
+                    component: PageNotFoundView
+                }
+            ]
+        };
+        wrapper = shallow(<BrowserRouter><Navigation {...props} /></BrowserRouter>);
+    });
 
-  it('should render', () => {
-    expect(wrapper.render()).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper.render()).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/page.test.tsx b/src/components/__tests__/page.test.tsx
index 1a13b670..0655a6be 100644
--- a/src/components/__tests__/page.test.tsx
+++ b/src/components/__tests__/page.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,15 +6,15 @@ import { shallow } from 'enzyme';
 import Page from '../page';
 
 describe('The Page component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Page {...props} />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Page {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/page_title.test.tsx b/src/components/__tests__/page_title.test.tsx
index c592f32f..4f4d689b 100644
--- a/src/components/__tests__/page_title.test.tsx
+++ b/src/components/__tests__/page_title.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import PageTitle from '../page_title';
 
 describe('The PageTitle component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      label: 'Page title'
-    };
-    wrapper = shallow(<PageTitle {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            label: 'Page title'
+        };
+        wrapper = shallow(<PageTitle {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/panel_arrow.test.tsx b/src/components/__tests__/panel_arrow.test.tsx
index 7e5649a2..ccab922a 100644
--- a/src/components/__tests__/panel_arrow.test.tsx
+++ b/src/components/__tests__/panel_arrow.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import PanelArrow from '../panel_arrow';
 
 describe('The PanelArrow component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      width: '20px'
-    };
-    wrapper = shallow(<PanelArrow {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            width: '20px'
+        };
+        wrapper = shallow(<PanelArrow {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/pill.test.tsx b/src/components/__tests__/pill.test.tsx
index eacf24f6..8fed0732 100644
--- a/src/components/__tests__/pill.test.tsx
+++ b/src/components/__tests__/pill.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,14 +6,14 @@ import { shallow } from 'enzyme';
 import Pill from '../pill';
 
 describe('The Pill component', () => {
-  let wrapper;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Pill />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Pill />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/popup.test.tsx b/src/components/__tests__/popup.test.tsx
index 9c8b6102..d8f260df 100644
--- a/src/components/__tests__/popup.test.tsx
+++ b/src/components/__tests__/popup.test.tsx
@@ -1,35 +1,72 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import Popup from '../popup';
+import Button from '../button';
+
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock'
 
 describe('The Popup component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      headerText: 'Popup header',
-      bodyText: 'Popup body',
-      primaryBtnText: 'Primary button',
-      primaryBtnHandler: jest.fn(),
-    };
-    wrapper = shallow(<Popup {...props} />);
-  });
-
-  it('should render a confirm popup', () => {
-    wrapper.setProps({ type: 'confirm' });
-    expect(wrapper).toMatchSnapshot();
-    expect(props.primaryBtnHandler).not.toHaveBeenCalled();
-  });
-
-  it('should render a prompt popup', () => {
-    wrapper.setProps({ type: 'prompt' });
-    expect(wrapper).toMatchSnapshot();
-    expect(props.primaryBtnHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            headerText: 'Popup header',
+            bodyText: 'Popup body',
+            primaryBtnText: 'Primary button',
+            primaryBtnHandler: jest.fn(),
+            secondaryBtnHandler: jest.fn()
+        };
+        wrapper = shallow(<Popup {...props} />);
+    });
+
+    it('should render a confirm popup', () => {
+        wrapper.setProps({ type: 'confirm' });
+        expect(wrapper).toMatchSnapshot();
+        expect(props.primaryBtnHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a prompt popup', () => {
+        wrapper.setProps({ type: 'prompt' });
+        expect(wrapper).toMatchSnapshot();
+        expect(props.primaryBtnHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call primaryBtnHandler when the popup is submitted', () => {
+        wrapper.find('.popup').simulate('submit', mockClickEvent);
+        expect(props.primaryBtnHandler).toHaveBeenCalled();
+        expect(mockClickEvent.preventDefault).toBeCalled();
+        expect(wrapper.state().primaryBtnSpinner).toEqual(true);
+    });
+
+    it('should call primaryBtnHandler when validation passes', () => {
+        wrapper.setProps({ validationHandler: (value) => {return null} });
+        wrapper.find('.popup').simulate('submit', mockClickEvent);
+        expect(props.primaryBtnHandler).toHaveBeenCalled();
+    });
+
+    it('should not call primaryBtnHandler when validation passes', () => {
+        wrapper.setProps({ validationHandler: (value) => {return 'Test validation error'} });
+        wrapper.find('.popup').simulate('submit', mockClickEvent);
+        expect(props.primaryBtnHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render a secondary button', () => {
+        wrapper.setProps({
+            secondaryBtnText: 'secondaryBtnText'
+        });
+        expect(wrapper.find(Button)).toHaveLength(2);
+        expect(props.secondaryBtnHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call secondaryBtnHandler', () => {
+        wrapper.instance()._secondaryBtnHandler();
+        expect(props.secondaryBtnHandler).toHaveBeenCalled();
+        expect(wrapper.state().secondaryBtnSpinner).toEqual(true);
+    });
+
 });
diff --git a/src/components/__tests__/profile_image.test.tsx b/src/components/__tests__/profile_image.test.tsx
index afad7bf8..9d275744 100644
--- a/src/components/__tests__/profile_image.test.tsx
+++ b/src/components/__tests__/profile_image.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import ProfileImage from '../profile_image';
 
 describe('The ProfileImage component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      width: '20px'
-    };
-    wrapper = shallow(<ProfileImage {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            width: '20px'
+        };
+        wrapper = shallow(<ProfileImage {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/progress.test.tsx b/src/components/__tests__/progress.test.tsx
index 9e13c17c..0ddee6a4 100644
--- a/src/components/__tests__/progress.test.tsx
+++ b/src/components/__tests__/progress.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,18 +6,18 @@ import { shallow } from 'enzyme';
 import ProgressBar from '../progress_bar';
 
 describe('The ProgressBar component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      progressPercentage: 50
-    };
-    wrapper = shallow(<ProgressBar {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            progressPercentage: 50
+        };
+        wrapper = shallow(<ProgressBar {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/response_error.test.tsx b/src/components/__tests__/response_error.test.tsx
index 10afbb3d..70ea698d 100644
--- a/src/components/__tests__/response_error.test.tsx
+++ b/src/components/__tests__/response_error.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -11,49 +9,49 @@ import { I18n } from '../../utils/i18n'
 import ResponseError, { ErrorMessageTemplates, FieldTranslations } from '../response_error';
 
 const ERROR_CODE_TO_I18NC_TEMPLATE: ErrorMessageTemplates = {
-  "fieldError": I18n.translate('error message', "%{field_name} was invalid: %{title}.")
+    "fieldError": I18n.translate('error message', "%{field_name} was invalid: %{title}.")
 }
 
 const FIELD_NAME_TO_I18NC: FieldTranslations = {
-  "username": I18n.translate("form field username", "Username")
+    "username": I18n.translate("form field username", "Username")
 }
 
 describe('The ResponseError component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      errorMessageTemplates: ERROR_CODE_TO_I18NC_TEMPLATE,
-      fieldNames: FIELD_NAME_TO_I18NC,
-      errors: [{
-        id: '12345',
-        code: 'randomError',
-        http_status: '403',
-        title: 'The server crashed hard'
-      }]
-    };
-    wrapper = shallow(<ResponseError {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render translated error message', () => {
-    wrapper.setProps({
-      errors: [{
-        id: '12345',
-        code: 'fieldError',
-        title: 'Field was invalid',
-        detail: 'The field has an invalid value',
-        meta: {
-          field_name: 'username'
-        }
-      }]
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            errorMessageTemplates: ERROR_CODE_TO_I18NC_TEMPLATE,
+            fieldNames: FIELD_NAME_TO_I18NC,
+            errors: [{
+                id: '12345',
+                code: 'randomError',
+                http_status: '403',
+                title: 'The server crashed hard'
+            }]
+        };
+        wrapper = shallow(<ResponseError {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render translated error message', () => {
+        wrapper.setProps({
+            errors: [{
+                id: '12345',
+                code: 'fieldError',
+                title: 'Field was invalid',
+                detail: 'The field has an invalid value',
+                meta: {
+                    field_name: 'username'
+                }
+            }]
+        });
+        expect(wrapper.find('.response-error__msg')).toHaveLength(1);
+        expect(wrapper.find('.response-error__msg').text()).toBe('username was invalid: Field was invalid.');
     });
-    expect(wrapper.find('.response-error__msg')).toHaveLength(1);
-    expect(wrapper.find('.response-error__msg').text()).toEqual('username was invalid: Field was invalid.');
-  });
 
 });
diff --git a/src/components/__tests__/select_list.test.tsx b/src/components/__tests__/select_list.test.tsx
index c9bad873..6bcd789e 100644
--- a/src/components/__tests__/select_list.test.tsx
+++ b/src/components/__tests__/select_list.test.tsx
@@ -1,32 +1,76 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import SelectList from '../select_list';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The SelectList component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      options: [
-        { label: 'Option 1', value: 1 },
-        { label: 'Option 2', value: 2, disabled: true },
-        { label: 'Option 3', value: 3 }
-      ],
-      value: 1,
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<SelectList {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            options: [
+                { label: 'Option 1', value: 1 },
+                { label: 'Option 2', value: 2, disabled: true },
+                { label: 'Option 3', value: 3 }
+            ],
+            value: 1,
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<SelectList {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should show menu when the label is clicked', () => {
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+    });
+
+    it('should not render a label when value is null', () => {
+        wrapper.setProps({ value: null });
+        expect(wrapper.find('.text').text()).toBe('');
+    });
+
+    it('should hide menu when the label is clicked', () => {
+        // first open the menu
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        // then close it
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
+
+    it('should hide menu on blur', () => {
+        // first open the menu
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        // then close it
+        wrapper.simulate('blur');
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
+
+    it('should hide menu on menu click', () => {
+        // first open the menu
+        wrapper.find('.label').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+        // then close it
+        wrapper.find('.container').simulate('click', mockClickEvent);
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
+
+    it('should not propagate click', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
 
 });
diff --git a/src/components/__tests__/select_list_item.test.tsx b/src/components/__tests__/select_list_item.test.tsx
index f56f8f9b..94cb8046 100644
--- a/src/components/__tests__/select_list_item.test.tsx
+++ b/src/components/__tests__/select_list_item.test.tsx
@@ -1,29 +1,48 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import SelectListItem from '../select_list_item';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The SelectListItem component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      active: false,
-      value: 1,
-      label: 'List item',
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<SelectListItem {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            active: false,
+            value: 1,
+            label: 'List item',
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<SelectListItem {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should call the click handler when item is clicked', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onChangeHandler).toHaveBeenCalled();
+    });
+
+    it('should not call the click handler when item is disabled', () => {
+        wrapper.setProps({ disabled: true });
+        wrapper.simulate('click', mockClickEvent);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
+
+    it('should render item as disabled', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('.disabled')).toHaveLength(1);
+    });
 
 });
diff --git a/src/components/__tests__/slide_in_panel.test.tsx b/src/components/__tests__/slide_in_panel.test.tsx
index 628acdb2..6d42ee50 100644
--- a/src/components/__tests__/slide_in_panel.test.tsx
+++ b/src/components/__tests__/slide_in_panel.test.tsx
@@ -1,29 +1,78 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 // component
 import SlideInPanel from '../slide_in_panel';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock'
+
 describe('The SlideInPanel component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      headerTitle: 'Panel title',
-      isOpen: false,
-    };
-    wrapper = shallow(<SlideInPanel {...props}>
-      <div>Body</div>
-      <div>Footer</div>
-    </SlideInPanel>);
-  });
-
-  it('should render', () => {
-    expect(wrapper.render()).toMatchSnapshot();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            headerTitle: 'Panel title',
+            isOpen: false,
+            onOverlayClickHandler: jest.fn(),
+            includeFooter: true
+        };
+        wrapper = shallow(<SlideInPanel {...props}>
+            <div>Body</div>
+            <div>Footer</div>
+        </SlideInPanel>);
+    });
+
+    it('should render', () => {
+        expect(wrapper.render()).toMatchSnapshot();
+        expect(props.onOverlayClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should show a footer', () => {
+        wrapper.setProps({ includeFooter: false });
+        expect(wrapper.find('.slide-in-panel__footer').exists()).toBe(false);
+    });
+
+    it('should call onOverlayClickHandler when the overlay is clicked', () => {
+        wrapper.find('.slide-in-panel__overlay').simulate('click', mockClickEvent);
+        expect(props.onOverlayClickHandler).toHaveBeenCalled();
+    });
+
+    it('should call onOverlayClickHandler when the overlay is clicked and onOverlayClickHandler is not passed', () => {
+        wrapper.setProps({ onOverlayClickHandler: null });
+        wrapper.find('.slide-in-panel__overlay').simulate('click', mockClickEvent);
+        expect(props.onOverlayClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should render header labels', () => {
+        wrapper.setProps({
+            headerLabels: [
+                { label: 'Test label' },
+                { label: 'Test label with info', info: 'Test info' }
+            ]
+        });
+        expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('should not allow the background to scroll when open', () => {
+        expect(document.body.classList.contains('noscroll')).toBe(false);
+        wrapper.setProps({ isOpen: true });
+        expect(document.body.classList.contains('noscroll')).toBe(true);
+        wrapper.setProps({ isOpen: false });
+        expect(document.body.classList.contains('noscroll')).toBe(false);
+    });
+
+    it('should allow the background to scroll after unmount', () => {
+        const mountedWrapper = mount(<SlideInPanel {...props}>
+            <div>Body</div>
+            <div>Footer</div>
+        </SlideInPanel>);
+        mountedWrapper.setProps({ isOpen: true });
+        expect(document.body.classList.contains('noscroll')).toBe(true);
+        mountedWrapper.unmount();
+        expect(document.body.classList.contains('noscroll')).toBe(false);
+    });
 
 });
diff --git a/src/components/__tests__/slide_out_container.test.tsx b/src/components/__tests__/slide_out_container.test.tsx
index e4117272..e8769642 100644
--- a/src/components/__tests__/slide_out_container.test.tsx
+++ b/src/components/__tests__/slide_out_container.test.tsx
@@ -1,27 +1,51 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
+import { UnmountClosed } from 'react-collapse';
 
 // component
 import SlideOutContainer from '../slide_out_container';
+import PanelArrow from '../panel_arrow';
+
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock'
 
 describe('The SlideOutContainer component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      isOpen: false,
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<SlideOutContainer {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            isOpen: false,
+            onHeaderClick: jest.fn(),
+            headerText: 'Test panel'
+        };
+        wrapper = shallow(<SlideOutContainer {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onHeaderClick).not.toHaveBeenCalled();
+    });
+
+    it('calls onHeaderClick when the header clicked', () => {
+        wrapper.find('.slide-out-container__header').simulate('click', mockClickEvent);
+        expect(props.onHeaderClick).toHaveBeenCalled();
+    });
+
+    it('should render a PanelArrow', () => {
+        wrapper.setProps({ showHeaderPanelArrow: true });
+        expect(wrapper.find(PanelArrow)).toHaveLength(1);
+    });
+
+    it('should open the panel', () => {
+        wrapper.setProps({ isOpen: true });
+        expect(wrapper.find(UnmountClosed).prop('isOpened')).toBe(true);
+    });
+
+    it('should hide the header panel', () => {
+        wrapper.setProps({ headerText: null });
+        expect(wrapper.find('.slide-out-container__header').exists()).toBe(false);
+    });
 
 });
diff --git a/src/components/__tests__/spinner.test.tsx b/src/components/__tests__/spinner.test.tsx
index 3f66c164..391ec56a 100644
--- a/src/components/__tests__/spinner.test.tsx
+++ b/src/components/__tests__/spinner.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,14 +6,14 @@ import { shallow } from 'enzyme';
 import Spinner from '../spinner';
 
 describe('The Spinner component', () => {
-  let wrapper;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Spinner />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Spinner />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/tags_selector.test.tsx b/src/components/__tests__/tags_selector.test.tsx
index a833e523..b12d97a8 100644
--- a/src/components/__tests__/tags_selector.test.tsx
+++ b/src/components/__tests__/tags_selector.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,20 +6,85 @@ import { shallow } from 'enzyme';
 import TagsSelector from '../tags_selector';
 
 describe('The TagsSelector component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      value: ['tag 1', 'tag 2', 'tag 3'],
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<TagsSelector {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            value: ['tag 1', 'tag 2'],
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<TagsSelector {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+        expect(wrapper.state('tags')).toEqual([
+            {
+                id: 'tag 1',
+                text: 'tag 1'
+            },
+            {
+                id: 'tag 2',
+                text: 'tag 2'
+            }
+        ]);
+    });
+
+    it('should add suggestions', () => {
+        wrapper.setProps({ suggestions: ['suggestion tag 1', 'suggestion tag 2'] });
+        expect(wrapper.state('suggestions')).toEqual([
+            {
+                id: 'suggestion tag 1',
+                text: 'suggestion tag 1'
+            },
+            {
+                id: 'suggestion tag 2',
+                text: 'suggestion tag 2'
+            }
+        ]);
+    });
+
+    it('should handle adding a tag', () => {
+        wrapper.instance()._handleAddition({
+            id: 'tag 3',
+            text: 'tag 3'
+        });
+        expect(props.onChangeHandler).toHaveBeenCalledWith(['tag 1', 'tag 2', 'tag 3']);
+    });
+
+    it('should handle changing tags order', () => {
+        wrapper.instance()._handleDrag({
+            id: 'tag 1',
+            text: 'tag 1'
+        }, 0, 1);
+        expect(props.onChangeHandler).toHaveBeenCalledWith(['tag 2', 'tag 1']);
+    });
+
+    it('should handle deleting a tag', () => {
+        wrapper.instance()._handleDelete(1);
+        expect(props.onChangeHandler).toHaveBeenCalledWith(['tag 1']);
+    });
+
+    it('should disable the tags', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('.disabled')).toHaveLength(1);
+
+        wrapper.instance()._handleAddition({
+            id: 'tag 3',
+            text: 'tag 3'
+        });
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+
+        wrapper.instance()._handleDrag({
+            id: 'tag 1',
+            text: 'tag 1'
+        }, 0, 1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+
+        wrapper.instance()._handleDelete(1);
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
 
 });
diff --git a/src/components/__tests__/tile.test.tsx b/src/components/__tests__/tile.test.tsx
index 76ef5819..3d781f8f 100644
--- a/src/components/__tests__/tile.test.tsx
+++ b/src/components/__tests__/tile.test.tsx
@@ -1,6 +1,4 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
@@ -8,14 +6,14 @@ import { shallow } from 'enzyme';
 import Tile from '../tile';
 
 describe('The Tile component', () => {
-  let wrapper;
+    let wrapper;
 
-  beforeEach(() => {
-    wrapper = shallow(<Tile />);
-  });
+    beforeEach(() => {
+        wrapper = shallow(<Tile />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/__tests__/toggle_button.test.tsx b/src/components/__tests__/toggle_button.test.tsx
index 4a21a107..cd6895c4 100644
--- a/src/components/__tests__/toggle_button.test.tsx
+++ b/src/components/__tests__/toggle_button.test.tsx
@@ -1,28 +1,35 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 
 // component
 import ToggleButton from '../toggle_button';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The Checkbox component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      id: 'testToggleButton',
-      value: false,
-      onChangeHandler: jest.fn(),
-    };
-    wrapper = shallow(<ToggleButton {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onChangeHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            id: 'testToggleButton',
+            value: false,
+            onChangeHandler: jest.fn(),
+        };
+        wrapper = shallow(<ToggleButton {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onChangeHandler).not.toHaveBeenCalled();
+    });
+
+    it('should not propagate click', () => {
+        wrapper.simulate('click', mockClickEvent);
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+    });
 
 });
diff --git a/src/components/__tests__/tooltip.test.tsx b/src/components/__tests__/tooltip.test.tsx
index 8c6c5d3c..a60d6da3 100644
--- a/src/components/__tests__/tooltip.test.tsx
+++ b/src/components/__tests__/tooltip.test.tsx
@@ -1,25 +1,66 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 // component
 import Tooltip from '../tooltip';
 
 describe('The Tooltip component', () => {
-  let props;
-  let wrapper;
+    let props;
+    let wrapper;
 
-  beforeEach(() => {
-    props = {
-      tooltipText: 'Tooltip text'
-    };
-    wrapper = shallow(<Tooltip {...props} />);
-  });
+    beforeEach(() => {
+        props = {
+            tooltipText: 'Tooltip text'
+        };
+        wrapper = shallow(<Tooltip {...props} />);
+    });
 
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
 
+    it('should render to north', () => {
+        wrapper.setProps({ direction: 'north' });
+        expect(wrapper.find('.tooltip-trigger--north')).toHaveLength(1);
+        expect(wrapper.find('.tooltip-trigger--south').exists()).toBe(false);
+    });
+
+    it('should disable the tooltip', () => {
+        wrapper.setProps({ disableTooltip: true });
+        expect(wrapper.find('.disabled')).toHaveLength(1);
+    });
+
+    it('should show the tooltip when hovered', () => {
+        const mountedWrapper = mount(<Tooltip {...props} />);
+        mountedWrapper.simulate('pointerEnter');
+        expect(mountedWrapper.find('.show')).toHaveLength(1);
+    });
+
+    it('should hide the tooltip when no longer hovered', () => {
+        const mountedWrapper = mount(<Tooltip {...props} />);
+        mountedWrapper.simulate('pointerEnter');
+        expect(mountedWrapper.find('.show')).toHaveLength(1);
+        mountedWrapper.simulate('pointerLeave');
+        expect(mountedWrapper.find('.show').exists()).toBe(false);
+    });
+
+    it('should show the tooltip when selected on touch device', () => {
+        const mountedWrapper = mount(<Tooltip {...props} />);
+        mountedWrapper.simulate('touchStart');
+        expect(mountedWrapper.find('.show')).toHaveLength(1);
+    });
+
+    it('should hide the tooltip when unselected on touch device', () => {
+        const mountedWrapper = mount(<Tooltip {...props} />);
+        mountedWrapper.simulate('touchStart');
+        expect(mountedWrapper.find('.show')).toHaveLength(1);
+        mountedWrapper.simulate('touchEnd');
+        expect(mountedWrapper.find('.show').exists()).toBe(false);
+    });
+
+    it('should offset the tooltip', () => {
+        wrapper.setState({ tooltipOffset: 100 });
+        expect(wrapper.find('.tooltip').prop('style').left).toBe(100);
+    });
 });
diff --git a/src/components/__tests__/user_account_menu.test.tsx b/src/components/__tests__/user_account_menu.test.tsx
index 3ea27816..861c9c94 100644
--- a/src/components/__tests__/user_account_menu.test.tsx
+++ b/src/components/__tests__/user_account_menu.test.tsx
@@ -1,28 +1,66 @@
 // Copyright (c) 2018 Ultimaker B.V.
-import 'jest';
-import 'jsdom-global/register';
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 // component
 import UserAccountMenu from '../user_account_menu';
 
+// mocks
+import { mockClickEvent } from '../../__mocks__/clickMock';
+
+
 describe('The UserAccountMenu component', () => {
-  let props;
-  let wrapper;
-
-  beforeEach(() => {
-    props = {
-      manageAccountURL: 'https://account-staging.ultimaker.com',
-      onSignOutClickHandler: jest.fn(),
-      displayName: 'Test User'
-    };
-    wrapper = shallow(<UserAccountMenu {...props} />);
-  });
-
-  it('should render', () => {
-    expect(wrapper).toMatchSnapshot();
-    expect(props.onSignOutClickHandler).not.toHaveBeenCalled();
-  });
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            manageAccountURL: 'https://account-staging.ultimaker.com',
+            onSignOutClickHandler: jest.fn(),
+            displayName: 'Test User'
+        };
+        wrapper = shallow(<UserAccountMenu {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+        expect(props.onSignOutClickHandler).not.toHaveBeenCalled();
+    });
+
+    it('should toggle the menu visibility when clicking the trigger', () => {
+        wrapper.find('.trigger').simulate('click', mockClickEvent);
+        expect(wrapper.state('showMenu')).toBe(true);
+        expect(wrapper.find('.visible')).toHaveLength(1);
+
+        wrapper.find('.trigger').simulate('click', mockClickEvent);
+        expect(wrapper.state('showMenu')).toBe(false);
+        expect(wrapper.find('.visible').exists()).toBe(false);
+    });
+
+    it('should add _onOutsideClickHandler event listener', () => {
+        document.addEventListener = jest.fn();
+        expect(document.addEventListener).not.toHaveBeenCalled();
+        wrapper.instance()._setShowMenu(true);
+        expect(document.addEventListener).toHaveBeenCalledWith('mousedown', wrapper.instance()._onOutsideClickHandler);
+    });
+
+    it('should remove _onOutsideClickHandler event listener', () => {
+        document.removeEventListener = jest.fn();
+        expect(document.removeEventListener).not.toHaveBeenCalled();
+        wrapper.instance()._setShowMenu(false);
+        expect(document.removeEventListener).toHaveBeenCalledWith('mousedown', wrapper.instance()._onOutsideClickHandler);
+    });
+
+    it('should not hide the menu when the menu is clicked', () => {
+        wrapper.instance()._setShowMenu(true);
+        wrapper.simulate('click', mockClickEvent);
+        expect(mockClickEvent.stopPropagation).toBeCalled();
+        expect(wrapper.find('.visible')).toHaveLength(1);
+    });
+
+    it('should display child section', () => {
+        wrapper.setProps({ children: <div>Child section</div> });
+        expect(wrapper).toMatchSnapshot();
+    });
 
 });
diff --git a/src/components/button.tsx b/src/components/button.tsx
index e0f7b1c6..974942de 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { Link } from 'react-router-dom';
 
+// components
 import Spinner from './spinner';
 
 export type ButtonType = 'submit' | 'button' | 'link';
@@ -35,6 +37,8 @@ export const Button: React.StatelessComponent<ButtonProps> =
 
         const classes = classNames(`btn btn--${style} btn--${shape} ${className}`, { 'disabled': disabled }, { 'waiting': showSpinner });
 
+        const isLinkExternal = linkURL && /^https?:\/\//.test(linkURL);
+
         const _onClickHandler = (e: React.MouseEvent<HTMLElement>) => {
             e.stopPropagation();
             if (onClickHandler && !(disabled || showSpinner)) {
@@ -42,7 +46,7 @@ export const Button: React.StatelessComponent<ButtonProps> =
             }
         }
 
-        if (type === 'link') {
+        if (type === 'link' && isLinkExternal) {
             return <a id={id} className={classes} href={disabled || showSpinner ? undefined : linkURL} target={linkToNewTab ? '_blank' : undefined}>
                 <span className="text">{children}</span>
                 {showSpinner &&
@@ -50,6 +54,11 @@ export const Button: React.StatelessComponent<ButtonProps> =
                 }
             </a>
         }
+        else if (type === 'link') {
+            return <Link to={linkURL} className={classes}>
+                <span className="text">{children}</span>
+            </Link>
+        }
         else {
             return <button id={id} className={classes} onClick={_onClickHandler} disabled={disabled || showSpinner} type={type}>
                 <span className="text">{children}</span>
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
index 848848d6..91134959 100755
--- a/src/components/checkbox.tsx
+++ b/src/components/checkbox.tsx
@@ -14,26 +14,16 @@ export interface CheckboxProps {
 
 export const Checkbox: React.StatelessComponent<CheckboxProps> = ({ id, value, onChangeHandler, disabled }) => {
 
-    const _onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-        onChangeHandler(e.currentTarget.checked);
-    }
-
-    const _stopPropagation = (e: React.MouseEvent<EventTarget>) => {
-        e.stopPropagation()
-    }
-
-
     const classes = classNames('checkbox', { disabled });
 
-    return <div className={classes} onClick={_stopPropagation} >
+    return <div className={classes} onClick={(e) => e.stopPropagation()} >
         <input
             id={id}
             name={id}
             type="checkbox"
             checked={value !== null ? value : false}
-            onChange={_onChangeHandler}
+            onChange={(e) => onChangeHandler(e.currentTarget.checked)}
             disabled={disabled}
-            ref={this.inputRef}
         />
         <label htmlFor={id}></label>
     </div>
diff --git a/src/components/context_menu.tsx b/src/components/context_menu.tsx
index 9f8d2c2a..f6dfdbd5 100755
--- a/src/components/context_menu.tsx
+++ b/src/components/context_menu.tsx
@@ -55,12 +55,12 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
         const contextMenuElement = this.menuRef.current;
 
         // get element position
-        const contextMenuLeft = contextMenuElement.getBoundingClientRect().left;
+        const contextMenuLeft = contextMenuElement ? contextMenuElement.getBoundingClientRect().left : null;
 
         const leftOffset = menuOffsetDefault - windowMargin;
         const rightOffset = (triggerWidth + menuOffsetDefault) - windowMargin;
 
-        let menuOffset: number;
+        let menuOffset: number = null;
 
         if (menuOffsetDirection === 'right') {
             // if the menu will appear outside the window on the right side, move it left
@@ -80,9 +80,6 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
             }
 
         }
-        else {
-            menuOffset = null;
-        }
 
         this.setState({
             menuOffset: menuOffset
diff --git a/src/components/form.tsx b/src/components/form.tsx
index 76d9121c..a333597c 100644
--- a/src/components/form.tsx
+++ b/src/components/form.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 
 import { default as Button, ButtonStyle } from './button';
 
@@ -20,7 +19,7 @@ export interface FormProps {
     secondaryBtnHandler?: () => void;
     /** Primary button style type */
     secondaryBtnStyle?: ButtonStyle;
-    /** A url to link to instead of calling secondaryBtnHandler */
+    /** An internal url link to be used instead of calling secondaryBtnHandler */
     secondaryBtnLink?: string;
     /** The form validation state and validation error messages */
     validationErrors?: FormValidationResponse;
@@ -29,8 +28,6 @@ export interface FormProps {
 }
 
 export interface FormState {
-    primaryBtnSpinner: boolean;
-    secondaryBtnSpinner: boolean;
     submitted: boolean;
 }
 
@@ -48,7 +45,6 @@ export class Form extends React.Component<FormProps, FormState> {
 
         // bind callbacks once
         this._onSubmitHandler = this._onSubmitHandler.bind(this);
-        this._secondaryBtnHandler = this._secondaryBtnHandler.bind(this);
         this._renderChild = this._renderChild.bind(this);
     }
 
@@ -58,10 +54,6 @@ export class Form extends React.Component<FormProps, FormState> {
         this.props.onSubmitHandler();
     }
 
-    _secondaryBtnHandler(): void {
-        this.props.secondaryBtnHandler();
-    }
-
 	/**
  * Renders a single child of the form component. If the child has the `id` props, we will check for errors in the
  * form validation, any errors are passed as extra props to the child.
@@ -85,8 +77,7 @@ export class Form extends React.Component<FormProps, FormState> {
 
     render(): JSX.Element {
         const { primaryBtnText, secondaryBtnText, primaryBtnStyle, secondaryBtnStyle, validationErrors,
-            secondaryBtnLink, alwaysEnableSubmitButton, children } = this.props;
-        const { primaryBtnSpinner, secondaryBtnSpinner } = this.state;
+            secondaryBtnHandler, secondaryBtnLink, alwaysEnableSubmitButton, children } = this.props;
 
         return (
             <form noValidate className="form" onSubmit={this._onSubmitHandler}>
@@ -97,36 +88,26 @@ export class Form extends React.Component<FormProps, FormState> {
                             <div className="form__btn-container">
                                 <Button
                                     style={primaryBtnStyle}
-                                    disabled={alwaysEnableSubmitButton ? false : secondaryBtnSpinner || validationErrors !== null}
-                                    type="submit"
-                                    showSpinner={primaryBtnSpinner}>
+                                    disabled={alwaysEnableSubmitButton ? false : validationErrors !== null}
+                                    type="submit" >
 
                                     {primaryBtnText}
                                 </Button>
                             </div>
                         }
-
-                        {secondaryBtnText && !secondaryBtnLink &&
+                        {secondaryBtnText &&
                             <div className="form__btn-container">
                                 <Button
                                     style={secondaryBtnStyle}
-                                    disabled={primaryBtnSpinner}
-                                    onClickHandler={this._secondaryBtnHandler}
-                                    showSpinner={secondaryBtnSpinner}
+                                    onClickHandler={secondaryBtnHandler}
+                                    type={secondaryBtnLink ? 'link' : 'button'}
+                                    linkURL={secondaryBtnLink}
                                 >
                                     {secondaryBtnText}
                                 </Button>
                             </div>
                         }
 
-                        {secondaryBtnText && secondaryBtnLink &&
-                            <div className="form__btn-container">
-                                <Link to={secondaryBtnLink} className="btn btn--quiet">
-                                    <span className="text">{secondaryBtnText}</span>
-                                </Link>
-                            </div>
-                        }
-
                     </div>
                 }
             </form>
diff --git a/src/components/image_upload.tsx b/src/components/image_upload.tsx
index ba917ef7..e861ae74 100644
--- a/src/components/image_upload.tsx
+++ b/src/components/image_upload.tsx
@@ -1,9 +1,15 @@
 import * as React from 'react';
-import Dropzone from 'react-dropzone';
 import classNames from 'classnames';
 
+// needs to be imported this way to keep jest happy
+let Dropzone = require('react-dropzone');
+if ('default' in Dropzone) {
+  Dropzone = Dropzone.default;
+}
+
+// components
 import { Image, ImageShape } from './image';
-import UploadIcon from './icons/upload_icon'
+import UploadIcon from './icons/upload_icon';
 
 export interface ImageFile extends File {
     preview?: string;
diff --git a/src/components/input_field_input.tsx b/src/components/input_field_input.tsx
index 29a472d4..b4cb6fbd 100644
--- a/src/components/input_field_input.tsx
+++ b/src/components/input_field_input.tsx
@@ -85,12 +85,15 @@ export class InputFieldInput extends React.Component<InputFieldInputProps, {}> {
         const inputLayoutClasses = classNames(`layout__item u-${inputLayoutWidth} layout__item--middle`, { 'text-center': centerInputField });
 
         return <div className={inputLayoutClasses}>
-            <div className="input-container layout layout--gutter-xs">
-                <div className="layout__item u-fill">
-                    {this._renderInputElement()}
+
+            {!staticField &&
+                <div className="input-container layout layout--gutter-xs">
+                    <div className="layout__item u-fill">
+                        {this._renderInputElement()}
+                    </div>
+                    {this._renderPostInputElement()}
                 </div>
-                {this._renderPostInputElement()}
-            </div>
+            }
 
             {staticField && this._renderStaticValue(type, value)}
         </div>
diff --git a/src/components/input_field_label.tsx b/src/components/input_field_label.tsx
index f5d9cdc6..64ce80e1 100644
--- a/src/components/input_field_label.tsx
+++ b/src/components/input_field_label.tsx
@@ -63,7 +63,7 @@ export class InputFieldLabel extends React.Component<InputFieldProps, {}> {
         const { id, label, labelLayoutWidth, labelWidthBreakpoint, type } = this.props;
 
         const classes = classNames(`input-field__label layout__item u-${labelLayoutWidth}-${labelWidthBreakpoint}`,
-            { 'tag-selector-label': type === 'tags' && labelLayoutWidth && labelLayoutWidth !== '1/1' });
+            { 'tag-label-position-override': type === 'tags' && labelLayoutWidth && labelLayoutWidth !== '1/1' });
 
         return (
             <div className={classes}>
diff --git a/src/components/input_field_validation.tsx b/src/components/input_field_validation.tsx
index bb04df66..398ad8d2 100644
--- a/src/components/input_field_validation.tsx
+++ b/src/components/input_field_validation.tsx
@@ -19,7 +19,7 @@ export class InputFieldValidation extends React.Component<InputFieldValidationPr
     render(): JSX.Element {
         const { validationError, labelLayoutWidth, labelWidthBreakpoint, required } = this.props;
         let errorMsgOffsetClass = null;
-        let errorMsgClass = null;
+        let errorMsgClass = '';
 
         if (labelLayoutWidth !== 'fill' && labelLayoutWidth !== 'fit' && labelLayoutWidth !== '1/1') {
             // align validation message under input (after label width)
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index 600089a4..02930d3a 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -2,12 +2,20 @@ import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import classNames from 'classnames';
 import { Motion, spring } from 'react-motion';
-import { BaseAppRoute } from '../layouts/base_app';
 
 import Button from './button';
 
+export interface NavRoute {
+    path: string;
+    label: string;
+    visible?: boolean;
+    component: React.ComponentClass | React.StatelessComponent;
+    scopes?: string[];
+    props?: object;
+}
+
 export interface NavigationProps {
-    navLinks: BaseAppRoute[];
+    navLinks: NavRoute[];
 }
 
 export interface NavigationState {
diff --git a/src/components/slide_in_panel.tsx b/src/components/slide_in_panel.tsx
index 3e5c6088..7c6fb4cc 100644
--- a/src/components/slide_in_panel.tsx
+++ b/src/components/slide_in_panel.tsx
@@ -35,6 +35,7 @@ export class SlideInPanel extends React.Component<SlideInPanelProps, {}> {
                 document.body.classList.remove('noscroll');
             }
         }
+        
     }
 
     componentWillUnmount(): void {
diff --git a/src/components/toggle_button.tsx b/src/components/toggle_button.tsx
index 8f753ded..3c984492 100644
--- a/src/components/toggle_button.tsx
+++ b/src/components/toggle_button.tsx
@@ -13,23 +13,15 @@ export interface ToggleButtonProps {
 
 export const ToggleButton: React.StatelessComponent<ToggleButtonProps> = ({ id, value, onChangeHandler, disabled }) => {
 
-    const _onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-        onChangeHandler(e.currentTarget.checked);
-    }
-
-    const _stopPropagation = (e: React.MouseEvent<EventTarget>) => {
-        e.stopPropagation()
-    }
-
     return (
-        <div className="toggle-button-container" onClick={_stopPropagation}>
+        <div className="toggle-button-container" onClick={(e) => e.stopPropagation()}>
             <input
                 className="toggle-button"
                 id={id}
                 name={id}
                 type="checkbox"
                 checked={value !== null ? value : false}
-                onChange={_onChangeHandler}
+                onChange={(e) => onChangeHandler(e.currentTarget.checked)}
                 disabled={disabled}
             />
             <label htmlFor={id}></label>
diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx
index c17a509a..d33b6e9b 100644
--- a/src/components/tooltip.tsx
+++ b/src/components/tooltip.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 
 import splitTextByNewLine from '../utils/split_text_by_new_line';
@@ -24,6 +23,8 @@ const windowMargin = 10;
 
 export class Tooltip extends React.Component<TooltipProps, TooltipState> {
 
+    private tooltipRef;
+
     static defaultProps = {
         direction: 'north'
     };
@@ -36,6 +37,8 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
     constructor(props) {
         super(props);
 
+        this.tooltipRef = React.createRef();
+
         this._showTooltip = this._showTooltip.bind(this);
         this._hideTooltip = this._hideTooltip.bind(this);
     }
@@ -44,8 +47,9 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
         // get browser page width
         const windowWidth = window.innerWidth;
 
-        // get dom elements
-        const tooltipElement = ReactDOM.findDOMNode(this.refs.tooltip);
+        // get dom element
+        const tooltipElement = this.tooltipRef.current;
+        // get parent element
         const tooltipTriggerElement = tooltipElement.parentNode;
 
         // get element positions
@@ -55,7 +59,6 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
         const tooltipTriggerRight = this._getElementDetails(tooltipTriggerElement).right;
         const tooltipTriggerCenter = this._getElementDetails(tooltipTriggerElement).center;
 
-
         let tooltipOffset: number;
 
         // if the tooltip is off the screen to the left, move it right
@@ -65,7 +68,7 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
         }
         // if the tooltip is off the screen to the right, move it left
         else if (tooltipWidth / 2 > windowWidth - tooltipTriggerCenter) {
-            // move move relative to tooltipTrigger right, then make negative so it can be applyed to the tooltip left
+            // move move relative to tooltipTrigger right, then make negative so it can be applied to the tooltip left
             tooltipOffset = (tooltipWidth / 2 - tooltipTriggerWidth - (windowWidth - tooltipTriggerRight) + windowMargin) * -1;
         }
         else {
@@ -75,7 +78,6 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
         this.setState({
             tooltipOffset: tooltipOffset
         });
-
     }
 
     private _getElementDetails(el: any): any {
@@ -109,7 +111,7 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
 
             {children}
 
-            <div ref='tooltip' className="tooltip" style={tooltipOffset ? { left: tooltipOffset } : undefined}>
+            <div ref={this.tooltipRef} className="tooltip" style={tooltipOffset ? { left: tooltipOffset } : undefined}>
                 <div className="text">
                     {splitTextByNewLine(tooltipText)}
                 </div>
diff --git a/src/components/user_account_menu.tsx b/src/components/user_account_menu.tsx
index d3ef5201..aba3be7b 100755
--- a/src/components/user_account_menu.tsx
+++ b/src/components/user_account_menu.tsx
@@ -55,7 +55,7 @@ export class UserAccountMenu extends React.Component<UserAccountMenuProps, UserA
 
     _onOutsideClickHandler() {
         if (this.menuRef.current && !this.menuRef.current.contains(event.target)) {
-            this._setShowMenu(!this.state.showMenu);
+            this._setShowMenu(false);
         }
     }
 
diff --git a/src/layouts/base_app.tsx b/src/layouts/base_app.tsx
deleted file mode 100644
index 1a329f57..00000000
--- a/src/layouts/base_app.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-import * as React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
-
-// components
-import App from '../components/app';
-import Header from '../components/header';
-import Navigation from '../components/navigation';
-import LoadingPage from '../components/loading_page';
-import CuraLogo from '../components/icons/cura_logo';
-import UltimakerLogo from '../components/icons/ultimaker_logo'
-import Footer from '../components/footer';
-
-// views
-import PageNotFoundView from '../views/page_not_found';
-
-// utils
-import { I18n } from '../utils/i18n';
-
-export interface BaseAppState {
-    scopes: string[];
-    isLoggedIn: boolean;
-    error: string;
-}
-
-/**
- * Typing for Route. Extends default Route with some new props.
- */
-export interface BaseAppRoute {
-    path: string;
-    label: string;
-    visible?: boolean;
-    component: React.ComponentClass | React.StatelessComponent;
-    scopes?: string[];
-    props?: object;
-}
-
-/**
- * Our main application class.
- */
-export default abstract class BaseApp extends React.Component<{}, BaseAppState> {
-
-    /**
-     * Fetch the OAuth scopes from the back-end.
-     */
-    protected abstract _fetchScopes(): void
-
-    /**
-     * Get the app routes.
-     */
-    protected abstract _getRoutes(): BaseAppRoute[]
-
-    /**
-     * Get the app base URL.
-     */
-    protected abstract _getAppUrl(): string
-
-    /**
-     * Get the login view component.
-     */
-    protected abstract _getLoginUrl(): string
-
-    /**
-     * Set the default state.
-     */
-    state: BaseAppState = {
-        scopes: [],
-        isLoggedIn: null,
-        error: ''
-    }
-
-    protected constructor(props) {
-        super(props)
-        this._createRoute = this._createRoute.bind(this)
-        this._setAuthLoading = this._setAuthLoading.bind(this)
-        this._setAuth = this._setAuth.bind(this)
-    }
-
-    componentDidMount(): void {
-        this._fetchScopes()
-    }
-
-    render(): JSX.Element {
-        const routes = this._getRoutes()
-        return (
-            <App fixedHeader>
-                <Header headerLogo={<UltimakerLogo />} headerLogoUrl={this._getAppUrl()} showNav>
-                    {this._renderNavigation(routes)}
-                </Header>
-                <div className="content app__main" role="main">
-                    {this._renderRoutes(routes)}
-                </div>
-                <Footer>
-                    {this._renderFooter()}
-                </Footer>
-            </App>
-        )
-    }
-
-    /**
-     * Renders all available routes.
-     */
-    protected _renderRoutes(routes: BaseAppRoute[]): JSX.Element {
-        return (
-            <Switch>
-                {routes.map(this._createRoute)}
-                <Route component={PageNotFoundView} />
-            </Switch>
-        )
-    }
-
-    /**
-     * Renders the navigation items.
-     */
-    protected _renderNavigation(routes: BaseAppRoute[]): JSX.Element {
-        return (
-            <Navigation navLinks={routes} />
-        )
-    }
-
-    /**
-     * Renders the footer.
-     */
-    protected _renderFooter(): JSX.Element {
-        return (
-            <a>{I18n.translate("Footer About link", "About")}</a>
-        )
-    }
-
-    /**
-     * Create a routed component.
-     * @param route - The specification of the route to be created.
-     * @param key - The index of the route in the application routes.
-     * @return The created route, or a redirect route if the user is denied access.
-     */
-    protected _createRoute(route: BaseAppRoute, key: number): JSX.Element {
-        const { path, scopes: requiredScopes, props, component: Component } = route
-        const { scopes: actualScopes, isLoggedIn } = this.state
-
-        // by default we only have access if the component requires no additional scopes.
-        let hasAccess = !requiredScopes;
-
-        // determine if the user currently has access
-        if (requiredScopes && isLoggedIn && requiredScopes.every(scope => actualScopes.indexOf(scope) >= 0)) {
-            hasAccess = true;
-        }
-
-        // render will either show the login page or the component, passing on any parameters
-        const render = ({ match: { params } }) => hasAccess ?
-            <Component scopes={actualScopes} {...props} {...params} />
-            : isLoggedIn === null ? <LoadingPage />
-                : <Redirect to={this._getLoginUrl()} />;
-
-        // return the rendered view
-        return <Route key={key} render={render} path={path} exact />;
-    }
-
-    /**
-     * Set the authentication state to loading.
-     */
-    protected _setAuthLoading(): void {
-        this.setState({ isLoggedIn: null, scopes: null });
-    }
-
-    /**
-     * Set the authentication state for the whole app.
-     * @param scopes List of scopes that the user has access to.
-     * @param error An optional error message.
-     */
-    protected _setAuth(scopes: string[], error?: string): void {
-        this.setState({ isLoggedIn: scopes !== null, scopes, error });
-    }
-}
diff --git a/src/stories/button.stories.tsx b/src/stories/button.stories.tsx
index d1fb9992..fd1f7ca8 100644
--- a/src/stories/button.stories.tsx
+++ b/src/stories/button.stories.tsx
@@ -10,6 +10,7 @@ import Button from '../components/button';
 import ToggleButton from '../components/toggle_button';
 import CloseButton from '../components/close_button';
 import InfoLink from '../components/info_link';
+import { BrowserRouter } from 'react-router-dom';
 
 const stories = storiesOf('Button', module);
 
@@ -180,15 +181,17 @@ stories.add('Close', withInfo(
 stories.add('Link', withInfo(
     'An anchor styled as a button. Useful for page navigation'
 )(() =>
-    <Button type="link"
-        linkURL="https://ultimaker.com/"
-        linkToNewTab={boolean('Link to new tab', false)}
-        showSpinner={boolean('Loading', false)}
-        disabled={boolean('Disabled', false)}
-        style="primary"
-    >
-        {text('Text 1', 'Link')}
-    </Button>
+    <BrowserRouter>
+        <Button type="link"
+            linkURL={text('Link URL', 'https://ultimaker.com/')}
+            linkToNewTab={boolean('Link to new tab', false)}
+            showSpinner={boolean('Loading', false)}
+            disabled={boolean('Disabled', false)}
+            style="primary"
+        >
+            {text('Text 1', 'Link')}
+        </Button>
+    </BrowserRouter>
 ));
 
 stories.add('Info link', withInfo(
diff --git a/src/stories/layout_app.stories.tsx b/src/stories/layout_app.stories.tsx
deleted file mode 100644
index a7fd427c..00000000
--- a/src/stories/layout_app.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-import { storiesOf } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs/react';
-import { withInfo } from '@storybook/addon-info';
-
-import BaseApp, { BaseAppRoute } from '../layouts/base_app';
-import Page from '../components/page';
-
-const stories = storiesOf('Example layouts', module);
-
-/**
- * Example app for storybook.
- */
-class StoriesApp extends BaseApp {
-
-    protected _fetchScopes(): void {
-        this._setAuth([]);
-    }
-
-    protected _getAppUrl(): string {
-        return "/app";
-    }
-
-    protected _getLoginUrl(): string {
-        return '/Sign In'
-    }
-
-    protected _getRoutes(): BaseAppRoute[] {
-        return [{
-            path: '/home',
-            label: 'Home',
-            visible: true,
-            component: Page
-        }]
-    }
-}
-
-stories.addDecorator(withKnobs);
-
-stories.add('Base App', withInfo(
-    'A example layout for an application'
-)(() =>
-    <BrowserRouter>
-        <StoriesApp />
-    </BrowserRouter>
-));
diff --git a/src/stylesheets/_forms.scss b/src/stylesheets/_forms.scss
index c1822054..98241983 100644
--- a/src/stylesheets/_forms.scss
+++ b/src/stylesheets/_forms.scss
@@ -105,7 +105,7 @@
         margin-bottom: 0.6rem;
         margin-top: 1.2rem;
 
-        &.tag-selector-label {
+        &.tag-label-position-override {
             align-self: flex-end;
             margin-bottom: 1.3rem;
             margin-top: 0.6rem;
diff --git a/src/utils/__tests__/get_visibility_vendor_prefix.test.tsx b/src/utils/__tests__/get_visibility_vendor_prefix.test.tsx
new file mode 100644
index 00000000..e8c833bc
--- /dev/null
+++ b/src/utils/__tests__/get_visibility_vendor_prefix.test.tsx
@@ -0,0 +1,8 @@
+// Copyright (c) 2018 Ultimaker B.V.
+
+// util
+import getVisibilityVendorPrefix from '../get_visibility_vendor_prefix';
+
+test('Visibility vendor prefix is not needed', () => {
+    expect(getVisibilityVendorPrefix()).toBe('');
+})
diff --git a/src/utils/__tests__/i18n.test.tsx b/src/utils/__tests__/i18n.test.tsx
new file mode 100644
index 00000000..893a3236
--- /dev/null
+++ b/src/utils/__tests__/i18n.test.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) 2018 Ultimaker B.V.
+
+// util
+import { I18n } from '../i18n';
+
+
+test('I18n is initialized', () => {
+    I18n.initialize([
+        { 'name': 'en-US', 'source': '' }
+    ])
+
+    expect(I18n.getLocale()).toBe('en-US');
+})
+
+test('Is language supported', () => {
+    expect(I18n.isLanguageSupported('en-US')).toBe(true);
+})
+
+test('Is text translated', () => {
+    expect(I18n.translate('Test string', 'Test string')).toBe('Test string');
+})
+
+test('Is text formated and translated', () => {
+    expect(I18n.format('Test string', 'Test string with inserted %{value}', { value: 'string' })).toBe('Test string with inserted string');
+})
+
+test('Is text translated with plurals', () => {
+    expect(I18n.plural('Test string', 'Test string', 'Test strings', 1)).toBe('Test string');
+    expect(I18n.plural('Test string', 'Test string', 'Test strings', 2)).toBe('Test strings');
+})
diff --git a/src/utils/__tests__/is_browser_window_hidden.test.tsx b/src/utils/__tests__/is_browser_window_hidden.test.tsx
new file mode 100644
index 00000000..ebb6d93f
--- /dev/null
+++ b/src/utils/__tests__/is_browser_window_hidden.test.tsx
@@ -0,0 +1,8 @@
+// Copyright (c) 2018 Ultimaker B.V.
+
+// util
+import isBrowserWindowHidden from '../is_browser_window_hidden';
+
+test('Browser window is visible', () => {
+    expect(isBrowserWindowHidden()).toBe(false);
+})
diff --git a/src/utils/register_service_worker.tsx b/src/utils/register_service_worker.tsx
deleted file mode 100644
index 349b5529..00000000
--- a/src/utils/register_service_worker.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-// tslint:disable:no-console
-// In production, we register a service worker to serve assets from local cache.
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the 'N+1' visit to a page, since previously
-// cached resources are updated in the background.
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-const isLocalhost = Boolean(
-    window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export default function register() {
-    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-        // The URL constructor is available in all browsers that support SW.
-        const publicUrl = new URL(
-            process.env.PUBLIC_URL!,
-            window.location.toString()
-        );
-        if (publicUrl.origin !== window.location.origin) {
-            // Our service worker won't work if PUBLIC_URL is on a different origin
-            // from what our page is served on. This might happen if a CDN is used to
-            // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-            return;
-        }
-
-        window.addEventListener('load', () => {
-            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-            if (isLocalhost) {
-                // This is running on localhost. Lets check if a service worker still exists or not.
-                checkValidServiceWorker(swUrl);
-
-                // Add some additional logging to localhost, pointing developers to the
-                // service worker/PWA documentation.
-                navigator.serviceWorker.ready.then(() => {
-                    console.log(
-                        'This web app is being served cache-first by a service ' +
-                        'worker. To learn more, visit https://goo.gl/SC7cgQ'
-                    );
-                });
-            } else {
-                // Is not local host. Just register service worker
-                registerValidSW(swUrl);
-            }
-        });
-    }
-}
-
-function registerValidSW(swUrl: string) {
-    navigator.serviceWorker
-        .register(swUrl)
-        .then(registration => {
-            registration.onupdatefound = () => {
-                const installingWorker = registration.installing;
-                if (installingWorker) {
-                    installingWorker.onstatechange = () => {
-                        if (installingWorker.state === 'installed') {
-                            if (navigator.serviceWorker.controller) {
-                                // At this point, the old content will have been purged and
-                                // the fresh content will have been added to the cache.
-                                // It's the perfect time to display a 'New content is
-                                // available; please refresh.' message in your web app.
-                                console.log('New content is available; please refresh.');
-                            } else {
-                                // At this point, everything has been precached.
-                                // It's the perfect time to display a
-                                // 'Content is cached for offline use.' message.
-                                console.log('Content is cached for offline use.');
-                            }
-                        }
-                    };
-                }
-            };
-        })
-        .catch(error => {
-            console.error('Error during service worker registration:', error);
-        });
-}
-
-function checkValidServiceWorker(swUrl: string) {
-    // Check if the service worker can be found. If it can't reload the page.
-    fetch(swUrl)
-        .then(response => {
-            // Ensure service worker exists, and that we really are getting a JS file.
-            if (
-                response.status === 404 ||
-                response.headers.get('content-type')!.indexOf('javascript') === -1
-            ) {
-                // No service worker found. Probably a different app. Reload the page.
-                navigator.serviceWorker.ready.then(registration => {
-                    registration.unregister().then(() => {
-                        window.location.reload();
-                    });
-                });
-            } else {
-                // Service worker found. Proceed as normal.
-                registerValidSW(swUrl);
-            }
-        })
-        .catch(() => {
-            console.log(
-                'No internet connection found. App is running in offline mode.'
-            );
-        });
-}
-
-export function unregister() {
-    if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.ready.then(registration => {
-            registration.unregister();
-        });
-    }
-}