Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

test/accessibility/RovingTabIndex-test.tsx

@@ -75,6 +75,7 @@ describe("RovingTabIndex", () => {
                     </React.Fragment>
                 )}
             </RovingTabIndexProvider>,
+            { legacyRoot: true },
         );
 
         // should begin with 0th being active
@@ -143,6 +144,7 @@ describe("RovingTabIndex", () => {
                     </React.Fragment>
                 )}
             </RovingTabIndexProvider>,
+            { legacyRoot: true },
         );
 
         // should begin with 0th being active

test/components/structures/TimelinePanel-test.tsx

@@ -211,6 +211,7 @@ describe("TimelinePanel", () => {
                     manageReadReceipts={true}
                     ref={ref}
                 />,
+                { legacyRoot: true },
             );
             await flushPromises();
             timelinePanel = ref.current!;

test/components/views/elements/AppTile-test.tsx

@@ -169,6 +169,7 @@ describe("AppTile", () => {
                     permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
                 />
             </MatrixClientContext.Provider>,
+            { legacyRoot: true },
         );
         // Wait for RPS room 1 updates to fire
         const rpsUpdated = waitForRps("r1");
@@ -242,6 +243,7 @@ describe("AppTile", () => {
                     permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
                 />
             </MatrixClientContext.Provider>,
+            { legacyRoot: true },
         );
         // Wait for RPS room 1 updates to fire
         const rpsUpdated1 = waitForRps("r1");
@@ -360,6 +362,7 @@ describe("AppTile", () => {
                 <MatrixClientContext.Provider value={cli}>
                     <AppTile key={app1.id} app={app1} room={r1} />
                 </MatrixClientContext.Provider>,
+                { legacyRoot: true },
             );
 
             moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
@@ -474,6 +477,7 @@ describe("AppTile", () => {
                 <MatrixClientContext.Provider value={cli}>
                     <AppTile key={app1.id} app={app1} fullWidth={true} room={r1} miniMode={true} showMenubar={false} />
                 </MatrixClientContext.Provider>,
+                { legacyRoot: true },
             );
         });
 

test/components/views/elements/Field-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import Field from "../../../../src/components/views/elements/Field";
 
@@ -63,12 +63,10 @@ describe("Field", () => {
             );
 
             // When invalid
-            await act(async () => {
+            fireEvent.focus(screen.getByRole("textbox"));
-                fireEvent.focus(screen.getByRole("textbox"));
-            });
 
             // Expect 'alert' role
-            expect(screen.queryByRole("alert")).toBeInTheDocument();
+            await waitFor(() => expect(screen.getByRole("alert")).toBeInTheDocument());
 
             // Close the feedback is Escape is pressed
             fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
@@ -85,12 +83,10 @@ describe("Field", () => {
             );
 
             // When valid
-            await act(async () => {
+            fireEvent.focus(screen.getByRole("textbox"));
-                fireEvent.focus(screen.getByRole("textbox"));
-            });
 
             // Expect 'status' role
-            expect(screen.queryByRole("status")).toBeInTheDocument();
+            await waitFor(() => expect(screen.queryByRole("status")).toBeInTheDocument());
 
             // Close the feedback is Escape is pressed
             fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
@@ -108,12 +104,10 @@ describe("Field", () => {
             );
 
             // When valid or invalid and 'tooltipContent' set
-            await act(async () => {
+            fireEvent.focus(screen.getByRole("textbox"));
-                fireEvent.focus(screen.getByRole("textbox"));
-            });
 
             // Expect 'tooltip' role
-            expect(screen.queryByRole("tooltip")).toBeInTheDocument();
+            await waitFor(() => expect(screen.queryByRole("tooltip")).toBeInTheDocument());
 
             // Close the feedback is Escape is pressed
             fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });

test/components/views/emojipicker/EmojiPicker-test.tsx

@@ -28,6 +28,7 @@ describe("EmojiPicker", function () {
         const ref = createRef<EmojiPicker>();
         const { container } = render(
             <EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />,
+            { legacyRoot: true },
         );
 
         // Record the HTML before filtering

test/components/views/location/LocationShareMenu-test.tsx

@@ -122,6 +122,7 @@ describe("<LocationShareMenu />", () => {
             wrapper: ({ children }) => (
                 <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
             ),
+            legacyRoot: true,
         });
 
     beforeEach(async () => {

test/components/views/messages/MPollBody-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, RenderResult } from "@testing-library/react";
 import {
     MatrixEvent,
     Relations,
@@ -895,11 +895,9 @@ async function newMPollBody(
         content: newPollStart(answers, undefined, disclosed),
     });
     const result = newMPollBodyFromEvent(mxEvent, relationEvents, endEvents);
+    // flush promises from loading relations
     if (waitForResponsesLoad) {
-        // flush promises from loading relations
         await flushPromises();
-        const renderResult = await result;
-        await waitForElementToBeRemoved(() => renderResult.getByTestId("spinner"));
     }
     return result;
 }
@@ -922,6 +920,7 @@ function renderMPollBodyWithWrapper(props: IBodyProps): RenderResult {
         wrapper: ({ children }) => (
             <MatrixClientContext.Provider value={mockClient}>{children}</MatrixClientContext.Provider>
         ),
+        legacyRoot: true,
     });
 }
 

test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap

@@ -506,9 +506,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -552,9 +550,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -598,9 +594,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -644,9 +638,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -922,9 +914,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -968,9 +958,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -1014,9 +1002,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -1060,9 +1046,7 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -1496,9 +1480,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -1542,9 +1524,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -1588,9 +1568,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div
@@ -1634,9 +1612,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               </div>
               <div
                 class="mx_PollOption_optionVoteCount"
-              >
+              />
-                
-              </div>
             </div>
           </div>
           <div

test/components/views/polls/pollHistory/PollHistory-test.tsx

@@ -118,7 +118,7 @@ describe("<PollHistory />", () => {
         expect(getByText("Loading polls")).toBeInTheDocument();
 
         // flush filter creation request
-        await flushPromises();
+        await act(flushPromises);
 
         expect(liveTimeline.getPaginationToken).toHaveBeenCalledWith(EventTimeline.BACKWARDS);
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledWith(liveTimeline, { backwards: true });
@@ -148,7 +148,7 @@ describe("<PollHistory />", () => {
         );
 
         // flush filter creation request
-        await flushPromises();
+        await act(flushPromises);
         // once per page
         expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(3);
 
@@ -183,7 +183,7 @@ describe("<PollHistory />", () => {
 
     it("renders a no polls message when there are no active polls in the room", async () => {
         const { getByText } = getComponent();
-        await flushPromises();
+        await act(flushPromises);
 
         expect(getByText("There are no active polls in this room")).toBeTruthy();
     });

test/components/views/right_panel/UserInfo-test.tsx

@@ -287,10 +287,10 @@ describe("<UserInfo />", () => {
             expect(spy).not.toHaveBeenCalled();
         });
 
-        it("renders close button correctly when encryption panel with a pending verification request", () => {
+        it("renders close button correctly when encryption panel with a pending verification request", async () => {
             renderComponent({ phase: RightPanelPhases.EncryptionPanel, verificationRequest });
             screen.getByTestId("base-card-close-button").focus();
-            expect(screen.getByRole("tooltip")).toHaveTextContent("Cancel");
+            await waitFor(() => expect(screen.getByRole("tooltip")).toHaveTextContent("Cancel"));
         });
     });
 

test/components/views/rooms/MessageComposer-test.tsx

@@ -513,6 +513,7 @@ function wrapAndRender(
                     <MessageComposer {...defaultProps} {...props} />
                 </RoomContext.Provider>
             </MatrixClientContext.Provider>,
+            { legacyRoot: true },
         ),
         roomContext,
     };

test/components/views/rooms/SendMessageComposer-test.tsx

@@ -381,7 +381,7 @@ describe("<SendMessageComposer/>", () => {
             </MatrixClientContext.Provider>
         );
         const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
-            return render(getRawComponent(props, roomContext, client));
+            return render(getRawComponent(props, roomContext, client), { legacyRoot: true });
         };
 
         it("renders text and placeholder correctly", () => {

test/components/views/settings/Notifications-test.tsx

@@ -536,7 +536,7 @@ describe("<Notifications />", () => {
             // oneToOneRule is set to 'on'
             // and is kind: 'underride'
             const offToggle = screen.getByTestId(section + oneToOneRule.rule_id).querySelector('input[type="radio"]')!;
-            fireEvent.click(offToggle);
+            await act(() => fireEvent.click(offToggle));
 
             await flushPromises();
 
@@ -561,7 +561,7 @@ describe("<Notifications />", () => {
             // oneToOneRule is set to 'on'
             // and is kind: 'underride'
             const offToggle = screen.getByTestId(section + oneToOneRule.rule_id).querySelector('input[type="radio"]')!;
-            fireEvent.click(offToggle);
+            await act(() => fireEvent.click(offToggle));
 
             await flushPromises();
 
@@ -725,7 +725,7 @@ describe("<Notifications />", () => {
                 mockClient.setPushRuleActions.mockRejectedValue("oups");
 
                 const offToggle = oneToOneRuleElement.querySelector('input[type="radio"]')!;
-                fireEvent.click(offToggle);
+                await act(() => fireEvent.click(offToggle));
 
                 await flushPromises();
 
@@ -823,7 +823,9 @@ describe("<Notifications />", () => {
 
             mockClient.setPushRuleEnabled.mockRejectedValueOnce("oups");
 
-            fireEvent.click(within(screen.getByTestId(section + keywordsRuleId)).getByLabelText("Off"));
+            await act(() =>
+                fireEvent.click(within(screen.getByTestId(section + keywordsRuleId)).getByLabelText("Off")),
+            );
 
             await flushPromises();
 

test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap

@@ -74,15 +74,20 @@ exports[`<SecureBackupPanel /> suggests connecting session to key backup when ba
     Back up your encryption keys with your account data in case you lose access to your sessions. Your keys will be secured with a unique Security Key.
   </div>
   <div
-    class="mx_Spinner"
+    class="mx_SettingsSubsection_text"
   >
-    <div
+    <span>
-      aria-label="Loading…"
+      This session is 
-      class="mx_Spinner_icon"
+      <b>
-      data-testid="spinner"
+        not backing up your keys
-      role="progressbar"
+      </b>
-      style="width: 32px; height: 32px;"
+      , but you do have an existing backup you can restore from and add to going forward.
-    />
+    </span>
+  </div>
+  <div
+    class="mx_SettingsSubsection_text"
+  >
+    Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.
   </div>
   <details>
     <summary
@@ -133,7 +138,53 @@ exports[`<SecureBackupPanel /> suggests connecting session to key backup when ba
           not ready
         </td>
       </tr>
+      <tr>
+        <th
+          scope="row"
+        >
+          Latest backup version on server:
+        </th>
+        <td>
+          1
+           (
+          Algorithm:
+           
+          <code>
+            test
+          </code>
+          )
+        </td>
+      </tr>
+      <tr>
+        <th
+          scope="row"
+        >
+          Active backup version:
+        </th>
+        <td>
+          None
+        </td>
+      </tr>
     </table>
+    <div />
   </details>
+  <div
+    class="mx_SecureBackupPanel_buttonRow"
+  >
+    <div
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+      role="button"
+      tabindex="0"
+    >
+      Connect this session to Key Backup
+    </div>
+    <div
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+      role="button"
+      tabindex="0"
+    >
+      Delete Backup
+    </div>
+  </div>
 </div>
 `;

test/components/views/settings/tabs/user/SessionManagerTab-test.tsx

@@ -15,7 +15,16 @@ limitations under the License.
 */
 
 import React from "react";
-import { act, fireEvent, render, RenderResult, screen } from "@testing-library/react";
+import {
+    act,
+    fireEvent,
+    render,
+    RenderResult,
+    screen,
+    waitFor,
+    waitForElementToBeRemoved,
+    within,
+} from "@testing-library/react";
 import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoApi, DeviceVerificationStatus, VerificationRequest } from "matrix-js-sdk/src/crypto-api";
@@ -146,7 +155,7 @@ describe("<SessionManagerTab />", () => {
         // open device detail
         const tile = getByTestId(`device-tile-${deviceId}`);
         const label = isOpen ? "Hide details" : "Show details";
-        const toggle = tile.querySelector(`[aria-label="${label}"]`) as Element;
+        const toggle = within(tile).getByLabelText(label);
         fireEvent.click(toggle);
     };
 
@@ -165,16 +174,14 @@ describe("<SessionManagerTab />", () => {
         return getByTestId(`device-tile-${deviceId}`);
     };
 
-    const setFilter = async (container: HTMLElement, option: DeviceSecurityVariation | string) =>
+    const setFilter = async (container: HTMLElement, option: DeviceSecurityVariation | string) => {
-        await act(async () => {
+        const dropdown = within(container).getByLabelText("Filter devices");
-            const dropdown = container.querySelector('[aria-label="Filter devices"]');
 
-            fireEvent.click(dropdown as Element);
+        fireEvent.click(dropdown);
-            // tick to let dropdown render
+        screen.getByRole("listbox");
-            await flushPromises();
 
-            fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element);
+        fireEvent.click(screen.getByTestId(`filter-option-${option}`) as Element);
-        });
+    };
 
     const isDeviceSelected = (
         getByTestId: ReturnType<typeof render>["getByTestId"],
@@ -920,37 +927,33 @@ describe("<SessionManagerTab />", () => {
 
             it("deletes a device when interactive auth is not required", async () => {
                 mockClient.deleteMultipleDevices.mockResolvedValue({});
-                mockClient.getDevices
+                mockClient.getDevices.mockResolvedValue({
-                    .mockResolvedValueOnce({
+                    devices: [alicesDevice, alicesMobileDevice, alicesOlderMobileDevice],
-                        devices: [alicesDevice, alicesMobileDevice, alicesOlderMobileDevice],
-                    })
-                    // pretend it was really deleted on refresh
-                    .mockResolvedValueOnce({
-                        devices: [alicesDevice, alicesOlderMobileDevice],
-                    });
-
-                const { getByTestId } = render(getComponent());
-
-                await act(async () => {
-                    await flushPromises();
                 });
 
-                toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
+                const { getByTestId } = render(getComponent(), { legacyRoot: true });
 
-                const deviceDetails = getByTestId(`device-detail-${alicesMobileDevice.device_id}`);
+                await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
-                const signOutButton = deviceDetails.querySelector(
+                await toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
-                    '[data-testid="device-detail-sign-out-cta"]',
-                ) as Element;
-                fireEvent.click(signOutButton);
 
-                await confirmSignout(getByTestId);
+                const signOutButton = await waitFor(() =>
+                    within(getByTestId(`device-detail-${alicesMobileDevice.device_id}`)).getByTestId(
+                        "device-detail-sign-out-cta",
+                    ),
+                );
+
+                // pretend it was really deleted on refresh
+                mockClient.getDevices.mockResolvedValueOnce({
+                    devices: [alicesDevice, alicesOlderMobileDevice],
+                });
 
                 // sign out button is disabled with spinner
-                expect(
+                const prom = waitFor(() => expect(signOutButton).toHaveAttribute("aria-disabled", "true"));
-                    (deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]') as Element).getAttribute(
+
-                        "aria-disabled",
+                fireEvent.click(signOutButton);
-                    ),
+                await confirmSignout(getByTestId);
-                ).toEqual("true");
+                await prom;
+
                 // delete called
                 expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith(
                     [alicesMobileDevice.device_id],
@@ -1006,11 +1009,9 @@ describe("<SessionManagerTab />", () => {
                         devices: [alicesDevice, alicesOlderMobileDevice],
                     });
 
-                const { getByTestId, getByLabelText } = render(getComponent());
+                const { getByTestId, getByLabelText } = render(getComponent(), { legacyRoot: true });
 
-                await act(async () => {
+                await act(flushPromises);
-                    await flushPromises();
-                });
 
                 // reset mock count after initial load
                 mockClient.getDevices.mockClear();
@@ -1052,7 +1053,7 @@ describe("<SessionManagerTab />", () => {
                         type: "m.id.user",
                         user: aliceId,
                     },
-                    password: "",
+                    password: "topsecret",
                     type: "m.login.password",
                 });
                 // devices refreshed
@@ -1570,9 +1571,7 @@ describe("<SessionManagerTab />", () => {
                 });
                 const { getByTestId, container } = render(getComponent());
 
-                await act(async () => {
+                await act(flushPromises);
-                    await flushPromises();
-                });
 
                 // filter for inactive sessions
                 await setFilter(container, DeviceSecurityVariation.Inactive);
@@ -1765,6 +1764,7 @@ describe("<SessionManagerTab />", () => {
             await flushPromises();
 
             fireEvent.click(getByText("Show QR code"));
+            await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
 
             await expect(findByTestId("login-with-qr")).resolves.toBeTruthy();
         });