adds Testing TSX /react on the web (#2229)

celo-org · Dec 16, 2019 · f3d8e9d · f3d8e9d
1 parent d5e86fc
commit f3d8e9d
Show file tree

Hide file tree

Showing 5 changed files with 278 additions and 2 deletions.
diff --git 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/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
@@ -0,0 +1,20 @@
+import * as React from 'react'
+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()
+  })
+})
diff --git a/packages/web/src/brandkit/tests/__snapshots__/Showcase.test.tsx.snap 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
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}