feat: setup test for web

.gitignore

@@ -1,3 +1,4 @@
+.vscode
 /web/build
 
 # Created by https://www.gitignore.io/api/node

namae.code-workspace

@@ -0,0 +1,19 @@
+{
+  "folders": [
+    {
+      "name": "Root",
+      "path": "."
+    },
+    {
+      "name": "API",
+      "path": "api"
+    },
+    {
+      "name": "Web",
+      "path": "web"
+    }
+  ],
+  "settings": {
+    "jest.disabledWorkspaceFolders": ["Root"]
+  }
+}

package.json

@@ -3,10 +3,16 @@
   "description": "namae saves your time searching around registries and checking if the desired name is ready for use.",
   "author": "Yasuaki Uechi <y@uechi.io> (https://uechi.io/)",
   "scripts": {
-    "start": "now dev",
+    "postinstall": "yarn --cwd web && yarn --cwd api",
-    "ship": "now"
+    "ship": "now",
+    "start": "now dev"
+  },
+  "dependencies": {
+    "now": "^16.1.1"
+  },
+  "devDependencies": {
+    "prettier": "^1.18.2"
   },
-  "dependencies": {},
   "license": "MIT",
   "private": true
 }

web/jsconfig.json

@@ -0,0 +1 @@
+{}

web/package.json

@@ -11,30 +11,30 @@
   },
   "dependencies": {
     "fetch-suspense": "^1.2.0",
-    "i18next": "^17.0.9",
+    "i18next": ">=14.0.1",
     "i18next-browser-languagedetector": "^3.0.3",
     "i18next-chained-backend": "^2.0.0",
     "i18next-localstorage-backend": "^3.0.0",
-    "i18next-xhr-backend": "^3.1.1",
+    "i18next-xhr-backend": "^3.1.2",
     "isomorphic-unfetch": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
+    "react": "^16.9.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.9.0",
     "react-ga": "^2.6.0",
     "react-helmet": "^5.2.1",
-    "react-i18next": "^10.11.5",
+    "react-i18next": "10.12.2",
     "react-icons": "^3.7.0",
     "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1",
+    "react-scripts": "3.1.1",
     "react-spinners": "^0.5.13",
     "react-tippy": "^1.2.3",
     "styled-components": "^4.3.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^8.0.8",
+    "@testing-library/react": "^9.1.1",
-    "@types/node": "^12.7.1",
+    "@types/jest": "^24.0.17",
-    "typescript": "^3.5.3"
+    "i18next-node-fs-backend": "^2.1.3"
   },
   "browserslist": {
     "production": [

web/src/App.test.js

@@ -1,8 +1,14 @@
-import React from 'react'
+import React, { Suspense } from 'react'
-import { render } from '@testing-library/react'
+import { render, waitForElement } from '@testing-library/react'
+
 import App from './App'
 
-it('renders welcome message', () => {
+it('renders welcome message', async () => {
-  const { getByText } = render(<App />)
+  const { getByText } = render(
-  expect(getByText('namæ')).toBeInTheDocument()
+    <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 React from 'react'
-import styled from 'styled-components'
 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 = () => (
+const Container = () => (
-  <Container>
+  <FullScreenSuspense>
-    <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 />}>
     <App />
-  </Suspense>,
+  </FullScreenSuspense>
-  document.getElementById('root')
 )
 
+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>
+)

yarn.lock

@@ -2,3 +2,12 @@
 # yarn lockfile v1
 
 
+now@^16.1.1:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/now/-/now-16.1.1.tgz#692c406158c21bb0371de137b5f9957c861a4810"
+  integrity sha512-SXro0fOBTVBn+A2wEYV63It706egm7swgo6qb8zp6g07pOK0PQ1smeO0wmdYbx2Kuk5+Deh5t92KnZQi8wZjzA==
+
+prettier@^1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
+  integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==