Merge branch 'next-js-merge-branch' of https://github.com/CaptainExtr…

…emis/web-app-branch1 into next-js-merge-branch

package.json

@@ -33,6 +33,7 @@
     "@types/jest": "^29.5.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "next-router-mock": "^0.9.7",
     "sass": "^1.62.0"
   }
 }

src/__tests__/contexts/inviter-context.spec.tsx

@@ -0,0 +1,24 @@
+import { InviterContext, InviterContextProvider } from '@/contexts/inviter-context';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+
+function MockChildComponent() {
+  const {inviterInfo} = useContext(InviterContext);
+  return (
+    <div data-testid="test">{inviterInfo ? inviterInfo.name : "your friend"}</div>
+  );
+}
+
+describe('UserContextProvider', () => {
+  afterEach(cleanup);
+  it('defaults to an inviterInfo value of null.', () => {
+    render(
+    <InviterContextProvider>
+      <MockChildComponent />
+    </InviterContextProvider>
+    );
+    const noInviter = screen.queryByTestId('test');
+    expect(noInviter).toHaveTextContent('your friend');
+  });
+});

src/__tests__/pages/__snapshots__/playerwelcome.snapshot.tsx.snap

@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PlayerWelcome renders player-welcome page unchanged 1`] = `
+<div>
+  <div
+    class="outer_container"
+  >
+    <div
+      class="inner_container"
+    >
+      <section
+        class="section_1"
+      >
+        <h1
+          class="top_header"
+        >
+          <u
+            class="underline"
+          >
+            Support
+          </u>
+           
+          the
+           
+          8by8 Challenge!
+        </h1>
+        <p>
+          <b
+            class="content"
+          >
+            Help
+             
+            your friend
+             
+            win their 
+            <u>
+              8by8 Challenge
+            </u>
+             by registering to vote or taking other actions to #stopasianhate!
+          </b>
+        </p>
+        <button
+          class="get_started_btn"
+          type="button"
+        >
+          Get Started
+        </button>
+        <p
+          class="signin_line"
+        >
+          Already have an account?
+           
+          <a
+            class="teal_link"
+            href="/signin"
+          >
+            Sign In
+          </a>
+        </p>
+        <a
+          class="teal_link"
+          href="/why8by8"
+        >
+          See why others are doing it
+        </a>
+      </section>
+      <div
+        class="curve_container"
+      >
+        <img
+          alt="Black Curve"
+          class="black_curve"
+          data-nimg="1"
+          decoding="async"
+          draggable="false"
+          height="40"
+          id="black_curve"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+      </div>
+      <section
+        class="section_2"
+      >
+        <h2
+          class="underline"
+        >
+          Here's how it works
+        </h2>
+        <h3
+          class="step_header"
+        >
+          1. Choose an action to take
+        </h3>
+        <p
+          class="step_text"
+        >
+          You can take any number of the available actions: register to vote, get election reminders or take the 8by8 challenge yourself. Pick one to start.
+        </p>
+        <img
+          alt="Take Action"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          id="take_action"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <h3
+          class="step_header"
+        >
+          2. Your friend will earn a badge
+        </h3>
+        <p
+          class="step_text"
+        >
+          Any of the 3 actions will help your friend earn a badge and get closer to winning the challenge.
+        </p>
+        <img
+          alt="Friend Earns a Badge"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          id="earn_badge"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <h3
+          class="step_header"
+        >
+          3. Come back and take more actions
+        </h3>
+        <p
+          class="step_text"
+        >
+          Whether it is to help the same friend or a different one, the more actions you take, the better! Note that you can only help earn one badge per friend.
+        </p>
+        <img
+          alt="More Actions"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          id="more_actions"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <h3
+          class="step_header"
+        >
+          4. Get a Reward!
+        </h3>
+        <p
+          class="step_text"
+        >
+          When your friend wins the challenge within 8 days, you win as well! Then select and enjoy a reward from one of our amazing partners.
+        </p>
+        <img
+          alt="Get a Reward"
+          class="image"
+          data-nimg="1"
+          decoding="async"
+          height="40"
+          id="get_reward"
+          loading="lazy"
+          src="/_next/image?url=%2Fimg.jpg&w=96&q=75"
+          srcset="/_next/image?url=%2Fimg.jpg&w=48&q=75 1x, /_next/image?url=%2Fimg.jpg&w=96&q=75 2x"
+          style="color: transparent;"
+          width="40"
+        />
+        <button
+          class="get_started_btn"
+          type="button"
+        >
+          Get Started
+        </button>
+        <p
+          class="signin_line"
+        >
+          Already have an account?
+           
+          <a
+            class="signin_link_black"
+            href="/signin"
+          >
+            Sign In
+          </a>
+        </p>
+      </section>
+    </div>
+  </div>
+</div>
+`;

src/__tests__/pages/playerwelcome.snapshot.tsx

@@ -0,0 +1,17 @@
+import PlayerWelcome from '@/pages/player-welcome';
+import { cleanup, render } from '@testing-library/react';
+
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn()
+}))
+
+describe('PlayerWelcome', () => {
+  afterEach(cleanup);
+
+  it('renders player-welcome page unchanged', () => {
+    const { container } = render(<PlayerWelcome />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/__tests__/pages/playerwelcome.spec.tsx

@@ -0,0 +1,51 @@
+import { InviterContext, InviterContextType } from '@/contexts/inviter-context';
+import { Inviter } from '@/models/Inviter';
+import PlayerWelcome from '@/pages/player-welcome';
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Builder } from 'builder-pattern';
+import mockRouter from 'next-router-mock';
+import { useRouter } from 'next/router';
+
+jest.mock('next/router', () => require('next-router-mock'));
+
+describe('playerwelcome', () => {
+    afterEach(cleanup);
+    it('opens the actions page when the first button is clicked', async () => {
+      mockRouter.push("/initial-path");
+      const user = userEvent.setup();
+      render (
+        <PlayerWelcome />
+      );
+      const fgetStartedbtn = screen.getAllByRole('button')[0];
+      await user.click(fgetStartedbtn);
+      expect(mockRouter).toMatchObject({asPath: "/actions"});
+    });
+
+    it('opens the actions page when the second button is clicked', async () => {
+      mockRouter.push("/initial-path");
+      const user = userEvent.setup();
+      render (
+        <PlayerWelcome />
+      );
+      const fgetStartedbtn = screen.getAllByRole('button')[1];
+      await user.click(fgetStartedbtn); 
+      expect(mockRouter).toMatchObject({asPath: "/actions"});
+    });
+
+    it("Displays the inviter's name when inviterInfo is not null.", async () => {
+      const inviter = Builder<Inviter>().name('Test Name').build();
+      const inviterCtxValue = Builder<InviterContextType>().inviterInfo(inviter).build();
+      render(
+        <InviterContext.Provider value={inviterCtxValue}>
+          <PlayerWelcome />
+        </InviterContext.Provider>
+      );
+
+      const greeting = screen.queryByText(new RegExp(`${inviter.name}'s 8by8 Challenge!`));
+      expect(greeting).toBeInTheDocument();
+      const content = screen.queryByText(new RegExp(`Help ${inviter.name} win their`));
+      expect(content).toBeInTheDocument();
+    });
+  });

src/contexts/inviter-context.tsx

@@ -0,0 +1,17 @@
+import { Inviter } from "@/models/Inviter";
+import { createContext, PropsWithChildren, useState } from "react";
+
+export type InviterContextType = {
+  inviterInfo:InviterInfo;
+}
+
+type InviterInfo = Inviter | null;
+
+//setting the default context to {activeUser:null} allows for testing unwrapped components
+export const InviterContext = createContext<InviterContextType>({inviterInfo: null});
+
+export function InviterContextProvider({children}:PropsWithChildren) {
+  const [inviterInfo,setInviterInfo] = useState<InviterInfo>(null);
+  return <InviterContext.Provider value={{inviterInfo}}>{children}</InviterContext.Provider>
+}
+

src/models/Inviter.ts

@@ -0,0 +1,5 @@
+export type Inviter = {
+  name:string;
+  avatar:'1' | '2' | '3' | '4';
+  inviterId:string;
+}