add render test

package-lock.json

@@ -3605,6 +3605,15 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.12.tgz",
       "integrity": "sha512-MGuvYJrPU0HUwqF7LqvIj50RZUX23Z+m583KBygKYUZLlZ88n6w28XRNJRJgsHukLEnLz6w6SvxZoLgbr5wLqQ=="
     },
+    "@types/node-fetch": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.5.4.tgz",
+      "integrity": "sha512-Oz6id++2qAOFuOlE1j0ouk1dzl3mmI1+qINPNBhi9nt/gVOz0G+13Ao6qjhdF0Ys+eOkhu6JnFmt38bR3H0POQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -8744,11 +8753,6 @@
         "pify": "^2.2.0"
       }
     },
-    "exenv": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
-      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
-    },
     "exif-parser": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
@@ -11426,6 +11430,17 @@
         "invariant": "^2.2.4",
         "node-fetch": "^1.7.3",
         "uuid": "^3.3.3"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+          "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+          "requires": {
+            "encoding": "^0.1.11",
+            "is-stream": "^1.0.1"
+          }
+        }
       }
     },
     "gatsby-telemetry": {
@@ -13871,6 +13886,17 @@
       "requires": {
         "node-fetch": "^1.0.1",
         "whatwg-fetch": ">=0.10.0"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+          "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+          "requires": {
+            "encoding": "^0.1.11",
+            "is-stream": "^1.0.1"
+          }
+        }
       }
     },
     "isstream": {
@@ -16434,13 +16460,9 @@
       "integrity": "sha1-n7CwmbzSoCGUDmA8ZCVNwAPZp6g="
     },
     "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "requires": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
     },
     "node-forge": {
       "version": "0.9.0",
@@ -20300,27 +20322,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "react-modal": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.11.1.tgz",
-      "integrity": "sha512-8uN744Yq0X2lbfSLxsEEc2UV3RjSRb4yDVxRQ1aGzPo86QjNOwhQSukDb8U8kR+636TRTvfMren10fgOjAy9eA==",
-      "requires": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.5.10",
-        "react-lifecycles-compat": "^3.0.0",
-        "warning": "^4.0.3"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-          "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
-      }
-    },
     "react-pose": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/react-pose/-/react-pose-4.0.10.tgz",

package.json

@@ -70,6 +70,7 @@
     "gatsby-transformer-sharp": "^2.3.5",
     "graphql": "^14.5.8",
     "intersection-observer": "^0.7.0",
+    "node-fetch": "^2.6.0",
     "pigeon-maps": "^0.14.0",
     "pigeon-marker": "^0.3.4",
     "react": "^16.12.0",
@@ -97,6 +98,7 @@
     "@types/loadable__component": "^5.10.0",
     "@types/lunr": "^2.3.2",
     "@types/node": "^12.12.12",
+    "@types/node-fetch": "^2.5.4",
     "@types/react": "^16.9.12",
     "@types/react-dom": "^16.9.3",
     "@types/react-helmet": "^5.0.14",

src/components/molecules/Featured.tsx

@@ -28,33 +28,33 @@ function FeaturedPure({
   )
 }
 
-export default function Featured() {
-  const query = graphql`
-    query {
-      allMarkdownRemark(
-        filter: { frontmatter: { featured: { eq: true } } }
-        sort: { fields: [fields___date], order: DESC }
-      ) {
-        edges {
-          node {
-            id
-            frontmatter {
-              title
-              image {
-                childImageSharp {
-                  ...ImageFluidThumb
-                }
+const query = graphql`
+  query {
+    allMarkdownRemark(
+      filter: { frontmatter: { featured: { eq: true } } }
+      sort: { fields: [fields___date], order: DESC }
+    ) {
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            image {
+              childImageSharp {
+                ...ImageFluidThumb
               }
             }
-            fields {
-              slug
-            }
+          }
+          fields {
+            slug
           }
         }
       }
     }
-  `
+  }
+`
 
+export default function Featured() {
   const data = useStaticQuery(query)
   return <FeaturedPure data={data} />
 }

src/components/molecules/Web3Donation/Account.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { render, waitForElement } from '@testing-library/react'
+
+import Account from './Account'
+
+describe('Account', () => {
+  it('renders without crashing', async () => {
+    const { container } = render(<Account />)
+    const lazyElement = await waitForElement(() =>
+      container.querySelector('.balance')
+    )
+    expect(lazyElement).toBeInTheDocument()
+  })
+})

src/components/molecules/Web3Donation/Conversion.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { render, waitForElement } from '@testing-library/react'
+
+import Conversion from './Conversion'
+
+describe('Conversion', () => {
+  it('renders without crashing', async () => {
+    const { getByText } = render(<Conversion amount={1} />)
+    const lazyElement = await waitForElement(() => getByText(/= €/))
+    expect(lazyElement).toBeInTheDocument()
+  })
+})

src/components/molecules/Web3Donation/Conversion.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import fetch from 'node-fetch'
 import styles from './Conversion.module.scss'
 
 export async function getFiat(amount: number) {

src/components/molecules/Web3Donation/index.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { render, waitForElement, fireEvent } from '@testing-library/react'
+import { Web3ReactProvider } from '@web3-react/core'
+import { getLibrary } from '../../../hooks/use-web3'
+
+import Web3Donation from '.'
+
+describe('Web3Donation', () => {
+  it('renders without crashing', async () => {
+    const { container, getByText } = render(
+      <Web3ReactProvider getLibrary={getLibrary}>
+        <Web3Donation address="xxx" />
+      </Web3ReactProvider>
+    )
+    const lazyElement = await waitForElement(() =>
+      container.querySelector('button')
+    )
+    expect(lazyElement).toBeInTheDocument()
+
+    fireEvent.click(lazyElement)
+    const message = await waitForElement(() =>
+      getByText(/No Ethereum browser extension detected/)
+    )
+    expect(message).toBeInTheDocument()
+  })
+})