Add ui tests for routes

ui/.eslintrc.js

@@ -0,0 +1,46 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+    process: 'readonly',
+    module: 'readonly',
+    require: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'react-hooks'],
+  rules: {
+    'no-unused-vars': 'warn',
+    'react/display-name': 'off',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parser: 'babel-eslint',
+  overrides: [
+    Object.assign(require('eslint-plugin-jest').configs.recommended, {
+      files: ['**/*.test.js'],
+      env: { jest: true },
+      plugins: ['jest', 'jest-dom'],
+      rules: Object.assign(
+        require('eslint-plugin-jest').configs.recommended.rules,
+        {
+          'no-import-assign': 'off',
+          'react/prop-types': 'off',
+        }
+      ),
+    }),
+  ],
+}

ui/.eslintrc.json

@@ -1,28 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest/globals": true
-  },
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly",
-    "process": "readonly",
-    "module": "readonly",
-    "require": "readonly"
-  },
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "react-hooks", "jest", "jest-dom"],
-  "rules": {
-    "no-unused-vars": "warn",
-    "react/display-name": "off"
-  },
-  "parser": "babel-eslint"
-}

ui/src/components/routes/AuthorizedRoute.js

@@ -5,7 +5,7 @@ import { gql } from '@apollo/client'
 import { Query } from '@apollo/client/react/components'
 import { authToken } from '../../authentication'
 
-const adminQuery = gql`
+export const ADMIN_QUERY = gql`
   query adminQuery {
     myUser {
       admin
@@ -30,7 +30,7 @@ const AuthorizedRoute = ({ component: Component, admin = false, ...props }) => {
   let adminRedirect = null
   if (token && admin) {
     adminRedirect = (
-      <Query query={adminQuery}>
+      <Query query={ADMIN_QUERY}>
         {({ error, data }) => {
           if (error) alert(error)
 
@@ -59,7 +59,7 @@ const AuthorizedRoute = ({ component: Component, admin = false, ...props }) => {
 }
 
 AuthorizedRoute.propTypes = {
-  component: PropTypes.object.isRequired,
+  component: PropTypes.elementType.isRequired,
   admin: PropTypes.bool,
 }
 

ui/src/components/routes/AuthorizedRoute.test.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom'
+
+import React from 'react'
+import AuthorizedRoute from './AuthorizedRoute'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import * as authentication from '../../authentication'
+
+describe('AuthorizedRoute component', () => {
+  const AuthorizedComponent = () => <div>authorized content</div>
+
+  test('not logged in', async () => {
+    authentication.authToken = jest.fn(() => null)
+
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Route path="/login">login redirect</Route>
+        <AuthorizedRoute path="/" component={AuthorizedComponent} />
+      </MemoryRouter>
+    )
+
+    expect(screen.getByText('login redirect')).toBeInTheDocument()
+  })
+
+  test('logged in', async () => {
+    authentication.authToken = jest.fn(() => 'token-here')
+
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Route path="/login">login redirect</Route>
+        <AuthorizedRoute path="/" component={AuthorizedComponent} />
+      </MemoryRouter>
+    )
+
+    expect(screen.getByText('authorized content')).toBeInTheDocument()
+  })
+})

ui/src/components/routes/Routes.test.js

@@ -0,0 +1,41 @@
+import '@testing-library/jest-dom'
+
+import React from 'react'
+
+import Routes from './Routes'
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+
+describe('routes', () => {
+  test('unauthorized root path should navigate to login page', async () => {
+    jest.mock('../../Pages/LoginPage/LoginPage.js', () => () => (
+      <div>mocked login page</div>
+    ))
+
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Routes />
+      </MemoryRouter>
+    )
+
+    await waitForElementToBeRemoved(() =>
+      screen.getByText('Loading', { exact: false })
+    )
+
+    expect(screen.getByText('mocked login page')).toBeInTheDocument()
+  })
+
+  test('invalid page should print a "not found" message', async () => {
+    render(
+      <MemoryRouter initialEntries={['/random_non_existent_page']}>
+        <Routes />
+      </MemoryRouter>
+    )
+
+    expect(screen.getByText('Page not found')).toBeInTheDocument()
+  })
+})