test edit hours component

Author: winniecwng

src/app/(main)/my-voyage/[teamId]/directory/components/__tests__/EditHours.test.tsx

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+import { rootReducer } from "@/store/store";
+import { useUser } from "@/store/hooks";
+import { teamMemberData } from "@/app/(main)/my-voyage/[teamId]/directory/components/fixtures/TeamMember";
+import TeamMember from "@/app/(main)/my-voyage/[teamId]/directory/components/TeamMember";
+import TextInput from "@/components/inputs/TextInput";
+import Button from "@/components/Button";
+
+jest.mock("@/store/hooks", () => ({
+  useUser: jest.fn(),
+}));
+
+jest.mock(
+  "@/app/(main)/my-voyage/[teamId]/directory/components/EditHours",
+  () =>
+    function EditHoursMock() {
+      const [isEditing, setIsEditing] = useState(false);
+
+      return isEditing ? (
+        <TextInput
+          placeholder={`${teamMemberData.hrPerSprint}`}
+          defaultValue={`${teamMemberData.hrPerSprint}`}
+          id="avgHours"
+        />
+      ) : (
+        <Button
+          onClick={() => setIsEditing(true)}
+          aria-label="average hour per sprint"
+        >
+          {`${teamMemberData.hrPerSprint}`}
+        </Button>
+      );
+    },
+);
+
+const renderWithStore = (userId: number) => {
+  const store = configureStore({
+    reducer: rootReducer,
+  });
+
+  (useUser as jest.Mock).mockReturnValue({
+    voyageTeamMembers: [{ id: userId }],
+  });
+
+  return render(
+    <Provider store={store}>
+      <TeamMember teamMember={teamMemberData} />
+    </Provider>,
+  );
+};
+
+describe("Edit Hours Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("current user has a button to edit their hours", () => {
+    const screen = renderWithStore(20);
+
+    screen.debug();
+
+    const buttonAction = screen.queryByRole("button", {
+      name: "average hour per sprint",
+    });
+
+    expect(buttonAction).toBeInTheDocument();
+  });
+
+  it("current user can edit their hours", () => {
+    const screen = renderWithStore(20);
+
+    const buttonAction = screen.getByRole("button", {
+      name: "average hour per sprint",
+    });
+
+    fireEvent.click(buttonAction);
+
+    const textInputAction = screen.getByPlaceholderText("10");
+
+    // assert that the button is a textInput
+    expect(textInputAction).toBeInTheDocument();
+
+    fireEvent.change(textInputAction, { target: { value: "15" } });
+
+    // Assert that the input is edited to a new value
+    expect((textInputAction as HTMLInputElement).value).toBe("15");
+  });
+});

src/app/(main)/my-voyage/[teamId]/directory/components/__tests__/TeamMember.test.tsx

@@ -3,8 +3,7 @@ import { configureStore } from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
 import { rootReducer } from "@/store/store";
 import { useUser } from "@/store/hooks";
-import { teamMemberData } from "../fixtures/TeamMember";
-import { type VoyageTeam } from "@/store/features/directory/directorySlice";
+import { teamMemberData } from "@/app/(main)/my-voyage/[teamId]/directory/components/fixtures/TeamMember";
 import TeamMember from "@/app/(main)/my-voyage/[teamId]/directory/components/TeamMember";
 
 jest.mock("@/store/hooks", () => ({
@@ -23,7 +22,7 @@ jest.mock(
     },
 );
 
-const renderWithStore = (teamMember: VoyageTeam, userId: number) => {
+const renderWithStore = (userId: number) => {
   const store = configureStore({
     reducer: rootReducer,
   });
@@ -34,7 +33,7 @@ const renderWithStore = (teamMember: VoyageTeam, userId: number) => {
 
   return render(
     <Provider store={store}>
-      <TeamMember teamMember={teamMember} />
+      <TeamMember teamMember={teamMemberData} />
     </Provider>,
   );
 };
@@ -45,7 +44,7 @@ describe("Team Member Component", () => {
   });
 
   it("renders individual team data", () => {
-    const teamMember = renderWithStore(teamMemberData, 20);
+    const teamMember = renderWithStore(20);
 
     const name = teamMember.getByLabelText("Name");
     const discordID = teamMember.getByLabelText("Discord ID");
@@ -61,7 +60,7 @@ describe("Team Member Component", () => {
   });
 
   it("current user CANNOT input other id's average hour per sprint", () => {
-    const screen = renderWithStore(teamMemberData, 30);
+    const screen = renderWithStore(30);
 
     screen.debug();
 
@@ -71,16 +70,4 @@ describe("Team Member Component", () => {
 
     expect(buttonAction).not.toBeInTheDocument();
   });
-
-  it("current user can input their own id's average hour per sprint", () => {
-    const screen = renderWithStore(teamMemberData, 20);
-
-    screen.debug();
-
-    const buttonAction = screen.queryByRole("button", {
-      name: "average hour per sprint",
-    });
-
-    expect(buttonAction).toBeInTheDocument();
-  });
 });