From ac0428eb5ff4878f694c5fb3eae21c5df6e69a37 Mon Sep 17 00:00:00 2001
From: Kenneth Chow <kenneth@skylight.digital>
Date: Thu, 2 Nov 2023 12:22:57 -0500
Subject: [PATCH] upload tutorial

---
 front-end/app/upload_tutorial/page.tsx | 60 +++++++++++++-------------
 front-end/tests/tutorial.test.tsx      | 31 +++++++++++++
 2 files changed, 62 insertions(+), 29 deletions(-)
 create mode 100644 front-end/tests/tutorial.test.tsx

diff --git a/front-end/app/upload_tutorial/page.tsx b/front-end/app/upload_tutorial/page.tsx
index c0394a11..d6e5f154 100644
--- 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
new file mode 100644
index 00000000..a7d8ffd1
--- /dev/null
+++ 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');
+    });
+});
\ No newline at end of file