chore: Add tests for brand store settings page (#4991)

package.json

@@ -42,8 +42,9 @@
     "@sentry/react": "7.120.2",
     "@sentry/tracing": "7.114.0",
     "@tarekraafat/autocomplete.js": "10.2.9",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.14",
     "@types/randomstring": "1.3.0",

static/js/publisher/hooks/__tests__/useActiveDeviceMetrics.test.tsx

@@ -1,3 +1,4 @@
+import { ReactNode, JSXElementConstructor } from "react";
 import * as ReactQuery from "react-query";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { renderHook, waitFor } from "@testing-library/react";
@@ -23,9 +24,11 @@ describe("useActiveDeviceMetrics", () => {
     spy.mockRestore();
   });
 
-  const createWrapper = () => {
+  const createWrapper = ():
+    | JSXElementConstructor<{ children: ReactNode }>
+    | undefined => {
     const queryClient = new QueryClient();
-    return ({ children }: { children: JSX.Element }) => (
+    return ({ children }: { children: ReactNode }) => (
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     );
   };

static/js/publisher/pages/BrandStoreSettings/BrandStoreSettings.tsx

@@ -138,7 +138,6 @@ function BrandStoreSettings() {
                         help="Normal review behaviour will be applied, using the result from the automatic review tool checks."
                         name="manual-review-policy"
                         id="manual-review-policy-label-allow"
-                        aria-labelledby="store-id-label"
                         value="allow"
                         onChange={(e) => {
                           setManualReviewPolicy(e.target.value);

static/js/publisher/pages/BrandStoreSettings/__tests__/BrandStoreSettings.test.tsx

@@ -0,0 +1,155 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RecoilRoot } from "recoil";
+import { QueryClientProvider, QueryClient, useQuery } from "react-query";
+import { BrowserRouter } from "react-router-dom";
+import "@testing-library/jest-dom";
+
+import BrandStoreSettings from "../BrandStoreSettings";
+
+const queryClient = new QueryClient();
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({
+    id: "store-id",
+  }),
+}));
+
+jest.mock("react-query", () => ({
+  ...jest.requireActual("react-query"),
+  useQuery: jest.fn(),
+}));
+
+const renderComponent = () => {
+  render(
+    <RecoilRoot>
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <BrandStoreSettings />
+        </QueryClientProvider>
+      </BrowserRouter>
+    </RecoilRoot>,
+  );
+};
+
+describe("BrandStoreSettings", () => {
+  test("Shows loading state", () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: true,
+      data: {
+        "manual-review-policy": "allow",
+      },
+    });
+    renderComponent();
+
+    expect(screen.getByText(/Loading/)).toBeInTheDocument();
+  });
+
+  test("'Include this store in public lists' is checked", () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: false,
+      data: {
+        private: false,
+      },
+    });
+    renderComponent();
+
+    expect(
+      screen.getByLabelText("Include this store in public lists"),
+    ).toBeChecked();
+  });
+
+  test("'Include this store in public lists' is not checked", () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: false,
+      data: {
+        private: true,
+      },
+    });
+    renderComponent();
+
+    expect(
+      screen.getByLabelText("Include this store in public lists"),
+    ).not.toBeChecked();
+  });
+
+  test("'Store ID' is populated", () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: false,
+      data: {},
+    });
+    renderComponent();
+
+    expect(screen.getByLabelText("Store ID")).toHaveAttribute(
+      "type",
+      "password",
+    );
+  });
+
+  test("'Store ID' is visible if 'Show' button is selected", async () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: false,
+      data: {},
+    });
+    renderComponent();
+
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole("button", { name: /Show/ }));
+
+    expect(screen.getByLabelText("Store ID")).toHaveValue("store-id");
+  });
+
+  test("'Manual review policy' is set to 'Allow'", () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: false,
+      data: {
+        "manual-review-policy": "allow",
+      },
+    });
+    renderComponent();
+
+    expect(screen.getByLabelText(/Allow/)).toBeChecked();
+  });
+
+  test("'Manual review policy' is set to 'Avoid'", () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: false,
+      data: {
+        "manual-review-policy": "avoid",
+      },
+    });
+    renderComponent();
+
+    expect(screen.getByLabelText(/Avoid/)).toBeChecked();
+  });
+
+  test("'Manual review policy' is set to 'Require'", () => {
+    // @ts-expect-error Mocking useQuery for test data
+    useQuery.mockReturnValue({
+      status: "success",
+      isLoading: false,
+      data: {
+        "manual-review-policy": "require",
+      },
+    });
+    renderComponent();
+
+    expect(screen.getByLabelText(/Require/)).toBeChecked();
+  });
+});