Migrate ProjectSettings components to testing-library (#3936)

Author: imnasnainaec

src/components/ProjectSettings/ProjectAutocomplete.tsx

@@ -6,6 +6,12 @@ import { useTranslation } from "react-i18next";
 import { OffOnSetting } from "api/models";
 import { type ProjectSettingProps } from "components/ProjectSettings/ProjectSettingsTypes";
 
+export enum ProjectAutocompleteTextId {
+  MenuItemOff = "projectSettings.autocomplete.off",
+  MenuItemOn = "projectSettings.autocomplete.on",
+  Tooltip = "projectSettings.autocomplete.hint",
+}
+
 export default function ProjectAutocomplete(
   props: ProjectSettingProps
 ): ReactElement {
@@ -27,15 +33,15 @@ export default function ProjectAutocomplete(
         }
       >
         <MenuItem value={OffOnSetting.Off}>
-          {t("projectSettings.autocomplete.off")}
+          {t(ProjectAutocompleteTextId.MenuItemOff)}
         </MenuItem>
         <MenuItem value={OffOnSetting.On}>
-          {t("projectSettings.autocomplete.on")}
+          {t(ProjectAutocompleteTextId.MenuItemOn)}
         </MenuItem>
       </Select>
 
       <Tooltip
-        title={t("projectSettings.autocomplete.hint")}
+        title={t(ProjectAutocompleteTextId.Tooltip)}
         placement={document.body.dir === "rtl" ? "left" : "right"}
       >
         <HelpOutline fontSize="small" />

src/components/ProjectSettings/ProjectDomains.tsx

@@ -35,6 +35,9 @@ export enum ProjectDomainsId {
   FieldDomainAddDialogName = "custom-domain-add-name",
 }
 
+export const getDomainLabel = (domain: SemanticDomainFull): string =>
+  `${domain.id} : ${domain.name}`;
+
 export const trimDomain = (domain: SemanticDomainFull): SemanticDomainFull => ({
   ...domain,
   description: domain.description.trim(),
@@ -194,15 +197,15 @@ function CustomDomain(props: CustomDomainProps): ReactElement {
     <Accordion>
       <AccordionSummary>
         <Typography sx={{ width: "calc(100% - 40px)" }}>
-          {props.domain.id}
-          {" : "}
-          {props.domain.name}
+          {getDomainLabel(props.domain)}
         </Typography>
-        <IconButtonWithTooltip
-          icon={<Delete />}
+        <IconButton
+          component="div" // Avoids nesting a button in the AccordionSummary button
           onClick={() => setDeleteDialogOpen(true)}
           size="small"
-        />
+        >
+          <Delete />
+        </IconButton>
         <CancelConfirmDialog
           handleCancel={() => setDeleteDialogOpen(false)}
           handleConfirm={() => deleteDomain()}
@@ -318,6 +321,7 @@ export function AddDomainDialog(props: AddDomainDialogProps): ReactElement {
 
           <div>
             <IconButton
+              data-testid={ProjectDomainsId.ButtonDomainAddDialogConfirm}
               id={ProjectDomainsId.ButtonDomainAddDialogConfirm}
               onClick={() => submit()}
               size="small"
@@ -326,6 +330,7 @@ export function AddDomainDialog(props: AddDomainDialogProps): ReactElement {
             </IconButton>
 
             <IconButton
+              data-testid={ProjectDomainsId.ButtonDomainAddDialogCancel}
               id={ProjectDomainsId.ButtonDomainAddDialogCancel}
               onClick={() => cancel()}
               size="small"
@@ -350,6 +355,7 @@ export function AddDomainDialog(props: AddDomainDialogProps): ReactElement {
               />
             ) : (
               <IconButton
+                data-testid={ProjectDomainsId.ButtonDomainAddDialogParentAdd}
                 id={ProjectDomainsId.ButtonDomainAddDialogParentAdd}
                 onClick={() => setAddingDom(true)}
               >
@@ -370,6 +376,9 @@ export function AddDomainDialog(props: AddDomainDialogProps): ReactElement {
             <TextFieldWithFont
               analysis
               id={ProjectDomainsId.FieldDomainAddDialogName}
+              inputProps={{
+                "data-testid": ProjectDomainsId.FieldDomainAddDialogName,
+              }}
               lang={props.lang}
               onChange={(e) => setName(e.target.value)}
               value={name}

src/components/ProjectSettings/ProjectLanguages.tsx

@@ -217,17 +217,19 @@ export default function ProjectLanguages(
       />
 
       <IconButton
+        data-testid={ProjectLanguagesId.ButtonAddAnalysisLangConfirm}
         disabled={!isNewLang}
-        onClick={() => addAnalysisWritingSystem()}
         id={ProjectLanguagesId.ButtonAddAnalysisLangConfirm}
+        onClick={() => addAnalysisWritingSystem()}
         size="large"
       >
         <Done />
       </IconButton>
 
       <IconButton
-        onClick={() => resetState()}
+        data-testid={ProjectLanguagesId.ButtonAddAnalysisLangClear}
         id={ProjectLanguagesId.ButtonAddAnalysisLangClear}
+        onClick={() => resetState()}
         size="large"
       >
         <Clear />
@@ -257,22 +259,26 @@ export default function ProjectLanguages(
   const vernacularLanguageEditor = (): ReactElement => (
     <Stack spacing={1}>
       <NormalizedTextField
-        variant="standard"
+        autoFocus
         id={ProjectLanguagesId.FieldEditVernacularName}
-        value={newVernName}
-        onChange={(e) => setNewVernName(e.target.value)}
+        inputProps={{
+          "data-testid": ProjectLanguagesId.FieldEditVernacularName,
+        }}
         onBlur={() => {
           setChangeVernName(false);
           setNewVernName(props.project.vernacularWritingSystem.name);
         }}
-        autoFocus
+        onChange={(e) => setNewVernName(e.target.value)}
+        value={newVernName}
+        variant="standard"
       />
 
       <Button
-        variant="contained"
+        data-testid={ProjectLanguagesId.ButtonEditVernacularNameSave}
         id={ProjectLanguagesId.ButtonEditVernacularNameSave}
         onClick={() => updateVernacularName()}
         onMouseDown={(e) => e.preventDefault()}
+        variant="contained"
       >
         {t("buttons.save")}
       </Button>
@@ -374,12 +380,13 @@ export function SemanticDomainLanguage(
         )
       ) : (
         <Select
-          variant="standard"
+          data-testid={ProjectLanguagesId.SelectSemDomLang}
           id={ProjectLanguagesId.SelectSemDomLang}
-          value={props.project.semDomWritingSystem.bcp47}
           onChange={(event: SelectChangeEvent<string>) =>
             setSemDomWritingSystem(event.target.value as string)
           }
+          value={props.project.semDomWritingSystem.bcp47}
+          variant="standard"
           /* Use `displayEmpty` and a conditional `renderValue` function to force
            * something to appear when the menu is closed and its value is "" */
           displayEmpty

src/components/ProjectSettings/tests/ProjectAutocomplete.test.tsx

@@ -1,19 +1,21 @@
-import { Select } from "@mui/material";
-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 { OffOnSetting } from "api/models";
-import ProjectAutocomplete from "components/ProjectSettings/ProjectAutocomplete";
+import ProjectAutocomplete, {
+  ProjectAutocompleteTextId,
+} from "components/ProjectSettings/ProjectAutocomplete";
 import { randomProject } from "types/project";
 
 const mockSetProject = jest.fn();
 
 const mockProject = randomProject();
-
-let testRenderer: renderer.ReactTestRenderer;
+mockProject.autocompleteSetting = OffOnSetting.Off;
 
 const renderAutocomplete = async (): Promise<void> => {
-  await renderer.act(async () => {
-    testRenderer = renderer.create(
+  await act(async () => {
+    render(
       <ProjectAutocomplete project={mockProject} setProject={mockSetProject} />
     );
   });
@@ -22,13 +24,15 @@ const renderAutocomplete = async (): Promise<void> => {
 describe("ProjectAutocomplete", () => {
   it("updates project autocomplete", async () => {
     await renderAutocomplete();
-    const selectChange = testRenderer.root.findByType(Select).props.onChange;
-    await renderer.act(async () => selectChange({ target: { value: "Off" } }));
-    expect(mockSetProject).toHaveBeenCalledWith({
-      ...mockProject,
-      autocompleteSetting: OffOnSetting.Off,
-    });
-    await renderer.act(async () => selectChange({ target: { value: "On" } }));
+    expect(
+      screen.queryByText(ProjectAutocompleteTextId.MenuItemOff)
+    ).toBeTruthy();
+    expect(screen.queryByText(ProjectAutocompleteTextId.MenuItemOn)).toBeNull();
+
+    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.click(
+      screen.getByText(ProjectAutocompleteTextId.MenuItemOn)
+    );
     expect(mockSetProject).toHaveBeenCalledWith({
       ...mockProject,
       autocompleteSetting: OffOnSetting.On,

src/components/ProjectSettings/tests/ProjectDomains.test.tsx

@@ -1,32 +1,31 @@
-import { Accordion } from "@mui/material";
-import renderer from "react-test-renderer";
+import "@testing-library/jest-dom";
+import {
+  act,
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {
   type Project,
   type SemanticDomainFull,
   type WritingSystem,
 } from "api/models";
 import ProjectDomains, {
-  AddDomainDialog,
+  getDomainLabel,
   ProjectDomainsId,
   trimDomain,
 } from "components/ProjectSettings/ProjectDomains";
 import { newProject } from "types/project";
 import { newSemanticDomain } from "types/semanticDomain";
 import { newWritingSystem } from "types/writingSystem";
 
-// Dialog uses portals, which are not supported in react-test-renderer.
-jest.mock("@mui/material/Dialog", () => "div");
-// Textfield with multiline not supported in react-test-renderer.
-jest.mock("@mui/material/TextField", () => "div");
-
 jest.mock("components/TreeView", () => "div");
 jest.mock("i18n", () => ({ language: "en-US" }));
 
 const mockSetProject = jest.fn();
 
-let projectMaster: renderer.ReactTestRenderer;
-
 function mockProject(
   semDomWritingSystem?: WritingSystem,
   customDomains?: SemanticDomainFull[]
@@ -40,51 +39,49 @@ function mockProject(
 
 const renderProjLangs = async (project: Project): Promise<void> => {
   mockSetProject.mockResolvedValue(undefined);
-  await renderer.act(async () => {
-    projectMaster = renderer.create(
-      <ProjectDomains project={project} setProject={mockSetProject} />
-    );
+  await act(async () => {
+    render(<ProjectDomains project={project} setProject={mockSetProject} />);
   });
 };
 
 describe("ProjectDomains", () => {
   it("has a button for adding a custom semantic domain", async () => {
     await renderProjLangs(mockProject());
-    const addDialog = projectMaster.root.findByType(AddDomainDialog);
-    expect(addDialog.props.open).toBeFalsy();
+    expect(screen.queryByRole("dialog")).toBeNull();
 
     // Open the dialog to add a new domain
-    const addButton = projectMaster.root.findByProps({
-      id: ProjectDomainsId.ButtonDomainAdd,
-    });
-    await renderer.act(async () => {
-      addButton.props.onClick();
-    });
-    expect(addDialog.props.open).toBeTruthy();
+    await userEvent.click(screen.getByTestId(ProjectDomainsId.ButtonDomainAdd));
+    expect(screen.queryByRole("dialog")).toBeTruthy();
 
     // Close the dialog
-    const cancelButton = projectMaster.root.findByProps({
-      id: ProjectDomainsId.ButtonDomainAddDialogCancel,
-    });
-    await renderer.act(async () => {
-      cancelButton.props.onClick();
-    });
-    expect(addDialog.props.open).toBeFalsy();
+    await userEvent.click(
+      screen.getByTestId(ProjectDomainsId.ButtonDomainAddDialogCancel)
+    );
+    // Wait for dialog removal, else it's only hidden.
+    await waitForElementToBeRemoved(() => screen.queryByRole("dialog"));
+    expect(screen.queryByRole("dialog")).toBeNull();
   });
 
   it("only renders custom domains for the current semantic domain language", async () => {
     const semDomLang = "fr";
-    const customDoms = [
+    const inDoms = [
       newSemanticDomain("1", "one", semDomLang),
       newSemanticDomain("2", "two", semDomLang),
       newSemanticDomain("3", "three", semDomLang),
+    ];
+    const outDoms = [
       newSemanticDomain("-4", "not four", "other"),
       newSemanticDomain("-5", "not five", "different"),
     ];
     await renderProjLangs(
-      mockProject(newWritingSystem(semDomLang), customDoms)
+      mockProject(newWritingSystem(semDomLang), [...inDoms, ...outDoms])
     );
-    expect(projectMaster.root.findAllByType(Accordion)).toHaveLength(3);
+    inDoms.forEach((dom) => {
+      expect(screen.queryByText(getDomainLabel(dom))).toBeTruthy();
+    });
+    outDoms.forEach((dom) => {
+      expect(screen.queryByText(getDomainLabel(dom))).toBeNull();
+    });
   });
 });