({
+ useRouter: () => ({
+ prefetch: jest.fn(),
+ push: jest.fn(),
+ }),
+}));
+
describe('Home', () => {
mockDialogMethods();
afterEach(cleanup);
diff --git a/src/__tests__/unit/app/page.test.tsx b/src/__tests__/unit/app/page.test.tsx
new file mode 100644
index 00000000..863bad59
--- /dev/null
+++ b/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
()
+ .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();
+ 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');
+ });
+});
diff --git a/src/__tests__/unit/app/signin/page.test.tsx b/src/__tests__/unit/app/signin/page.test.tsx
index 8f6de39f..f690925a 100644
--- a/src/__tests__/unit/app/signin/page.test.tsx
+++ b/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 =
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6fe0c599..f7447b98 100644
--- a/src/app/page.tsx
+++ b/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 (
@@ -22,7 +32,13 @@ export default function Home() {
GET 8 AAPI FRIENDS TO REGISTER TO VOTE
IN 8 DAYS
-
+
See why others are doing it
@@ -130,9 +146,9 @@ export default function Home() {
taking the #8by8challenge and registering
8 of their friends to vote in 8 days.
-
The 8by8 mission aims to build civic participation and bring
diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx
index 16e5a999..047d8f1c 100644
--- a/src/app/signin/page.tsx
+++ b/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;
diff --git a/src/app/styles.module.scss b/src/app/styles.module.scss
index b7d22c03..e207c38e 100644
--- a/src/app/styles.module.scss
+++ b/src/app/styles.module.scss
@@ -71,9 +71,6 @@
}
.challenge_btn {
- @extend .btn_gradient;
- @extend .btn_lg;
- @extend .btn_wide;
margin: 50px 0;
}