matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-08-06 10:22:45 +03:00
Code Activity

Simplify references to VerificationRequest (#11045)

Browse Source 
* Use new `VerificationRequest.getQRCodeBytes()`

* Use new `VerificationRequest.otherDeviceId`

* Remove references to `VerificationRequest.channel`

* Replace references to `VerificationRequest.{requesting,receiving}UserId`

Normally these are guarded by `request.initiatedByMe` so we can trivially
replace it with `request.otherUserId` or `client.getUserId()`. In one place we
actually need to apply some logic.

* increase test coverage

* Even more test coverage

* Even more test coverage
This commit is contained in:
Richard van der Hoff
2023-06-07 15:43:44 +01:00
committed by GitHub
parent ac2c9cef8d
commit 34439ee652
12 changed files with 310 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
test/components/views/elements/crypto/VerificationQRCode-test.tsx Normal file
View File

@@ -0,0 +1,33 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { cleanup, render, waitFor } from "@testing-library/react";
import React from "react";
import VerificationQRCode from "../../../../../src/components/views/elements/crypto/VerificationQRCode";
describe("<VerificationQRCode />", () => {
afterEach(() => {
cleanup();
});
it("renders a QR code", async () => {
const { container, getAllByAltText } = render(<VerificationQRCode qrCodeBytes={Buffer.from("asd")} />);
// wait for the spinner to go away
await waitFor(() => getAllByAltText("QR Code").length === 1);
expect(container).toMatchSnapshot();
});
});

15
test/components/views/elements/crypto/__snapshots__/VerificationQRCode-test.tsx.snap Normal file
View File

@@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<VerificationQRCode /> renders a QR code 1`] = `
<div>
<div
class="mx_QRCode mx_VerificationQRCode"
>
<img
alt="QR Code"
class="mx_VerificationQRCode"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAYAAADApo5rAAAAAklEQVR4AewaftIAAAPVSURBVO3BQQ4bRxAEwawG///lsiADfdqBQWpFkVZGpD8g6adB0hokrUHSGiStQdIaJK1B0hokrUHSGiStQdIaJK1B0hokrUHSGiStQdIaJK1B0hokrUHSGiStQdIaJK1B0hokrUHSevBmSfhWbXlWEk7acpKEZ7XlJAnfqi3vMkhag6Q1SFqDpDVIWg8+RFs+QRLeJQmvaMud2vIJkvCnDZLWIGkNktYgaQ2S1iBpPfgCSbhTW+6WhGe15SQJJ0m40pa7JeFObflkg6Q1SFqDpDVIWoOkNUhaD3SLtlxJwt3aot9jkLQGSWuQtAZJa5C0BknrgX6rtpwk4aQtJ0m40hb9mkHSGiStQdIaJK1B0nrwBdryf9SWT9eWv8kgaQ2S1iBpDZLWIGkNktaDD5GEb5aEK205ScJJW94lCfrXIGkNktYgaQ2S1iBpDZLWgzdry98kCSdtOUnCndqi/zZIWoOkNUhag6Q1SFqDpPXgzZJwp7acJOGTJeEVbbmShFe05U5JOGnLJxskrUHSGiStQdIaJK0Hb9aWK0k4actJEk7aciUJJ235Vm05ScKdknDSllck4Upb3mWQtAZJa5C0BklrkLQGSevBmyXhSlte0ZY7JeEVbbmShJO2vCIJV9py0pZXJOFOSfhkg6Q1SFqDpDVIWoOkNUhaD/7HknClLZ8gCSdtOWnLs5Jw0paTttypLZ9skLQGSWuQtAZJa5C0BknrwRdIwrsk4aQtd2rLK5JwpS13S8KVttwtCVfa8i6DpDVIWoOkNUhag6SV/oB+WRLepS1XknDSlpMknLTlTkl4VlveZZC0BklrkLQGSWuQtAZJ68GbJeFbteVZbTlJwrsk4V2S8K0GSWuQtAZJa5C0BklrkLQefIi2fIIkvEtbTpJwkoRnteUkCSdJeFZbXpGEP22QtAZJa5C0BklrkLQGSevBF0jCndryzdpyJQknSXhFW56VhJO2fLJB0hokrUHSGiStQdJ6oFu05UoSTtpy0pZnteUkCSdteZcknLTlTxskrUHSGiStQdIaJK1B0nqgWyThWUk4actJEq605aQtr0jClbactOUVSbjSlncZJK1B0hokrUHSGiStQdJ68AXa8q3acpKEV7TlWUk4actJW56VhFe05U8bJK1B0hokrUHSGiStQdJ68CGS8LdpyyuScKUtd0vClbbcLQlX2vIug6Q1SFqDpDVIWoOklf6ApJ8GSWuQtAZJa5C0BklrkLQGSWuQtAZJa5C0BklrkLQGSWuQtAZJa5C0BklrkLQGSWuQtAZJa5C0BklrkLQGSWuQtP4BohkVlic75PUAAAAASUVORK5CYII="
/>
</div>
</div>
`;

25
test/components/views/messages/MKeyVerificationRequest-test.tsx
View File

@@ -15,7 +15,7 @@ limitations under the License.
*/
import React from "react";
import { render } from "@testing-library/react";
import { render, within } from "@testing-library/react";
import { EventEmitter } from "events";
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import {
@@ -74,6 +74,29 @@ describe("MKeyVerificationRequest", () => {
expect(container).toHaveTextContent("You sent a verification request");
});
it("should render appropriately when the request was initiated by me and has been accepted", () => {
const event = new MatrixEvent({ type: "m.key.verification.request" });
event.verificationRequest = getMockVerificationRequest({
phase: VerificationPhase.Ready,
otherUserId: "@other:user",
});
const { container } = render(<MKeyVerificationRequest mxEvent={event} />);
expect(container).toHaveTextContent("You sent a verification request");
expect(within(container).getByRole("button")).toHaveTextContent("@other:user accepted");
});
it("should render appropriately when the request was initiated by the other user and has been accepted", () => {
const event = new MatrixEvent({ type: "m.key.verification.request" });
event.verificationRequest = getMockVerificationRequest({
phase: VerificationPhase.Ready,
initiatedByMe: false,
otherUserId: "@other:user",
});
const { container } = render(<MKeyVerificationRequest mxEvent={event} />);
expect(container).toHaveTextContent("@other:user wants to verify");
expect(within(container).getByRole("button")).toHaveTextContent("You accepted");
});
it("should render appropriately when the request was cancelled", () => {
const event = new MatrixEvent({ type: "m.key.verification.request" });
event.verificationRequest = getMockVerificationRequest({

65
test/components/views/right_panel/VerificationPanel-test.tsx
View File

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { act, render } from "@testing-library/react";
import React from "react";
import { act, render, waitFor } from "@testing-library/react";
import React, { ComponentProps } from "react";
import {
Phase,
VerificationRequest,
@@ -31,7 +31,6 @@ import {
VerifierEvent,
VerifierEventHandlerMap,
} from "matrix-js-sdk/src/crypto-api/verification";
import { IVerificationChannel } from "matrix-js-sdk/src/crypto/verification/request/Channel";
import VerificationPanel from "../../../../src/components/views/right_panel/VerificationPanel";
import { stubClient } from "../../../test-utils";
@@ -41,12 +40,57 @@ describe("<VerificationPanel />", () => {
stubClient();
});
it("should show a 'Verify by emoji' button", () => {
const container = renderComponent({
request: makeMockVerificationRequest(),
phase: Phase.Ready,
describe("'Ready' phase (dialog mode)", () => {
it("should show a 'Start' button", () => {
const container = renderComponent({
request: makeMockVerificationRequest({
phase: Phase.Ready,
}),
layout: "dialog",
});
container.getByRole("button", { name: "Start" });
});
it("should show a QR code if the other side can scan and QR bytes are calculated", async () => {
const request = makeMockVerificationRequest({
phase: Phase.Ready,
});
request.getQRCodeBytes.mockReturnValue(Buffer.from("test", "utf-8"));
const container = renderComponent({
request: request,
layout: "dialog",
});
container.getByText("Scan this unique code");
// it shows a spinner at first; wait for the update which makes it show the QR code
await waitFor(() => {
container.getByAltText("QR Code");
});
});
});
describe("'Ready' phase (regular mode)", () => {
it("should show a 'Verify by emoji' button", () => {
const container = renderComponent({
request: makeMockVerificationRequest({ phase: Phase.Ready }),
});
container.getByRole("button", { name: "Verify by emoji" });
});
it("should show a QR code if the other side can scan and QR bytes are calculated", async () => {
const request = makeMockVerificationRequest({
phase: Phase.Ready,
});
request.getQRCodeBytes.mockReturnValue(Buffer.from("test", "utf-8"));
const container = renderComponent({
request: request,
member: new User("@other:user"),
});
container.getByText("Ask @other:user to scan your code:");
// it shows a spinner at first; wait for the update which makes it show the QR code
await waitFor(() => {
container.getByAltText("QR Code");
});
});
container.getByRole("button", { name: "Verify by emoji" });
});
describe("'Verify by emoji' flow", () => {
@@ -91,13 +135,14 @@ describe("<VerificationPanel />", () => {
});
});
function renderComponent(props: { request: VerificationRequest; phase: Phase }) {
function renderComponent(props: Partial<ComponentProps<typeof VerificationPanel>> & { request: VerificationRequest }) {
const defaultProps = {
layout: "",
member: {} as User,
onClose: () => undefined,
isRoomEncrypted: false,
inDialog: false,
phase: props.request.phase,
};
return render(<VerificationPanel {...defaultProps} {...props} />);
}
@@ -105,9 +150,9 @@ function renderComponent(props: { request: VerificationRequest; phase: Phase })
function makeMockVerificationRequest(props: Partial<VerificationRequest> = {}): Mocked<VerificationRequest> {
const request = new TypedEventEmitter<VerificationRequestEvent, any>();
Object.assign(request, {
channel: {} as IVerificationChannel,
cancel: jest.fn(),
otherPartySupportsMethod: jest.fn().mockReturnValue(true),
getQRCodeBytes: jest.fn(),
...props,
});
return request as unknown as Mocked<VerificationRequest>;

93
test/components/views/toasts/VerificationRequestToast-test.tsx Normal file
View File

@@ -0,0 +1,93 @@
/*
Copyright 2023 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ComponentProps } from "react";
import { Mocked } from "jest-mock";
import { act, render, RenderResult } from "@testing-library/react";
import {
VerificationRequest,
VerificationRequestEvent,
} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
import { IMyDevice, MatrixClient } from "matrix-js-sdk/src/client";
import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
import VerificationRequestToast from "../../../../src/components/views/toasts/VerificationRequestToast";
import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
function renderComponent(
props: Partial<ComponentProps<typeof VerificationRequestToast>> & { request: VerificationRequest },
): RenderResult {
const propsWithDefaults = {
toastKey: "test",
...props,
};
return render(<VerificationRequestToast {...propsWithDefaults} />);
}
describe("VerificationRequestToast", () => {
let client: Mocked<MatrixClient>;
beforeEach(() => {
client = getMockClientWithEventEmitter({
...mockClientMethodsUser(),
getStoredDevice: jest.fn(),
getDevice: jest.fn(),
});
});
it("should render a self-verification", async () => {
const otherDeviceId = "other_device";
const otherIDevice: IMyDevice = { device_id: otherDeviceId, last_seen_ip: "1.1.1.1" };
client.getDevice.mockResolvedValue(otherIDevice);
const otherDeviceInfo = new DeviceInfo(otherDeviceId);
otherDeviceInfo.unsigned = { device_display_name: "my other device" };
client.getStoredDevice.mockReturnValue(otherDeviceInfo);
const request = makeMockVerificationRequest({
isSelfVerification: true,
otherDeviceId,
});
const result = renderComponent({ request });
await act(async () => {
await flushPromises();
});
expect(result.container).toMatchSnapshot();
});
it("should render a cross-user verification", async () => {
const otherUserId = "@other:user";
const request = makeMockVerificationRequest({
isSelfVerification: false,
otherUserId,
});
const result = renderComponent({ request });
await act(async () => {
await flushPromises();
});
expect(result.container).toMatchSnapshot();
});
});
function makeMockVerificationRequest(props: Partial<VerificationRequest> = {}): Mocked<VerificationRequest> {
const request = new TypedEventEmitter<VerificationRequestEvent, any>();
Object.assign(request, {
...props,
});
return request as unknown as Mocked<VerificationRequest>;
}

68
test/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap Normal file
View File

@@ -0,0 +1,68 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VerificationRequestToast should render a cross-user verification 1`] = `
<div>
<div>
<div
class="mx_Toast_description"
>
@alice:domain (@other:user)
</div>
<div
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
role="button"
tabindex="0"
>
Ignore (NaN)
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Verify Session
</div>
</div>
</div>
</div>
`;
exports[`VerificationRequestToast should render a self-verification 1`] = `
<div>
<div>
<div
class="mx_Toast_description"
>
my other device
<div
class="mx_Toast_detail"
>
other_device from 1.1.1.1
</div>
</div>
<div
aria-live="off"
class="mx_Toast_buttons"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
role="button"
tabindex="0"
>
Ignore (NaN)
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Verify Session
</div>
</div>
</div>
</div>
`;