sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Stabilise flaky QR code rendering tests (#33593)

Browse Source 
* Stabilise QR code rendering tests

* Extract QR mocking code to test-utils
This commit is contained in:
rbondesson
2026-05-25 07:10:10 +00:00
committed by GitHub
parent 1ffbe66d72
commit 40fbe1fae1
4 changed files with 65 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/views/elements/QRCode-test.tsx
+9 -3
View File
@@ -6,13 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { render, waitFor, cleanup } from "jest-matrix-react";
import { render, cleanup } from "jest-matrix-react";
import React from "react";
import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../test-utils/qrcode";
import QRCode from "../../../../../src/components/views/elements/QRCode";
describe("<QRCode />", () => {
afterEach(() => {
resetQRCodeMock();
cleanup();
});
@@ -22,14 +24,18 @@ describe("<QRCode />", () => {
});
it("renders a QR with defaults", async () => {
mockQRCodeRender();
const { container, getAllByAltText } = render(<QRCode data="asd" />);
await waitFor(() => getAllByAltText("QR Code").length === 1);
await waitForQRCodeRender();
expect(getAllByAltText("QR Code")).toHaveLength(1);
expect(container).toMatchSnapshot();
});
it("renders a QR with high error correction level", async () => {
mockQRCodeRender();
const { container, getAllByAltText } = render(<QRCode data="asd" errorCorrectionLevel="high" />);
await waitFor(() => getAllByAltText("QR Code").length === 1);
await waitForQRCodeRender();
expect(getAllByAltText("QR Code")).toHaveLength(1);
expect(container).toMatchSnapshot();
});
});
apps/web/test/unit-tests/components/views/elements/crypto/VerificationQRCode-test.tsx
+6 -2
View File
@@ -6,22 +6,26 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { cleanup, render, waitFor } from "jest-matrix-react";
import { cleanup, render } from "jest-matrix-react";
import React from "react";
import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../../test-utils/qrcode";
import VerificationQRCode from "../../../../../../src/components/views/elements/crypto/VerificationQRCode";
describe("<VerificationQRCode />", () => {
afterEach(() => {
resetQRCodeMock();
cleanup();
});
it("renders a QR code", async () => {
mockQRCodeRender();
const { container, getAllByAltText } = render(
<VerificationQRCode qrCodeBytes={new Uint8ClampedArray(Buffer.from("asd"))} />,
);
// wait for the spinner to go away
await waitFor(() => getAllByAltText("QR Code").length === 1, { timeout: 2000 });
await waitForQRCodeRender();
expect(getAllByAltText("QR Code")).toHaveLength(1);
expect(container).toMatchSnapshot();
});
});
apps/web/test/unit-tests/components/views/settings/devices/LoginWithQRFlow-test.tsx
+6 -2
View File
@@ -6,10 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { cleanup, fireEvent, render, screen, waitFor } from "jest-matrix-react";
import { cleanup, fireEvent, render, screen } from "jest-matrix-react";
import React from "react";
import { ClientRendezvousFailureReason, MSC4108FailureReason } from "matrix-js-sdk/src/rendezvous";
import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../../test-utils/qrcode";
import LoginWithQRFlow from "../../../../../../src/components/views/auth/LoginWithQRFlow";
import { LoginWithQRFailureReason, type FailureReason } from "../../../../../../src/components/views/auth/LoginWithQR";
import { Click, Phase } from "../../../../../../src/components/views/auth/LoginWithQR-types";
@@ -31,6 +32,7 @@ describe("<LoginWithQRFlow />", () => {
beforeEach(() => {});
afterEach(() => {
resetQRCodeMock();
onClick.mockReset();
cleanup();
});
@@ -47,11 +49,13 @@ describe("<LoginWithQRFlow />", () => {
});
it("renders QR code", async () => {
mockQRCodeRender();
const { container } = render(
getComponent({ phase: Phase.ShowingQR, code: new TextEncoder().encode("mock-code") }),
);
// QR code is rendered async so we wait for it:
await waitFor(() => screen.getAllByAltText("QR Code").length === 1);
await waitForQRCodeRender();
expect(screen.getAllByAltText("QR Code")).toHaveLength(1);
expect(container).toMatchSnapshot();
});