1
0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-07 21:23:00 +03:00
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2024-08-02 13:22:03 +01:00
parent 2bb46e960c
commit c3505a63ea
15 changed files with 146 additions and 114 deletions

View File

@@ -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

View File

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

View File

@@ -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 },
);
});

View File

@@ -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"));
});
// 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"));
});
// 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"));
});
// 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" });

View File

@@ -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

View File

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

View File

@@ -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);
if (waitForResponsesLoad) {
// flush promises from loading relations
if (waitForResponsesLoad) {
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,
});
}

View File

@@ -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

View File

@@ -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();
});

View File

@@ -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"));
});
});

View File

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

View File

@@ -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", () => {

View File

@@ -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();

View File

@@ -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"
>
<span>
This session is
<b>
not backing up your keys
</b>
, but you do have an existing backup you can restore from and add to going forward.
</span>
</div>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
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>
`;

View File

@@ -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) =>
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<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
.mockResolvedValueOnce({
mockClient.getDevices.mockResolvedValue({
devices: [alicesDevice, alicesMobileDevice, alicesOlderMobileDevice],
})
});
const { getByTestId } = render(getComponent(), { legacyRoot: true });
await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
await toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
const signOutButton = await waitFor(() =>
within(getByTestId(`device-detail-${alicesMobileDevice.device_id}`)).getByTestId(
"device-detail-sign-out-cta",
),
);
// pretend it was really deleted on refresh
.mockResolvedValueOnce({
mockClient.getDevices.mockResolvedValueOnce({
devices: [alicesDevice, alicesOlderMobileDevice],
});
const { getByTestId } = render(getComponent());
await act(async () => {
await flushPromises();
});
toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
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 confirmSignout(getByTestId);
// 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("<SessionManagerTab />", () => {
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("<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 flushPromises();
});
await act(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();
});