routing tests #1249

products/statement-generator/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+ testEnvironment: 'jsdom',
+ setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
+};

products/statement-generator/src/App.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import {
+ BrowserRouter as Router,
+ Route,
+ Switch,
+ useLocation,
+} from 'react-router-dom';
 import { ThemeProvider } from '@material-ui/core/styles';
 
 import { RoutingContextProvider } from 'contexts/RoutingContext';
@@ -46,6 +51,12 @@ import customMuiTheme from 'styles/customMuiTheme';
 import { useTranslation } from 'react-i18next';
 import ScrollToTop from './components-layout/ScrollToTop';
 
+export const LocationDisplay = () => {
+ const location = useLocation();
+
+ return <div data-testid="location-display">{location.pathname}</div>;
+};
+
 const App: React.FC = () => {
  const { i18n } = useTranslation();
 
@@ -187,6 +198,7 @@ const App: React.FC = () => {
  </Switch>
  <AppFooter />
  </PageContainer>
+ <LocationDisplay />
  </FormStateContextProvider>
  </AffirmationContextProvider>
  </RoutingContextProvider>

products/statement-generator/src/components/Button.tsx

@@ -186,18 +186,25 @@ interface ILinkButtonComponent {
  theme?: string;
  buttonText: string;
  to: string;
+ dataTestid?: string;
 }
 
 export function LinkButtonComponent({
  className = '',
  theme,
  buttonText,
  to,
+ dataTestid,
 }: ILinkButtonComponent) {
  const styleProps = { theme };
  const classes = useStyles(styleProps);
  return (
- <Link type="button" className={`${classes.root} ${className}`} to={to!}>
+ <Link
+ type="button"
+ className={`${classes.root} ${className}`}
+ to={to!}
+ data-testid={dataTestid}
+ >
  {buttonText}
  </Link>
  );

products/statement-generator/src/components/TextPreview.tsx

@@ -59,14 +59,10 @@ interface ComponentProps {
 }
 
 const TextPreview = forwardRef<HTMLDivElement, ComponentProps>(
- ({
- onSaveClick,
- content,
- nameOfStep,
- className = '',
- style,
- isFirstPreview,
- }) => {
+ (
+ { onSaveClick, content, nameOfStep, className = '', style, isFirstPreview },
+ ref
+ ) => {
  const classes = useStyles();
  const utilityClasses = useUtilityStyles();
  const [isEditing, setIsEditing] = useState<boolean>(false);

products/statement-generator/src/pages/Landing.tsx

@@ -267,6 +267,7 @@ function LandingSection1() {
  <LinkButtonComponent
  to={AppUrl.Welcome}
  buttonText={t('button.startNow')}
+ dataTestid="start-now-button"
  />
  </div>
  </div>

products/statement-generator/src/tests/routing.test.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MemoryRouter as Router } from 'react-router-dom';
+import App, { LocationDisplay } from '../App';
+
+describe('Routing Tests', () => {
+ // mock the scrollTo component
+ beforeEach(() => {
+ window.scrollTo = jest.fn();
+ });
+
+ console.warn = jest.fn();
+
+ test('it can render a component that uses useLocation', () => {
+ const route = '/';
+
+ // using <MemoryRouter> when you want to manually control the history
+ render(
+ <Router initialEntries={[route]}>
+ <LocationDisplay />
+ </Router>
+ );
+
+ // to verify location display is rendered
+ expect(screen.getByTestId('location-display')).toHaveTextContent(route);
+ });
+
+ test('the static pre-form pages route correctly', async () => {
+ render(<App />, { wrapper: Router });
+
+ // tests that the start now button the landing page navigates to welcome
+ const startNowButton = screen.getByTestId('start-now-button');
+ fireEvent.click(startNowButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/welcome'
+ );
+
+ // tests that the welcome page navigates to BYB
+ const welcomeNextButton = screen.getByText(/next/i);
+ fireEvent.click(welcomeNextButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/before-you-begin'
+ );
+
+ // tests that the BYB navigates to advice
+ const bybNextButton = screen.getByText(/next/i);
+ fireEvent.click(bybNextButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent('/advice');
+
+ // tests that the advice page navigates to intro
+ const adviceNextButton = screen.getByText(/next/i);
+ fireEvent.click(adviceNextButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent('/intro');
+
+ // tests that intro page navigates to intro preview
+ const fullNameInput = screen.getByPlaceholderText(
+ 'introduction_form.fullName_input_placeholder'
+ );
+ const ageInput = screen.getByPlaceholderText('0');
+ const radioButtons = screen.getAllByRole('radio');
+
+ fireEvent.change(fullNameInput, { target: { value: 'John Doe' } });
+ fireEvent.change(ageInput, { target: { value: 30 } });
+ fireEvent.click(radioButtons[0]);
+
+ const introNextButton = screen.getByText(/next/i);
+ fireEvent.click(introNextButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/introduction/preview'
+ );
+
+ // tests that the intro preview navigates to involvement
+ const introPreview = screen.getByText(/next/i);
+ expect(introPreview).toBeInTheDocument();
+ fireEvent.click(introPreview);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/involvement'
+ );
+
+ const popupButton = screen.getByText(/continue/i);
+ fireEvent.click(popupButton);
+
+ // tests that the involvement page navigates to future goals
+ const jobCheckbox = screen.getByLabelText(/job/i);
+ fireEvent.click(jobCheckbox);
+ const involvementNext = screen.getByText(/next/i);
+ fireEvent.click(involvementNext);
+ expect(screen.getByTestId('location-display')).toHaveTextContent('/job');
+
+ // tests that the involvement page navigates to employment
+ const companyName = screen.getByPlaceholderText(
+ 'job_form.companyName_input_placeholder'
+ );
+ const currentJob = screen.getByPlaceholderText(
+ 'job_form.jobTitle_input_placeholder'
+ );
+ const jobExplanation = screen.getByPlaceholderText(
+ 'job_form.jobDescription_input_placeholder'
+ );
+
+ fireEvent.change(companyName, { target: { value: 'Company' } });
+ fireEvent.change(currentJob, { target: { value: 'Job Title' } });
+ fireEvent.change(jobExplanation, {
+ target: { value: 'This is a job description' },
+ });
+
+ const jobNext = screen.getByText(/next/i);
+ fireEvent.click(jobNext);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/job/preview'
+ );
+
+ // tests that the involvement second step navigates to goals
+ const secondInvolvementButton = screen.getByText(/next/i);
+ fireEvent.click(secondInvolvementButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent('/goals');
+
+ const involvementPopupButton = screen.getByText(/continue/i);
+ fireEvent.click(involvementPopupButton);
+
+ // tests that future goals navigates to goals preview
+ const goals = screen.getByPlaceholderText(
+ 'goals_form.goals_input_placeholder'
+ );
+ const steps = screen.getByPlaceholderText(
+ 'goals_form.goalsHow_input_placeholder'
+ );
+
+ fireEvent.change(goals, { target: { value: 'Goals' } });
+ fireEvent.change(steps, { target: { value: 'Steps' } });
+
+ const goalsButton = screen.getByText(/next/i);
+ fireEvent.click(goalsButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/goals/preview'
+ );
+
+ // tests goals preview navigates to why
+ const goalsPreviewButton = screen.getByText(/next/i);
+ fireEvent.click(goalsPreviewButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent('/why');
+
+ const whyPopupButton = screen.getByText(/continue/i);
+ fireEvent.click(whyPopupButton);
+
+ // tests why navigates to
+ const whyClear = screen.getByPlaceholderText(
+ 'why_form.clearRecordWhy_input_placeholder'
+ );
+ const clearHow = screen.getByPlaceholderText(
+ 'why_form.clearRecordHow_input_placeholder'
+ );
+
+ fireEvent.change(whyClear, { target: { value: 'The why' } });
+ fireEvent.change(clearHow, { target: { value: 'The how' } });
+
+ const whyButton = screen.getByText(/next/i);
+ fireEvent.click(whyButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/why/preview'
+ );
+
+ // tests why preview navigates to finalize
+ const whyPreviewButton = screen.getByText(/next/i);
+ fireEvent.click(whyPreviewButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/finalize'
+ );
+
+ // tests finalize navigates to finalize preview
+ const finalizeButton = screen.getByText(/next/i);
+ fireEvent.click(finalizeButton);
+ expect(screen.getByTestId('location-display')).toHaveTextContent(
+ '/finalize/preview'
+ );
+ });
+});

products/statement-generator/src/tests/setupTests.ts

@@ -0,0 +1,13 @@
+require('canvas');
+
+// jest.mock('canvas', () => {
+// return class {
+// getContext() {
+// return {
+// fillRect: () => {}, // Add basic methods as needed
+// };
+// }
+// };
+// });
+
+// jest.mock('console', () => ({ warn: jest.fn() }));