Chal 16 (#27)

* CHAL-16: Fixed page height

* CHAL-16: Fixed page height

* final update

* removed the page container test

* Adding take challenge button

* Take the Challenge styled correctly, and added test

* removed line 5 queryAllByRole

* Removed unused data-testid prop from PageContainer and updated snapshots

src/__tests__/unit/app/__snapshots__/not-found.snapshot.tsx.snap

@@ -4,7 +4,6 @@ exports[`Not Found renders 404 page 1`] = `
 <div>
   <div
     class="outer_container"
-    data-testid="page-container"
   >
     <div
       class="inner_container"

src/__tests__/unit/app/__snapshots__/page.snapshot.tsx.snap

@@ -43,9 +43,11 @@ exports[`Home renders homepage unchanged 1`] = `
             </u>
           </h1>
           <button
-            class="challenge_btn"
+            class="gradient lg wide challenge_btn"
           >
-            Take the Challenge
+            <span>
+              Take the Challenge
+            </span>
           </button>
           <a
             class="link"
@@ -292,9 +294,11 @@ exports[`Home renders homepage unchanged 1`] = `
            and registering 8 of their friends to vote in 8 days.
         </h2>
         <button
-          class="btn_gradient btn_wide btn_lg"
+          class="gradient lg wide"
         >
-          Take the Challenge
+          <span>
+            Take the Challenge
+          </span>
         </button>
         <div
           class="content_container"

src/__tests__/unit/app/page.snapshot.tsx

@@ -2,6 +2,13 @@ import { render, cleanup } from '@testing-library/react';
 import { mockDialogMethods } from '@/utils/test/mock-dialog-methods';
 import Home from '@/app/page';
 
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    prefetch: jest.fn(),
+    push: jest.fn(),
+  }),
+}));
+
 describe('Home', () => {
   mockDialogMethods();
   afterEach(cleanup);

src/__tests__/unit/app/page.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent, { type UserEvent } from '@testing-library/user-event';
+import { mockDialogMethods } from '@/utils/test/mock-dialog-methods';
+import navigation from 'next/navigation';
+import { Builder } from 'builder-pattern';
+import { useRouter } from 'next/navigation';
+import Home from '@/app/page';
+import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+}));
+
+describe('Home Page', () => {
+  mockDialogMethods();
+  let router: AppRouterInstance;
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+    router = Builder<AppRouterInstance>()
+      .push(jest.fn())
+      .prefetch(jest.fn())
+      .build();
+    jest.spyOn(navigation, 'useRouter').mockImplementation(() => router);
+  });
+
+  afterEach(cleanup);
+
+  it('navigates to /challengerwelcome when the challenge button is clicked.', async () => {
+    render(<Home />);
+    const challengeButtons = screen.getAllByRole('button', {
+      name: /Take the Challenge/i,
+    });
+    for (const button of challengeButtons) {
+      await user.click(button);
+    }
+    expect(router.push).toHaveBeenCalledTimes(2);
+    expect(router.push).toHaveBeenNthCalledWith(1, '/challengerwelcome');
+    expect(router.push).toHaveBeenNthCalledWith(2, '/challengerwelcome');
+  });
+});

src/__tests__/unit/app/signin/page.test.tsx

@@ -82,7 +82,6 @@ describe('SignInPage', () => {
       });
     });
   });
-
   it(`calls sendOTPToEmail when the form is submitted via keyboard 
   input.`, async () => {
     process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY =

src/app/page.tsx

@@ -1,6 +1,10 @@
+'use client';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 import { PageContainer } from '@/components/utils/page-container';
+import { Button } from '@/components/utils/button';
 import logo from '../../public/static/images/shared/8by8-logo.svg';
 import yellowCurve from '../../public/static/images/pages/home/yellow-curve.svg';
 import tealCurve from '../../public/static/images/pages/home/teal-curve.svg';
@@ -13,6 +17,12 @@ import speakerWithMicAndSign from '../../public/static/images/pages/home/speaker
 import styles from './styles.module.scss';
 
 export default function Home() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.prefetch('/challengerwelcome');
+  }, [router]);
+
   return (
     <PageContainer>
       <section className={styles.section_1}>
@@ -22,7 +32,13 @@ export default function Home() {
             GET <u className="underline">8 AAPI FRIENDS</u> TO REGISTER TO VOTE
             IN <u className="underline">8 DAYS</u>
           </h1>
-          <button className={styles.challenge_btn}>Take the Challenge</button>
+          <Button
+            onClick={() => router.push('/challengerwelcome')}
+            className={styles.challenge_btn}
+            wide
+          >
+            Take the Challenge
+          </Button>
           <Link href="/why8by8" className={styles.link}>
             See why others are doing it
           </Link>
@@ -130,9 +146,9 @@ export default function Home() {
           <u className="underline">taking the #8by8challenge</u> and registering
           8 of their friends to vote in 8 days.
         </h2>
-        <button className="btn_gradient btn_wide btn_lg">
+        <Button onClick={() => router.push('/challengerwelcome')} wide>
           Take the Challenge
-        </button>
+        </Button>
         <div className={styles.content_container}>
           <p className="b2 color_white">
             The 8by8 mission aims to build civic participation and bring

src/app/signin/page.tsx

@@ -22,7 +22,6 @@ function SignIn() {
   const { sendOTPToEmail } = useContextSafely(UserContext, 'SignIn');
   const { showAlert } = useContextSafely(AlertsContext, 'SignIn');
   const [isLoading, setIsLoading] = useState(false);
-
   const onSubmit: FormEventHandler = async e => {
     e.preventDefault();
     if (isLoading) return;

src/app/styles.module.scss

@@ -71,9 +71,6 @@
     }
 
     .challenge_btn {
-      @extend .btn_gradient;
-      @extend .btn_lg;
-      @extend .btn_wide;
       margin: 50px 0;
     }