test: add the first automated tests

.dockerignore

@@ -1,5 +1,11 @@
-node_modules
-build
-dist
-out
+.vscode
+.git
 .next
+build
+coverage
+dist
+node_modules
+out
+**/workbox-*.js
+**/sw.js
+**/__test__/**

.github/workflows/Divlo.yml

@@ -36,3 +36,4 @@ jobs:
       - run: 'npm run lint:typescript'
       - run: 'npm run build'
       - run: 'npm run lighthouse'
+      - run: 'npm run test'

.gitignore

@@ -12,6 +12,9 @@ out
 build
 dist
 
+# testing
+coverage
+
 # PWA
 **/workbox-*.js
 **/sw.js

__test__/pages/api/send-email.test.ts

@@ -0,0 +1,70 @@
+import { createMocks } from 'node-mocks-http'
+
+import handleSendEmail from 'pages/api/send-email'
+
+jest.mock('nodemailer', () => ({
+  createTransport: () => {
+    return {
+      sendMail: jest.fn(async () => {})
+    }
+  }
+}))
+
+describe('POST /api/send-email', () => {
+  it('succeeds and send the email', async () => {
+    const { req, res } = createMocks({
+      method: 'POST',
+      body: {
+        name: 'Divlo',
+        email: 'contact@divlo.fr',
+        subject: 'Subject',
+        message: 'Hello world!'
+      }
+    })
+    await handleSendEmail(req, res)
+    expect(res._getStatusCode()).toBe(201)
+    expect(JSON.parse(res._getData())).toEqual(
+      expect.objectContaining({
+        type: 'success'
+      })
+    )
+  })
+
+  it('fails with empty values', async () => {
+    const { req, res } = createMocks({
+      method: 'POST',
+      body: {
+        name: '',
+        email: '',
+        subject: '',
+        message: ''
+      }
+    })
+    await handleSendEmail(req, res)
+    expect(res._getStatusCode()).toBe(400)
+    expect(JSON.parse(res._getData())).toEqual(
+      expect.objectContaining({
+        type: 'requiredFields'
+      })
+    )
+  })
+
+  it('fails with invalid email', async () => {
+    const { req, res } = createMocks({
+      method: 'POST',
+      body: {
+        name: 'Name',
+        email: 'random wrong email',
+        subject: 'Subject',
+        message: 'Message'
+      }
+    })
+    await handleSendEmail(req, res)
+    expect(res._getStatusCode()).toBe(400)
+    expect(JSON.parse(res._getData())).toEqual(
+      expect.objectContaining({
+        type: 'invalidEmail'
+      })
+    )
+  })
+})

components/Head.tsx

@@ -1,4 +1,4 @@
-import HeadTag from 'next/head'
+import NextHead from 'next/head'
 
 interface HeadProps {
   title?: string
@@ -7,7 +7,7 @@ interface HeadProps {
   url?: string
 }
 
-const Head: React.FC<HeadProps> = props => {
+export const Head: React.FC<HeadProps> = props => {
   const {
     title = 'Divlo',
     image = '/images/icons/icon-96x96.png',
@@ -16,7 +16,7 @@ const Head: React.FC<HeadProps> = props => {
   } = props
 
   return (
-    <HeadTag>
+    <NextHead>
       <title>{title}</title>
       <link rel='icon' type='image/png' href={image} />
 
@@ -52,8 +52,6 @@ const Head: React.FC<HeadProps> = props => {
       <meta name='apple-mobile-web-app-capable' content='yes' />
       <meta name='mobile-web-app-capable' content='yes' />
       <link rel='apple-touch-icon' href={image} />
-    </HeadTag>
+    </NextHead>
   )
 }
-
-export default Head

components/design/__test__/Button.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Button } from '../Button'
+
+describe('<Button />', () => {
+  it('should render', async () => {
+    const { getByText } = render(<Button>Submit</Button>)
+    expect(getByText('Submit')).toBeInTheDocument()
+  })
+})

package.json

@@ -2,6 +2,46 @@
   "name": "divlo",
   "version": "0.0.0",
   "private": true,
+  "jest": {
+    "roots": [
+      "<rootDir>"
+    ],
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+    },
+    "moduleDirectories": [
+      "node_modules",
+      "./"
+    ],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ],
+    "setupFilesAfterEnv": [
+      "@testing-library/jest-dom/extend-expect",
+      "@testing-library/react"
+    ],
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "**/*.{js,jsx,ts,tsx}",
+      "!**/*.d.ts",
+      "!**/.next/**",
+      "!**/node_modules/**",
+      "!**/next.config.js",
+      "!**/postcss.config.js",
+      "!**/workbox-*.js",
+      "!**/sw.js"
+    ],
+    "coverageDirectory": "./coverage",
+    "coverageReporters": [
+      "text",
+      "cobertura"
+    ]
+  },
   "ts-standard": {
     "ignore": [
       ".next",
@@ -13,7 +53,8 @@
     ],
     "envs": [
       "node",
-      "browser"
+      "browser",
+      "jest"
     ],
     "report": "stylish"
   },
@@ -28,6 +69,7 @@
     "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
     "lint:typescript": "ts-standard",
     "lighthouse": "lhci autorun",
+    "test": "jest",
     "postinstall": "husky install"
   },
   "dependencies": {
@@ -38,9 +80,9 @@
     "@fortawesome/react-fontawesome": "0.1.14",
     "axios": "0.21.1",
     "classnames": "2.3.1",
-    "html-react-parser": "1.2.5",
+    "html-react-parser": "1.2.6",
     "next": "10.1.3",
-    "next-pwa": "5.2.12",
+    "next-pwa": "5.2.13",
     "next-translate": "1.0.6",
     "nodemailer": "6.5.0",
     "normalize.css": "8.0.1",
@@ -57,16 +99,22 @@
     "@fullhuman/postcss-purgecss": "4.0.3",
     "@lhci/cli": "0.7.1",
     "@styled-jsx/plugin-sass": "3.0.0",
+    "@testing-library/jest-dom": "5.11.10",
+    "@testing-library/react": "11.2.6",
+    "@types/jest": "26.0.22",
     "@types/node": "14.14.41",
     "@types/nodemailer": "6.4.1",
     "@types/nprogress": "0.2.0",
     "@types/react": "17.0.3",
     "@types/styled-jsx": "2.2.8",
     "@types/validator": "13.1.3",
+    "babel-jest": "26.6.3",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
     "husky": "6.0.0",
+    "jest": "26.6.3",
     "markdownlint-cli": "0.27.1",
+    "node-mocks-http": "1.10.1",
     "postcss": "8.2.10",
     "sass": "1.32.10",
     "ts-standard": "10.0.0",

pages/index.tsx

@@ -4,7 +4,7 @@ import useTranslation from 'next-translate/useTranslation'
 import { Contact } from 'components/Contact'
 import { RevealFade } from 'components/design/RevealFade'
 import { Section } from 'components/design/Section'
-import Head from 'components/Head'
+import { Head } from 'components/Head'
 import { Interests } from 'components/Interests'
 import { Portfolio } from 'components/Portfolio'
 import { Profile } from 'components/Profile'