Set up testing environment

.eslintrc

@@ -2,5 +2,13 @@
   "extends": ["@shabados/eslint-config", "@shabados/eslint-config/typescript"],
   "parserOptions": {
     "project": "./tsconfig.json"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["apps/frontend/tests/setupTests.ts"],
+      "rules": {
+        "import/no-extraneous-dependencies": 0
+      }
+    } 
+  ]
 }

.gitignore

@@ -21,4 +21,5 @@ dist/
 build/
 .nyc_output/
 coverage/
-!.vscode/extensions.json
+!.vscode/extensions.json
+*.tsbuildinfo

.swcrc

@@ -0,0 +1,13 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    }
+  }
+}

apps/frontend/__mocks__/detect-browser.ts

@@ -0,0 +1,3 @@
+export const detect = jest.fn().mockReturnValue( {
+  os: 'Windows 10',
+} )

apps/frontend/jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  transform: {
+    '^.+\\.(t|j)sx?$': [ '@swc/jest',
+      {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+          },
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
+  },
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/src/__mocks__/styleMock.ts',
+  },
+  setupFilesAfterEnv: [
+    '<rootDir>/tests/setupTests.ts',
+  ],
+}

apps/frontend/package.json

@@ -13,11 +13,13 @@
   },
   "homepage": "/",
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "@mui/material": "^5.6.4",
+    "@mui/material": "^5.11.13",
     "@sentry/browser": "^6.19.7",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -48,13 +50,18 @@
     "lint": "eslint ."
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/lodash": "^4.14.182",
     "@types/memoizee": "^0.4.8",
     "@types/qs": "^6.9.7",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@types/scroll-into-view": "^1.16.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react": "^1.3.2",
+    "jest-environment-jsdom": "^29.5.0",
     "source-map-explorer": "^2.5.2",
     "vite": "^2.9.8"
   }

apps/frontend/src/Settings/About.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react'
+
+import About from './About'
+
+jest.mock( '../lib/controller', jest.fn() )
+
+describe( '<About />', () => {
+  it( 'should display a loading spinner when the page is loading', async () => {
+    render( <About connected={0} /> )
+
+    const loadingSpinner = await screen.findByRole( 'progressbar' )
+    expect( loadingSpinner ).toBeInTheDocument()
+  } )
+
+  it.todo( 'should show the number of connected devices' )
+} )

apps/frontend/src/Settings/Hotkeys/index.js → apps/frontend/src/Settings/Hotkeys/index.tsx

@@ -2,7 +2,14 @@ import './index.css'
 
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Button, Grid, List, ListItem, Tooltip, Typography } from '@material-ui/core'
+import {
+  Button,
+  Grid,
+  List,
+  ListItem,
+  Tooltip,
+  Typography,
+} from '@mui/material'
 import classNames from 'classnames'
 import { groupBy } from 'lodash'
 import { arrayOf, objectOf, shape, string } from 'prop-types'
@@ -113,11 +120,11 @@ const Hotkeys = ( { keys, shortcuts, device } ) => {
 
                       <Grid item xs={1}>
                         {description && (
-                        <Tooltip title={description}>
-                          <span>
-                            <FontAwesomeIcon icon={faQuestionCircle} />
-                          </span>
-                        </Tooltip>
+                          <Tooltip title={description}>
+                            <span>
+                              <FontAwesomeIcon icon={faQuestionCircle} />
+                            </span>
+                          </Tooltip>
                         )}
                       </Grid>
 

apps/frontend/src/__mocks__/styleMock.ts

@@ -0,0 +1,3 @@
+module.exports = {}
+
+export default {}

apps/frontend/src/lib/__mocks__/consts.ts

@@ -0,0 +1 @@
+export const isMac = false

apps/frontend/src/lib/hooks.test.tsx

@@ -0,0 +1,51 @@
+import copy from 'copy-to-clipboard'
+import { useSnackbar } from 'notistack'
+
+import { useCopyToClipboard } from './hooks'
+
+jest.mock( 'copy-to-clipboard', () => jest.fn() )
+jest.mock( 'notistack', () => ( { useSnackbar: jest.fn().mockReturnValue( { enqueueSnackbar: jest.fn() } ) } ) )
+
+const TestHooksComponent = () => {
+  const copyToClipboard = useCopyToClipboard()
+
+  return { copyToClipboard }
+}
+
+describe( 'hooks', () => {
+  describe( 'useCopyToClipboard()', () => {
+    let copyToClipboard: ( text: string, fallback?: string ) => void
+    let enqueueSnackbar
+
+    beforeAll( () => {
+      ( { copyToClipboard } = TestHooksComponent() )
+      ;( { enqueueSnackbar } = useSnackbar() )
+    } )
+
+    afterEach( () => {
+      jest.clearAllMocks()
+    } )
+
+    it( 'should return a function to copy the given text to the clipboard', () => {
+      copyToClipboard( 'text to copy to the clipboard' )
+
+      expect( copy ).toHaveBeenCalledTimes( 2 )
+      expect( copy ).toHaveBeenCalledWith( 'text to copy to the clipboard' )
+    } )
+
+    it( 'should truncate the snackbar message to a max of 30 characters', () => {
+      copyToClipboard( 'this is 30 characters longggg. this should be truncated.' )
+
+      // eslint-disable-next-line no-useless-escape
+      expect( enqueueSnackbar ).toHaveBeenCalledWith( 'Copied \"this is 30 characters longggg....\" to clipboard', expect.any( Object ) )
+    } )
+
+    it( 'should return the fallback text in the snackbar if a falsy value is passed', () => {
+      const { enqueueSnackbar } = useSnackbar()
+      copyToClipboard( '', 'fallback text' )
+
+      expect( copy ).not.toHaveBeenCalled()
+      expect( enqueueSnackbar ).toHaveBeenCalledWith( 'fallback text', expect.any( Object ) )
+    } )
+  } )
+} )

apps/frontend/src/lib/utils.test.ts

@@ -0,0 +1,42 @@
+import { mapPlatformKey, mapPlatformKeys } from './utils'
+
+const isMacMockGetter = jest.fn()
+
+jest.mock( './consts', () => ( {
+  get isMac() {
+    return isMacMockGetter()
+  },
+} ) )
+
+describe( 'utils', () => {
+  describe( 'mapPlatformKey', () => {
+    it( 'should map ctrl to cmd if on Mac', () => {
+      isMacMockGetter.mockReturnValue( true )
+
+      expect( mapPlatformKey( 'alt+V' ) ).toBe( 'alt+V' )
+      expect( mapPlatformKey( 'ctrl+V' ) ).toBe( 'cmd+V' )
+    } )
+
+    it( 'should keep the key as-is if not on Mac', () => {
+      isMacMockGetter.mockReturnValue( false )
+
+      expect( mapPlatformKey( '' ) ).toBe( '' )
+      expect( mapPlatformKey( 'ctrl+D' ) ).toBe( 'ctrl+D' )
+    } )
+  } )
+
+  describe( 'mapPlatformKeys', () => {
+    it( 'should not fail if passed an empty object', () => {
+      const result = mapPlatformKeys( {} )
+
+      expect( result ).toEqual( {} )
+    } )
+
+    it( 'should return the keyMap argument as-is if not on Mac', () => {
+      isMacMockGetter.mockReturnValue( false )
+      mapPlatformKeys( {} )
+    } )
+
+    it.todo( 'should transform ctrl to cmd in key bindings if on Mac' )
+  } )
+} )

apps/frontend/src/shared/ThemeLoader.test.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react'
+
+import { StatusContext } from '../lib/contexts'
+import ThemeLoader from './ThemeLoader'
+
+describe( 'ThemeLoader', () => {
+  it( 'should generate a link element with a href of the default Day.css value', () => {
+    const { container } = render(
+      <StatusContext.Provider
+        value={{ connected: false, connectedAt: null, status: null }}
+      >
+        <ThemeLoader />
+      </StatusContext.Provider>
+    )
+
+    const link = container.querySelector( 'link' )
+
+    expect( link ).toBeInTheDocument()
+    expect( link?.getAttribute( 'href' ) ).toMatch( /Day.css/ )
+  } )
+
+  it(
+    'should generate a link element with a href of the given name value',
+    () => {
+      const { container } = render(
+        <StatusContext.Provider
+          value={{ connected: false, connectedAt: null, status: null }}
+        >
+          <ThemeLoader name="Night" />
+        </StatusContext.Provider>
+      )
+
+      const link = container.querySelector( 'link' )
+
+      expect( link ).toBeInTheDocument()
+      expect( link?.getAttribute( 'href' ) ).toMatch( /Night.css/ )
+    }
+  )
+} )

apps/frontend/src/shared/ThemeLoader.tsx

@@ -4,23 +4,23 @@ import { THEMES_URL } from '../lib/consts'
 import { StatusContext } from '../lib/contexts'
 import defaultTheme from '../Presenter/themes/Day.css'
 
-type ThemeLoaderProps = { name: String }
+type ThemeLoaderProps = { name?: string }
 
 /**
  * Component to load a theme using a `<link>` tag.
  * @param {string} name The name of the CSS theme to load from the server.
  * @constructor
  */
 const ThemeLoader = ( { name = 'Day' }: ThemeLoaderProps ) => {
-  const { connectedAt } = useContext(StatusContext)   
+  const { connectedAt } = useContext( StatusContext )
 
   return (
-  <link
-    key={`${name}-${connectedAt}`}
-    rel="stylesheet"
-    href={name ? `${THEMES_URL}/${name}.css` : defaultTheme}
-  />
-)
-  }
+    <link
+      key={`${name}-${connectedAt?.toDateString() || ''}`}
+      rel="stylesheet"
+      href={name ? `${THEMES_URL}/${name}.css` : defaultTheme}
+    />
+  )
+}
 
-export default ThemeLoader 
+export default ThemeLoader

apps/frontend/tests/setupTests.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom'
+
+jest.mock( 'detect-browser' )
+
+global.fetch = jest.fn().mockResolvedValue( {
+  json: () => Promise.resolve( {} ),
+} )

apps/frontend/tsconfig.json

@@ -4,6 +4,6 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "jsx": "react-jsx"
   },
-  "include": ["src", "src/types/vite-env.d.ts"],
+  "include": ["*.ts", "*.js", "*.tsx", "*.jsx", "__mocks__", "__utils__", "tests/setupTests.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

jest.config.js

@@ -1,9 +1,19 @@
-/// jest.d.ts
-
 module.exports = {
   projects: [ '<rootDir>/apps/*', '<rootDir>/packages/*' ],
   transform: {
-    '^.+\\.(t|j)sx?$': [ '@swc/jest' ],
+    '^.+\\.(t|j)sx?$': '@swc/jest',
+  },
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/apps/frontend/src/__mocks__/styleMock.ts',
   },
-  resetMocks: true,
+  // resetMocks: true,
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage',
+
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: 'v8',
 }