feat: setup test for web

web/src/App.test.js

@@ -1,8 +1,14 @@
-import React from 'react'
-import { render } from '@testing-library/react'
+import React, { Suspense } from 'react'
+import { render, waitForElement } from '@testing-library/react'
+
 import App from './App'
 
-it('renders welcome message', () => {
-  const { getByText } = render(<App />)
-  expect(getByText('namæ')).toBeInTheDocument()
+it('renders welcome message', async () => {
+  const { getByText } = render(
+    <Suspense fallback={<div>loading</div>}>
+      <App />
+    </Suspense>
+  )
+  const text = await waitForElement(() => getByText('name new project'))
+  expect(text).toBeTruthy()
 })

web/src/components/Icons.js

@@ -7,7 +7,7 @@ export const SpectrumIcon = () => (
     viewBox="0 0 32 32"
     fill="currentColor"
     stroke="currentColor"
-    stroke-width="0"
+    strokeWidth="0"
     xmlns="http://www.w3.org/2000/svg">
     <path d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" />
   </svg>

web/src/index.js

@@ -1,34 +1,19 @@
-import React, { Suspense } from 'react'
-import styled from 'styled-components'
+import React from 'react'
 import ReactDOM from 'react-dom'
-import BarLoader from 'react-spinners/BarLoader'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
-
+import { FullScreenSuspense } from './util/suspense'
 import './i18n'
 
-const Fallback = () => (
-  <Container>
-    <BarLoader />
-  </Container>
-)
-
-const Container = styled.div`
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`
-
-ReactDOM.render(
-  <Suspense fallback={<Fallback />}>
+const Container = () => (
+  <FullScreenSuspense>
     <App />
-  </Suspense>,
-  document.getElementById('root')
+  </FullScreenSuspense>
 )
 
+ReactDOM.render(<Container />, document.getElementById('root'))
+
+// register Google Analytics
 if (process.env.NODE_ENV !== 'development') {
   import('react-ga').then((ReactGA) => {
     ReactGA.initialize('UA-28919359-15')

web/src/setupTests.js

@@ -1,5 +1,26 @@
-// react-testing-library renders your components to document.body,
-// this will ensure they're removed after each test.
-import '@testing-library/react/cleanup-after-each'
 // this adds jest-dom's custom assertions
 import '@testing-library/jest-dom/extend-expect'
+
+// i18next
+import { join } from 'path'
+import i18n from 'i18next'
+import Backend from 'i18next-node-fs-backend'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    backend: {
+      loadPath: join(__dirname, '../public/locales/{{lng}}/{{ns}}.json'),
+    },
+    fallbackLng: 'en',
+    ns: ['translation'],
+    defaultNS: 'translation',
+    debug: false,
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  })

web/src/util/suspense.js

@@ -0,0 +1,22 @@
+import React, { Suspense } from 'react'
+import styled from 'styled-components'
+import BarLoader from 'react-spinners/BarLoader'
+
+export function FullScreenSuspense({ children }) {
+  return <Suspense fallback={<Fallback />}>{children}</Suspense>
+}
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+const Fallback = () => (
+  <Container>
+    <BarLoader />
+  </Container>
+)