Clean up a few things in tests (#3139)

* Remove unused mocks * test_utils.jsx -> testUtils.tsx * Delete createComponent * Tweak renderWithProvider to align with Redux / testing-library docs * Make testing-library assertions on `screen`, rather than `const node = render(...)`
Kinto · Jan 24, 2024 · 1120b91 · 1120b91
1 parent 957cafe
commit 1120b91
Show file tree

Hide file tree

Showing 34 changed files with 336 additions and 381 deletions.
diff --git a/test/__mocks__/kinto-http.js b/test/__mocks__/kinto-http.js
diff --git a/test/__mocks__/styleMock.js b/test/__mocks__/styleMock.js
diff --git a/test/__mocks__/svgrMock.js b/test/__mocks__/svgrMock.js
diff --git a/test/components/AuthForm_test.jsx b/test/components/AuthForm_test.jsx
@@ -1,4 +1,5 @@
-import { renderWithProvider } from "../test_utils";
+import { screen } from "@testing-library/react";
+import { renderWithProvider } from "../testUtils";
 import { DEFAULT_KINTO_SERVER } from "../../src/constants";
 import { DEFAULT_SERVERINFO } from "../../src/reducers/session";
 import { render, fireEvent, waitFor } from "@testing-library/react";
@@ -12,20 +13,19 @@ describe("AuthForm component", () => {
 
   describe("Single server config option", () => {
     it("should set the default server url in a visible field", () => {
-      const node = renderWithProvider(
+      renderWithProvider(
         <AuthForm
           session={{ authenticated: false, serverInfo: DEFAULT_SERVERINFO }}
         />
       );
 
-      const element = node.queryByLabelText("Server*");
+      const element = screen.queryByLabelText("Server*");
       expect(element.type).toBe("text");
       expect(element.value).toBe(DEFAULT_KINTO_SERVER);
     });
   });
   describe("Authentication types", () => {
-    let node,
-      setupSession,
+      let setupSession,
       getServerInfo,
       navigateToExternalAuth,
       navigateToOpenID,
@@ -65,31 +65,31 @@ describe("AuthForm component", () => {
           },
         },
       };
-      node = renderWithProvider(<AuthForm {...props} />);
+      renderWithProvider(<AuthForm {...props} />);
     });
 
     it("should render a setup form", () => {
-      expect(node.getByTestId("formWrapper")).toBeDefined();
+      expect(screen.getByTestId("formWrapper")).toBeDefined();
     });
 
     describe("Basic Auth", () => {
       it("should submit setup data", async () => {
-        fireEvent.change(node.queryByLabelText("Server*"), {
+        fireEvent.change(screen.queryByLabelText("Server*"), {
           target: { value: "http://test.server/v1" },
         });
-        await node.findByTestId("spinner"); // spinner should show up
+        await screen.findByTestId("spinner"); // spinner should show up
         await waitFor(() => new Promise(resolve => setTimeout(resolve, 400))); // debounce wait
-        expect(node.queryByTestId("spinner")).toBeNull(); // spinner should be gone by now
+        expect(screen.queryByTestId("spinner")).toBeNull(); // spinner should be gone by now
 
-        fireEvent.click(node.getByLabelText("Basic Auth"));
-        fireEvent.change(node.getByLabelText("Username*"), {
+        fireEvent.click(screen.getByLabelText("Basic Auth"));
+        fireEvent.change(screen.getByLabelText("Username*"), {
           target: { value: "user" },
         });
-        fireEvent.change(node.getByLabelText("Password*"), {
+        fireEvent.change(screen.getByLabelText("Password*"), {
           target: { value: "pass" },
         });
 
-        fireEvent.click(node.getByText(/Sign in using/));
+        fireEvent.click(screen.getByText(/Sign in using/));
         expect(setupSession).toHaveBeenCalledWith({
           server: "http://test.server/v1",
           authType: "basicauth",
@@ -104,18 +104,18 @@ describe("AuthForm component", () => {
 
     describe("LDAP", () => {
       it("should submit setup data", async () => {
-        fireEvent.change(node.queryByLabelText("Server*"), {
+        fireEvent.change(screen.queryByLabelText("Server*"), {
           target: { value: "http://test.server/v1" },
         });
         await waitFor(() => new Promise(resolve => setTimeout(resolve, 500))); // debounce wait
-        fireEvent.click(node.getByLabelText("LDAP"));
-        fireEvent.change(node.getByLabelText("Email*"), {
+        fireEvent.click(screen.getByLabelText("LDAP"));
+        fireEvent.change(screen.getByLabelText("Email*"), {
           target: { value: "[email protected]" },
         });
-        fireEvent.change(node.getByLabelText("Password*"), {
+        fireEvent.change(screen.getByLabelText("Password*"), {
           target: { value: "pass" },
         });
-        fireEvent.click(node.getByText(/Sign in using/));
+        fireEvent.click(screen.getByText(/Sign in using/));
         expect(setupSession).toHaveBeenCalledWith({
           server: "http://test.server/v1",
           authType: "ldap",
@@ -130,12 +130,12 @@ describe("AuthForm component", () => {
 
     describe("FxA", () => {
       it("should navigate to external auth URL", async () => {
-        fireEvent.change(node.queryByLabelText("Server*"), {
+        fireEvent.change(screen.queryByLabelText("Server*"), {
           target: { value: "http://test.server/v1" },
         });
         await waitFor(() => new Promise(resolve => setTimeout(resolve, 500))); // debounce wait
-        fireEvent.click(node.getByLabelText("Firefox Account"));
-        fireEvent.click(node.getByText(/Sign in using/));
+        fireEvent.click(screen.getByLabelText("Firefox Account"));
+        fireEvent.click(screen.getByText(/Sign in using/));
         expect(navigateToExternalAuth).toHaveBeenCalledWith({
           server: "http://test.server/v1",
           authType: "fxa", // fxa = credentials omitted
@@ -146,12 +146,12 @@ describe("AuthForm component", () => {
 
     describe("OpenID", () => {
       it("should navigate to external auth URL", async () => {
-        fireEvent.change(node.queryByLabelText("Server*"), {
+        fireEvent.change(screen.queryByLabelText("Server*"), {
           target: { value: "http://test.server/v1" },
         });
         await waitFor(() => new Promise(resolve => setTimeout(resolve, 500))); // debounce wait
-        fireEvent.click(node.getByLabelText("OpenID Connect (Google)"));
-        fireEvent.click(node.getByText(/Sign in using/));
+        fireEvent.click(screen.getByLabelText("OpenID Connect (Google)"));
+        fireEvent.click(screen.getByText(/Sign in using/));
         expect(navigateToOpenID).toHaveBeenCalledWith(
           {
             server: "http://test.server/v1",
@@ -173,9 +173,9 @@ describe("AuthForm component", () => {
         servers: [],
         session: { authenticated: false, serverInfo: DEFAULT_SERVERINFO },
       };
-      const node = renderWithProvider(<AuthForm {...props} />);
+      renderWithProvider(<AuthForm {...props} />);
 
-      expect(node.queryByLabelText("Server*").value).toBe(
+      expect(screen.queryByLabelText("Server*").value).toBe(
         "https://demo.kinto-storage.org/v1/"
       );
     });
@@ -188,9 +188,9 @@ describe("AuthForm component", () => {
         servers: [{ server: "http://server.test/v1", authType: "anonymous" }],
         session: { authenticated: false, serverInfo: DEFAULT_SERVERINFO },
       };
-      const node = renderWithProvider(<AuthForm {...props} />);
+      renderWithProvider(<AuthForm {...props} />);
 
-      expect(node.queryByLabelText("Server*").value).toBe(
+      expect(screen.queryByLabelText("Server*").value).toBe(
         "http://server.test/v1"
       );
     });

diff --git a/test/components/BaseForm_test.jsx b/test/components/BaseForm_test.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import BaseForm from "../../src/components/BaseForm";
 
 const testSchema = {
@@ -40,18 +40,18 @@ const testUiSchema = {
 
 describe("BaseForm component", () => {
   it("Should render a rjsf form as expected", async () => {
-    const result = render(
+    render(
       <BaseForm
         className="testClass"
         schema={testSchema}
         uiSchema={testUiSchema}
       />
     );
 
-    const inputTitle = await result.findByLabelText("Title");
-    const inputContent = await result.findByLabelText("Content");
-    const submit = await result.findByText("Submit");
-    const spinner = result.queryByTestId("spinner");
+    const inputTitle = await screen.findByLabelText("Title");
+    const inputContent = await screen.findByLabelText("Content");
+    const submit = await screen.findByText("Submit");
+    const spinner = screen.queryByTestId("spinner");
 
     expect(inputTitle.disabled).toBe(false);
     expect(inputContent.disabled).toBe(false);
@@ -60,7 +60,7 @@ describe("BaseForm component", () => {
   });
 
   it("Should disable the form if disabled is true", async () => {
-    const result = render(
+    render(
       <BaseForm
         className="testClass"
         disabled={true}
@@ -69,10 +69,10 @@ describe("BaseForm component", () => {
       />
     );
 
-    const inputTitle = await result.findByLabelText("Title");
-    const inputContent = await result.findByLabelText("Content");
-    const submit = await result.findByText("Submit");
-    const spinner = result.queryByTestId("spinner");
+    const inputTitle = await screen.findByLabelText("Title");
+    const inputContent = await screen.findByLabelText("Content");
+    const submit = await screen.findByText("Submit");
+    const spinner = screen.queryByTestId("spinner");
 
     expect(inputTitle.disabled).toBe(true);
     expect(inputContent.disabled).toBe(true);
@@ -81,7 +81,7 @@ describe("BaseForm component", () => {
   });
 
   it("Should show a spinner and disable the form when showSpinner is true", async () => {
-    const result = render(
+    render(
       <BaseForm
         className="testClass"
         showSpinner={true}
@@ -90,10 +90,10 @@ describe("BaseForm component", () => {
       />
     );
 
-    const inputTitle = await result.findByLabelText("Title");
-    const inputContent = await result.findByLabelText("Content");
-    const submit = await result.findByText("Submit");
-    const spinner = result.queryByTestId("spinner");
+    const inputTitle = await screen.findByLabelText("Title");
+    const inputContent = await screen.findByLabelText("Content");
+    const submit = await screen.findByText("Submit");
+    const spinner = screen.queryByTestId("spinner");
 
     expect(inputTitle.disabled).toBe(true);
     expect(inputContent.disabled).toBe(true);
@@ -102,7 +102,7 @@ describe("BaseForm component", () => {
   });
 
   it("Should show a spinner and disable the form when form is submitted", async () => {
-    const result = render(
+    render(
       <BaseForm
         className="testClass"
         schema={testSchema}
@@ -111,25 +111,25 @@ describe("BaseForm component", () => {
       />
     );
 
-    const inputTitle = await result.findByLabelText("Title");
-    const inputContent = await result.findByLabelText("Content");
-    const submit = await result.findByText("Submit");
+    const inputTitle = await screen.findByLabelText("Title");
+    const inputContent = await screen.findByLabelText("Content");
+    const submit = await screen.findByText("Submit");
 
     expect(inputTitle.disabled).toBe(false);
     expect(inputContent.disabled).toBe(false);
     expect(submit.disabled).toBe(false);
-    expect(result.queryByTestId("spinner")).toBeNull();
+    expect(screen.queryByTestId("spinner")).toBeNull();
 
     fireEvent.click(submit);
 
     expect(inputTitle.disabled).toBe(true);
     expect(inputContent.disabled).toBe(true);
     expect(submit.disabled).toBe(true);
-    expect(result.queryByTestId("spinner")).toBeDefined();
+    expect(screen.queryByTestId("spinner")).toBeDefined();
   });
 
   it("Should scroll to the first property that fails validation", async () => {
-    const result = render(
+    render(
       <BaseForm
         className="testClass"
         schema={testSchema}
@@ -143,16 +143,16 @@ describe("BaseForm component", () => {
     );
     const testFn = vi.fn();
 
-    const submit = await result.findByText("Submit");
-    const titleLabel = await result.findByText("Title");
+    const submit = await screen.findByText("Submit");
+    const titleLabel = await screen.findByText("Title");
     titleLabel.scrollIntoView = testFn;
     fireEvent.click(submit);
     expect(testFn).toHaveBeenCalledTimes(1);
     expect(titleLabel.getAttribute("for")).toBe("root_title");
   });
 
   it("Should scroll to the top of the form if validation failed without a specific property", async () => {
-    const result = render(
+    render(
       <BaseForm
         className="testClass"
         schema={testSchema}
@@ -166,8 +166,8 @@ describe("BaseForm component", () => {
     );
     const testFn = vi.fn();
 
-    const submit = await result.findByText("Submit");
-    const formWrapper = await result.findByTestId("formWrapper");
+    const submit = await screen.findByText("Submit");
+    const formWrapper = await screen.findByTestId("formWrapper");
     formWrapper.scrollIntoView = testFn;
     fireEvent.click(submit);
     expect(testFn).toHaveBeenCalledTimes(1);

diff --git a/test/components/CollectionForm_test.jsx b/test/components/CollectionForm_test.jsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { renderWithProvider } from "../test_utils";
+import { renderWithProvider } from "../testUtils";
+import { screen } from "@testing-library/react";
 
 import CollectionForm from "../../src/components/collection/CollectionForm";
 
@@ -66,11 +67,11 @@ describe("CollectionForm component", () => {
       ],
       bucket_id: "default",
     });
-    const result = renderWithProvider(<CollectionForm {...localTestProps} />);
+    renderWithProvider(<CollectionForm {...localTestProps} />);
 
-    const warning = result.queryByText(warningText);
+    const warning = screen.queryByText(warningText);
     expect(warning).toBeNull();
-    const title = await result.findByLabelText("Collection id*");
+    const title = await screen.findByLabelText("Collection id*");
     expect(title.disabled).toBe(false);
   });
 
@@ -89,11 +90,11 @@ describe("CollectionForm component", () => {
     localTestProps.collection.data.id = "test";
     localTestProps.formData = {};
 
-    const result = renderWithProvider(<CollectionForm {...localTestProps} />);
+    renderWithProvider(<CollectionForm {...localTestProps} />);
 
-    const warning = result.queryByText(warningText);
+    const warning = screen.queryByText(warningText);
     expect(warning).toBeNull();
-    const title = await result.findByLabelText("Collection id*");
+    const title = await screen.findByLabelText("Collection id*");
     expect(title.disabled).toBe(false);
   });
 
@@ -108,11 +109,11 @@ describe("CollectionForm component", () => {
         bucket_id: "default",
       },
     ];
-    const result = renderWithProvider(<CollectionForm {...localTestProps} />);
+    renderWithProvider(<CollectionForm {...localTestProps} />);
 
-    const warning = await result.queryByText(warningText);
+    const warning = await screen.queryByText(warningText);
     expect(warning).toBeDefined();
-    const title = await result.findByLabelText("Collection id*");
+    const title = await screen.findByLabelText("Collection id*");
     expect(title.disabled).toBe(true);
   });
 
@@ -133,11 +134,11 @@ describe("CollectionForm component", () => {
     localTestProps.bid = "default";
     localTestProps.formData = {};
 
-    const result = renderWithProvider(<CollectionForm {...localTestProps} />);
+    renderWithProvider(<CollectionForm {...localTestProps} />);
 
-    const warning = await result.queryByText(warningText);
+    const warning = await screen.queryByText(warningText);
     expect(warning).toBeDefined();
-    const title = await result.findByLabelText("Collection id*");
+    const title = await screen.findByLabelText("Collection id*");
     expect(title.disabled).toBe(true);
   });
 });