diff --git a/services/app-web/src/pages/MccrsId/MccrsId.test.tsx b/services/app-web/src/pages/MccrsId/MccrsId.test.tsx index d3c62384f2..2c1659bd88 100644 --- a/services/app-web/src/pages/MccrsId/MccrsId.test.tsx +++ b/services/app-web/src/pages/MccrsId/MccrsId.test.tsx @@ -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, @@ -16,11 +23,32 @@ describe('MCCRSID', () => { }) it('renders without errors', async () => { - renderWithProviders(, { - routerProvider: { - route: '/submissions/15/MCCRS-record-number', - }, - }) + renderWithProviders( + + }> + } + /> + + , + { + 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' }) @@ -31,22 +59,64 @@ describe('MCCRSID', () => { }) it('displays the text field for mccrs id', async () => { - renderWithProviders(, { - routerProvider: { - route: '/submissions/15/MCCRS-record-number', - }, - }) + renderWithProviders( + + }> + } + /> + + , + { + 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(, { - routerProvider: { - route: '/submissions/15/MCCRS-record-number', - }, - }) - const continueButton = screen.getByRole('button', { + renderWithProviders( + + }> + } + /> + + , + { + 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() @@ -61,17 +131,36 @@ describe('MCCRSID', () => { }) it('cannot continue with MCCRS ID less than 4 digits', async () => { - renderWithProviders(, { - routerProvider: { - route: '/submissions/15/MCCRS-record-number', - }, - }) + renderWithProviders( + + }> + } + /> + + , + { + 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', @@ -79,26 +168,43 @@ describe('MCCRSID', () => { 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(, { - routerProvider: { - route: '/submissions/15/MCCRS-record-number', - }, - }) + renderWithProviders( + + }> + } + /> + + , + { + 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', @@ -106,26 +212,43 @@ describe('MCCRSID', () => { 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(, { - routerProvider: { - route: '/submissions/15/MCCRS-record-number', - }, - }) + renderWithProviders( + + }> + } + /> + + , + { + 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', diff --git a/services/app-web/src/pages/MccrsId/MccrsId.tsx b/services/app-web/src/pages/MccrsId/MccrsId.tsx index 3a32abede9..728dcf5a8d 100644 --- a/services/app-web/src/pages/MccrsId/MccrsId.tsx +++ b/services/app-web/src/pages/MccrsId/MccrsId.tsx @@ -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' @@ -40,15 +40,17 @@ export const MccrsId = (): React.ReactElement => { // page context const { updateHeading } = usePage() - useEffect(() => { - const customHeading = ( + const customHeading = useMemo(() => { + return ( {packageName} MC-CRS record number ) + }, [packageName]) + useEffect(() => { updateHeading({ customHeading }) - }, [packageName, updateHeading]) + }, [customHeading, updateHeading]) const [showPageErrorMessage, setShowPageErrorMessage] = useState< boolean | string