Merge pull request #1585 from hackforla/dev

Dev

products/statement-generator/jest.config

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

products/statement-generator/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
+    "canvas": "^2.11.2",
     "docx": "^8.0.4",
     "file-saver": "^2.0.5",
     "gh-pages": "^5.0.0",
@@ -64,6 +65,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.9.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "eslint": "^7.15.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^9.1.0",

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-layout/Affirmation.tsx

@@ -49,9 +49,8 @@ const Affirmation = () => {
   const { updateStepToForm } = useContext(FormStateContext);
   const history = useHistory();
   const { t } = useTranslation();
-  const { affirmationData, updateAffirmationData } = useContext(
-    AffirmationContext
-  );
+  const { affirmationData, updateAffirmationData } =
+    useContext(AffirmationContext);
   const returnHome = () => {
     const path = AppUrl.Landing;
     updateAffirmationData({ isActive: false });

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/components/Textarea.tsx

@@ -119,7 +119,7 @@ const MultilineTextFields = React.forwardRef<HTMLDivElement, TextFieldProps>(
           defaultValue={defaultValue}
           disabled={disabled}
           value={value}
-          rows={rows}
+          minRows={rows}
           multiline
           fullWidth
           variant="outlined"

products/statement-generator/src/pages-form/InvolvementCommunityServiceFlow.tsx

@@ -19,10 +19,8 @@ import Input from '../components/Input';
 function InvolvementCommunityServiceFlow() {
   const { t } = useTranslation();
   const { formState, updateStepToForm } = useContext(FormStateContext);
-  const {
-    organizationName,
-    serviceDescription,
-  } = formState.communityServiceState;
+  const { organizationName, serviceDescription } =
+    formState.communityServiceState;
 
   const organizationNameValid = organizationName !== '';
   const serviceDescriptionValid = serviceDescription !== '';

products/statement-generator/src/pages-form/InvolvementJobFlow.tsx

@@ -18,11 +18,8 @@ import {
 function InvolvementJobFlow() {
   const { t } = useTranslation();
   const { formState, updateStepToForm } = useContext(FormStateContext);
-  const {
-    companyName,
-    jobTitle,
-    jobDescription,
-  } = formState.involvementJobState;
+  const { companyName, jobTitle, jobDescription } =
+    formState.involvementJobState;
 
   const companyNameValid = companyName !== '';
   const jobTitleValid = jobTitle !== '';

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

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

products/statement-generator/src/styles/customMuiTheme.ts

@@ -1,9 +1,9 @@
-import { createMuiTheme } from '@material-ui/core';
+import { createTheme } from '@material-ui/core';
 
 /**
  * @link https://v4.mui.com/customization/theming/
  */
-const customMuiTheme = createMuiTheme({
+const customMuiTheme = createTheme({
   globals: {
     contentWidth: 600,
     wideWidth: 960,

products/statement-generator/src/tests/routing.tests.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'
+    );
+  });
+});