diff --git a/frontend/src/components/Navigator/__tests__/index.js b/frontend/src/components/Navigator/__tests__/index.js
index cebe7d708c..d0ff0f42c6 100644
--- a/frontend/src/components/Navigator/__tests__/index.js
+++ b/frontend/src/components/Navigator/__tests__/index.js
@@ -6,6 +6,7 @@ import {
} from '@testing-library/react';
import Navigator from '../index';
+import { NOT_STARTED } from '../constants';
const pages = [
{
@@ -32,13 +33,22 @@ const pages = [
},
];
+const renderReview = (allComplete, onSubmit) => (
+
+
+
+);
+
describe('Navigator', () => {
const renderNavigator = (onSubmit = () => {}) => {
render(
,
);
};
@@ -53,12 +63,22 @@ describe('Navigator', () => {
await waitFor(() => expect(within(first.nextSibling).getByText('In progress')).toBeVisible());
});
- it('submits data when "continuing" from the last page', async () => {
+ it('shows the review page after showing the last form page', async () => {
+ renderNavigator();
+ userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+ await screen.findByTestId('second');
+ userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+ await waitFor(() => expect(screen.getByTestId('review')).toBeVisible());
+ });
+
+ it('submits data when "continuing" from the review page', async () => {
const onSubmit = jest.fn();
renderNavigator(onSubmit);
userEvent.click(screen.getByRole('button', { name: 'Continue' }));
- await waitFor(() => expect(screen.getByTestId('second')));
+ await screen.findByTestId('second');
userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+ await screen.findByTestId('review');
+ userEvent.click(screen.getByTestId('review'));
await waitFor(() => expect(onSubmit).toHaveBeenCalled());
});
diff --git a/frontend/src/components/Navigator/components/Form.js b/frontend/src/components/Navigator/components/Form.js
index 3862b9a712..a623bd3ed4 100644
--- a/frontend/src/components/Navigator/components/Form.js
+++ b/frontend/src/components/Navigator/components/Form.js
@@ -9,7 +9,7 @@ import { Form as UswdsForm, Button } from '@trussworks/react-uswds';
import { useForm } from 'react-hook-form';
function Form({
- initialData, onSubmit, onDirty, saveForm, renderForm,
+ initialData, onContinue, onDirty, saveForm, renderForm,
}) {
/*
When the form unmounts we want to send any data in the form
@@ -49,7 +49,7 @@ function Form({
getValuesRef.current = getValues;
return (
-
+
{renderForm(hookForm)}
@@ -58,7 +58,7 @@ function Form({
Form.propTypes = {
initialData: PropTypes.shape({}),
- onSubmit: PropTypes.func.isRequired,
+ onContinue: PropTypes.func.isRequired,
onDirty: PropTypes.func.isRequired,
saveForm: PropTypes.func.isRequired,
renderForm: PropTypes.func.isRequired,
diff --git a/frontend/src/components/Navigator/components/SideNav.js b/frontend/src/components/Navigator/components/SideNav.js
index 5a55dda33b..96ffe1ab0c 100644
--- a/frontend/src/components/Navigator/components/SideNav.js
+++ b/frontend/src/components/Navigator/components/SideNav.js
@@ -31,22 +31,25 @@ const tagClass = (state) => {
};
function SideNav({
- pages, onNavigation, skipTo, skipToMessage,
+ pages, skipTo, skipToMessage,
}) {
const isMobile = useMediaQuery({ maxWidth: 640 });
- const navItems = () => pages.map((page, index) => (
+ const navItems = () => pages.map((page) => (
@@ -69,10 +72,9 @@ SideNav.propTypes = {
PropTypes.shape({
label: PropTypes.string.isRequired,
current: PropTypes.bool.isRequired,
- state: PropTypes.string.isRequired,
+ state: PropTypes.string,
}),
).isRequired,
- onNavigation: PropTypes.func.isRequired,
skipTo: PropTypes.string.isRequired,
skipToMessage: PropTypes.string.isRequired,
};
diff --git a/frontend/src/components/Navigator/components/__tests__/Form.js b/frontend/src/components/Navigator/components/__tests__/Form.js
index 1b59129a9f..73d9c8af61 100644
--- a/frontend/src/components/Navigator/components/__tests__/Form.js
+++ b/frontend/src/components/Navigator/components/__tests__/Form.js
@@ -5,10 +5,10 @@ import { render, screen, act } from '@testing-library/react';
import Form from '../Form';
-const renderForm = (saveForm, onSubmit, onDirty) => render(
+const renderForm = (saveForm, onContinue, onDirty) => render(