Migrate ProjectUsers components to testing-library (#3935)

Author: imnasnainaec

src/components/Buttons/DeleteButtonWithDialog.tsx

@@ -1,7 +1,7 @@
 import { Delete } from "@mui/icons-material";
 import { ReactElement, useState } from "react";
 
-import { IconButtonWithTooltip } from "components/Buttons";
+import IconButtonWithTooltip from "components/Buttons/IconButtonWithTooltip";
 import { CancelConfirmDialog } from "components/Dialogs";
 
 interface DeleteButtonWithDialogProps {

src/components/Buttons/FlagButton.tsx

@@ -2,7 +2,7 @@ import { Flag as FlagFilled, FlagOutlined } from "@mui/icons-material";
 import { Fragment, type ReactElement, useEffect, useState } from "react";
 
 import { type Flag } from "api/models";
-import { IconButtonWithTooltip } from "components/Buttons";
+import IconButtonWithTooltip from "components/Buttons/IconButtonWithTooltip";
 import { DeleteEditTextDialog } from "components/Dialogs";
 
 interface FlagButtonProps {

src/components/Dialogs/DeleteEditTextDialog.tsx

@@ -120,11 +120,11 @@ export default function DeleteEditTextDialog(
         <NormalizedTextField
           variant="standard"
           autoFocus
-          data-testid={props.textFieldId}
           value={text}
           onChange={(event) => setText(event.target.value)}
           onKeyPress={confirmIfEnter}
           InputProps={{ endAdornment }}
+          inputProps={{ "data-testid": props.textFieldId }}
           id={props.textFieldId}
         />
       </DialogContent>

src/components/Dialogs/EditTextDialog.tsx

@@ -98,11 +98,11 @@ export default function EditTextDialog(
         <NormalizedTextField
           variant="standard"
           autoFocus
-          data-testid={props.textFieldId}
           value={text}
           onChange={(event) => setText(event.target.value)}
           onKeyPress={confirmIfEnter}
           InputProps={{ endAdornment }}
+          inputProps={{ "data-testid": props.textFieldId }}
           id={props.textFieldId}
         />
       </DialogContent>

src/components/Dialogs/SubmitTextDialog.tsx

@@ -87,11 +87,11 @@ export default function SubmitTextDialog(
         <NormalizedTextField
           variant="standard"
           autoFocus
-          data-testid={props.textFieldId}
           value={text}
           onChange={(event) => setText(event.target.value)}
           onKeyPress={confirmIfEnter}
           InputProps={{ endAdornment }}
+          inputProps={{ "data-testid": props.textFieldId }}
           id={props.textFieldId}
         />
       </DialogContent>

src/components/ProjectUsers/EmailInvite.tsx

@@ -10,6 +10,14 @@ import { getProjectId } from "backend/localStorage";
 import { LoadingDoneButton } from "components/Buttons";
 import { NormalizedTextField } from "utilities/fontComponents";
 
+export enum EmailInviteTextId {
+  ButtonSubmit = "buttons.invite",
+  TextFieldEmail = "projectSettings.invite.emailLabel",
+  TextFieldMessage = "projectSettings.invite.emailMessage",
+  ToastUserExists = "projectSettings.invite.userExists",
+  TypographyTitle = "projectSettings.invite.inviteByEmailLabel",
+}
+
 interface InviteProps {
   addToProject: (userId: string) => void;
   close: () => void;
@@ -35,7 +43,7 @@ export default function EmailInvite(props: InviteProps): ReactElement {
       );
     } else {
       props.addToProject(await backend.getUserIdByEmailOrUsername(email));
-      toast.info(t("projectSettings.invite.userExists"));
+      toast.info(t(EmailInviteTextId.ToastUserExists));
     }
     setIsDone(true);
     setIsLoading(false);
@@ -51,15 +59,15 @@ export default function EmailInvite(props: InviteProps): ReactElement {
       <Stack alignContent="center" spacing={2}>
         {/* Title */}
         <Typography variant="h5" align="center">
-          {t("projectSettings.invite.inviteByEmailLabel")}
+          {t(EmailInviteTextId.TypographyTitle)}
         </Typography>
 
         {/* Email address input */}
         <NormalizedTextField
           autoFocus
           fullWidth
           id="project-user-invite-email"
-          label={t("projectSettings.invite.emailLabel")}
+          label={t(EmailInviteTextId.TextFieldEmail)}
           onChange={(e) => setEmail(e.target.value)}
           required
           slotProps={{ htmlInput: { maxLength: 320 } }}
@@ -69,7 +77,7 @@ export default function EmailInvite(props: InviteProps): ReactElement {
         <NormalizedTextField
           fullWidth
           id="project-user-invite-message"
-          label={t("projectSettings.invite.emailMessage")}
+          label={t(EmailInviteTextId.TextFieldMessage)}
           onChange={(e) => setMessage(e.target.value)}
           slotProps={{ htmlInput: { maxLength: 10000 } }}
         />
@@ -86,7 +94,7 @@ export default function EmailInvite(props: InviteProps): ReactElement {
               variant: "contained",
             }}
           >
-            {t("buttons.invite")}
+            {t(EmailInviteTextId.ButtonSubmit)}
           </LoadingDoneButton>
         </Grid2>
       </Stack>

src/components/ProjectUsers/tests/EmailInvite.test.tsx

@@ -1,7 +1,11 @@
-import renderer from "react-test-renderer";
+import "@testing-library/jest-dom";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-import { LoadingDoneButton } from "components/Buttons";
-import EmailInvite from "components/ProjectUsers/EmailInvite";
+import MockBypassLoadableButton from "components/Buttons/LoadingDoneButton";
+import EmailInvite, {
+  EmailInviteTextId,
+} from "components/ProjectUsers/EmailInvite";
 
 jest.mock("backend", () => ({
   emailInviteToProject: () => mockEmailInviteToProject(),
@@ -12,51 +16,64 @@ jest.mock("backend", () => ({
 jest.mock("backend/localStorage", () => ({
   getProjectId: () => "mockId",
 }));
+jest.mock("components/Buttons", () => ({
+  LoadingDoneButton: MockBypassLoadableButton,
+}));
 
 const mockAddToProject = jest.fn();
 const mockClose = jest.fn();
 const mockEmailInviteToProject = jest.fn();
 const mockIsEmailOrUsernameAvailable = jest.fn();
 
-let testRenderer: renderer.ReactTestRenderer;
-
 describe("EmailInvite", () => {
   beforeEach(() => {
     jest.resetAllMocks();
-    renderer.act(() => {
-      testRenderer = renderer.create(
-        <EmailInvite addToProject={mockAddToProject} close={mockClose} />
-      );
+    act(() => {
+      render(<EmailInvite addToProject={mockAddToProject} close={mockClose} />);
     });
   });
 
+  const typeEmail = async (email: string): Promise<void> =>
+    await userEvent.type(
+      screen.getByText(EmailInviteTextId.TextFieldEmail),
+      email
+    );
+
+  it("has disabled button with invalid email", async () => {
+    const button = screen.getByText(EmailInviteTextId.ButtonSubmit);
+    expect(button).toBeDisabled();
+
+    await typeEmail("not-valid@4");
+    expect(button).toBeDisabled();
+  });
+
+  it("has enabled button with valid email", async () => {
+    const button = screen.getByText(EmailInviteTextId.ButtonSubmit);
+    expect(button).toBeDisabled();
+
+    await typeEmail("[email protected]");
+    expect(button).toBeEnabled();
+  });
+
   it("closes after submit", async () => {
-    await renderer.act(async () => {
-      testRenderer.root
-        .findByType(LoadingDoneButton)
-        .props.buttonProps.onClick();
-    });
+    await typeEmail("[email protected]");
+    expect(mockClose).not.toHaveBeenCalled();
+    await userEvent.click(screen.getByText(EmailInviteTextId.ButtonSubmit));
     expect(mockClose).toHaveBeenCalledTimes(1);
   });
 
   it("adds user if already exists", async () => {
     mockIsEmailOrUsernameAvailable.mockResolvedValueOnce(false);
-    await renderer.act(async () => {
-      testRenderer.root
-        .findByType(LoadingDoneButton)
-        .props.buttonProps.onClick();
-    });
+    await typeEmail("[email protected]");
+    await userEvent.click(screen.getByText(EmailInviteTextId.ButtonSubmit));
     expect(mockAddToProject).toHaveBeenCalledTimes(1);
     expect(mockEmailInviteToProject).not.toHaveBeenCalled();
   });
 
   it("invite user if doesn't exists", async () => {
     mockIsEmailOrUsernameAvailable.mockResolvedValueOnce(true);
-    await renderer.act(async () => {
-      testRenderer.root
-        .findByType(LoadingDoneButton)
-        .props.buttonProps.onClick();
-    });
+    await typeEmail("[email protected]");
+    await userEvent.click(screen.getByText(EmailInviteTextId.ButtonSubmit));
     expect(mockAddToProject).not.toHaveBeenCalled();
     expect(mockEmailInviteToProject).toHaveBeenCalledTimes(1);
   });

src/components/ProjectUsers/tests/ProjectSpeakersList.test.tsx

@@ -1,17 +1,12 @@
-import renderer from "react-test-renderer";
+import "@testing-library/jest-dom";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import ProjectSpeakersList, {
-  AddSpeakerListItem,
   ProjectSpeakersId,
-  SpeakerListItem,
 } from "components/ProjectUsers/ProjectSpeakersList";
 import { randomSpeaker } from "types/project";
 
-// Dialog uses portals, which are not supported in react-test-renderer.
-jest.mock("@mui/material/Dialog", () =>
-  jest.requireActual("@mui/material/Container")
-);
-
 jest.mock("backend", () => ({
   createSpeaker: (name: string, projectId?: string) =>
     mockCreateSpeaker(name, projectId),
@@ -21,8 +16,7 @@ jest.mock("backend", () => ({
   updateSpeakerName: (speakerId: string, name: string, projectId?: string) =>
     mockUpdateSpeakerName(speakerId, name, projectId),
 }));
-// Mock "i18n", else `Error: connect ECONNREFUSED ::1:80`
-jest.mock("i18n", () => ({}));
+jest.mock("i18n", () => ({})); // else `thrown: "Error: AggregateError`
 
 const mockCreateSpeaker = jest.fn();
 const mockDeleteSpeaker = jest.fn();
@@ -32,13 +26,9 @@ const mockUpdateSpeakerName = jest.fn();
 const mockProjId = "mock-project-id";
 const mockSpeakers = [randomSpeaker(), randomSpeaker(), randomSpeaker()];
 
-let testRenderer: renderer.ReactTestRenderer;
-
-const renderProjectSpeakersList = async (
-  projId = mockProjId
-): Promise<void> => {
-  await renderer.act(async () => {
-    testRenderer = renderer.create(<ProjectSpeakersList projectId={projId} />);
+const renderProjectSpeakersList = async (): Promise<void> => {
+  await act(async () => {
+    render(<ProjectSpeakersList projectId={mockProjId} />);
   });
 };
 
@@ -50,93 +40,66 @@ beforeEach(() => {
 });
 
 describe("ProjectSpeakersList", () => {
-  it("shows right number of speakers and an item to add a speaker", async () => {
+  it("shows list item for each speakers, +1 for add-a-speaker", async () => {
     await renderProjectSpeakersList();
-    expect(testRenderer.root.findAllByType(SpeakerListItem)).toHaveLength(
-      mockSpeakers.length
+    expect(screen.queryAllByRole("listitem")).toHaveLength(
+      mockSpeakers.length + 1
     );
-    expect(testRenderer.root.findByType(AddSpeakerListItem)).toBeTruthy();
   });
 
   it("updates speaker name if changed", async () => {
     await renderProjectSpeakersList();
+    const speaker = mockSpeakers[0];
 
     // Click the button to edit speaker
-    const editButton = testRenderer.root.findByProps({
-      id: `${ProjectSpeakersId.ButtonEditPrefix}${mockSpeakers[0].id}`,
-    });
-    await renderer.act(() => {
-      editButton.props.onClick();
-    });
-
-    // Submit the current name with extra whitespace
-    const mockEvent = {
-      preventDefault: jest.fn(),
-      target: { value: `\t\t${mockSpeakers[0].name} ` },
-    };
-    await renderer.act(() => {
-      testRenderer.root
-        .findByProps({ id: ProjectSpeakersId.TextFieldEdit })
-        .props.onChange(mockEvent);
-    });
-    await renderer.act(() => {
-      testRenderer.root
-        .findByProps({ id: ProjectSpeakersId.ButtonEditConfirm })
-        .props.onClick();
-    });
+    const editButton = screen.getByTestId(
+      `${ProjectSpeakersId.ButtonEditPrefix}${speaker.id}`
+    );
+    await userEvent.click(editButton);
+
+    // Add whitespace to the current name
+    await userEvent.type(
+      screen.getByTestId(ProjectSpeakersId.TextFieldEdit),
+      "  "
+    );
+    await userEvent.click(
+      screen.getByTestId(ProjectSpeakersId.ButtonEditConfirm)
+    );
 
     // Ensure no name update was submitted
     expect(mockUpdateSpeakerName).not.toHaveBeenCalled();
 
     // Click the button to edit speaker
-    await renderer.act(() => {
-      editButton.props.onClick();
-    });
-
-    // Submit a new name
-    const name = "Mr. Different";
-    mockEvent.target.value = name;
-    await renderer.act(() => {
-      testRenderer.root
-        .findByProps({ id: ProjectSpeakersId.TextFieldEdit })
-        .props.onChange(mockEvent);
-    });
-    await renderer.act(() => {
-      testRenderer.root
-        .findByProps({ id: ProjectSpeakersId.ButtonEditConfirm })
-        .props.onClick();
-    });
+    await userEvent.click(editButton);
+
+    // Add non-whitespace
+    await userEvent.type(
+      screen.getByTestId(ProjectSpeakersId.TextFieldEdit),
+      "!"
+    );
+    await userEvent.click(
+      screen.getByTestId(ProjectSpeakersId.ButtonEditConfirm)
+    );
 
     // Ensure the name update was submitted
-    expect(mockUpdateSpeakerName.mock.calls[0][1]).toEqual(name);
+    expect(mockUpdateSpeakerName.mock.calls[0][1]).toEqual(`${speaker.name}!`);
   });
 
   it("trims whitespace when adding a speaker", async () => {
     await renderProjectSpeakersList();
 
     // Click the button to add a speaker
-    await renderer.act(() => {
-      testRenderer.root
-        .findByProps({ id: ProjectSpeakersId.ButtonAdd })
-        .props.onClick();
-    });
+    await userEvent.click(screen.getByTestId(ProjectSpeakersId.ButtonAdd));
 
     // Submit the name of the speaker with extra whitespace
     const name = "Ms. Nym";
-    const mockEvent = {
-      preventDefault: jest.fn(),
-      target: { value: ` ${name}\t ` },
-    };
-    await renderer.act(() => {
-      testRenderer.root
-        .findByProps({ id: ProjectSpeakersId.TextFieldAdd })
-        .props.onChange(mockEvent);
-    });
-    await renderer.act(() => {
-      testRenderer.root
-        .findByProps({ id: ProjectSpeakersId.ButtonAddConfirm })
-        .props.onClick();
-    });
+    await userEvent.type(
+      screen.getByTestId(ProjectSpeakersId.TextFieldAdd),
+      ` ${name}\t `
+    );
+    await userEvent.click(
+      screen.getByTestId(ProjectSpeakersId.ButtonAddConfirm)
+    );
 
     // Ensure new speaker was submitted with trimmed name
     expect(mockCreateSpeaker.mock.calls[0][0]).toEqual(name);