Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Fix emoji verification responsive layout (#31899)

Browse Source 
* Extract SasEmoji to shared-components

and improve responsive layout

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add baseline screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix e2e test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add SasEmoji snapshot test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add figma link

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve doc

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add new dir to crypto-web-reviewers codeowners as per ask

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-01-29 17:40:04 +00:00
committed by GitHub
parent 24018f7e94
commit e07e26cae5
23 changed files with 444 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
test/unit-tests/components/views/VerificationShowSas-test.tsx
View File

@@ -1,23 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { type EmojiMapping } from "matrix-js-sdk/src/crypto-api";
import { tEmoji } from "../../../../src/components/views/verification/VerificationShowSas";
describe("tEmoji", () => {
it.each([
["en-GB", "Dog"],
["en", "Dog"],
["de-DE", "Hund"],
["pt", "Cachorro"],
])("should handle locale %s", (locale, expectation) => {
const emoji: EmojiMapping = ["🐶", "Dog"];
expect(tEmoji(emoji, locale)).toEqual(expectation);
});
});

9
test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx
View File

@@ -34,7 +34,7 @@ describe("IncomingSasDialog", () => {
it("should show some emojis once keys are exchanged", () => {
const mockVerifier = makeMockVerifier();
const { container } = renderComponent(mockVerifier);
const { getAllByText } = renderComponent(mockVerifier);
// fire the ShowSas event
const sasEvent = makeMockSasCallbacks();
@@ -42,11 +42,8 @@ describe("IncomingSasDialog", () => {
mockVerifier.emit(VerifierEvent.ShowSas, sasEvent);
});
const emojis = container.getElementsByClassName("mx_VerificationShowSas_emojiSas_block");
expect(emojis.length).toEqual(7);
for (const emoji of emojis) {
expect(emoji).toHaveTextContent("🦄Unicorn");
}
expect(getAllByText("🦄")).toHaveLength(7);
expect(getAllByText("Unicorn")).toHaveLength(7);
});
});

17
test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
View File

@@ -456,41 +456,38 @@ exports[`VerificationRequestDialog When other device accepted emoji, displays em
Confirm that the emojis below match those shown on your other device.
</p>
<div
class="mx_VerificationShowSas_emojiSas"
class="_container_1lqqy_8 mx_VerificationShowSas_emojiSas"
>
<div
class="mx_VerificationShowSas_emojiSas_block"
class="_segment_1lqqy_15"
>
<div
aria-hidden="true"
class="mx_VerificationShowSas_emojiSas_emoji"
class="_emoji_1lqqy_23"
>
🐶
</div>
<div
class="mx_VerificationShowSas_emojiSas_label"
class="_label_1lqqy_29"
>
Dog
</div>
</div>
<div
class="mx_VerificationShowSas_emojiSas_block"
class="_segment_1lqqy_15"
>
<div
aria-hidden="true"
class="mx_VerificationShowSas_emojiSas_emoji"
class="_emoji_1lqqy_23"
>
🐱
</div>
<div
class="mx_VerificationShowSas_emojiSas_label"
class="_label_1lqqy_29"
>
Cat
</div>
</div>
<div
class="mx_VerificationShowSas_emojiSas_break"
/>
</div>
<p />
<div

9
test/unit-tests/components/views/right_panel/VerificationPanel-test.tsx
View File

@@ -105,7 +105,7 @@ describe("<VerificationPanel />", () => {
});
it("should show some emojis once keys are exchanged", () => {
const { container } = renderComponent({
const { getAllByText } = renderComponent({
request: mockRequest,
phase: Phase.Started,
});
@@ -117,11 +117,8 @@ describe("<VerificationPanel />", () => {
mockVerifier.emit(VerifierEvent.ShowSas, sasEvent);
});
const emojis = container.getElementsByClassName("mx_VerificationShowSas_emojiSas_block");
expect(emojis.length).toEqual(7);
for (const emoji of emojis) {
expect(emoji).toHaveTextContent("🦄Unicorn");
}
expect(getAllByText("🦄")).toHaveLength(7);
expect(getAllByText("Unicorn")).toHaveLength(7);
});
describe("'Verify own device' flow", () => {