Fix added unit tests

Author: alvaromateo

static/js/publisher/pages/Listing/AdditionalInformation/__tests__/AdditionalInformation.test.tsx

@@ -3,28 +3,33 @@ import "@testing-library/jest-dom";
 
 import { mockListingData } from "../../../../test-utils";
 import AdditionalInformation from "../AdditionalInformation";
+import { FieldValues, useForm } from "react-hook-form";
+import { getDefaultListingData } from "../../../../utils";
 
-const useFormMocks = {
-  register: jest.fn(),
-  getValues: jest.fn(),
-  setValue: jest.fn(),
-  watch: jest.fn(),
-};
+function TestAdditionalInformation() {
+  const { register, setValue, watch, getValues } = useForm<FieldValues>({
+    defaultValues: getDefaultListingData(mockListingData),
+  });
+
+  return (
+    <form>
+      <AdditionalInformation
+        data={mockListingData}
+        register={register}
+        getValues={getValues}
+        setValue={setValue}
+        watch={watch}
+      />
+    </form>
+  );
+}
 
 function renderComponent() {
   window.SNAP_LISTING_DATA = {
     DNS_VERIFICATION_TOKEN: "test-dns-verification-token",
   };
 
-  return render(
-    <AdditionalInformation
-      data={mockListingData}
-      register={useFormMocks.register}
-      getValues={useFormMocks.getValues}
-      setValue={useFormMocks.setValue}
-      watch={useFormMocks.watch}
-    />,
-  );
+  return render(<TestAdditionalInformation />);
 }
 
 afterEach(() => {
@@ -40,27 +45,23 @@ describe("AdditionalInformation", () => {
 
   test("Fields displayed and registered with useForm", () => {
     renderComponent();
-    expect(useFormMocks.register).toHaveBeenCalledTimes(3);
     expect(
       screen.getByLabelText("Display public popularity charts"),
     ).toBeVisible();
     expect(screen.getByLabelText("World map")).toBeVisible();
     expect(screen.getByLabelText("Linux distributions")).toBeVisible();
   });
 
-  test("if public metrics is disabled all other fields are disabled", () => {
-    useFormMocks.getValues.mockImplementation((valueKey: string) =>
-      valueKey === "public_metrics_enabled" ? false : true,
-    );
+  test("if public metrics is unchecked all other fields are disabled", () => {
     renderComponent();
     expect(
-      screen.getByRole("checkbox", { name: "public-metrics-checkbox" }),
-    ).toBeDisabled();
-    expect(
-      screen.getByRole("checkbox", { name: "world-map-checkbox" }),
-    ).toBeDisabled();
+      screen.getByRole("checkbox", {
+        name: "Display public popularity charts",
+      }),
+    ).not.toBeChecked();
+    expect(screen.getByRole("checkbox", { name: "World map" })).toBeDisabled();
     expect(
-      screen.getByRole("checkbox", { name: "linux-distributions-checkbox" }),
+      screen.getByRole("checkbox", { name: "Linux distributions" }),
     ).toBeDisabled();
   });
 });

static/js/publisher/pages/Listing/AdditionalInformation/__tests__/LicenseInputs.test.tsx

@@ -5,29 +5,34 @@ import "@testing-library/jest-dom";
 import { mockListingData } from "../../../../test-utils";
 import LicenseInputs from "../LicenseInputs";
 import LicenseSearch from "../LicenseSearch";
-
-const useFormMocks = {
-  register: jest.fn(),
-  getValues: jest.fn(),
-  setValue: jest.fn(),
-  watch: jest.fn(),
-};
+import { FieldValues, useForm } from "react-hook-form";
+import { getDefaultListingData } from "../../../../utils";
 
 jest.mock("../LicenseSearch");
 
+function TestLicenseInputs() {
+  const { register, setValue, watch } = useForm<FieldValues>({
+    defaultValues: getDefaultListingData(mockListingData),
+  });
+
+  return (
+    <form>
+      <LicenseInputs
+        listingData={mockListingData}
+        register={register}
+        setValue={setValue}
+        watch={watch}
+      />
+    </form>
+  );
+}
+
 function renderComponent() {
   window.SNAP_LISTING_DATA = {
     DNS_VERIFICATION_TOKEN: "test-dns-verification-token",
   };
 
-  return render(
-    <LicenseInputs
-      listingData={mockListingData}
-      register={useFormMocks.register}
-      setValue={useFormMocks.setValue}
-      watch={useFormMocks.watch}
-    />,
-  );
+  return render(<TestLicenseInputs />);
 }
 
 afterEach(() => {
@@ -38,7 +43,7 @@ describe("LicenseInputs", () => {
   test("if license is simple the search is displayed", () => {
     renderComponent();
     expect(screen.getByLabelText("Simple")).toBeChecked();
-    expect(screen.getByText("The license(s) under which")).toBeVisible();
+    expect(screen.getByText(/^The license\(s\) under which/)).toBeVisible();
     expect(LicenseSearch).toHaveBeenCalled();
   });
 

static/js/publisher/pages/Listing/AdditionalInformation/__tests__/LicenseSearch.test.tsx

@@ -1,31 +1,35 @@
-import { getByText, render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
 import { mockListingData } from "../../../../test-utils";
-import LicenseSearch from "../LicenseSearch";
+import LicenseInputs from "../LicenseInputs";
+import { FieldValues, useForm } from "react-hook-form";
+import { getDefaultListingData } from "../../../../utils";
 
-const mocks = {
-  register: jest.fn(),
-  setValue: jest.fn(),
-  setLicense: jest.fn(),
-};
+function TestLicenseSearch() {
+  const { register, setValue, watch } = useForm<FieldValues>({
+    defaultValues: getDefaultListingData(mockListingData),
+  });
 
-function renderComponent(license = mockListingData.license) {
+  return (
+    <form>
+      <LicenseInputs
+        listingData={mockListingData}
+        register={register}
+        setValue={setValue}
+        watch={watch}
+      />
+    </form>
+  );
+}
+
+function renderComponent() {
   window.SNAP_LISTING_DATA = {
     DNS_VERIFICATION_TOKEN: "test-dns-verification-token",
   };
 
-  return render(
-    <LicenseSearch
-      licenses={mockListingData.licenses}
-      license={license}
-      register={mocks.register}
-      setValue={mocks.setValue}
-      setLicense={mocks.setLicense}
-      originalLicense={mockListingData.license}
-    />,
-  );
+  return render(<TestLicenseSearch />);
 }
 
 afterEach(() => {
@@ -45,15 +49,17 @@ describe("LicenseSearch", () => {
       document.getElementsByClassName("p-multiselect__input").item(0)!,
     );
 
-    const suggestions = await waitFor(() => {
-      const suggestionsElem = document.getElementsByClassName("p-list");
+    await waitFor(() => {
+      const suggestionsElem = document.getElementsByClassName(
+        "p-list",
+      )[0]! as HTMLUListElement;
       expect(suggestionsElem).toBeVisible();
-      expect(suggestionsElem).toHaveLength(1);
-      return suggestionsElem[0] as HTMLUListElement;
+      for (const child of suggestionsElem.children) {
+        const text = child.textContent;
+        // the current license should be filtered and not displayed in the dropdown
+        expect(text).not.toEqual("testing-license");
+      }
     });
-    expect(getByText(suggestions, "random-license")).toBeVisible();
-    // the current license should be filtered and not displayed in the dropdown
-    expect(getByText(suggestions, "testing-license")).not.toBeInTheDocument();
   });
 
   test("removing focus from search field closes the licenses list", async () => {
@@ -64,17 +70,17 @@ describe("LicenseSearch", () => {
     );
 
     expect(await screen.findByText("random-license")).toBeVisible();
-    user.click(container);
-    expect(await screen.findByText("random-license")).not.toBeVisible();
+    await user.click(container);
+    const randomLicense = screen.queryByText("random-license");
+    expect(randomLicense).toBeNull();
   });
 
   test("remove license from list", async () => {
     renderComponent();
     const user = userEvent.setup();
     await user.click(screen.getByRole("button"));
 
-    expect(await screen.findByText("testing-license")).not.toBeVisible();
-    expect(mocks.setLicense).toHaveBeenCalled();
-    expect(mocks.setValue).toHaveBeenCalled();
+    const removedElem = screen.queryByText(/testing-license/);
+    expect(removedElem).toBeNull();
   });
 });

static/js/publisher/pages/Listing/ContactInformation/__tests__/ContactFields.test.tsx

@@ -1,72 +1,47 @@
-import { Control, FieldValues } from "react-hook-form";
+import { FieldValues, useForm } from "react-hook-form";
 import { render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import ContactFields from "../ContactFields";
 import userEvent from "@testing-library/user-event";
+import { getDefaultListingData } from "../../../../utils";
+import { mockListingData } from "../../../../test-utils";
 
-const propsMocks = {
-  register: jest.fn(),
-  control: {} as Control<FieldValues>,
-  getValues: jest.fn(),
-};
-
-const useFieldArrayMock = jest.fn();
+function TestContactFields() {
+  const { register, getValues, control } = useForm<FieldValues>({
+    defaultValues: getDefaultListingData(mockListingData),
+  });
 
-jest.mock("react-hook-form", () => ({
-  ...jest.requireActual("react-hook-form"),
-  useFieldArray: useFieldArrayMock,
-}));
+  return (
+    <form>
+      <ContactFields
+        register={register}
+        control={control}
+        labelName={"Contacts"}
+        fieldName={"contacts"}
+        getValues={getValues}
+      />
+    </form>
+  );
+}
 
 function renderComponent() {
   window.SNAP_LISTING_DATA = {
     DNS_VERIFICATION_TOKEN: "test-dns-verification-token",
   };
 
-  return render(
-    <ContactFields
-      register={propsMocks.register}
-      control={propsMocks.control}
-      labelName={"Test"}
-      fieldName={"test"}
-      getValues={propsMocks.getValues}
-    />,
-  );
+  return render(<TestContactFields />);
 }
 
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
 describe("ContactFields", () => {
-  test("when no data, add field is displayed", () => {
-    const useFieldArrayResult = {
-      fields: [],
-      append: jest.fn(),
-      remove: jest.fn(),
-    };
-    useFieldArrayMock.mockReturnValue(useFieldArrayResult);
-    renderComponent();
-
-    expect(screen.getByRole("button", { name: "Add field" })).toBeVisible();
-    expect(
-      screen.getByRole("button", { name: "Remove this link" }),
-    ).not.toBeInTheDocument();
-  });
-
   test("data displayed and add field at the bottom", () => {
-    const exampleUrl = "https://example.com/contact";
-    const useFieldArrayResult = {
-      fields: [{ url: exampleUrl }],
-      append: jest.fn(),
-      remove: jest.fn(),
-    };
-    useFieldArrayMock.mockReturnValue(useFieldArrayResult);
-    propsMocks.getValues.mockReturnValue(exampleUrl);
     renderComponent();
 
-    const fieldElement = screen.getByDisplayValue(exampleUrl);
-    const addFieldElement = screen.getByRole("button", { name: "Add field" });
+    const fieldElement = screen.getByDisplayValue(
+      "https://example.com/contact",
+    );
+    const addFieldElement = screen.getByText(/Add field/);
+
     expect(fieldElement).toBeVisible();
     expect(addFieldElement).toBeVisible();
     expect(fieldElement.compareDocumentPosition(addFieldElement)).toEqual(
@@ -75,14 +50,6 @@ describe("ContactFields", () => {
   });
 
   test("data can be removed", async () => {
-    const exampleUrl = "https://example.com/contact";
-    const useFieldArrayResult = {
-      fields: [{ url: exampleUrl }],
-      append: jest.fn(),
-      remove: jest.fn(),
-    };
-    useFieldArrayMock.mockReturnValue(useFieldArrayResult);
-    propsMocks.getValues.mockReturnValue(exampleUrl);
     const user = userEvent.setup();
     renderComponent();
 
@@ -92,21 +59,21 @@ describe("ContactFields", () => {
     expect(deleteButton).toBeVisible();
 
     await user.click(deleteButton);
-    await waitFor(() => expect(useFieldArrayResult.remove).toHaveBeenCalled());
+    await waitFor(() => {
+      const links = screen.queryAllByRole("textbox");
+      expect(links).toHaveLength(0);
+    });
   });
 
   test("data can be added", async () => {
-    const useFieldArrayResult = {
-      fields: [],
-      append: jest.fn(),
-      remove: jest.fn(),
-    };
-    useFieldArrayMock.mockReturnValue(useFieldArrayResult);
     const user = userEvent.setup();
     renderComponent();
 
-    const addButton = screen.getByRole("button", { name: "Add field" });
+    const addButton = screen.getByText(/Add field/);
     await user.click(addButton);
-    await waitFor(() => expect(useFieldArrayResult.append).toHaveBeenCalled());
+    await waitFor(() => {
+      const links = screen.queryAllByRole("textbox");
+      expect(links).toHaveLength(2);
+    });
   });
 });