From 2e097a00c7fd0bf9707f89985646b49083f54b0a Mon Sep 17 00:00:00 2001
From: alunturner <56027671+alunturner@users.noreply.github.com>
Date: Wed, 28 Dec 2022 16:24:46 +0000
Subject: [PATCH] Convert enzyme to rtl: BeaconStatus (#9836)

* rewrite in rtl
* update snapshots
---
 .../views/beacon/BeaconStatus-test.tsx        |  38 ++--
 .../__snapshots__/BeaconStatus-test.tsx.snap  | 171 ++++--------------
 2 files changed, 54 insertions(+), 155 deletions(-)

diff --git a/test/components/views/beacon/BeaconStatus-test.tsx b/test/components/views/beacon/BeaconStatus-test.tsx
index 06ff6aa7e85..02ed4620b88 100644
--- a/test/components/views/beacon/BeaconStatus-test.tsx
+++ b/test/components/views/beacon/BeaconStatus-test.tsx
@@ -15,13 +15,12 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import { Beacon } from "matrix-js-sdk/src/matrix";
 
 import BeaconStatus from "../../../../src/components/views/beacon/BeaconStatus";
 import { BeaconDisplayStatus } from "../../../../src/components/views/beacon/displayStatus";
-import { findByTestId, makeBeaconInfoEvent } from "../../../test-utils";
+import { makeBeaconInfoEvent } from "../../../test-utils";
 
 describe("<BeaconStatus />", () => {
     const defaultProps = {
@@ -29,21 +28,22 @@ describe("<BeaconStatus />", () => {
         label: "test label",
         withIcon: true,
     };
-    const getComponent = (props = {}) => mount(<BeaconStatus {...defaultProps} {...props} />);
+    const renderComponent = (props = {}) => render(<BeaconStatus {...defaultProps} {...props} />);
 
     it("renders loading state", () => {
-        const component = getComponent({ displayStatus: BeaconDisplayStatus.Loading });
-        expect(component).toMatchSnapshot();
+        const { asFragment } = renderComponent({ displayStatus: BeaconDisplayStatus.Loading });
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders stopped state", () => {
-        const component = getComponent({ displayStatus: BeaconDisplayStatus.Stopped });
-        expect(component).toMatchSnapshot();
+        const { asFragment } = renderComponent({ displayStatus: BeaconDisplayStatus.Stopped });
+        expect(asFragment()).toMatchSnapshot();
     });
 
     it("renders without icon", () => {
-        const component = getComponent({ withIcon: false, displayStatus: BeaconDisplayStatus.Stopped });
-        expect(component.find("StyledLiveBeaconIcon").length).toBeFalsy();
+        const iconClassName = "mx_StyledLiveBeaconIcon";
+        const { container } = renderComponent({ withIcon: false, displayStatus: BeaconDisplayStatus.Stopped });
+        expect(container.getElementsByClassName(iconClassName)).toHaveLength(0);
     });
 
     describe("active state", () => {
@@ -51,38 +51,38 @@ describe("<BeaconStatus />", () => {
             // mock for stable snapshot
             jest.spyOn(Date, "now").mockReturnValue(123456789);
             const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:server", { isLive: false }, "$1"));
-            const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
-            expect(component).toMatchSnapshot();
+            const { asFragment } = renderComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
+            expect(asFragment()).toMatchSnapshot();
         });
 
         it("renders with children", () => {
             const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:sever", { isLive: false }));
-            const component = getComponent({
+            renderComponent({
                 beacon,
-                children: <span data-test-id="test">test</span>,
+                children: <span data-testid="test-child">test</span>,
                 displayStatus: BeaconDisplayStatus.Active,
             });
-            expect(findByTestId(component, "test-child")).toMatchSnapshot();
+            expect(screen.getByTestId("test-child")).toMatchSnapshot();
         });
 
         it("renders static remaining time when displayLiveTimeRemaining is falsy", () => {
             // mock for stable snapshot
             jest.spyOn(Date, "now").mockReturnValue(123456789);
             const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:server", { isLive: false }, "$1"));
-            const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
-            expect(component.text().includes("Live until 11:17")).toBeTruthy();
+            renderComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
+            expect(screen.getByText("Live until 11:17")).toBeInTheDocument();
         });
 
         it("renders live time remaining when displayLiveTimeRemaining is truthy", () => {
             // mock for stable snapshot
             jest.spyOn(Date, "now").mockReturnValue(123456789);
             const beacon = new Beacon(makeBeaconInfoEvent("@user:server", "!room:server", { isLive: false }, "$1"));
-            const component = getComponent({
+            renderComponent({
                 beacon,
                 displayStatus: BeaconDisplayStatus.Active,
                 displayLiveTimeRemaining: true,
             });
-            expect(component.text().includes("1h left")).toBeTruthy();
+            expect(screen.getByText("1h left")).toBeInTheDocument();
         });
     });
 });
diff --git a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
index 765859b41f5..b0def808248 100644
--- a/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/BeaconStatus-test.tsx.snap
@@ -1,178 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BeaconStatus /> active state renders with children 1`] = `null`;
+exports[`<BeaconStatus /> active state renders with children 1`] = `
+<span
+  data-testid="test-child"
+>
+  test
+</span>
+`;
 
 exports[`<BeaconStatus /> active state renders without children 1`] = `
-<BeaconStatus
-  beacon={
-    Beacon {
-      "_beaconInfo": {
-        "assetType": "m.self",
-        "description": undefined,
-        "live": false,
-        "timeout": 3600000,
-        "timestamp": 123456789,
-      },
-      "_events": {},
-      "_eventsCount": 0,
-      "_isLive": false,
-      "_latestLocationEvent": undefined,
-      "_maxListeners": undefined,
-      "clearLatestLocation": [Function],
-      "livenessWatchTimeout": undefined,
-      "roomId": "!room:server",
-      "rootEvent": {
-        "content": {
-          "description": undefined,
-          "live": false,
-          "org.matrix.msc3488.asset": {
-            "type": "m.self",
-          },
-          "org.matrix.msc3488.ts": 123456789,
-          "timeout": 3600000,
-        },
-        "event_id": "$1",
-        "origin_server_ts": 123456789,
-        "room_id": "!room:server",
-        "sender": "@user:server",
-        "state_key": "@user:server",
-        "type": "org.matrix.msc3672.beacon_info",
-      },
-      Symbol(kCapture): false,
-    }
-  }
-  displayStatus="Active"
-  label="test label"
-  withIcon={true}
->
+<DocumentFragment>
   <div
-    className="mx_BeaconStatus mx_BeaconStatus_Active"
+    class="mx_BeaconStatus mx_BeaconStatus_Active"
   >
-    <StyledLiveBeaconIcon
-      className="mx_BeaconStatus_icon"
-      isIdle={false}
-      withError={false}
-    >
-      <div
-        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
-      />
-    </StyledLiveBeaconIcon>
     <div
-      className="mx_BeaconStatus_description"
+      class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon"
+    />
+    <div
+      class="mx_BeaconStatus_description"
     >
       <span
-        className="mx_BeaconStatus_label"
+        class="mx_BeaconStatus_label"
       >
         test label
       </span>
-      <BeaconExpiryTime
-        beacon={
-          Beacon {
-            "_beaconInfo": {
-              "assetType": "m.self",
-              "description": undefined,
-              "live": false,
-              "timeout": 3600000,
-              "timestamp": 123456789,
-            },
-            "_events": {},
-            "_eventsCount": 0,
-            "_isLive": false,
-            "_latestLocationEvent": undefined,
-            "_maxListeners": undefined,
-            "clearLatestLocation": [Function],
-            "livenessWatchTimeout": undefined,
-            "roomId": "!room:server",
-            "rootEvent": {
-              "content": {
-                "description": undefined,
-                "live": false,
-                "org.matrix.msc3488.asset": {
-                  "type": "m.self",
-                },
-                "org.matrix.msc3488.ts": 123456789,
-                "timeout": 3600000,
-              },
-              "event_id": "$1",
-              "origin_server_ts": 123456789,
-              "room_id": "!room:server",
-              "sender": "@user:server",
-              "state_key": "@user:server",
-              "type": "org.matrix.msc3672.beacon_info",
-            },
-            Symbol(kCapture): false,
-          }
-        }
+      <span
+        class="mx_BeaconStatus_expiryTime"
       >
-        <span
-          className="mx_BeaconStatus_expiryTime"
-        >
-          Live until 11:17
-        </span>
-      </BeaconExpiryTime>
+        Live until 11:17
+      </span>
     </div>
   </div>
-</BeaconStatus>
+</DocumentFragment>
 `;
 
 exports[`<BeaconStatus /> renders loading state 1`] = `
-<BeaconStatus
-  displayStatus="Loading"
-  label="test label"
-  withIcon={true}
->
+<DocumentFragment>
   <div
-    className="mx_BeaconStatus mx_BeaconStatus_Loading"
+    class="mx_BeaconStatus mx_BeaconStatus_Loading"
   >
-    <StyledLiveBeaconIcon
-      className="mx_BeaconStatus_icon"
-      isIdle={true}
-      withError={false}
-    >
-      <div
-        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
-      />
-    </StyledLiveBeaconIcon>
     <div
-      className="mx_BeaconStatus_description"
+      class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
+    />
+    <div
+      class="mx_BeaconStatus_description"
     >
       <span
-        className="mx_BeaconStatus_description_status"
+        class="mx_BeaconStatus_description_status"
       >
         Loading live location...
       </span>
     </div>
   </div>
-</BeaconStatus>
+</DocumentFragment>
 `;
 
 exports[`<BeaconStatus /> renders stopped state 1`] = `
-<BeaconStatus
-  displayStatus="Stopped"
-  label="test label"
-  withIcon={true}
->
+<DocumentFragment>
   <div
-    className="mx_BeaconStatus mx_BeaconStatus_Stopped"
+    class="mx_BeaconStatus mx_BeaconStatus_Stopped"
   >
-    <StyledLiveBeaconIcon
-      className="mx_BeaconStatus_icon"
-      isIdle={true}
-      withError={false}
-    >
-      <div
-        className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
-      />
-    </StyledLiveBeaconIcon>
     <div
-      className="mx_BeaconStatus_description"
+      class="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
+    />
+    <div
+      class="mx_BeaconStatus_description"
     >
       <span
-        className="mx_BeaconStatus_description_status"
+        class="mx_BeaconStatus_description_status"
       >
         Live location ended
       </span>
     </div>
   </div>
-</BeaconStatus>
+</DocumentFragment>
 `;