From 50eaea35e142cda93dade873c48e8f77646afd86 Mon Sep 17 00:00:00 2001
From: VICTOR RAPHAEL BRAGA DE SALES MASCARENHAS <vmascarenhas@daitangroup.com>
Date: Fri, 15 Mar 2019 09:20:52 -0300
Subject: [PATCH] improving snapshot using snapshotSerializers to remove
 unnecessary things (#596)

---
 jest.unit.config.json                         |    3 +-
 package.json                                  |    1 +
 spec/__snapshots__/aboutApp.spec.ts.snap      |  222 +--
 spec/__snapshots__/basicAuth.spec.ts.snap     | 1212 ++---------------
 .../downloadManager.spec.ts.snap              |  192 +--
 spec/__snapshots__/loadingScreen.spec.ts.snap |  419 +-----
 spec/__snapshots__/screenPicker.spec.ts.snap  |  638 +--------
 .../screenSharingIndicator.spec.ts.snap       |  298 +---
 8 files changed, 255 insertions(+), 2730 deletions(-)

diff --git a/jest.unit.config.json b/jest.unit.config.json
index 73cb09e0a..e741ada87 100644
--- a/jest.unit.config.json
+++ b/jest.unit.config.json
@@ -39,5 +39,6 @@
   ],
   "setupFiles": [
     "./spec/setup/test-setup.js"
-  ]
+  ],
+  "snapshotSerializers": ["enzyme-to-json/serializer"]
 }
diff --git a/package.json b/package.json
index a0faa7bae..238eb0bda 100644
--- a/package.json
+++ b/package.json
@@ -140,6 +140,7 @@
     "electron-fetch": "1.3.0",
     "electron-log": "2.2.17",
     "electron-spellchecker": "git+https://github.com/symphonyoss/electron-spellchecker.git#v1.1.5",
+    "enzyme-to-json": "^3.3.5",
     "ffi": "git+https://github.com/symphonyoss/node-ffi.git#v1.2.9",
     "filesize": "3.6.1",
     "jimp": "0.6.0",
diff --git a/spec/__snapshots__/aboutApp.spec.ts.snap b/spec/__snapshots__/aboutApp.spec.ts.snap
index 1c4df27d5..069d9d0a2 100644
--- a/spec/__snapshots__/aboutApp.spec.ts.snap
+++ b/spec/__snapshots__/aboutApp.spec.ts.snap
@@ -1,203 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`about app should render correctly 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <AboutApp />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "checkPropTypes": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        <img
-          className="AboutApp-logo"
-          src="../assets/symphony-logo.png"
-        />,
-        <span
-          className="AboutApp-name"
-        >
-          Symphony
-        </span>,
-        <span
-          className="AboutApp-versionText"
-        >
-          Version 0-N/A ()
-        </span>,
-        <span
-          className="AboutApp-copyrightText"
-        >
-          Copyright © 2019 Symphony
-        </span>,
-      ],
-      "className": "AboutApp",
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "className": "AboutApp-logo",
-          "src": "../assets/symphony-logo.png",
-        },
-        "ref": null,
-        "rendered": null,
-        "type": "img",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "Symphony",
-          "className": "AboutApp-name",
-        },
-        "ref": null,
-        "rendered": "Symphony",
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "Version 0-N/A ()",
-          "className": "AboutApp-versionText",
-        },
-        "ref": null,
-        "rendered": "Version 0-N/A ()",
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "Copyright © 2019 Symphony",
-          "className": "AboutApp-copyrightText",
-        },
-        "ref": null,
-        "rendered": "Copyright © 2019 Symphony",
-        "type": "span",
-      },
-    ],
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <img
-            className="AboutApp-logo"
-            src="../assets/symphony-logo.png"
-          />,
-          <span
-            className="AboutApp-name"
-          >
-            Symphony
-          </span>,
-          <span
-            className="AboutApp-versionText"
-          >
-            Version 0-N/A ()
-          </span>,
-          <span
-            className="AboutApp-copyrightText"
-          >
-            Copyright © 2019 Symphony
-          </span>,
-        ],
-        "className": "AboutApp",
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "className": "AboutApp-logo",
-            "src": "../assets/symphony-logo.png",
-          },
-          "ref": null,
-          "rendered": null,
-          "type": "img",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Symphony",
-            "className": "AboutApp-name",
-          },
-          "ref": null,
-          "rendered": "Symphony",
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Version 0-N/A ()",
-            "className": "AboutApp-versionText",
-          },
-          "ref": null,
-          "rendered": "Version 0-N/A ()",
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Copyright © 2019 Symphony",
-            "className": "AboutApp-copyrightText",
-          },
-          "ref": null,
-          "rendered": "Copyright © 2019 Symphony",
-          "type": "span",
-        },
-      ],
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "legacyContextMode": "parent",
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getChildContext": Object {
-            "calledByRenderer": false,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-  Symbol(enzyme.__childContext__): null,
-}
+<div
+  className="AboutApp"
+>
+  <img
+    className="AboutApp-logo"
+    src="../assets/symphony-logo.png"
+  />
+  <span
+    className="AboutApp-name"
+  >
+    Symphony
+  </span>
+  <span
+    className="AboutApp-versionText"
+  >
+    Version 0-N/A ()
+  </span>
+  <span
+    className="AboutApp-copyrightText"
+  >
+    Copyright © 2019 Symphony
+  </span>
+</div>
 `;
diff --git a/spec/__snapshots__/basicAuth.spec.ts.snap b/spec/__snapshots__/basicAuth.spec.ts.snap
index 8f8e077e0..0e2916bce 100644
--- a/spec/__snapshots__/basicAuth.spec.ts.snap
+++ b/spec/__snapshots__/basicAuth.spec.ts.snap
@@ -1,1131 +1,93 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`basic auth should render correctly 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <BasicAuth />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "checkPropTypes": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        <span>
-          Please provide your login credentials for:
-        </span>,
-        <span
-          className="hostname"
-        >
-          unknown
-        </span>,
-        <span
-          className="credentials-error"
-          id="credentialsError"
-        >
-          Invalid user name/password
-        </span>,
-        <form
-          action="Login"
-          id="basicAuth"
-          name="Basic Auth"
-          onSubmit={[Function]}
-        >
-          <table
-            className="form"
-          >
-            <tbody>
-              <tr>
-                <td
-                  id="username-text"
-                >
-                  User name:
-                </td>
-                <td>
-                  <input
-                    id="username"
-                    name="username"
-                    onChange={[Function]}
-                    required={true}
-                    title="Username"
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td
-                  id="password-text"
-                >
-                  Password:
-                </td>
-                <td>
-                  <input
-                    id="password"
-                    name="password"
-                    onChange={[Function]}
-                    required={true}
-                    title="Password"
-                    type="password"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            className="footer"
+<div
+  className="container"
+>
+  <span>
+    Please provide your login credentials for:
+  </span>
+  <span
+    className="hostname"
+  >
+    unknown
+  </span>
+  <span
+    className="credentials-error"
+    id="credentialsError"
+  >
+    Invalid user name/password
+  </span>
+  <form
+    action="Login"
+    id="basicAuth"
+    name="Basic Auth"
+    onSubmit={[Function]}
+  >
+    <table
+      className="form"
+    >
+      <tbody>
+        <tr>
+          <td
+            id="username-text"
           >
-            <div
-              className="button-container"
-            >
-              <button
-                id="login"
-                type="submit"
-              >
-                Log In
-              </button>
-            </div>
-            <div
-              className="button-container"
-            >
-              <button
-                id="cancel"
-                onClick={[Function]}
-                type="button"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </form>,
-      ],
-      "className": "container",
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "Please provide your login credentials for:",
-        },
-        "ref": null,
-        "rendered": "Please provide your login credentials for:",
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "unknown",
-          "className": "hostname",
-        },
-        "ref": null,
-        "rendered": "unknown",
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "Invalid user name/password",
-          "className": "credentials-error",
-          "id": "credentialsError",
-        },
-        "ref": null,
-        "rendered": "Invalid user name/password",
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "action": "Login",
-          "children": Array [
-            <table
-              className="form"
-            >
-              <tbody>
-                <tr>
-                  <td
-                    id="username-text"
-                  >
-                    User name:
-                  </td>
-                  <td>
-                    <input
-                      id="username"
-                      name="username"
-                      onChange={[Function]}
-                      required={true}
-                      title="Username"
-                    />
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    id="password-text"
-                  >
-                    Password:
-                  </td>
-                  <td>
-                    <input
-                      id="password"
-                      name="password"
-                      onChange={[Function]}
-                      required={true}
-                      title="Password"
-                      type="password"
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </table>,
-            <div
-              className="footer"
-            >
-              <div
-                className="button-container"
-              >
-                <button
-                  id="login"
-                  type="submit"
-                >
-                  Log In
-                </button>
-              </div>
-              <div
-                className="button-container"
-              >
-                <button
-                  id="cancel"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>,
-          ],
-          "id": "basicAuth",
-          "name": "Basic Auth",
-          "onSubmit": [Function],
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": <tbody>
-                <tr>
-                  <td
-                    id="username-text"
-                  >
-                    User name:
-                  </td>
-                  <td>
-                    <input
-                      id="username"
-                      name="username"
-                      onChange={[Function]}
-                      required={true}
-                      title="Username"
-                    />
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    id="password-text"
-                  >
-                    Password:
-                  </td>
-                  <td>
-                    <input
-                      id="password"
-                      name="password"
-                      onChange={[Function]}
-                      required={true}
-                      title="Password"
-                      type="password"
-                    />
-                  </td>
-                </tr>
-              </tbody>,
-              "className": "form",
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": Array [
-                  <tr>
-                    <td
-                      id="username-text"
-                    >
-                      User name:
-                    </td>
-                    <td>
-                      <input
-                        id="username"
-                        name="username"
-                        onChange={[Function]}
-                        required={true}
-                        title="Username"
-                      />
-                    </td>
-                  </tr>,
-                  <tr>
-                    <td
-                      id="password-text"
-                    >
-                      Password:
-                    </td>
-                    <td>
-                      <input
-                        id="password"
-                        name="password"
-                        onChange={[Function]}
-                        required={true}
-                        title="Password"
-                        type="password"
-                      />
-                    </td>
-                  </tr>,
-                ],
-              },
-              "ref": null,
-              "rendered": Array [
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": Array [
-                      <td
-                        id="username-text"
-                      >
-                        User name:
-                      </td>,
-                      <td>
-                        <input
-                          id="username"
-                          name="username"
-                          onChange={[Function]}
-                          required={true}
-                          title="Username"
-                        />
-                      </td>,
-                    ],
-                  },
-                  "ref": null,
-                  "rendered": Array [
-                    Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {
-                        "children": "User name:",
-                        "id": "username-text",
-                      },
-                      "ref": null,
-                      "rendered": "User name:",
-                      "type": "td",
-                    },
-                    Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {
-                        "children": <input
-                          id="username"
-                          name="username"
-                          onChange={[Function]}
-                          required={true}
-                          title="Username"
-                        />,
-                      },
-                      "ref": null,
-                      "rendered": Object {
-                        "instance": null,
-                        "key": undefined,
-                        "nodeType": "host",
-                        "props": Object {
-                          "id": "username",
-                          "name": "username",
-                          "onChange": [Function],
-                          "required": true,
-                          "title": "Username",
-                        },
-                        "ref": null,
-                        "rendered": null,
-                        "type": "input",
-                      },
-                      "type": "td",
-                    },
-                  ],
-                  "type": "tr",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": Array [
-                      <td
-                        id="password-text"
-                      >
-                        Password:
-                      </td>,
-                      <td>
-                        <input
-                          id="password"
-                          name="password"
-                          onChange={[Function]}
-                          required={true}
-                          title="Password"
-                          type="password"
-                        />
-                      </td>,
-                    ],
-                  },
-                  "ref": null,
-                  "rendered": Array [
-                    Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {
-                        "children": "Password:",
-                        "id": "password-text",
-                      },
-                      "ref": null,
-                      "rendered": "Password:",
-                      "type": "td",
-                    },
-                    Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {
-                        "children": <input
-                          id="password"
-                          name="password"
-                          onChange={[Function]}
-                          required={true}
-                          title="Password"
-                          type="password"
-                        />,
-                      },
-                      "ref": null,
-                      "rendered": Object {
-                        "instance": null,
-                        "key": undefined,
-                        "nodeType": "host",
-                        "props": Object {
-                          "id": "password",
-                          "name": "password",
-                          "onChange": [Function],
-                          "required": true,
-                          "title": "Password",
-                          "type": "password",
-                        },
-                        "ref": null,
-                        "rendered": null,
-                        "type": "input",
-                      },
-                      "type": "td",
-                    },
-                  ],
-                  "type": "tr",
-                },
-              ],
-              "type": "tbody",
-            },
-            "type": "table",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": Array [
-                <div
-                  className="button-container"
-                >
-                  <button
-                    id="login"
-                    type="submit"
-                  >
-                    Log In
-                  </button>
-                </div>,
-                <div
-                  className="button-container"
-                >
-                  <button
-                    id="cancel"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </div>,
-              ],
-              "className": "footer",
-            },
-            "ref": null,
-            "rendered": Array [
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": <button
-                    id="login"
-                    type="submit"
-                  >
-                    Log In
-                  </button>,
-                  "className": "button-container",
-                },
-                "ref": null,
-                "rendered": Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "Log In",
-                    "id": "login",
-                    "type": "submit",
-                  },
-                  "ref": null,
-                  "rendered": "Log In",
-                  "type": "button",
-                },
-                "type": "div",
-              },
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": <button
-                    id="cancel"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Cancel
-                  </button>,
-                  "className": "button-container",
-                },
-                "ref": null,
-                "rendered": Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "Cancel",
-                    "id": "cancel",
-                    "onClick": [Function],
-                    "type": "button",
-                  },
-                  "ref": null,
-                  "rendered": "Cancel",
-                  "type": "button",
-                },
-                "type": "div",
-              },
-            ],
-            "type": "div",
-          },
-        ],
-        "type": "form",
-      },
-    ],
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <span>
-            Please provide your login credentials for:
-          </span>,
-          <span
-            className="hostname"
+            User name:
+          </td>
+          <td>
+            <input
+              id="username"
+              name="username"
+              onChange={[Function]}
+              required={true}
+              title="Username"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td
+            id="password-text"
           >
-            unknown
-          </span>,
-          <span
-            className="credentials-error"
-            id="credentialsError"
-          >
-            Invalid user name/password
-          </span>,
-          <form
-            action="Login"
-            id="basicAuth"
-            name="Basic Auth"
-            onSubmit={[Function]}
-          >
-            <table
-              className="form"
-            >
-              <tbody>
-                <tr>
-                  <td
-                    id="username-text"
-                  >
-                    User name:
-                  </td>
-                  <td>
-                    <input
-                      id="username"
-                      name="username"
-                      onChange={[Function]}
-                      required={true}
-                      title="Username"
-                    />
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    id="password-text"
-                  >
-                    Password:
-                  </td>
-                  <td>
-                    <input
-                      id="password"
-                      name="password"
-                      onChange={[Function]}
-                      required={true}
-                      title="Password"
-                      type="password"
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <div
-              className="footer"
-            >
-              <div
-                className="button-container"
-              >
-                <button
-                  id="login"
-                  type="submit"
-                >
-                  Log In
-                </button>
-              </div>
-              <div
-                className="button-container"
-              >
-                <button
-                  id="cancel"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </form>,
-        ],
-        "className": "container",
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Please provide your login credentials for:",
-          },
-          "ref": null,
-          "rendered": "Please provide your login credentials for:",
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "unknown",
-            "className": "hostname",
-          },
-          "ref": null,
-          "rendered": "unknown",
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Invalid user name/password",
-            "className": "credentials-error",
-            "id": "credentialsError",
-          },
-          "ref": null,
-          "rendered": "Invalid user name/password",
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "action": "Login",
-            "children": Array [
-              <table
-                className="form"
-              >
-                <tbody>
-                  <tr>
-                    <td
-                      id="username-text"
-                    >
-                      User name:
-                    </td>
-                    <td>
-                      <input
-                        id="username"
-                        name="username"
-                        onChange={[Function]}
-                        required={true}
-                        title="Username"
-                      />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      id="password-text"
-                    >
-                      Password:
-                    </td>
-                    <td>
-                      <input
-                        id="password"
-                        name="password"
-                        onChange={[Function]}
-                        required={true}
-                        title="Password"
-                        type="password"
-                      />
-                    </td>
-                  </tr>
-                </tbody>
-              </table>,
-              <div
-                className="footer"
-              >
-                <div
-                  className="button-container"
-                >
-                  <button
-                    id="login"
-                    type="submit"
-                  >
-                    Log In
-                  </button>
-                </div>
-                <div
-                  className="button-container"
-                >
-                  <button
-                    id="cancel"
-                    onClick={[Function]}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </div>,
-            ],
-            "id": "basicAuth",
-            "name": "Basic Auth",
-            "onSubmit": [Function],
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": <tbody>
-                  <tr>
-                    <td
-                      id="username-text"
-                    >
-                      User name:
-                    </td>
-                    <td>
-                      <input
-                        id="username"
-                        name="username"
-                        onChange={[Function]}
-                        required={true}
-                        title="Username"
-                      />
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      id="password-text"
-                    >
-                      Password:
-                    </td>
-                    <td>
-                      <input
-                        id="password"
-                        name="password"
-                        onChange={[Function]}
-                        required={true}
-                        title="Password"
-                        type="password"
-                      />
-                    </td>
-                  </tr>
-                </tbody>,
-                "className": "form",
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": Array [
-                    <tr>
-                      <td
-                        id="username-text"
-                      >
-                        User name:
-                      </td>
-                      <td>
-                        <input
-                          id="username"
-                          name="username"
-                          onChange={[Function]}
-                          required={true}
-                          title="Username"
-                        />
-                      </td>
-                    </tr>,
-                    <tr>
-                      <td
-                        id="password-text"
-                      >
-                        Password:
-                      </td>
-                      <td>
-                        <input
-                          id="password"
-                          name="password"
-                          onChange={[Function]}
-                          required={true}
-                          title="Password"
-                          type="password"
-                        />
-                      </td>
-                    </tr>,
-                  ],
-                },
-                "ref": null,
-                "rendered": Array [
-                  Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {
-                      "children": Array [
-                        <td
-                          id="username-text"
-                        >
-                          User name:
-                        </td>,
-                        <td>
-                          <input
-                            id="username"
-                            name="username"
-                            onChange={[Function]}
-                            required={true}
-                            title="Username"
-                          />
-                        </td>,
-                      ],
-                    },
-                    "ref": null,
-                    "rendered": Array [
-                      Object {
-                        "instance": null,
-                        "key": undefined,
-                        "nodeType": "host",
-                        "props": Object {
-                          "children": "User name:",
-                          "id": "username-text",
-                        },
-                        "ref": null,
-                        "rendered": "User name:",
-                        "type": "td",
-                      },
-                      Object {
-                        "instance": null,
-                        "key": undefined,
-                        "nodeType": "host",
-                        "props": Object {
-                          "children": <input
-                            id="username"
-                            name="username"
-                            onChange={[Function]}
-                            required={true}
-                            title="Username"
-                          />,
-                        },
-                        "ref": null,
-                        "rendered": Object {
-                          "instance": null,
-                          "key": undefined,
-                          "nodeType": "host",
-                          "props": Object {
-                            "id": "username",
-                            "name": "username",
-                            "onChange": [Function],
-                            "required": true,
-                            "title": "Username",
-                          },
-                          "ref": null,
-                          "rendered": null,
-                          "type": "input",
-                        },
-                        "type": "td",
-                      },
-                    ],
-                    "type": "tr",
-                  },
-                  Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {
-                      "children": Array [
-                        <td
-                          id="password-text"
-                        >
-                          Password:
-                        </td>,
-                        <td>
-                          <input
-                            id="password"
-                            name="password"
-                            onChange={[Function]}
-                            required={true}
-                            title="Password"
-                            type="password"
-                          />
-                        </td>,
-                      ],
-                    },
-                    "ref": null,
-                    "rendered": Array [
-                      Object {
-                        "instance": null,
-                        "key": undefined,
-                        "nodeType": "host",
-                        "props": Object {
-                          "children": "Password:",
-                          "id": "password-text",
-                        },
-                        "ref": null,
-                        "rendered": "Password:",
-                        "type": "td",
-                      },
-                      Object {
-                        "instance": null,
-                        "key": undefined,
-                        "nodeType": "host",
-                        "props": Object {
-                          "children": <input
-                            id="password"
-                            name="password"
-                            onChange={[Function]}
-                            required={true}
-                            title="Password"
-                            type="password"
-                          />,
-                        },
-                        "ref": null,
-                        "rendered": Object {
-                          "instance": null,
-                          "key": undefined,
-                          "nodeType": "host",
-                          "props": Object {
-                            "id": "password",
-                            "name": "password",
-                            "onChange": [Function],
-                            "required": true,
-                            "title": "Password",
-                            "type": "password",
-                          },
-                          "ref": null,
-                          "rendered": null,
-                          "type": "input",
-                        },
-                        "type": "td",
-                      },
-                    ],
-                    "type": "tr",
-                  },
-                ],
-                "type": "tbody",
-              },
-              "type": "table",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": Array [
-                  <div
-                    className="button-container"
-                  >
-                    <button
-                      id="login"
-                      type="submit"
-                    >
-                      Log In
-                    </button>
-                  </div>,
-                  <div
-                    className="button-container"
-                  >
-                    <button
-                      id="cancel"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Cancel
-                    </button>
-                  </div>,
-                ],
-                "className": "footer",
-              },
-              "ref": null,
-              "rendered": Array [
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": <button
-                      id="login"
-                      type="submit"
-                    >
-                      Log In
-                    </button>,
-                    "className": "button-container",
-                  },
-                  "ref": null,
-                  "rendered": Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {
-                      "children": "Log In",
-                      "id": "login",
-                      "type": "submit",
-                    },
-                    "ref": null,
-                    "rendered": "Log In",
-                    "type": "button",
-                  },
-                  "type": "div",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": <button
-                      id="cancel"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Cancel
-                    </button>,
-                    "className": "button-container",
-                  },
-                  "ref": null,
-                  "rendered": Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {
-                      "children": "Cancel",
-                      "id": "cancel",
-                      "onClick": [Function],
-                      "type": "button",
-                    },
-                    "ref": null,
-                    "rendered": "Cancel",
-                    "type": "button",
-                  },
-                  "type": "div",
-                },
-              ],
-              "type": "div",
-            },
-          ],
-          "type": "form",
-        },
-      ],
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "legacyContextMode": "parent",
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getChildContext": Object {
-            "calledByRenderer": false,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-  Symbol(enzyme.__childContext__): null,
-}
+            Password:
+          </td>
+          <td>
+            <input
+              id="password"
+              name="password"
+              onChange={[Function]}
+              required={true}
+              title="Password"
+              type="password"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div
+      className="footer"
+    >
+      <div
+        className="button-container"
+      >
+        <button
+          id="login"
+          type="submit"
+        >
+          Log In
+        </button>
+      </div>
+      <div
+        className="button-container"
+      >
+        <button
+          id="cancel"
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </form>
+</div>
 `;
diff --git a/spec/__snapshots__/downloadManager.spec.ts.snap b/spec/__snapshots__/downloadManager.spec.ts.snap
index bec11331b..100860b7e 100644
--- a/spec/__snapshots__/downloadManager.spec.ts.snap
+++ b/spec/__snapshots__/downloadManager.spec.ts.snap
@@ -1,181 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`download manager should render correctly 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <DownloadManager />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "checkPropTypes": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": <div
-        className="download-bar"
-        id="download-manager-footer"
-      >
-        <ul
-          id="download-main"
-        />
-        <span
-          className="close-download-bar tempo-icon tempo-icon--close"
-          id="close-download-bar"
-          onClick={[Function]}
-        />
-      </div>,
-    },
-    "ref": null,
-    "rendered": Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <ul
-            id="download-main"
-          />,
-          <span
-            className="close-download-bar tempo-icon tempo-icon--close"
-            id="close-download-bar"
-            onClick={[Function]}
-          />,
-        ],
-        "className": "download-bar",
-        "id": "download-manager-footer",
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [],
-            "id": "download-main",
-          },
-          "ref": null,
-          "rendered": Array [],
-          "type": "ul",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "className": "close-download-bar tempo-icon tempo-icon--close",
-            "id": "close-download-bar",
-            "onClick": [Function],
-          },
-          "ref": null,
-          "rendered": null,
-          "type": "span",
-        },
-      ],
-      "type": "div",
-    },
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": <div
-          className="download-bar"
-          id="download-manager-footer"
-        >
-          <ul
-            id="download-main"
-          />
-          <span
-            className="close-download-bar tempo-icon tempo-icon--close"
-            id="close-download-bar"
-            onClick={[Function]}
-          />
-        </div>,
-      },
-      "ref": null,
-      "rendered": Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <ul
-              id="download-main"
-            />,
-            <span
-              className="close-download-bar tempo-icon tempo-icon--close"
-              id="close-download-bar"
-              onClick={[Function]}
-            />,
-          ],
-          "className": "download-bar",
-          "id": "download-manager-footer",
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": Array [],
-              "id": "download-main",
-            },
-            "ref": null,
-            "rendered": Array [],
-            "type": "ul",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "className": "close-download-bar tempo-icon tempo-icon--close",
-              "id": "close-download-bar",
-              "onClick": [Function],
-            },
-            "ref": null,
-            "rendered": null,
-            "type": "span",
-          },
-        ],
-        "type": "div",
-      },
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "legacyContextMode": "parent",
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getChildContext": Object {
-            "calledByRenderer": false,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-  Symbol(enzyme.__childContext__): null,
-}
+<div>
+  <div
+    className="download-bar"
+    id="download-manager-footer"
+  >
+    <ul
+      id="download-main"
+    />
+    <span
+      className="close-download-bar tempo-icon tempo-icon--close"
+      id="close-download-bar"
+      onClick={[Function]}
+    />
+  </div>
+</div>
 `;
diff --git a/spec/__snapshots__/loadingScreen.spec.ts.snap b/spec/__snapshots__/loadingScreen.spec.ts.snap
index 658869db3..93ab3648f 100644
--- a/spec/__snapshots__/loadingScreen.spec.ts.snap
+++ b/spec/__snapshots__/loadingScreen.spec.ts.snap
@@ -1,377 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loading screen should render correctly 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <LoadingScreen />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "checkPropTypes": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        <img
-          className="LoadingScreen-logo"
-          src="../renderer/assets/symphony-logo.png"
-        />,
-        <span
-          className="LoadingScreen-name"
-        >
-          Symphony
-        </span>,
-        <svg
-          height="100%"
-          preserveAspectRatio="xMidYMid"
-          viewBox="0 0 100 200"
-          width="100%"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="50"
-            cy="50"
-            fill="none"
-            ng-attr-r="{{config.radius}}"
-            ng-attr-stroke="{{config.color}}"
-            ng-attr-stroke-dasharray="{{config.dasharray}}"
-            ng-attr-stroke-width="{{config.width}}"
-            r="35"
-            stroke="#ffffff"
-            stroke-dasharray="164.93361431346415 56.97787143782138"
-            stroke-width="10"
-            transform="rotate(59.6808 50 50)"
-          >
-            <animateTransform
-              attributeName="transform"
-              begin="0s"
-              calcMode="linear"
-              dur="1s"
-              keyTimes="0;1"
-              repeatCount="indefinite"
-              type="rotate"
-              values="0 50 50;360 50 50"
-            />
-          </circle>
-        </svg>,
-      ],
-      "className": "LoadingScreen",
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "className": "LoadingScreen-logo",
-          "src": "../renderer/assets/symphony-logo.png",
-        },
-        "ref": null,
-        "rendered": null,
-        "type": "img",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "Symphony",
-          "className": "LoadingScreen-name",
-        },
-        "ref": null,
-        "rendered": "Symphony",
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": <circle
-            cx="50"
-            cy="50"
-            fill="none"
-            ng-attr-r="{{config.radius}}"
-            ng-attr-stroke="{{config.color}}"
-            ng-attr-stroke-dasharray="{{config.dasharray}}"
-            ng-attr-stroke-width="{{config.width}}"
-            r="35"
-            stroke="#ffffff"
-            stroke-dasharray="164.93361431346415 56.97787143782138"
-            stroke-width="10"
-            transform="rotate(59.6808 50 50)"
-          >
-            <animateTransform
-              attributeName="transform"
-              begin="0s"
-              calcMode="linear"
-              dur="1s"
-              keyTimes="0;1"
-              repeatCount="indefinite"
-              type="rotate"
-              values="0 50 50;360 50 50"
-            />
-          </circle>,
-          "height": "100%",
-          "preserveAspectRatio": "xMidYMid",
-          "viewBox": "0 0 100 200",
-          "width": "100%",
-          "xmlns": "http://www.w3.org/2000/svg",
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": <animateTransform
-              attributeName="transform"
-              begin="0s"
-              calcMode="linear"
-              dur="1s"
-              keyTimes="0;1"
-              repeatCount="indefinite"
-              type="rotate"
-              values="0 50 50;360 50 50"
-            />,
-            "cx": "50",
-            "cy": "50",
-            "fill": "none",
-            "ng-attr-r": "{{config.radius}}",
-            "ng-attr-stroke": "{{config.color}}",
-            "ng-attr-stroke-dasharray": "{{config.dasharray}}",
-            "ng-attr-stroke-width": "{{config.width}}",
-            "r": "35",
-            "stroke": "#ffffff",
-            "stroke-dasharray": "164.93361431346415 56.97787143782138",
-            "stroke-width": "10",
-            "transform": "rotate(59.6808 50 50)",
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "attributeName": "transform",
-              "begin": "0s",
-              "calcMode": "linear",
-              "dur": "1s",
-              "keyTimes": "0;1",
-              "repeatCount": "indefinite",
-              "type": "rotate",
-              "values": "0 50 50;360 50 50",
-            },
-            "ref": null,
-            "rendered": null,
-            "type": "animateTransform",
-          },
-          "type": "circle",
-        },
-        "type": "svg",
-      },
-    ],
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <img
-            className="LoadingScreen-logo"
-            src="../renderer/assets/symphony-logo.png"
-          />,
-          <span
-            className="LoadingScreen-name"
-          >
-            Symphony
-          </span>,
-          <svg
-            height="100%"
-            preserveAspectRatio="xMidYMid"
-            viewBox="0 0 100 200"
-            width="100%"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              ng-attr-r="{{config.radius}}"
-              ng-attr-stroke="{{config.color}}"
-              ng-attr-stroke-dasharray="{{config.dasharray}}"
-              ng-attr-stroke-width="{{config.width}}"
-              r="35"
-              stroke="#ffffff"
-              stroke-dasharray="164.93361431346415 56.97787143782138"
-              stroke-width="10"
-              transform="rotate(59.6808 50 50)"
-            >
-              <animateTransform
-                attributeName="transform"
-                begin="0s"
-                calcMode="linear"
-                dur="1s"
-                keyTimes="0;1"
-                repeatCount="indefinite"
-                type="rotate"
-                values="0 50 50;360 50 50"
-              />
-            </circle>
-          </svg>,
-        ],
-        "className": "LoadingScreen",
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "className": "LoadingScreen-logo",
-            "src": "../renderer/assets/symphony-logo.png",
-          },
-          "ref": null,
-          "rendered": null,
-          "type": "img",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Symphony",
-            "className": "LoadingScreen-name",
-          },
-          "ref": null,
-          "rendered": "Symphony",
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              ng-attr-r="{{config.radius}}"
-              ng-attr-stroke="{{config.color}}"
-              ng-attr-stroke-dasharray="{{config.dasharray}}"
-              ng-attr-stroke-width="{{config.width}}"
-              r="35"
-              stroke="#ffffff"
-              stroke-dasharray="164.93361431346415 56.97787143782138"
-              stroke-width="10"
-              transform="rotate(59.6808 50 50)"
-            >
-              <animateTransform
-                attributeName="transform"
-                begin="0s"
-                calcMode="linear"
-                dur="1s"
-                keyTimes="0;1"
-                repeatCount="indefinite"
-                type="rotate"
-                values="0 50 50;360 50 50"
-              />
-            </circle>,
-            "height": "100%",
-            "preserveAspectRatio": "xMidYMid",
-            "viewBox": "0 0 100 200",
-            "width": "100%",
-            "xmlns": "http://www.w3.org/2000/svg",
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": <animateTransform
-                attributeName="transform"
-                begin="0s"
-                calcMode="linear"
-                dur="1s"
-                keyTimes="0;1"
-                repeatCount="indefinite"
-                type="rotate"
-                values="0 50 50;360 50 50"
-              />,
-              "cx": "50",
-              "cy": "50",
-              "fill": "none",
-              "ng-attr-r": "{{config.radius}}",
-              "ng-attr-stroke": "{{config.color}}",
-              "ng-attr-stroke-dasharray": "{{config.dasharray}}",
-              "ng-attr-stroke-width": "{{config.width}}",
-              "r": "35",
-              "stroke": "#ffffff",
-              "stroke-dasharray": "164.93361431346415 56.97787143782138",
-              "stroke-width": "10",
-              "transform": "rotate(59.6808 50 50)",
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "attributeName": "transform",
-                "begin": "0s",
-                "calcMode": "linear",
-                "dur": "1s",
-                "keyTimes": "0;1",
-                "repeatCount": "indefinite",
-                "type": "rotate",
-                "values": "0 50 50;360 50 50",
-              },
-              "ref": null,
-              "rendered": null,
-              "type": "animateTransform",
-            },
-            "type": "circle",
-          },
-          "type": "svg",
-        },
-      ],
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "legacyContextMode": "parent",
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getChildContext": Object {
-            "calledByRenderer": false,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-  Symbol(enzyme.__childContext__): null,
-}
+<div
+  className="LoadingScreen"
+>
+  <img
+    className="LoadingScreen-logo"
+    src="../renderer/assets/symphony-logo.png"
+  />
+  <span
+    className="LoadingScreen-name"
+  >
+    Symphony
+  </span>
+  <svg
+    height="100%"
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 100 200"
+    width="100%"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="50"
+      cy="50"
+      fill="none"
+      ng-attr-r="{{config.radius}}"
+      ng-attr-stroke="{{config.color}}"
+      ng-attr-stroke-dasharray="{{config.dasharray}}"
+      ng-attr-stroke-width="{{config.width}}"
+      r="35"
+      stroke="#ffffff"
+      stroke-dasharray="164.93361431346415 56.97787143782138"
+      stroke-width="10"
+      transform="rotate(59.6808 50 50)"
+    >
+      <animateTransform
+        attributeName="transform"
+        begin="0s"
+        calcMode="linear"
+        dur="1s"
+        keyTimes="0;1"
+        repeatCount="indefinite"
+        type="rotate"
+        values="0 50 50;360 50 50"
+      />
+    </circle>
+  </svg>
+</div>
 `;
diff --git a/spec/__snapshots__/screenPicker.spec.ts.snap b/spec/__snapshots__/screenPicker.spec.ts.snap
index 3a2bbc92c..8356f856c 100644
--- a/spec/__snapshots__/screenPicker.spec.ts.snap
+++ b/spec/__snapshots__/screenPicker.spec.ts.snap
@@ -1,591 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`screen picker should render correctly 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <ScreenPicker />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "checkPropTypes": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        <div
-          className="ScreenPicker-title"
-        >
-          <span>
-            Choose what you'd like to share
-          </span>
-          <div
-            className="ScreenPicker-x-button"
-            onClick={[Function]}
+<div
+  className="ScreenPicker ScreenPicker-content"
+>
+  <div
+    className="ScreenPicker-title"
+  >
+    <span>
+      Choose what you'd like to share
+    </span>
+    <div
+      className="ScreenPicker-x-button"
+      onClick={[Function]}
+    >
+      <div
+        className="content-button"
+      >
+        <i>
+          <svg
+            fill="grey"
+            viewBox="0 0 48 48"
           >
-            <div
-              className="content-button"
-            >
-              <i>
-                <svg
-                  fill="grey"
-                  viewBox="0 0 48 48"
-                >
-                  <path
-                    d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                  />
-                </svg>
-              </i>
-            </div>
-          </div>
-        </div>,
-        <div
-          className="ScreenPicker-error-content"
-        >
-          <span
-            className="error-message"
-          >
-            No screens or applications are currently available.
-          </span>
-        </div>,
-        <footer>
-          <button
-            className="ScreenPicker-cancel-button"
-            onClick={[Function]}
-          >
-            Cancel
-          </button>
-          <button
-            className="ScreenPicker-share-button ScreenPicker-share-button-disable"
-            onClick={[Function]}
-          >
-            Select Screen
-          </button>
-        </footer>,
-      ],
-      "className": "ScreenPicker ScreenPicker-content",
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <span>
-              Choose what you'd like to share
-            </span>,
-            <div
-              className="ScreenPicker-x-button"
-              onClick={[Function]}
-            >
-              <div
-                className="content-button"
-              >
-                <i>
-                  <svg
-                    fill="grey"
-                    viewBox="0 0 48 48"
-                  >
-                    <path
-                      d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                    />
-                  </svg>
-                </i>
-              </div>
-            </div>,
-          ],
-          "className": "ScreenPicker-title",
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Choose what you'd like to share",
-            },
-            "ref": null,
-            "rendered": "Choose what you'd like to share",
-            "type": "span",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": <div
-                className="content-button"
-              >
-                <i>
-                  <svg
-                    fill="grey"
-                    viewBox="0 0 48 48"
-                  >
-                    <path
-                      d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                    />
-                  </svg>
-                </i>
-              </div>,
-              "className": "ScreenPicker-x-button",
-              "onClick": [Function],
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": <i>
-                  <svg
-                    fill="grey"
-                    viewBox="0 0 48 48"
-                  >
-                    <path
-                      d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                    />
-                  </svg>
-                </i>,
-                "className": "content-button",
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": <svg
-                    fill="grey"
-                    viewBox="0 0 48 48"
-                  >
-                    <path
-                      d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                    />
-                  </svg>,
-                },
-                "ref": null,
-                "rendered": Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": <path
-                      d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                    />,
-                    "fill": "grey",
-                    "viewBox": "0 0 48 48",
-                  },
-                  "ref": null,
-                  "rendered": Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {
-                      "d": "M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z",
-                    },
-                    "ref": null,
-                    "rendered": null,
-                    "type": "path",
-                  },
-                  "type": "svg",
-                },
-                "type": "i",
-              },
-              "type": "div",
-            },
-            "type": "div",
-          },
-        ],
-        "type": "div",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": <span
-            className="error-message"
-          >
-            No screens or applications are currently available.
-          </span>,
-          "className": "ScreenPicker-error-content",
-        },
-        "ref": null,
-        "rendered": Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "No screens or applications are currently available.",
-            "className": "error-message",
-          },
-          "ref": null,
-          "rendered": "No screens or applications are currently available.",
-          "type": "span",
-        },
-        "type": "div",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <button
-              className="ScreenPicker-cancel-button"
-              onClick={[Function]}
-            >
-              Cancel
-            </button>,
-            <button
-              className="ScreenPicker-share-button ScreenPicker-share-button-disable"
-              onClick={[Function]}
-            >
-              Select Screen
-            </button>,
-          ],
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Cancel",
-              "className": "ScreenPicker-cancel-button",
-              "onClick": [Function],
-            },
-            "ref": null,
-            "rendered": "Cancel",
-            "type": "button",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Select Screen",
-              "className": "ScreenPicker-share-button ScreenPicker-share-button-disable",
-              "onClick": [Function],
-            },
-            "ref": null,
-            "rendered": "Select Screen",
-            "type": "button",
-          },
-        ],
-        "type": "footer",
-      },
-    ],
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <div
-            className="ScreenPicker-title"
-          >
-            <span>
-              Choose what you'd like to share
-            </span>
-            <div
-              className="ScreenPicker-x-button"
-              onClick={[Function]}
-            >
-              <div
-                className="content-button"
-              >
-                <i>
-                  <svg
-                    fill="grey"
-                    viewBox="0 0 48 48"
-                  >
-                    <path
-                      d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                    />
-                  </svg>
-                </i>
-              </div>
-            </div>
-          </div>,
-          <div
-            className="ScreenPicker-error-content"
-          >
-            <span
-              className="error-message"
-            >
-              No screens or applications are currently available.
-            </span>
-          </div>,
-          <footer>
-            <button
-              className="ScreenPicker-cancel-button"
-              onClick={[Function]}
-            >
-              Cancel
-            </button>
-            <button
-              className="ScreenPicker-share-button ScreenPicker-share-button-disable"
-              onClick={[Function]}
-            >
-              Select Screen
-            </button>
-          </footer>,
-        ],
-        "className": "ScreenPicker ScreenPicker-content",
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <span>
-                Choose what you'd like to share
-              </span>,
-              <div
-                className="ScreenPicker-x-button"
-                onClick={[Function]}
-              >
-                <div
-                  className="content-button"
-                >
-                  <i>
-                    <svg
-                      fill="grey"
-                      viewBox="0 0 48 48"
-                    >
-                      <path
-                        d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                      />
-                    </svg>
-                  </i>
-                </div>
-              </div>,
-            ],
-            "className": "ScreenPicker-title",
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Choose what you'd like to share",
-              },
-              "ref": null,
-              "rendered": "Choose what you'd like to share",
-              "type": "span",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": <div
-                  className="content-button"
-                >
-                  <i>
-                    <svg
-                      fill="grey"
-                      viewBox="0 0 48 48"
-                    >
-                      <path
-                        d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                      />
-                    </svg>
-                  </i>
-                </div>,
-                "className": "ScreenPicker-x-button",
-                "onClick": [Function],
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": <i>
-                    <svg
-                      fill="grey"
-                      viewBox="0 0 48 48"
-                    >
-                      <path
-                        d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                      />
-                    </svg>
-                  </i>,
-                  "className": "content-button",
-                },
-                "ref": null,
-                "rendered": Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": <svg
-                      fill="grey"
-                      viewBox="0 0 48 48"
-                    >
-                      <path
-                        d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                      />
-                    </svg>,
-                  },
-                  "ref": null,
-                  "rendered": Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {
-                      "children": <path
-                        d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
-                      />,
-                      "fill": "grey",
-                      "viewBox": "0 0 48 48",
-                    },
-                    "ref": null,
-                    "rendered": Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {
-                        "d": "M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z",
-                      },
-                      "ref": null,
-                      "rendered": null,
-                      "type": "path",
-                    },
-                    "type": "svg",
-                  },
-                  "type": "i",
-                },
-                "type": "div",
-              },
-              "type": "div",
-            },
-          ],
-          "type": "div",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": <span
-              className="error-message"
-            >
-              No screens or applications are currently available.
-            </span>,
-            "className": "ScreenPicker-error-content",
-          },
-          "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "No screens or applications are currently available.",
-              "className": "error-message",
-            },
-            "ref": null,
-            "rendered": "No screens or applications are currently available.",
-            "type": "span",
-          },
-          "type": "div",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <button
-                className="ScreenPicker-cancel-button"
-                onClick={[Function]}
-              >
-                Cancel
-              </button>,
-              <button
-                className="ScreenPicker-share-button ScreenPicker-share-button-disable"
-                onClick={[Function]}
-              >
-                Select Screen
-              </button>,
-            ],
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Cancel",
-                "className": "ScreenPicker-cancel-button",
-                "onClick": [Function],
-              },
-              "ref": null,
-              "rendered": "Cancel",
-              "type": "button",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Select Screen",
-                "className": "ScreenPicker-share-button ScreenPicker-share-button-disable",
-                "onClick": [Function],
-              },
-              "ref": null,
-              "rendered": "Select Screen",
-              "type": "button",
-            },
-          ],
-          "type": "footer",
-        },
-      ],
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "legacyContextMode": "parent",
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getChildContext": Object {
-            "calledByRenderer": false,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-  Symbol(enzyme.__childContext__): null,
-}
+            <path
+              d="M39.4,33.8L31,25.4c-0.4-0.4-0.9-0.9-1.4-1.4c0.5-0.5,1-1,1.4-1.4l8.4-8.4c0.8-0.8,0.8-2,0-2.8l-2.8-2.8 c-0.8-0.8-2-0.8-2.8,0L25.4,17c-0.4,0.4-0.9,0.9-1.4,1.4c-0.5-0.5-1-1-1.4-1.4l-8.4-8.4c-0.8-0.8-2-0.8-2.8,0l-2.8,2.8 c-0.8,0.8-0.8,2,0,2.8l8.4,8.4c0.4,0.4,0.9,0.9,1.4,1.4c-0.5,0.5-1,1-1.4,1.4l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8l2.8,2.8 c0.8,0.8,2,0.8,2.8,0l8.4-8.4c0.4-0.4,0.9-0.9,1.4-1.4c0.5,0.5,1,1,1.4,1.4l8.4,8.4c0.8,0.8,2,0.8,2.8,0l2.8-2.8 C40.2,35.8,40.2,34.6,39.4,33.8z"
+            />
+          </svg>
+        </i>
+      </div>
+    </div>
+  </div>
+  <div
+    className="ScreenPicker-error-content"
+  >
+    <span
+      className="error-message"
+    >
+      No screens or applications are currently available.
+    </span>
+  </div>
+  <footer>
+    <button
+      className="ScreenPicker-cancel-button"
+      onClick={[Function]}
+    >
+      Cancel
+    </button>
+    <button
+      className="ScreenPicker-share-button ScreenPicker-share-button-disable"
+      onClick={[Function]}
+    >
+      Select Screen
+    </button>
+  </footer>
+</div>
 `;
diff --git a/spec/__snapshots__/screenSharingIndicator.spec.ts.snap b/spec/__snapshots__/screenSharingIndicator.spec.ts.snap
index 02a9deada..4235545b7 100644
--- a/spec/__snapshots__/screenSharingIndicator.spec.ts.snap
+++ b/spec/__snapshots__/screenSharingIndicator.spec.ts.snap
@@ -1,273 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`screen sharing indicator should render correctly 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <ScreenSharingIndicator />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "checkPropTypes": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        <span
-          className="drag-area"
-        />,
-        <span
-          className="text-label"
-        >
-          You are sharing your screen on Symphony
-        </span>,
-        <span
-          className="buttons"
-        >
-          <a
-            className="hide-button"
-            href="#"
-            onClick={[Function]}
-          >
-            Hide
-          </a>
-          <button
-            className="stop-sharing-button"
-            onClick={[Function]}
-          >
-            Stop sharing
-          </button>
-        </span>,
-      ],
-      "className": "ScreenSharingIndicator mac",
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "className": "drag-area",
-        },
-        "ref": null,
-        "rendered": null,
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "You are sharing your screen on Symphony",
-          "className": "text-label",
-        },
-        "ref": null,
-        "rendered": "You are sharing your screen on Symphony",
-        "type": "span",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <a
-              className="hide-button"
-              href="#"
-              onClick={[Function]}
-            >
-              Hide
-            </a>,
-            <button
-              className="stop-sharing-button"
-              onClick={[Function]}
-            >
-              Stop sharing
-            </button>,
-          ],
-          "className": "buttons",
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Hide",
-              "className": "hide-button",
-              "href": "#",
-              "onClick": [Function],
-            },
-            "ref": null,
-            "rendered": "Hide",
-            "type": "a",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Stop sharing",
-              "className": "stop-sharing-button",
-              "onClick": [Function],
-            },
-            "ref": null,
-            "rendered": "Stop sharing",
-            "type": "button",
-          },
-        ],
-        "type": "span",
-      },
-    ],
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <span
-            className="drag-area"
-          />,
-          <span
-            className="text-label"
-          >
-            You are sharing your screen on Symphony
-          </span>,
-          <span
-            className="buttons"
-          >
-            <a
-              className="hide-button"
-              href="#"
-              onClick={[Function]}
-            >
-              Hide
-            </a>
-            <button
-              className="stop-sharing-button"
-              onClick={[Function]}
-            >
-              Stop sharing
-            </button>
-          </span>,
-        ],
-        "className": "ScreenSharingIndicator mac",
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "className": "drag-area",
-          },
-          "ref": null,
-          "rendered": null,
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "You are sharing your screen on Symphony",
-            "className": "text-label",
-          },
-          "ref": null,
-          "rendered": "You are sharing your screen on Symphony",
-          "type": "span",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <a
-                className="hide-button"
-                href="#"
-                onClick={[Function]}
-              >
-                Hide
-              </a>,
-              <button
-                className="stop-sharing-button"
-                onClick={[Function]}
-              >
-                Stop sharing
-              </button>,
-            ],
-            "className": "buttons",
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Hide",
-                "className": "hide-button",
-                "href": "#",
-                "onClick": [Function],
-              },
-              "ref": null,
-              "rendered": "Hide",
-              "type": "a",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Stop sharing",
-                "className": "stop-sharing-button",
-                "onClick": [Function],
-              },
-              "ref": null,
-              "rendered": "Stop sharing",
-              "type": "button",
-            },
-          ],
-          "type": "span",
-        },
-      ],
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "legacyContextMode": "parent",
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getChildContext": Object {
-            "calledByRenderer": false,
-          },
-          "getDerivedStateFromProps": true,
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-  Symbol(enzyme.__childContext__): null,
-}
+<div
+  className="ScreenSharingIndicator mac"
+>
+  <span
+    className="drag-area"
+  />
+  <span
+    className="text-label"
+  >
+    You are sharing your screen on Symphony
+  </span>
+  <span
+    className="buttons"
+  >
+    <a
+      className="hide-button"
+      href="#"
+      onClick={[Function]}
+    >
+      Hide
+    </a>
+    <button
+      className="stop-sharing-button"
+      onClick={[Function]}
+    >
+      Stop sharing
+    </button>
+  </span>
+</div>
 `;