v0.41.0 Update tests

Added DOMPurify module for sanitizing user input for forms.

Update vscode launch.json for debugging.

Update `.gitignore` to ignore files prefixed with a single underscore
for files that I do not want added to the repository.

Update test script to fix error adding the `--detectOpenHandles`
argument.
testing-library/dom-testing-library#524

Update tests
- Added mocks for the app setup for the theme, routing, and state store.
- Created `commonSetup.js` module that re-exports multiple mocks for a
single import instead of multiple lines of mock imports.
- Refactor `Home.test.tsx` to use the new `commonSetup.js` for importing
the mocks.

testing Netlify webhook

test

test

added site id for netlify

added auth token for netlify

using cli

typo

vx.x.x specified build dir to deploy

vx.x.x specified build dir to deploy

.github/workflows/deploy-to-prod.yml

@@ -0,0 +1,40 @@
+name: Deploy to Production
+
+on:
+  push:
+    branches: test
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:       
+      - name: Checkout code
+        uses: actions/checkout@master
+
+      - name: Use NodeJS 17.4.0
+        uses: actions/setup-node@master
+        with:
+          node-version: '17.4.0'
+          cache: npm
+
+      - name: Install dependencies
+        run: npm install
+
+      # - name: Test
+      #   run: npm test
+
+      - name: Build
+        run: npm run build
+
+      # - name: Compile
+      #   run: npm start
+      #   env:
+      #     COMPILE_TEST: true
+
+      - name: deploy build
+        run: netlify deploy --prod --dir build --message "$MESSAGE"
+        env:
+          NETLIFY_SITE_ID: a115dba5-ccae-4bed-9f8d-938685aadb67
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          MESSAGE: ${{ github.event.head_commit.message }}
+

.gitignore

@@ -9,8 +9,8 @@ coverage
 # production
 build
 
-# regexp to ignore specific files
-**/__*
+# ignore specific files prefixed with a single underscore
+**/_[!_]*
 
 # eslintcache for the lint-staged pre-commit
 .eslintcache

.vscode/launch.json

@@ -5,7 +5,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "chrome",
+      "type": "pwa-chrome",
       "request": "launch",
       "name": "Launch Chrome against localhost",
       "url": "http://localhost:3000",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "whitelist",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "private": true,
   "engines": {
     "node": "^17.x"
@@ -35,6 +35,7 @@
     "bfj": "^7.0.2",
     "browserslist": "^4.20.0",
     "camelcase": "^6.2.1",
+    "dompurify": "^2.3.6",
     "dotenv": "^14.2.0",
     "dotenv-expand": "^8.0.3",
     "fs-extra": "^10.0.1",
@@ -132,6 +133,7 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^14.0.0",
     "@types/aos": "^3.0.4",
+    "@types/dompurify": "^2.3.3",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",

scripts/test.js

@@ -48,4 +48,6 @@ if (
    argv.push(hasSourceControl ? '--watch' : '--watchAll')
 }
 
+argv.push('--detectOpenHandles')
+
 jest.run(argv)

src/__tests__/commonSetup.js

@@ -0,0 +1,7 @@
+/**
+ * This file is used to easily export more than two mock implementations
+ * through a single import file instead of multiple lines.
+ */
+export { default as StoreMock } from './mocks/StoreMock'
+export { default as RoutingMock } from './mocks/RoutingMock'
+export { default as ThemeMock } from './mocks/ThemeMock'

src/__tests__/mocks/RoutingMock.tsx

@@ -0,0 +1,6 @@
+import { BrowserRouter } from 'react-router-dom'
+import type { ReactNode } from 'react'
+
+export default ({ children }: { children: ReactNode }) => (
+   <BrowserRouter>{children}</BrowserRouter>
+)

src/__tests__/mocks/StoreMock.tsx

@@ -0,0 +1,7 @@
+import { Provider } from 'react-redux'
+import store from 'app/store'
+import type { ReactNode } from 'react'
+
+export default ({ children }: { children: ReactNode }) => (
+   <Provider store={store}>{children}</Provider>
+)

src/__tests__/mocks/ThemeMock.tsx

@@ -0,0 +1,11 @@
+import { ThemeProvider } from '@mui/material/styles'
+import type { ReactNode } from 'react'
+import { StyleTheme, ComponentTheme } from 'assets/theme'
+
+const ThemeMock = ({ children }: { children: ReactNode }) => (
+   <ThemeProvider theme={StyleTheme('dark')}>
+      <ThemeProvider theme={ComponentTheme}>{children}</ThemeProvider>
+   </ThemeProvider>
+)
+
+export default ThemeMock

src/__tests__/pages/Home.test.tsx

@@ -1,26 +1,21 @@
-import * as React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-import { ThemeProvider } from '@mui/material/styles'
 import { render, screen } from '@testing-library/react'
-import { Provider } from 'react-redux'
+import { StoreMock, RoutingMock, ThemeMock } from '../commonSetup'
 import Home from 'pages/Home'
-import store from 'app/store'
-import { StyleTheme } from 'assets/theme'
 
 // Need to import it manually because it has to set the window
 // property, whereas jest.mock() simply imports the module
 // eslint-disable-next-line jest/no-mocks-import
-import './__mocks__/intersectionObserverMock'
+import '../mocks/intersectionObserverMock'
 
 test('renders home page without crashing', () => {
    render(
-      <Provider store={store}>
-         <BrowserRouter>
-            <ThemeProvider theme={StyleTheme('dark')}>
+      <StoreMock>
+         <RoutingMock>
+            <ThemeMock>
                <Home />
-            </ThemeProvider>
-         </BrowserRouter>
-      </Provider>
+            </ThemeMock>
+         </RoutingMock>
+      </StoreMock>
    )
    expect(screen.getByText(/your go-to helium center/i)).toBeInTheDocument()
 })