Setup Jest and add basic unit tests (#59)

* Setup jest and add basic unit tests * Add more unit tests * Fix travis * Setup Enzyme and add a basic component unit test * Refactor test folder structure * Set timeout for balance test * Setup enzyme-to-json * Add snapshots * Add tests for all UI components * Add tests for Ledger and Trezor * Update @mycrypto/ui to fix Jest
Mrtenz · Jun 3, 2019 · 200275b · 200275b
1 parent 9a40da4
commit 200275b
Show file tree

Hide file tree

Showing 76 changed files with 3,475 additions and 170 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,11 @@
 language: node_js
 
+addons:
+  apt:
+    packages:
+      - libusb-1.0-0-dev
+      - libudev-dev
+
 cache:
   yarn: true
   directories:
@@ -16,6 +22,7 @@ script:
   - yarn run prettier:diff
   - yarn run tslint
   - yarn run tscheck
+  - yarn run test
 
 before_deploy:
   - yarn run build

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'entry',
+        corejs: 3
+      }
+    ]
+  ],
+  plugins: ['react-hot-loader/babel', '@babel/plugin-proposal-class-properties']
+};
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  roots: ['src/'],
+  setupFilesAfterEnv: ['./jest/setupTests.js'],
+  transformIgnorePatterns: ['/node_modules/(?!@mycrypto/ui/)'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  snapshotResolver: './jest/snapshotResolver.js',
+  moduleNameMapper: {
+    '\\.svg$': '<rootDir>/jest/__mocks__/fileMock.ts'
+  }
+};
diff --git a/jest/__mocks__/fileMock.ts b/jest/__mocks__/fileMock.ts
@@ -0,0 +1 @@
+export default 'test-file-stub';
diff --git a/jest/__snapshots__/components/ui/Address/Address.test.tsx.snap b/jest/__snapshots__/components/ui/Address/Address.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<styled.div
+  noMargin={false}
+>
+  <Styled(Identicon)
+    address="0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520"
+  />
+  <Styled(styled.p)
+    muted={true}
+  >
+    0x4bbeEB066eD09B7AEd07bF39EEe0460DFa261520
+  </Styled(styled.p)>
+</styled.div>
+`;
diff --git a/jest/__snapshots__/components/ui/Align/Align.test.tsx.snap b/jest/__snapshots__/components/ui/Align/Align.test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<StyledComponent
+  align="left"
+  forwardedClass={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": undefined,
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-bdVaJa",
+        "isStatic": false,
+        "rules": Array [
+          "
+  display: flex;
+  justify-content: ",
+          [Function],
+          ";
+  flex-wrap: ",
+          [Function],
+          ";
+",
+        ],
+      },
+      "displayName": "styled.div",
+      "render": [Function],
+      "styledComponentId": "sc-bdVaJa",
+      "target": "div",
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+>
+  Foo
+</StyledComponent>
+`;
diff --git a/jest/__snapshots__/components/ui/Button/Button.test.tsx.snap b/jest/__snapshots__/components/ui/Button/Button.test.tsx.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<StyledComponent
+  forwardedClass={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": undefined,
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-tilXH",
+        "isStatic": false,
+        "rules": Array [
+          "
+  margin-top: 18px;
+  background: ",
+          [Function],
+          ";
+
+  &:hover {
+    background: ",
+          [Function],
+          ";
+    cursor: ",
+          [Function],
+          ";
+  }
+",
+        ],
+      },
+      "displayName": "Styled(Button)",
+      "render": [Function],
+      "styledComponentId": "sc-tilXH",
+      "target": [Function],
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+>
+  Foo
+</StyledComponent>
+`;
diff --git a/jest/__snapshots__/components/ui/ClickablePanel/ClickablePanel.test.tsx.snap b/jest/__snapshots__/components/ui/ClickablePanel/ClickablePanel.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<styled.div>
+  <Panel
+    onClick={[Function]}
+  >
+    <Styled(Styled(styled.p))
+      as="h3"
+    >
+      Foo
+    </Styled(Styled(styled.p))>
+    <styled.img
+      alt="Foo"
+      src="bar"
+    />
+  </Panel>
+</styled.div>
+`;
diff --git a/jest/__snapshots__/components/ui/ClickableText/ClickableText.test.tsx.snap b/jest/__snapshots__/components/ui/ClickableText/ClickableText.test.tsx.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<StyledComponent
+  forwardedClass={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": undefined,
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-tilXH",
+        "isStatic": false,
+        "rules": Array [
+          "
+  color: ",
+          [Function],
+          ";
+  ",
+          "font-size: 16px; @media (min-width: 400px) {
+  font-size: calc(14.67px + 0.33vw);
+} @media (min-width: 1000px) {
+  font-size: 18px;
+}",
+          ";
+  font-family: Lato, sans-serif;
+  line-height: 1.5;
+  ",
+          [Function],
+          ";
+  ",
+          [Function],
+          ";
+  a {
+    color: ",
+          [Function],
+          ";
+    text-decoration: none;
+    font-weight: bold;
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    :hover {
+      color: ",
+          [Function],
+          ";
+    }
+  }
+",
+          "
+  cursor: pointer;
+",
+        ],
+      },
+      "displayName": "Styled(styled.p)",
+      "render": [Function],
+      "styledComponentId": "sc-tilXH",
+      "target": "p",
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+>
+  Foo
+</StyledComponent>
+`;
diff --git a/jest/__snapshots__/components/ui/Code/Code.test.tsx.snap b/jest/__snapshots__/components/ui/Code/Code.test.tsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<StyledComponent
+  forwardedClass={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": undefined,
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-bdVaJa",
+        "isStatic": true,
+        "rules": Array [
+          "
+  font-family: ",
+          "'Roboto Mono', Menlo, Monaco, Consolas, 'Courier New', monospace",
+          ";
+",
+        ],
+      },
+      "displayName": "styled.span",
+      "render": [Function],
+      "styledComponentId": "sc-bdVaJa",
+      "target": "span",
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+>
+  Foo
+</StyledComponent>
+`;
diff --git a/jest/__snapshots__/components/ui/ExternalLink/ExternalLink.test.tsx.snap b/jest/__snapshots__/components/ui/ExternalLink/ExternalLink.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<a
+  href="https://example.com"
+  rel="noreferrer nofollower"
+  target="_blank"
+>
+  Foo
+</a>
+`;
diff --git a/jest/__snapshots__/components/ui/Footer/Footer.test.tsx.snap b/jest/__snapshots__/components/ui/Footer/Footer.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<styled.div>
+  <styled.div>
+    <styled.p>
+      Powered by 
+      <MyCryptoLogo />
+       | Made by Maarten Zuidhoorn 
+      <GitHubIcon />
+    </styled.p>
+  </styled.div>
+</styled.div>
+`;
diff --git a/jest/__snapshots__/components/ui/Footer/GitHubIcon/GitHubIcon.test.tsx.snap b/jest/__snapshots__/components/ui/Footer/GitHubIcon/GitHubIcon.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<ExternalLink
+  to="https://github.com/Mrtenz/FindETH"
+>
+  <styled.img
+    src="test-file-stub"
+  />
+</ExternalLink>
+`;
diff --git a/jest/__snapshots__/components/ui/Footer/MyCryptoLogo/MyCryptoLogo.test.tsx.snap b/jest/__snapshots__/components/ui/Footer/MyCryptoLogo/MyCryptoLogo.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<ExternalLink
+  to="https://mycrypto.com"
+>
+  <styled.img
+    src="test-file-stub"
+  />
+</ExternalLink>
+`;
diff --git a/jest/__snapshots__/components/ui/Header/Header.test.tsx.snap b/jest/__snapshots__/components/ui/Header/Header.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<styled.div>
+  <styled.div
+    alignItems="center"
+    justifyContent="between"
+  >
+    <styled.div
+      auto={true}
+    >
+      <Modal
+        isVisible={false}
+        onClose={[Function]}
+        onConfirm={[Function]}
+      >
+        <styled.p>
+          Are you sure you want to stop searching?
+        </styled.p>
+      </Modal>
+      <Styled(Styled(styled.p))
+        as="h1"
+        onClick={[Function]}
+      >
+        FindETH
+      </Styled(Styled(styled.p))>
+    </styled.div>
+  </styled.div>
+</styled.div>
+`;
diff --git a/jest/__snapshots__/components/ui/Icon/Icon.test.tsx.snap b/jest/__snapshots__/components/ui/Icon/Icon.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a snapshot 1`] = `
+<StyledComponent
+  forwardedClass={
+    Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "attrs": undefined,
+      "componentStyle": ComponentStyle {
+        "componentId": "sc-tilXH",
+        "isStatic": true,
+        "rules": Array [
+          "
+  vertical-align: middle;
+  margin-right: 9px;
+",
+        ],
+      },
+      "displayName": "Styled(Icon)",
+      "render": [Function],
+      "styledComponentId": "sc-tilXH",
+      "target": [Function],
+      "warnTooManyClasses": [Function],
+      "withComponent": [Function],
+    }
+  }
+  forwardedRef={null}
+  icon="add"
+/>
+`;