From 67d9a6a9e1f0b25389dda0547db13d6988c16063 Mon Sep 17 00:00:00 2001
From: Aaron DeRuvo <aaron.deruvo@gmail.com>
Date: Thu, 12 Dec 2019 13:52:03 -0800
Subject: [PATCH 1/3] This test should run

---
 .../web/src/brandkit/tests/Showcase.test.tsx  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 packages/web/src/brandkit/tests/Showcase.test.tsx

diff --git a/packages/web/src/brandkit/tests/Showcase.test.tsx b/packages/web/src/brandkit/tests/Showcase.test.tsx
new file mode 100644
index 00000000000..4a80046183e
--- /dev/null
+++ b/packages/web/src/brandkit/tests/Showcase.test.tsx
@@ -0,0 +1,19 @@
+import * as renderer from 'react-test-renderer'
+import Showcase from 'src/brandkit/common/Showcase'
+
+describe(Showcase, () => {
+  it('renders', () => {
+    const showCase = renderer
+      .create(
+        <Showcase
+          name={'test'}
+          description="Trust, Attest, Verify"
+          loading={false}
+          size={100}
+          uri="example.com"
+        />
+      )
+      .toJSON()
+    expect(showCase).toMatchSnapshot()
+  })
+})

From 7c0d357cd8982ba918950fe4cb79137012e0cf9e Mon Sep 17 00:00:00 2001
From: Aaron DeRuvo <aaron.deruvo@gmail.com>
Date: Thu, 12 Dec 2019 14:35:02 -0800
Subject: [PATCH 2/3] OMG jesting TSX components Thanks to Connor

---
 packages/web/jest.config.js                   |   9 +-
 packages/web/jestSetup.ts                     |   3 +
 .../src/brandkit/common/DownloadButton.tsx    |   1 +
 .../web/src/brandkit/tests/Showcase.test.tsx  |   3 +-
 .../__snapshots__/Showcase.test.tsx.snap      | 244 ++++++++++++++++++
 packages/web/tsconfig.jest.json               |   6 +
 6 files changed, 263 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/jestSetup.ts
 create mode 100644 packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap
 create mode 100644 packages/web/tsconfig.jest.json

diff --git a/packages/web/jest.config.js b/packages/web/jest.config.js
index 1629880406d..27180ac8b6c 100644
--- a/packages/web/jest.config.js
+++ b/packages/web/jest.config.js
@@ -3,8 +3,13 @@ const defaultConfig = require('../../jest.config.js')
 module.exports = {
   ...defaultConfig,
   globals: {
-    navigator: true,
-    window: true,
+    'ts-jest': {
+      isolatedModules: true,
+      tsConfig: 'tsconfig.jest.json',
+    },
+  },
+  moduleNameMapper: {
+    'src/(.*)$': '<rootDir>/src/$1',
   },
   preset: 'react-native-web',
   testEnvironment: 'node',
diff --git a/packages/web/jestSetup.ts b/packages/web/jestSetup.ts
new file mode 100644
index 00000000000..0e11a98fc4b
--- /dev/null
+++ b/packages/web/jestSetup.ts
@@ -0,0 +1,3 @@
+require('tsconfig-paths/register')
+
+export default function() {}
diff --git a/packages/web/src/brandkit/common/DownloadButton.tsx b/packages/web/src/brandkit/common/DownloadButton.tsx
index 6d3c45050fc..c56f5ffb72c 100644
--- a/packages/web/src/brandkit/common/DownloadButton.tsx
+++ b/packages/web/src/brandkit/common/DownloadButton.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { brandStyles } from 'src/brandkit/common/constants'
 import { I18nProps, NameSpaces, withNamespaces } from 'src/i18n'
 import Download from 'src/icons/Download'
diff --git a/packages/web/src/brandkit/tests/Showcase.test.tsx b/packages/web/src/brandkit/tests/Showcase.test.tsx
index 4a80046183e..589ec4bccf6 100644
--- a/packages/web/src/brandkit/tests/Showcase.test.tsx
+++ b/packages/web/src/brandkit/tests/Showcase.test.tsx
@@ -1,7 +1,8 @@
+import * as React from 'react'
 import * as renderer from 'react-test-renderer'
 import Showcase from 'src/brandkit/common/Showcase'
 
-describe(Showcase, () => {
+describe('Showcase', () => {
   it('renders', () => {
     const showCase = renderer
       .create(
diff --git a/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap b/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap
new file mode 100644
index 00000000000..0639733073f
--- /dev/null
+++ b/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap
@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Showcase renders 1`] = `
+<div
+  className="css-view-1dbjc4n"
+  style={
+    Object {
+      "WebkitBoxPack": "justify",
+      "WebkitJustifyContent": "space-between",
+      "justifyContent": "space-between",
+      "marginLeft": "10px",
+      "marginRight": "10px",
+      "marginTop": "20px",
+      "msFlexPack": "justify",
+      "width": "100px",
+    }
+  }
+>
+  <div
+    className="css-view-1dbjc4n"
+    style={
+      Object {
+        "marginBottom": "20px",
+        "marginRight": "40px",
+        "marginTop": "20px",
+      }
+    }
+  >
+    <div
+      className="css-view-1dbjc4n"
+      style={
+        Object {
+          "display": "block",
+          "overflowX": "hidden",
+          "overflowY": "hidden",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "display": "block",
+            "paddingBottom": "100%",
+            "width": "100%",
+          }
+        }
+      />
+      <div
+        style={
+          Object {
+            "bottom": "0px",
+            "height": "100%",
+            "left": "0px",
+            "position": "absolute",
+            "top": "0px",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          className="css-view-1dbjc4n"
+          style={
+            Object {
+              "WebkitFlexBasis": "auto",
+              "flexBasis": "auto",
+              "height": "100%",
+              "msFlexPreferredSize": "auto",
+              "overflowX": "hidden",
+              "overflowY": "hidden",
+              "width": "100%",
+              "zIndex": 0,
+            }
+          }
+        >
+          <div
+            className="css-view-1dbjc4n"
+            style={
+              Object {
+                "backgroundColor": "rgba(0,0,0,0.00)",
+                "backgroundPosition": "center",
+                "backgroundRepeat": "no-repeat",
+                "backgroundSize": "contain",
+                "bottom": "0px",
+                "height": "100%",
+                "left": "0px",
+                "position": "absolute",
+                "right": "0px",
+                "top": "0px",
+                "width": "100%",
+                "zIndex": -1,
+              }
+            }
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="css-view-1dbjc4n"
+    style={
+      Object {
+        "WebkitBoxFlex": 1,
+        "WebkitFlexBasis": "0%",
+        "WebkitFlexGrow": 1,
+        "WebkitFlexShrink": 1,
+        "flexBasis": "0%",
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "msFlexNegative": 1,
+        "msFlexPositive": 1,
+        "msFlexPreferredSize": "0%",
+      }
+    }
+  >
+    <div
+      className="css-text-76zvg2"
+      dir="auto"
+      style={
+        Object {
+          "color": "rgba(46,51,56,1.00)",
+          "fontFamily": "Jost, futura-pt, futura, sans-serif",
+          "fontSize": "16px",
+          "fontWeight": "500",
+          "lineHeight": "18px",
+          "marginBottom": "5px",
+          "marginTop": "5px",
+          "textRendering": "geometricPrecision",
+        }
+      }
+    >
+      test
+    </div>
+    <div
+      className="css-text-76zvg2"
+      dir="auto"
+      style={
+        Object {
+          "color": "rgba(46,51,56,1.00)",
+          "fontFamily": "EB Garamond, eb-garamond, Garamond, serif",
+          "fontSize": "16px",
+          "lineHeight": "20px",
+          "textRendering": "geometricPrecision",
+        }
+      }
+    >
+      Trust, Attest, Verify
+    </div>
+  </div>
+  <div
+    className="css-view-1dbjc4n"
+    onClick={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onResponderGrant={[Function]}
+    onResponderRelease={[Function]}
+  >
+    <a
+      className="css-reset-4rbku5 css-cursor-18t94o4 css-text-76zvg2"
+      data-focusable={true}
+      dir="auto"
+      href="example.com"
+      role="link"
+      style={
+        Object {
+          "WebkitAlignItems": "center",
+          "WebkitBoxAlign": "center",
+          "WebkitBoxFlex": 0,
+          "WebkitBoxPack": "start",
+          "WebkitFlexGrow": 0,
+          "WebkitJustifyContent": "flex-start",
+          "alignItems": "center",
+          "backgroundColor": "rgba(0,0,0,0.00)",
+          "borderBottomColor": "rgba(0,0,0,0.00)",
+          "borderLeftColor": "rgba(0,0,0,0.00)",
+          "borderRightColor": "rgba(0,0,0,0.00)",
+          "borderTopColor": "rgba(0,0,0,0.00)",
+          "color": "rgba(53,208,127,1.00)",
+          "cursor": "pointer",
+          "display": "inline-flex",
+          "flexGrow": 0,
+          "fontFamily": "Jost, futura-pt, futura, sans-serif",
+          "fontSize": "16px",
+          "fontWeight": "500",
+          "justifyContent": "flex-start",
+          "lineHeight": "16px",
+          "minWidth": "150px",
+          "msFlexAlign": "center",
+          "msFlexPack": "start",
+          "msFlexPositive": 0,
+          "opacity": 1,
+          "outlineColor": "transparent",
+          "paddingBottom": "10px",
+          "paddingLeft": "0px",
+          "paddingRight": "20px",
+          "paddingTop": "10px",
+          "textAlign": "center",
+          "textRendering": "geometricPrecision",
+          "width": "fit-content",
+        }
+      }
+    >
+      downloadAssetBtn
+      <div
+        className="css-view-1dbjc4n"
+        style={
+          Object {
+            "display": "inline-flex",
+            "paddingLeft": "8px",
+          }
+        }
+      >
+        <svg
+          fill="none"
+          height={12}
+          style={Object {}}
+          viewBox="0 0 10 13"
+          width={12}
+        >
+          <path
+            d="M0 12H10"
+            stroke="#35D07F"
+            strokeWidth="1.5"
+            style={Object {}}
+          />
+          <path
+            d="M5 0V9"
+            stroke="#35D07F"
+            strokeWidth="1.5"
+            style={Object {}}
+          />
+          <path
+            d="M1 5L5 9L9 5"
+            stroke="#35D07F"
+            strokeWidth="1.5"
+            style={Object {}}
+          />
+        </svg>
+      </div>
+    </a>
+  </div>
+</div>
+`;
diff --git a/packages/web/tsconfig.jest.json b/packages/web/tsconfig.jest.json
new file mode 100644
index 00000000000..ec83611f0c5
--- /dev/null
+++ b/packages/web/tsconfig.jest.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

From c6d5508f501ef51c610fead13c17c10f0f136579 Mon Sep 17 00:00:00 2001
From: Aaron DeRuvo <aaron.deruvo@gmail.com>
Date: Thu, 12 Dec 2019 14:36:33 -0800
Subject: [PATCH 3/3] Unused file

---
 packages/web/jestSetup.ts | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 packages/web/jestSetup.ts

diff --git a/packages/web/jestSetup.ts b/packages/web/jestSetup.ts
deleted file mode 100644
index 0e11a98fc4b..00000000000
--- a/packages/web/jestSetup.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-require('tsconfig-paths/register')
-
-export default function() {}