From c3505a63eaf996b5d96c31fa4bbde65b9aac876f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 2 Aug 2024 13:22:03 +0100 Subject: [PATCH] Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- test/accessibility/RovingTabIndex-test.tsx | 2 + .../structures/TimelinePanel-test.tsx | 1 + .../views/elements/AppTile-test.tsx | 4 + test/components/views/elements/Field-test.tsx | 20 ++--- .../views/emojipicker/EmojiPicker-test.tsx | 1 + .../views/location/LocationShareMenu-test.tsx | 1 + .../views/messages/MPollBody-test.tsx | 7 +- .../__snapshots__/MPollBody-test.tsx.snap | 48 +++-------- .../polls/pollHistory/PollHistory-test.tsx | 6 +- .../views/right_panel/UserInfo-test.tsx | 4 +- .../views/rooms/MessageComposer-test.tsx | 1 + .../views/rooms/SendMessageComposer-test.tsx | 2 +- .../views/settings/Notifications-test.tsx | 10 ++- .../SecureBackupPanel-test.tsx.snap | 67 +++++++++++++-- .../tabs/user/SessionManagerTab-test.tsx | 86 +++++++++---------- 15 files changed, 146 insertions(+), 114 deletions(-) diff --git a/test/accessibility/RovingTabIndex-test.tsx b/test/accessibility/RovingTabIndex-test.tsx index eac87a3cff..411eb036f1 100644 --- a/test/accessibility/RovingTabIndex-test.tsx +++ b/test/accessibility/RovingTabIndex-test.tsx @@ -75,6 +75,7 @@ describe("RovingTabIndex", () => { )} , + { legacyRoot: true }, ); // should begin with 0th being active @@ -143,6 +144,7 @@ describe("RovingTabIndex", () => { )} , + { legacyRoot: true }, ); // should begin with 0th being active diff --git a/test/components/structures/TimelinePanel-test.tsx b/test/components/structures/TimelinePanel-test.tsx index 0396ea68a4..6b07cbbda9 100644 --- a/test/components/structures/TimelinePanel-test.tsx +++ b/test/components/structures/TimelinePanel-test.tsx @@ -211,6 +211,7 @@ describe("TimelinePanel", () => { manageReadReceipts={true} ref={ref} />, + { legacyRoot: true }, ); await flushPromises(); timelinePanel = ref.current!; diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index 69a3b60036..3a58a5969a 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -169,6 +169,7 @@ describe("AppTile", () => { permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)} /> , + { 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)} /> , + { legacyRoot: true }, ); // Wait for RPS room 1 updates to fire const rpsUpdated1 = waitForRps("r1"); @@ -360,6 +362,7 @@ describe("AppTile", () => { , + { legacyRoot: true }, ); moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer"); @@ -474,6 +477,7 @@ describe("AppTile", () => { , + { legacyRoot: true }, ); }); diff --git a/test/components/views/elements/Field-test.tsx b/test/components/views/elements/Field-test.tsx index 7cb3074927..76a06af49b 100644 --- a/test/components/views/elements/Field-test.tsx +++ b/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" }); diff --git a/test/components/views/emojipicker/EmojiPicker-test.tsx b/test/components/views/emojipicker/EmojiPicker-test.tsx index 1fbd518f08..18d33f9efa 100644 --- a/test/components/views/emojipicker/EmojiPicker-test.tsx +++ b/test/components/views/emojipicker/EmojiPicker-test.tsx @@ -28,6 +28,7 @@ describe("EmojiPicker", function () { const ref = createRef(); const { container } = render( false} onFinished={jest.fn()} />, + { legacyRoot: true }, ); // Record the HTML before filtering diff --git a/test/components/views/location/LocationShareMenu-test.tsx b/test/components/views/location/LocationShareMenu-test.tsx index 83bf3a6b5f..4311899e36 100644 --- a/test/components/views/location/LocationShareMenu-test.tsx +++ b/test/components/views/location/LocationShareMenu-test.tsx @@ -122,6 +122,7 @@ describe("", () => { wrapper: ({ children }) => ( {children} ), + legacyRoot: true, }); beforeEach(async () => { diff --git a/test/components/views/messages/MPollBody-test.tsx b/test/components/views/messages/MPollBody-test.tsx index 2fcd0e517f..2196581541 100644 --- a/test/components/views/messages/MPollBody-test.tsx +++ b/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 }) => ( {children} ), + legacyRoot: true, }); } diff --git a/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap index 3d6a99be8a..b24f80146d 100644 --- a/test/components/views/messages/__snapshots__/MPollBody-test.tsx.snap +++ b/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`] = `
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
", () => { 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("", () => { ); // flush filter creation request - await flushPromises(); + await act(flushPromises); // once per page expect(mockClient.paginateEventTimeline).toHaveBeenCalledTimes(3); @@ -183,7 +183,7 @@ describe("", () => { 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(); }); diff --git a/test/components/views/right_panel/UserInfo-test.tsx b/test/components/views/right_panel/UserInfo-test.tsx index 3b36468786..1e14038ba7 100644 --- a/test/components/views/right_panel/UserInfo-test.tsx +++ b/test/components/views/right_panel/UserInfo-test.tsx @@ -287,10 +287,10 @@ describe("", () => { 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")); }); }); diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx index 1aea150a8c..29748579e9 100644 --- a/test/components/views/rooms/MessageComposer-test.tsx +++ b/test/components/views/rooms/MessageComposer-test.tsx @@ -513,6 +513,7 @@ function wrapAndRender( , + { legacyRoot: true }, ), roomContext, }; diff --git a/test/components/views/rooms/SendMessageComposer-test.tsx b/test/components/views/rooms/SendMessageComposer-test.tsx index cc6eb9ec87..42192caeef 100644 --- a/test/components/views/rooms/SendMessageComposer-test.tsx +++ b/test/components/views/rooms/SendMessageComposer-test.tsx @@ -381,7 +381,7 @@ describe("", () => { ); 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", () => { diff --git a/test/components/views/settings/Notifications-test.tsx b/test/components/views/settings/Notifications-test.tsx index e966d49732..84136ebe7a 100644 --- a/test/components/views/settings/Notifications-test.tsx +++ b/test/components/views/settings/Notifications-test.tsx @@ -536,7 +536,7 @@ describe("", () => { // 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("", () => { // 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("", () => { 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("", () => { 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(); diff --git a/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap index b86b391d72..529633bdb6 100644 --- a/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap @@ -74,15 +74,20 @@ exports[` 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.
-
+ + This session is + + not backing up your keys + + , but you do have an existing backup you can restore from and add to going forward. + +
+
+ Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.
suggests connecting session to key backup when ba not ready + + + Latest backup version on server: + + + 1 + ( + Algorithm: + + + test + + ) + + + + + Active backup version: + + + None + + +
+
+
+ Connect this session to Key Backup +
+
+ Delete Backup +
+
`; diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx index a88c322361..e617ed4bf8 100644 --- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx +++ b/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("", () => { // 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("", () => { return getByTestId(`device-tile-${deviceId}`); }; - const setFilter = async (container: HTMLElement, option: DeviceSecurityVariation | string) => - await act(async () => { - const dropdown = container.querySelector('[aria-label="Filter devices"]'); + const setFilter = async (container: HTMLElement, option: DeviceSecurityVariation | string) => { + const dropdown = within(container).getByLabelText("Filter devices"); - fireEvent.click(dropdown as Element); - // tick to let dropdown render - await flushPromises(); + fireEvent.click(dropdown); + screen.getByRole("listbox"); - fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element); - }); + fireEvent.click(screen.getByTestId(`filter-option-${option}`) as Element); + }; const isDeviceSelected = ( getByTestId: ReturnType["getByTestId"], @@ -920,37 +927,33 @@ describe("", () => { it("deletes a device when interactive auth is not required", async () => { mockClient.deleteMultipleDevices.mockResolvedValue({}); - mockClient.getDevices - .mockResolvedValueOnce({ - devices: [alicesDevice, alicesMobileDevice, alicesOlderMobileDevice], - }) - // pretend it was really deleted on refresh - .mockResolvedValueOnce({ - devices: [alicesDevice, alicesOlderMobileDevice], - }); - - const { getByTestId } = render(getComponent()); - - await act(async () => { - await flushPromises(); + mockClient.getDevices.mockResolvedValue({ + devices: [alicesDevice, alicesMobileDevice, alicesOlderMobileDevice], }); - toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id); + const { getByTestId } = render(getComponent(), { legacyRoot: true }); - const deviceDetails = getByTestId(`device-detail-${alicesMobileDevice.device_id}`); - const signOutButton = deviceDetails.querySelector( - '[data-testid="device-detail-sign-out-cta"]', - ) as Element; - fireEvent.click(signOutButton); + await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar")); + await toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id); - 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( - (deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]') as Element).getAttribute( - "aria-disabled", - ), - ).toEqual("true"); + const prom = waitFor(() => expect(signOutButton).toHaveAttribute("aria-disabled", "true")); + + fireEvent.click(signOutButton); + await confirmSignout(getByTestId); + await prom; + // delete called expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith( [alicesMobileDevice.device_id], @@ -1006,11 +1009,9 @@ describe("", () => { devices: [alicesDevice, alicesOlderMobileDevice], }); - const { getByTestId, getByLabelText } = render(getComponent()); + const { getByTestId, getByLabelText } = render(getComponent(), { legacyRoot: true }); - await act(async () => { - await flushPromises(); - }); + await act(flushPromises); // reset mock count after initial load mockClient.getDevices.mockClear(); @@ -1052,7 +1053,7 @@ describe("", () => { type: "m.id.user", user: aliceId, }, - password: "", + password: "topsecret", type: "m.login.password", }); // devices refreshed @@ -1570,9 +1571,7 @@ describe("", () => { }); const { getByTestId, container } = render(getComponent()); - await act(async () => { - await flushPromises(); - }); + await act(flushPromises); // filter for inactive sessions await setFilter(container, DeviceSecurityVariation.Inactive); @@ -1765,6 +1764,7 @@ describe("", () => { await flushPromises(); fireEvent.click(getByText("Show QR code")); + await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar")); await expect(findByTestId("login-with-qr")).resolves.toBeTruthy(); });