upload tutorial

CDCgov · Nov 2, 2023 · ac0428e · ac0428e
1 parent b329bff
commit ac0428e
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 29 deletions.
diff --git a/front-end/app/upload_tutorial/page.tsx b/front-end/app/upload_tutorial/page.tsx
@@ -2,7 +2,7 @@
 import { ProcessList, ProcessListItem, ProcessListHeading, Button } from '@trussworks/react-uswds'
 import { useRouter } from 'next/navigation';
 
-export default function upload_tutorial() {
+export default function UploadTutorial() {
     const router = useRouter();
 
 
@@ -11,34 +11,36 @@ export default function upload_tutorial() {
     }
 
     return (
-        <div className="margin-3">
-            <h1 className="font-sans-2xl text-bold">eCR Viewer Tool</h1>
-            <h2 className="font-sans-lg text-light">Easily see only the information you need in an eCR</h2>
-            <ProcessList>
-                <ProcessListItem>
-                    <ProcessListHeading type="h4">Upload your eCR</ProcessListHeading>
-                    <p className="margin-top-05 font-sans-xs">
-                        We currently accept one .zip file at a time (bulk eCR upload coming soon).
-                    </p>
-                </ProcessListItem>
-                <ProcessListItem>
-                    <ProcessListHeading type="h4">
-                        See the progress of your eCR through our pipeline
-                    </ProcessListHeading>
-                    <p className="font-sans-xs">
-                        We process your eCR through our data ingestion pipeline, which standardizes, cleans, and geocodes the data.
-                    </p>
-                </ProcessListItem>
-                <ProcessListItem>
-                    <ProcessListHeading type="h4">
-                        View and download your transformed eCR data
-                    </ProcessListHeading>
-                    <p className="font-sans-xs">
-                        We provide the option to view your eCR directly in our tool or download the data as a JSON file.
-                    </p>
-                </ProcessListItem>
-            </ProcessList>
-            <Button type="button" onClick={handleClick}>Get Started</Button>
+        <div className="display-flex flex-justify-center margin-top-5">
+            <div>
+                <h1 className="font-sans-2xl text-bold">eCR Viewer Tool</h1>
+                <h2 className="font-sans-lg text-light">Easily see only the information you need in an eCR</h2>
+                <ProcessList>
+                    <ProcessListItem>
+                        <ProcessListHeading type="h4">Upload your eCR</ProcessListHeading>
+                        <p className="margin-top-05 font-sans-xs">
+                            We currently accept one .zip file at a time (bulk eCR upload coming soon).
+                        </p>
+                    </ProcessListItem>
+                    <ProcessListItem>
+                        <ProcessListHeading type="h4">
+                            See the progress of your eCR through our pipeline
+                        </ProcessListHeading>
+                        <p className="font-sans-xs">
+                            We process your eCR through our data ingestion pipeline, which standardizes, cleans, and geocodes the data.
+                        </p>
+                    </ProcessListItem>
+                    <ProcessListItem>
+                        <ProcessListHeading type="h4">
+                            View and download your transformed eCR data
+                        </ProcessListHeading>
+                        <p className="font-sans-xs">
+                            We provide the option to view your eCR directly in our tool or download the data as a JSON file.
+                        </p>
+                    </ProcessListItem>
+                </ProcessList>
+                <Button type="button" onClick={handleClick}>Get Started</Button>
+            </div>
         </div>
     )
 }
diff --git a/front-end/tests/tutorial.test.tsx b/front-end/tests/tutorial.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from '@testing-library/react';
+import UploadTutorial from "../app/upload_tutorial/page";
+import useRouter from 'next/navigation'
+
+// Mock the useRouter from 'next/navigation'
+jest.mock('next/navigation', () => ({
+    useRouter: () => ({
+        push: jest.fn(),
+    }),
+}));
+
+describe('UploadTutorial', () => {
+    it('renders the component', () => {
+        const { getByText } = render(<UploadTutorial />);
+        expect(getByText('eCR Viewer Tool')).toBeInTheDocument();
+        expect(getByText('Easily see only the information you need in an eCR')).toBeInTheDocument();
+    });
+
+    it('handles the "Get Started" button click', () => {
+        const { getByText } = render(<UploadTutorial />);
+        const button = getByText('Get Started');
+
+        // Simulate a button click
+        fireEvent.click(button);
+
+        // Expect that the router push function was called with the correct path
+        expect(require('next/navigation').useRouter().push).toHaveBeenCalledWith('/upload_file');
+    });
+});