Update usages of test utilities preferring RTL (#10203)

test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { renderIntoDocument, Simulate } from "react-dom/test-utils";
-import { act } from "react-dom/test-utils";
+import { act, Simulate } from "react-dom/test-utils";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 import { EventType, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials";
 
@@ -83,25 +83,18 @@ describe("<SpaceSettingsVisibilityTab />", () => {
     };
 
     const getComponent = (props = {}) => {
-        const wrapper = renderIntoDocument<HTMLSpanElement>(
-            // wrap in element so renderIntoDocument can render functional component
-            <span>
-                <SpaceSettingsVisibilityTab {...defaultProps} {...props} />
-            </span>,
-        ) as HTMLSpanElement;
-        return wrapper.children[0];
+        return render(<SpaceSettingsVisibilityTab {...defaultProps} {...props} />);
     };
 
-    const getByTestId = (container: Element, id: string) => container.querySelector(`[data-test-id=${id}]`);
-    const toggleGuestAccessSection = async (component: Element) => {
-        const toggleButton = getByTestId(component, "toggle-guest-access-btn")!;
-        await act(async () => {
-            Simulate.click(toggleButton);
-        });
+    const toggleGuestAccessSection = async ({ getByTestId }: RenderResult) => {
+        const toggleButton = getByTestId("toggle-guest-access-btn")!;
+        fireEvent.click(toggleButton);
     };
-    const getGuestAccessToggle = (component: Element) => component.querySelector('[aria-label="Enable guest access"]');
-    const getHistoryVisibilityToggle = (component: Element) => component.querySelector('[aria-label="Preview Space"]');
-    const getErrorMessage = (component: Element) => getByTestId(component, "space-settings-error")?.textContent;
+    const getGuestAccessToggle = ({ container }: RenderResult) =>
+        container.querySelector('[aria-label="Enable guest access"]');
+    const getHistoryVisibilityToggle = ({ container }: RenderResult) =>
+        container.querySelector('[aria-label="Preview Space"]');
+    const getErrorMessage = ({ getByTestId }: RenderResult) => getByTestId("space-settings-error")?.textContent;
 
     beforeEach(() => {
         (mockMatrixClient.sendStateEvent as jest.Mock).mockClear().mockResolvedValue({});
@@ -113,18 +106,18 @@ describe("<SpaceSettingsVisibilityTab />", () => {
     });
 
     it("renders container", () => {
-        const component = getComponent();
-        expect(component).toMatchSnapshot();
+        const { asFragment } = getComponent();
+        expect(asFragment()).toMatchSnapshot();
     });
 
     describe("for a private space", () => {
         const joinRule = JoinRule.Invite;
         it("does not render addresses section", () => {
             const space = makeMockSpace(mockMatrixClient, joinRule);
-            const component = getComponent({ space });
+            const { queryByTestId } = getComponent({ space });
 
-            expect(getByTestId(component, "published-address-fieldset")).toBeFalsy();
-            expect(getByTestId(component, "local-address-fieldset")).toBeFalsy();
+            expect(queryByTestId("published-address-fieldset")).toBeFalsy();
+            expect(queryByTestId("local-address-fieldset")).toBeFalsy();
         });
     });
 
@@ -152,10 +145,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
 
                 expect(guestAccessInput?.getAttribute("aria-checked")).toEqual("true");
 
-                await act(async () => {
-                    Simulate.click(guestAccessInput!);
-                });
-
+                fireEvent.click(guestAccessInput!);
                 expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
                     mockSpaceId,
                     EventType.RoomGuestAccess,
@@ -200,17 +190,14 @@ describe("<SpaceSettingsVisibilityTab />", () => {
                 expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
             });
 
-            it("updates history visibility on toggle", async () => {
+            it("updates history visibility on toggle", () => {
                 const space = makeMockSpace(mockMatrixClient, joinRule, guestRule, historyRule);
                 const component = getComponent({ space });
 
                 // toggle off because space settings is != WorldReadable
                 expect(getHistoryVisibilityToggle(component)?.getAttribute("aria-checked")).toEqual("false");
 
-                await act(async () => {
-                    Simulate.click(getHistoryVisibilityToggle(component)!);
-                });
-
+                fireEvent.click(getHistoryVisibilityToggle(component)!);
                 expect(mockMatrixClient.sendStateEvent).toHaveBeenCalledWith(
                     mockSpaceId,
                     EventType.RoomHistoryVisibility,
@@ -243,10 +230,10 @@ describe("<SpaceSettingsVisibilityTab />", () => {
 
         it("renders addresses section", () => {
             const space = makeMockSpace(mockMatrixClient, joinRule, guestRule);
-            const component = getComponent({ space });
+            const { getByTestId } = getComponent({ space });
 
-            expect(getByTestId(component, "published-address-fieldset")).toBeTruthy();
-            expect(getByTestId(component, "local-address-fieldset")).toBeTruthy();
+            expect(getByTestId("published-address-fieldset")).toBeTruthy();
+            expect(getByTestId("local-address-fieldset")).toBeTruthy();
         });
     });
 });

test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -16,118 +16,119 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
 `;
 
 exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
-<div
-  class="mx_SettingsTab"
->
+<DocumentFragment>
   <div
-    class="mx_SettingsTab_heading"
+    class="mx_SettingsTab"
   >
-    Visibility
-  </div>
-  
-  <fieldset
-    class="mx_SettingsFieldset"
-    data-test-id="access-fieldset"
-  >
-    <legend
-      class="mx_SettingsFieldset_legend"
-    >
-      Access
-    </legend>
     <div
-      class="mx_SettingsFieldset_description"
+      class="mx_SettingsTab_heading"
     >
-      Decide who can view and join mock-space.
+      Visibility
     </div>
-    <label
-      class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
+    <fieldset
+      class="mx_SettingsFieldset"
+      data-testid="access-fieldset"
     >
-      <input
-        aria-describedby="joinRule-invite-description"
-        checked=""
-        disabled=""
-        id="joinRule-invite"
-        name="joinRule"
-        type="radio"
-        value="invite"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        class="mx_StyledRadioButton_content"
+      <legend
+        class="mx_SettingsFieldset_legend"
       >
-        Private (invite only)
-      </div>
+        Access
+      </legend>
       <div
-        class="mx_StyledRadioButton_spacer"
-      />
-    </label>
-    <span
-      id="joinRule-invite-description"
-    >
-      Only invited people can join.
-    </span>
-    <label
-      class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
-    >
-      <input
-        aria-describedby="joinRule-public-description"
-        disabled=""
-        id="joinRule-public"
-        name="joinRule"
-        type="radio"
-        value="public"
-      />
-      <div>
-        <div />
-      </div>
-      <div
-        class="mx_StyledRadioButton_content"
+        class="mx_SettingsFieldset_description"
       >
-        Public
+        Decide who can view and join mock-space.
       </div>
-      <div
-        class="mx_StyledRadioButton_spacer"
-      />
-    </label>
-    <span
-      id="joinRule-public-description"
-    >
-      Anyone can find and join.
-    </span>
-    <div
-      class="mx_SettingsTab_toggleWithDescription"
-    >
-      <div
-        class="mx_SettingsFlag"
+      <label
+        class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled mx_StyledRadioButton_checked"
       >
-        <span
-          class="mx_SettingsFlag_label"
-        >
-          Preview Space
-        </span>
-        <div
-          aria-checked="true"
-          aria-disabled="false"
-          aria-label="Preview Space"
-          class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
-          role="switch"
-          tabindex="0"
-        >
-          <div
-            class="mx_ToggleSwitch_ball"
-          />
+        <input
+          aria-describedby="joinRule-invite-description"
+          checked=""
+          disabled=""
+          id="joinRule-invite"
+          name="joinRule"
+          type="radio"
+          value="invite"
+        />
+        <div>
+          <div />
         </div>
+        <div
+          class="mx_StyledRadioButton_content"
+        >
+          Private (invite only)
+        </div>
+        <div
+          class="mx_StyledRadioButton_spacer"
+        />
+      </label>
+      <span
+        id="joinRule-invite-description"
+      >
+        Only invited people can join.
+      </span>
+      <label
+        class="mx_StyledRadioButton mx_JoinRuleSettings_radioButton mx_StyledRadioButton_disabled"
+      >
+        <input
+          aria-describedby="joinRule-public-description"
+          disabled=""
+          id="joinRule-public"
+          name="joinRule"
+          type="radio"
+          value="public"
+        />
+        <div>
+          <div />
+        </div>
+        <div
+          class="mx_StyledRadioButton_content"
+        >
+          Public
+        </div>
+        <div
+          class="mx_StyledRadioButton_spacer"
+        />
+      </label>
+      <span
+        id="joinRule-public-description"
+      >
+        Anyone can find and join.
+      </span>
+      <div
+        class="mx_SettingsTab_toggleWithDescription"
+      >
+        <div
+          class="mx_SettingsFlag"
+        >
+          <span
+            class="mx_SettingsFlag_label"
+          >
+            Preview Space
+          </span>
+          <div
+            aria-checked="true"
+            aria-disabled="false"
+            aria-label="Preview Space"
+            class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
+            role="switch"
+            tabindex="0"
+          >
+            <div
+              class="mx_ToggleSwitch_ball"
+            />
+          </div>
+        </div>
+        <p>
+          Allow people to preview your space before they join.
+          <br />
+          <b>
+            Recommended for public spaces.
+          </b>
+        </p>
       </div>
-      <p>
-        Allow people to preview your space before they join.
-        <br />
-        <b>
-          Recommended for public spaces.
-        </b>
-      </p>
-    </div>
-  </fieldset>
-</div>
+    </fieldset>
+  </div>
+</DocumentFragment>
 `;