Add ui tests for routes
This commit is contained in:
parent
7029e6642e
commit
60e93a8497
|
@ -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',
|
||||
}
|
||||
),
|
||||
}),
|
||||
],
|
||||
}
|
|
@ -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"
|
||||
}
|
|
@ -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,
|
||||
}
|
||||
|
||||
|
|
|
@ -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()
|
||||
})
|
||||
})
|
|
@ -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()
|
||||
})
|
||||
})
|
Loading…
Reference in New Issue