Write test for login and fix initial setup bug
This commit is contained in:
parent
b593f615ad
commit
91d63ebddc
|
@ -0,0 +1,77 @@
|
|||
import React from 'react'
|
||||
import { MockedProvider } from '@apollo/client/testing'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
|
||||
import { createMemoryHistory } from 'history'
|
||||
import * as authentication from '../../helpers/authentication'
|
||||
import InitialSetupPage from './InitialSetupPage'
|
||||
import { mockInitialSetupGraphql } from './loginTestHelpers'
|
||||
|
||||
jest.mock('../../helpers/authentication.ts')
|
||||
|
||||
const authToken = authentication.authToken as jest.Mock<
|
||||
ReturnType<typeof authentication.authToken>
|
||||
>
|
||||
|
||||
describe('Initial setup page', () => {
|
||||
test('Render initial setup form', async () => {
|
||||
authToken.mockImplementation(() => null)
|
||||
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/initialSetup'],
|
||||
})
|
||||
|
||||
render(
|
||||
<MockedProvider mocks={[mockInitialSetupGraphql(true)]}>
|
||||
<HistoryRouter history={history}>
|
||||
<InitialSetupPage />
|
||||
</HistoryRouter>
|
||||
</MockedProvider>
|
||||
)
|
||||
|
||||
expect(screen.getByLabelText('Username')).toBeInTheDocument()
|
||||
expect(screen.getByLabelText('Password')).toBeInTheDocument()
|
||||
expect(screen.getByLabelText('Photo path')).toBeInTheDocument()
|
||||
expect(screen.getByDisplayValue('Setup Photoview')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
test('Redirect if auth token is present', async () => {
|
||||
authToken.mockImplementation(() => 'some-token')
|
||||
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/initialSetup'],
|
||||
})
|
||||
|
||||
render(
|
||||
<MockedProvider mocks={[mockInitialSetupGraphql(true)]}>
|
||||
<HistoryRouter history={history}>
|
||||
<InitialSetupPage />
|
||||
</HistoryRouter>
|
||||
</MockedProvider>
|
||||
)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(history.location.pathname).toBe('/')
|
||||
})
|
||||
})
|
||||
|
||||
test('Redirect if not initial setup', async () => {
|
||||
authToken.mockImplementation(() => null)
|
||||
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/initialSetup'],
|
||||
})
|
||||
|
||||
render(
|
||||
<MockedProvider mocks={[mockInitialSetupGraphql(false)]}>
|
||||
<HistoryRouter history={history}>
|
||||
<InitialSetupPage />
|
||||
</HistoryRouter>
|
||||
</MockedProvider>
|
||||
)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(history.location.pathname).toBe('/')
|
||||
})
|
||||
})
|
||||
})
|
|
@ -1,9 +1,9 @@
|
|||
import React from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { gql, useQuery, useMutation } from '@apollo/client'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Container } from './loginUtilities'
|
||||
|
||||
import { checkInitialSetupQuery, login } from './loginUtilities'
|
||||
import { INITIAL_SETUP_QUERY, login } from './loginUtilities'
|
||||
import { authToken } from '../../helpers/authentication'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { CheckInitialSetup } from './__generated__/CheckInitialSetup'
|
||||
|
@ -45,19 +45,18 @@ const InitialSetupPage = () => {
|
|||
formState: { errors: formErrors },
|
||||
} = useForm<InitialSetupFormData>()
|
||||
|
||||
if (authToken()) {
|
||||
navigate('/')
|
||||
return null
|
||||
}
|
||||
useEffect(() => {
|
||||
if (authToken()) navigate('/')
|
||||
}, [])
|
||||
|
||||
const { data: initialSetupData } = useQuery<CheckInitialSetup>(
|
||||
checkInitialSetupQuery
|
||||
)
|
||||
const { data: initialSetupData } =
|
||||
useQuery<CheckInitialSetup>(INITIAL_SETUP_QUERY)
|
||||
|
||||
if (initialSetupData?.siteInfo?.initialSetup) {
|
||||
navigate('/')
|
||||
return null
|
||||
}
|
||||
const notInitialSetup = initialSetupData?.siteInfo?.initialSetup === false
|
||||
|
||||
useEffect(() => {
|
||||
if (notInitialSetup) navigate('/')
|
||||
}, [notInitialSetup])
|
||||
|
||||
const [authorize, { loading: authorizeLoading, data: authorizationData }] =
|
||||
useMutation(initialSetupMutation, {
|
||||
|
@ -80,6 +79,10 @@ const InitialSetupPage = () => {
|
|||
})
|
||||
})
|
||||
|
||||
if (authToken() || notInitialSetup) {
|
||||
return null
|
||||
}
|
||||
|
||||
let errorMessage = null
|
||||
if (authorizationData && !authorizationData.initialSetupWizard.success) {
|
||||
errorMessage = authorizationData.initialSetupWizard.status
|
||||
|
|
|
@ -0,0 +1,78 @@
|
|||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import React from 'react'
|
||||
import LoginPage from './LoginPage'
|
||||
import * as authentication from '../../helpers/authentication'
|
||||
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
|
||||
import { createMemoryHistory } from 'history'
|
||||
import { MockedProvider } from '@apollo/client/testing'
|
||||
import { mockInitialSetupGraphql } from './loginTestHelpers'
|
||||
|
||||
jest.mock('../../helpers/authentication.ts')
|
||||
|
||||
const authToken = authentication.authToken as jest.Mock<
|
||||
ReturnType<typeof authentication.authToken>
|
||||
>
|
||||
|
||||
describe('Login page redirects', () => {
|
||||
test('Auth token redirect', async () => {
|
||||
authToken.mockImplementation(() => 'some-token')
|
||||
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/login'],
|
||||
})
|
||||
|
||||
render(
|
||||
<MockedProvider mocks={[]}>
|
||||
<HistoryRouter history={history}>
|
||||
<LoginPage />
|
||||
</HistoryRouter>
|
||||
</MockedProvider>
|
||||
)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(history.location.pathname).toBe('/')
|
||||
})
|
||||
})
|
||||
|
||||
test('Initial setup redirect', async () => {
|
||||
authToken.mockImplementation(() => null)
|
||||
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/login'],
|
||||
})
|
||||
|
||||
render(
|
||||
<MockedProvider mocks={[mockInitialSetupGraphql(true)]}>
|
||||
<HistoryRouter history={history}>
|
||||
<LoginPage />
|
||||
</HistoryRouter>
|
||||
</MockedProvider>
|
||||
)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(history.location.pathname).toBe('/initialSetup')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Login page', () => {
|
||||
test('Render login form', async () => {
|
||||
authToken.mockImplementation(() => null)
|
||||
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/login'],
|
||||
})
|
||||
|
||||
render(
|
||||
<MockedProvider mocks={[mockInitialSetupGraphql(false)]}>
|
||||
<HistoryRouter history={history}>
|
||||
<LoginPage />
|
||||
</HistoryRouter>
|
||||
</MockedProvider>
|
||||
)
|
||||
|
||||
expect(screen.getByLabelText('Username')).toBeInTheDocument()
|
||||
expect(screen.getByLabelText('Password')).toBeInTheDocument()
|
||||
expect(screen.getByDisplayValue('Sign in')).toBeInTheDocument()
|
||||
})
|
||||
})
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { useQuery, gql, useMutation } from '@apollo/client'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { checkInitialSetupQuery, login } from './loginUtilities'
|
||||
import { INITIAL_SETUP_QUERY, login } from './loginUtilities'
|
||||
import { authToken } from '../../helpers/authentication'
|
||||
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
@ -69,8 +69,6 @@ const LoginForm = () => {
|
|||
})
|
||||
}
|
||||
|
||||
console.log('errors', formErrors)
|
||||
|
||||
const errorMessage =
|
||||
data && !data.authorizeUser.success ? data.authorizeUser.status : null
|
||||
|
||||
|
@ -130,16 +128,19 @@ const LoginPage = () => {
|
|||
const navigate = useNavigate()
|
||||
|
||||
const { data: initialSetupData } = useQuery<CheckInitialSetup>(
|
||||
checkInitialSetupQuery
|
||||
INITIAL_SETUP_QUERY,
|
||||
{ variables: {} }
|
||||
)
|
||||
|
||||
if (authToken()) {
|
||||
navigate('/')
|
||||
return null
|
||||
}
|
||||
useEffect(() => {
|
||||
if (authToken()) navigate('/')
|
||||
}, [])
|
||||
|
||||
if (initialSetupData?.siteInfo?.initialSetup) {
|
||||
navigate('initialSetup')
|
||||
useEffect(() => {
|
||||
if (initialSetupData?.siteInfo?.initialSetup) navigate('/initialSetup')
|
||||
}, [initialSetupData?.siteInfo?.initialSetup])
|
||||
|
||||
if (authToken() || initialSetupData?.siteInfo?.initialSetup) {
|
||||
return null
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
import { INITIAL_SETUP_QUERY } from './loginUtilities'
|
||||
|
||||
export const mockInitialSetupGraphql = (initial: boolean) => ({
|
||||
request: {
|
||||
query: INITIAL_SETUP_QUERY,
|
||||
variables: {},
|
||||
},
|
||||
result: {
|
||||
data: {
|
||||
siteInfo: {
|
||||
initialSetup: initial,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
|
@ -2,7 +2,7 @@ import { gql } from '@apollo/client'
|
|||
import { saveTokenCookie } from '../../helpers/authentication'
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const checkInitialSetupQuery = gql`
|
||||
export const INITIAL_SETUP_QUERY = gql`
|
||||
query CheckInitialSetup {
|
||||
siteInfo {
|
||||
initialSetup
|
||||
|
|
Loading…
Reference in New Issue