Skip to content

Commit

Permalink
fix existing unit test
Browse files Browse the repository at this point in the history
  • Loading branch information
@pearl-truss
pearl-truss committed Oct 23, 2023
1 parent 43e4c36 commit a5087ca
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 58 deletions.
231 changes: 177 additions & 54 deletions services/app-web/src/pages/MccrsId/MccrsId.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import { Route, Routes } from 'react-router'
import { SubmissionSideNav } from '../SubmissionSideNav'
import { RoutesRecord } from '../../constants/routes'
import {
fetchCurrentUserMock,
fetchStateHealthPlanPackageWithQuestionsMockSuccess,
mockValidCMSUser,
} from '../../testHelpers/apolloMocks'
import {
ldUseClientSpy,
renderWithProviders,
Expand All @@ -16,11 +23,32 @@ describe('MCCRSID', () => {
})

it('renders without errors', async () => {
renderWithProviders(<MccrsId />, {
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
})
renderWithProviders(
<Routes>
<Route element={<SubmissionSideNav />}>
<Route
path={RoutesRecord.SUBMISSIONS_MCCRSID}
element={<MccrsId />}
/>
</Route>
</Routes>,
{
apolloProvider: {
mocks: [
fetchCurrentUserMock({
user: mockValidCMSUser(),
statusCode: 200,
}),
fetchStateHealthPlanPackageWithQuestionsMockSuccess({
id: '15',
}),
],
},
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
}
)

expect(
await screen.findByRole('heading', { name: 'MC-CRS record number' })
Expand All @@ -31,22 +59,64 @@ describe('MCCRSID', () => {
})

it('displays the text field for mccrs id', async () => {
renderWithProviders(<MccrsId />, {
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
})
renderWithProviders(
<Routes>
<Route element={<SubmissionSideNav />}>
<Route
path={RoutesRecord.SUBMISSIONS_MCCRSID}
element={<MccrsId />}
/>
</Route>
</Routes>,
{
apolloProvider: {
mocks: [
fetchCurrentUserMock({
user: mockValidCMSUser(),
statusCode: 200,
}),
fetchStateHealthPlanPackageWithQuestionsMockSuccess({
id: '15',
}),
],
},
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
}
)

expect(screen.getByTestId('textInput')).toBeInTheDocument()
expect(await screen.findByTestId('textInput')).toBeInTheDocument()
})

it('cannot continue without providing a MCCRS ID', async () => {
renderWithProviders(<MccrsId />, {
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
})
const continueButton = screen.getByRole('button', {
renderWithProviders(
<Routes>
<Route element={<SubmissionSideNav />}>
<Route
path={RoutesRecord.SUBMISSIONS_MCCRSID}
element={<MccrsId />}
/>
</Route>
</Routes>,
{
apolloProvider: {
mocks: [
fetchCurrentUserMock({
user: mockValidCMSUser(),
statusCode: 200,
}),
fetchStateHealthPlanPackageWithQuestionsMockSuccess({
id: '15',
}),
],
},
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
}
)
const continueButton = await screen.findByRole('button', {
name: 'Save MC-CRS number',
})
continueButton.click()
Expand All @@ -61,71 +131,124 @@ describe('MCCRSID', () => {
})

it('cannot continue with MCCRS ID less than 4 digits', async () => {
renderWithProviders(<MccrsId />, {
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
})
renderWithProviders(
<Routes>
<Route element={<SubmissionSideNav />}>
<Route
path={RoutesRecord.SUBMISSIONS_MCCRSID}
element={<MccrsId />}
/>
</Route>
</Routes>,
{
apolloProvider: {
mocks: [
fetchCurrentUserMock({
user: mockValidCMSUser(),
statusCode: 200,
}),
fetchStateHealthPlanPackageWithQuestionsMockSuccess({
id: '15',
}),
],
},
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
}
)

const input = await screen.findByTestId('textInput')
input.focus()

screen
.getByLabelText(
'Enter the Managed Care Contract and Rate Review System (MC-CRS) record number.'
)
.focus()
await userEvent.paste('123')
const continueButton = screen.getByRole('button', {
name: 'Save MC-CRS number',
})
continueButton.click()
await waitFor(() => {
expect(
screen.getAllByText(
'You must enter no more than 4 characters'
)
screen.getAllByText('You must enter no more than 4 characters')
).toHaveLength(1)
expect(continueButton).toHaveAttribute('aria-disabled', 'true')
})
})

it('cannot continue with MCCRS ID more than 4 digits', async () => {
renderWithProviders(<MccrsId />, {
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
})
renderWithProviders(
<Routes>
<Route element={<SubmissionSideNav />}>
<Route
path={RoutesRecord.SUBMISSIONS_MCCRSID}
element={<MccrsId />}
/>
</Route>
</Routes>,
{
apolloProvider: {
mocks: [
fetchCurrentUserMock({
user: mockValidCMSUser(),
statusCode: 200,
}),
fetchStateHealthPlanPackageWithQuestionsMockSuccess({
id: '15',
}),
],
},
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
}
)

const input = await screen.findByTestId('textInput')
input.focus()

screen
.getByLabelText(
'Enter the Managed Care Contract and Rate Review System (MC-CRS) record number.'
)
.focus()
await userEvent.paste('12345')
const continueButton = screen.getByRole('button', {
name: 'Save MC-CRS number',
})
continueButton.click()
await waitFor(() => {
expect(
screen.getAllByText(
'You must enter no more than 4 characters'
)
screen.getAllByText('You must enter no more than 4 characters')
).toHaveLength(1)
expect(continueButton).toHaveAttribute('aria-disabled', 'true')
})
})

it('cannot continue with MCCRS ID with non number input', async () => {
renderWithProviders(<MccrsId />, {
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
})
renderWithProviders(
<Routes>
<Route element={<SubmissionSideNav />}>
<Route
path={RoutesRecord.SUBMISSIONS_MCCRSID}
element={<MccrsId />}
/>
</Route>
</Routes>,
{
apolloProvider: {
mocks: [
fetchCurrentUserMock({
user: mockValidCMSUser(),
statusCode: 200,
}),
fetchStateHealthPlanPackageWithQuestionsMockSuccess({
id: '15',
}),
],
},
routerProvider: {
route: '/submissions/15/MCCRS-record-number',
},
}
)

const input = await screen.findByTestId('textInput')
input.focus()

screen
.getByLabelText(
'Enter the Managed Care Contract and Rate Review System (MC-CRS) record number.'
)
.focus()
await userEvent.paste('123a')
const continueButton = screen.getByRole('button', {
name: 'Save MC-CRS number',
Expand Down
10 changes: 6 additions & 4 deletions services/app-web/src/pages/MccrsId/MccrsId.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useMemo } from 'react'
import { Form as UswdsForm, ButtonGroup } from '@trussworks/react-uswds'
import { Formik, FormikErrors } from 'formik'
import { FieldTextInput } from '../../components/Form'
Expand Down Expand Up @@ -40,15 +40,17 @@ export const MccrsId = (): React.ReactElement => {
// page context
const { updateHeading } = usePage()

useEffect(() => {
const customHeading = (
const customHeading = useMemo(() => {
return (
<span className={styles.customHeading}>
{packageName}
<span>MC-CRS record number</span>
</span>
)
}, [packageName])
useEffect(() => {
updateHeading({ customHeading })
}, [packageName, updateHeading])
}, [customHeading, updateHeading])

const [showPageErrorMessage, setShowPageErrorMessage] = useState<
boolean | string
Expand Down

0 comments on commit a5087ca

Please sign in to comment.