Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 810b8ff

Browse files
richvdhrichvdh
authored
Update references to QrCodeEvent, SasEvent and VerificationEvent (#10991)
* Basic test for IncomingSasDialog * Basic test for VerificationPanel * Replace references to IGeneratedSas and ISasEvent * Some secret references to the callbacks types * Update references to `QrCodeEvent`, `SasEvent` and `VerificationEvent`
1 parent 530197b commit 810b8ff

File tree

5 files changed

+241
-21
lines changed

5 files changed

+241
-21
lines changed

‎src/components/views/dialogs/IncomingSasDialog.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ limitations under the License.
1515
*/
1616

1717
import React, { ReactNode } from "react";
18-
import { IGeneratedSas, ISasEvent, SasEvent } from "matrix-js-sdk/src/crypto/verification/SAS";
19-
import { VerificationBase, VerificationEvent } from "matrix-js-sdk/src/crypto/verification/Base";
18+
import { VerificationBase } from "matrix-js-sdk/src/crypto/verification/Base";
19+
import { GeneratedSas, ShowSasCallbacks, VerifierEvent } from "matrix-js-sdk/src/crypto-api/verification";
2020
import { logger } from "matrix-js-sdk/src/logger";
2121

2222
import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -37,7 +37,7 @@ const PHASE_VERIFIED = 3;
3737
const PHASE_CANCELLED = 4;
3838

3939
interface IProps {
40-
verifier: VerificationBase<SasEvent, any>;
40+
verifier: VerificationBase<VerifierEvent, any>;
4141
onFinished(verified?: boolean): void;
4242
}
4343

@@ -50,11 +50,11 @@ interface IState {
5050
displayname?: string;
5151
} | null;
5252
opponentProfileError: Error | null;
53-
sas: IGeneratedSas | null;
53+
sas: GeneratedSas | null;
5454
}
5555

5656
export default class IncomingSasDialog extends React.Component<IProps, IState> {
57-
private showSasEvent: ISasEvent | null;
57+
private showSasEvent: ShowSasCallbacks | null;
5858

5959
public constructor(props: IProps) {
6060
super(props);
@@ -73,16 +73,16 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
7373
opponentProfileError: null,
7474
sas: null,
7575
};
76-
this.props.verifier.on(SasEvent.ShowSas, this.onVerifierShowSas);
77-
this.props.verifier.on(VerificationEvent.Cancel, this.onVerifierCancel);
76+
this.props.verifier.on(VerifierEvent.ShowSas, this.onVerifierShowSas);
77+
this.props.verifier.on(VerifierEvent.Cancel, this.onVerifierCancel);
7878
this.fetchOpponentProfile();
7979
}
8080

8181
public componentWillUnmount(): void {
8282
if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) {
8383
this.props.verifier.cancel(new Error("User cancel"));
8484
}
85-
this.props.verifier.removeListener(SasEvent.ShowSas, this.onVerifierShowSas);
85+
this.props.verifier.removeListener(VerifierEvent.ShowSas, this.onVerifierShowSas);
8686
}
8787

8888
private async fetchOpponentProfile(): Promise<void> {
@@ -118,7 +118,7 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
118118
});
119119
};
120120

121-
private onVerifierShowSas = (e: ISasEvent): void => {
121+
private onVerifierShowSas = (e: ShowSasCallbacks): void => {
122122
this.showSasEvent = e;
123123
this.setState({
124124
phase: PHASE_SHOW_SAS,

‎src/components/views/right_panel/VerificationPanel.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,18 @@ limitations under the License.
1616

1717
import React from "react";
1818
import { verificationMethods } from "matrix-js-sdk/src/crypto";
19-
import { QrCodeEvent, ReciprocateQRCode, SCAN_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
19+
import { ReciprocateQRCode, SCAN_QR_CODE_METHOD } from "matrix-js-sdk/src/crypto/verification/QRCode";
2020
import {
2121
Phase,
2222
VerificationRequest,
2323
VerificationRequestEvent,
2424
} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
2525
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
2626
import { User } from "matrix-js-sdk/src/models/user";
27-
import { SAS, SasEvent } from "matrix-js-sdk/src/crypto/verification/SAS";
27+
import { SAS } from "matrix-js-sdk/src/crypto/verification/SAS";
2828
import { logger } from "matrix-js-sdk/src/logger";
2929
import { DeviceInfo } from "matrix-js-sdk/src/crypto/deviceinfo";
30+
import { ShowQrCodeCallbacks, ShowSasCallbacks, VerifierEvent } from "matrix-js-sdk/src/crypto-api/verification";
3031

3132
import { MatrixClientPeg } from "../../../MatrixClientPeg";
3233
import VerificationQRCode from "../elements/crypto/VerificationQRCode";
@@ -48,10 +49,10 @@ interface IProps {
4849
}
4950

5051
interface IState {
51-
sasEvent?: SAS["sasEvent"];
52+
sasEvent?: ShowSasCallbacks;
5253
emojiButtonClicked?: boolean;
5354
reciprocateButtonClicked?: boolean;
54-
reciprocateQREvent?: ReciprocateQRCode["reciprocateQREvent"];
55+
reciprocateQREvent?: ShowQrCodeCallbacks;
5556
}
5657

5758
export default class VerificationPanel extends React.PureComponent<IProps, IState> {
@@ -401,8 +402,8 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
401402
const { request } = this.props;
402403
const sasEvent = (request.verifier as SAS).sasEvent;
403404
const reciprocateQREvent = (request.verifier as ReciprocateQRCode).reciprocateQREvent;
404-
request.verifier?.off(SasEvent.ShowSas, this.updateVerifierState);
405-
request.verifier?.off(QrCodeEvent.ShowReciprocateQr, this.updateVerifierState);
405+
request.verifier?.off(VerifierEvent.ShowSas, this.updateVerifierState);
406+
request.verifier?.off(VerifierEvent.ShowReciprocateQr, this.updateVerifierState);
406407
this.setState({ sasEvent, reciprocateQREvent });
407408
};
408409

@@ -411,8 +412,8 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
411412
const hadVerifier = this.hasVerifier;
412413
this.hasVerifier = !!request.verifier;
413414
if (!hadVerifier && this.hasVerifier) {
414-
request.verifier?.on(SasEvent.ShowSas, this.updateVerifierState);
415-
request.verifier?.on(QrCodeEvent.ShowReciprocateQr, this.updateVerifierState);
415+
request.verifier?.on(VerifierEvent.ShowSas, this.updateVerifierState);
416+
request.verifier?.on(VerifierEvent.ShowReciprocateQr, this.updateVerifierState);
416417
try {
417418
// on the requester side, this is also awaited in startSAS,
418419
// but that's ok as verify should return the same promise.
@@ -437,8 +438,8 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
437438
public componentWillUnmount(): void {
438439
const { request } = this.props;
439440
if (request.verifier) {
440-
request.verifier.off(SasEvent.ShowSas, this.updateVerifierState);
441-
request.verifier.off(QrCodeEvent.ShowReciprocateQr, this.updateVerifierState);
441+
request.verifier.off(VerifierEvent.ShowSas, this.updateVerifierState);
442+
request.verifier.off(VerifierEvent.ShowReciprocateQr, this.updateVerifierState);
442443
}
443444
request.off(VerificationRequestEvent.Change, this.onRequestChange);
444445
}

‎src/components/views/verification/VerificationShowSas.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ limitations under the License.
1515
*/
1616

1717
import React from "react";
18-
import { IGeneratedSas } from "matrix-js-sdk/src/crypto/verification/SAS";
1918
import { DeviceInfo } from "matrix-js-sdk/src//crypto/deviceinfo";
19+
import { GeneratedSas } from "matrix-js-sdk/src/crypto-api/verification";
2020

2121
import { _t, _td } from "../../../languageHandler";
2222
import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
@@ -29,7 +29,7 @@ interface IProps {
2929
device?: DeviceInfo;
3030
onDone: () => void;
3131
onCancel: () => void;
32-
sas: IGeneratedSas;
32+
sas: GeneratedSas;
3333
isSelf?: boolean;
3434
inDialog?: boolean; // whether this component is being shown in a dialog and to use DialogButtons
3535
}

‎test/components/views/dialogs/IncomingSasDialog-test.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { act, render } from "@testing-library/react";
18+
import React from "react";
19+
import { Mocked } from "jest-mock";
20+
import { VerificationBase } from "matrix-js-sdk/src/crypto/verification/Base";
21+
import {
22+
EmojiMapping,
23+
ShowSasCallbacks,
24+
VerifierEvent,
25+
VerifierEventHandlerMap,
26+
} from "matrix-js-sdk/src/crypto-api/verification";
27+
import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
28+
29+
import IncomingSasDialog from "../../../../src/components/views/dialogs/IncomingSasDialog";
30+
import { stubClient } from "../../../test-utils";
31+
32+
describe("IncomingSasDialog", () => {
33+
beforeEach(() => {
34+
stubClient();
35+
});
36+
37+
it("shows a spinner at first", () => {
38+
const mockVerifier = makeMockVerifier();
39+
const { container } = renderComponent(mockVerifier);
40+
expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
41+
});
42+
43+
it("should show some emojis once keys are exchanged", () => {
44+
const mockVerifier = makeMockVerifier();
45+
const { container } = renderComponent(mockVerifier);
46+
47+
// fire the ShowSas event
48+
const sasEvent = makeMockSasCallbacks();
49+
act(() => {
50+
mockVerifier.emit(VerifierEvent.ShowSas, sasEvent);
51+
});
52+
53+
const emojis = container.getElementsByClassName("mx_VerificationShowSas_emojiSas_block");
54+
expect(emojis.length).toEqual(7);
55+
for (const emoji of emojis) {
56+
expect(emoji).toHaveTextContent("🦄Unicorn");
57+
}
58+
});
59+
});
60+
61+
function renderComponent(verifier: VerificationBase, onFinished = () => true) {
62+
return render(<IncomingSasDialog verifier={verifier} onFinished={onFinished} />);
63+
}
64+
65+
function makeMockVerifier(): Mocked<VerificationBase> {
66+
const verifier = new TypedEventEmitter<VerifierEvent, VerifierEventHandlerMap>();
67+
Object.assign(verifier, {
68+
cancel: jest.fn(),
69+
});
70+
return verifier as unknown as Mocked<VerificationBase>;
71+
}
72+
73+
function makeMockSasCallbacks(): ShowSasCallbacks {
74+
const unicorn: EmojiMapping = ["🦄", "unicorn"];
75+
return {
76+
sas: {
77+
emoji: new Array<EmojiMapping>(7).fill(unicorn),
78+
},
79+
cancel: jest.fn(),
80+
confirm: jest.fn(),
81+
mismatch: jest.fn(),
82+
};
83+
}

‎test/components/views/right_panel/VerificationPanel-test.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/*
2+
Copyright 2023 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { act, render } from "@testing-library/react";
18+
import React from "react";
19+
import {
20+
Phase,
21+
VerificationRequest,
22+
VerificationRequestEvent,
23+
} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
24+
import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
25+
import { User } from "matrix-js-sdk/src/models/user";
26+
import { Mocked } from "jest-mock";
27+
import { VerificationBase } from "matrix-js-sdk/src/crypto/verification/Base";
28+
import {
29+
EmojiMapping,
30+
ShowSasCallbacks,
31+
VerifierEvent,
32+
VerifierEventHandlerMap,
33+
} from "matrix-js-sdk/src/crypto-api/verification";
34+
import { SAS } from "matrix-js-sdk/src/crypto/verification/SAS";
35+
import { IVerificationChannel } from "matrix-js-sdk/src/crypto/verification/request/Channel";
36+
37+
import VerificationPanel from "../../../../src/components/views/right_panel/VerificationPanel";
38+
import { stubClient } from "../../../test-utils";
39+
40+
describe("<VerificationPanel />", () => {
41+
beforeEach(() => {
42+
stubClient();
43+
});
44+
45+
it("should show a 'Verify by emoji' button", () => {
46+
const container = renderComponent({
47+
request: makeMockVerificationRequest(),
48+
phase: Phase.Ready,
49+
});
50+
container.getByRole("button", { name: "Verify by emoji" });
51+
});
52+
53+
describe("'Verify by emoji' flow", () => {
54+
let mockVerifier: Mocked<VerificationBase>;
55+
let mockRequest: Mocked<VerificationRequest>;
56+
57+
beforeEach(() => {
58+
mockVerifier = makeMockVerifier();
59+
mockRequest = makeMockVerificationRequest({
60+
verifier: mockVerifier,
61+
chosenMethod: "m.sas.v1",
62+
});
63+
});
64+
65+
it("shows a spinner initially", () => {
66+
const { container } = renderComponent({
67+
request: mockRequest,
68+
phase: Phase.Started,
69+
});
70+
expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
71+
});
72+
73+
it("should show some emojis once keys are exchanged", () => {
74+
const { container } = renderComponent({
75+
request: mockRequest,
76+
phase: Phase.Started,
77+
});
78+
79+
// fire the ShowSas event
80+
const sasEvent = makeMockSasCallbacks();
81+
(mockVerifier as unknown as SAS).sasEvent = sasEvent;
82+
act(() => {
83+
mockVerifier.emit(VerifierEvent.ShowSas, sasEvent);
84+
});
85+
86+
const emojis = container.getElementsByClassName("mx_VerificationShowSas_emojiSas_block");
87+
expect(emojis.length).toEqual(7);
88+
for (const emoji of emojis) {
89+
expect(emoji).toHaveTextContent("🦄Unicorn");
90+
}
91+
});
92+
});
93+
});
94+
95+
function renderComponent(props: { request: VerificationRequest; phase: Phase }) {
96+
const defaultProps = {
97+
layout: "",
98+
member: {} as User,
99+
onClose: () => undefined,
100+
isRoomEncrypted: false,
101+
inDialog: false,
102+
};
103+
return render(<VerificationPanel {...defaultProps} {...props} />);
104+
}
105+
106+
function makeMockVerificationRequest(props: Partial<VerificationRequest> = {}): Mocked<VerificationRequest> {
107+
const request = new TypedEventEmitter<VerificationRequestEvent, any>();
108+
Object.assign(request, {
109+
channel: {} as IVerificationChannel,
110+
cancel: jest.fn(),
111+
otherPartySupportsMethod: jest.fn().mockReturnValue(true),
112+
...props,
113+
});
114+
return request as unknown as Mocked<VerificationRequest>;
115+
}
116+
117+
function makeMockVerifier(): Mocked<VerificationBase> {
118+
const verifier = new TypedEventEmitter<VerifierEvent, VerifierEventHandlerMap>();
119+
Object.assign(verifier, {
120+
cancel: jest.fn(),
121+
verify: jest.fn(),
122+
});
123+
return verifier as unknown as Mocked<VerificationBase>;
124+
}
125+
126+
function makeMockSasCallbacks(): ShowSasCallbacks {
127+
const unicorn: EmojiMapping = ["🦄", "unicorn"];
128+
return {
129+
sas: {
130+
emoji: new Array<EmojiMapping>(7).fill(unicorn),
131+
},
132+
cancel: jest.fn(),
133+
confirm: jest.fn(),
134+
mismatch: jest.fn(),
135+
};
136+
}

0 commit comments

Comments
 (0)