Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-24 00:38:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update tests

Browse Source
This commit is contained in:
Will Hunt 2024-11-11 15:21:36 +00:00
parent 8f05331703
commit 005cbdf9b1
2 changed files with 14 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/button/ReactionToggleButton.test.tsx
View File

@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details. Please see LICENSE in the repository root for full details.
*/ */
import { fireEvent, render } from "@testing-library/react"; import { render } from "@testing-library/react";
import { act } from "react";
import { expect, test } from "vitest"; import { expect, test } from "vitest";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc"; import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
import { TooltipProvider } from "@vector-im/compound-web"; import { TooltipProvider } from "@vector-im/compound-web";
@ -122,7 +121,7 @@ test("Can react with emoji", async () => {
]); ]);
}); });
test("Can search for and send emoji", async () => { test("Can fully expand emoji picker", async () => {
const user = userEvent.setup(); const user = userEvent.setup();
const room = new MockRoom(memberUserIdAlice); const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership); const rtcSession = new MockRTCSession(room, membership);
@ -130,9 +129,7 @@ test("Can search for and send emoji", async () => {
<TestComponent rtcSession={rtcSession} room={room} />, <TestComponent rtcSession={rtcSession} room={room} />,
); );
await user.click(getByLabelText("action.raise_hand_or_send_reaction")); await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
await user.click(getByLabelText("action.open_search")); await user.click(getByLabelText("action.show_more"));
// Search should autofocus.
await user.keyboard("crickets");
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
await user.click(getByText("🦗")); await user.click(getByText("🦗"));
@ -152,38 +149,6 @@ test("Can search for and send emoji", async () => {
]); ]);
}); });
test("Can search for and send emoji with the keyboard", async () => {
const user = userEvent.setup();
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByLabelText, getByPlaceholderText, container } = render(
<TestComponent rtcSession={rtcSession} room={room} />,
);
await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
await user.click(getByLabelText("action.open_search"));
const searchField = getByPlaceholderText("reaction_search");
// Search should autofocus.
await user.keyboard("crickets");
expect(container).toMatchSnapshot();
act(() => {
fireEvent.keyDown(searchField, { key: "Enter" });
});
expect(room.testSentEvents).toEqual([
[
undefined,
ElementCallReactionEventType,
{
"m.relates_to": {
event_id: memberEventAlice,
rel_type: "m.reference",
},
name: "crickets",
emoji: "🦗",
},
],
]);
});
test("Can close search", async () => { test("Can close search", async () => {
const user = userEvent.setup(); const user = userEvent.setup();
const room = new MockRoom(memberUserIdAlice); const room = new MockRoom(memberUserIdAlice);
@ -192,23 +157,7 @@ test("Can close search", async () => {
<TestComponent rtcSession={rtcSession} room={room} />, <TestComponent rtcSession={rtcSession} room={room} />,
); );
await user.click(getByLabelText("action.raise_hand_or_send_reaction")); await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
await user.click(getByLabelText("action.open_search")); await user.click(getByLabelText("action.show_more"));
await user.click(getByLabelText("action.close_search")); await user.click(getByLabelText("action.show_less"));
expect(container).toMatchSnapshot();
});
test("Can close search with the escape key", async () => {
const user = userEvent.setup();
const room = new MockRoom(memberUserIdAlice);
const rtcSession = new MockRTCSession(room, membership);
const { getByLabelText, container, getByPlaceholderText } = render(
<TestComponent rtcSession={rtcSession} room={room} />,
);
await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
await user.click(getByLabelText("action.open_search"));
const searchField = getByPlaceholderText("reaction_search");
act(() => {
fireEvent.keyDown(searchField, { key: "Escape" });
});
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); });

87
src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
View File

@ -10,7 +10,7 @@ exports[`Can close search 1`] = `
aria-expanded="true" aria-expanded="true"
aria-haspopup="true" aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction" aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":rec:" aria-labelledby=":rad:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59" class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary" data-kind="primary"
data-size="lg" data-size="lg"
@ -36,16 +36,19 @@ exports[`Can close search 1`] = `
</div> </div>
`; `;
exports[`Can close search with the escape key 1`] = ` exports[`Can fully expand emoji picker 1`] = `
<div> <div
aria-hidden="true"
data-aria-hidden="true"
>
<button <button
aria-disabled="false" aria-disabled="false"
aria-expanded="false" aria-expanded="true"
aria-haspopup="true" aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction" aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":rhh:" aria-labelledby=":r74:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59" class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="secondary" data-kind="primary"
data-size="lg" data-size="lg"
role="button" role="button"
tabindex="0" tabindex="0"
@ -167,75 +170,3 @@ exports[`Can raise hand 1`] = `
</button> </button>
</div> </div>
`; `;
exports[`Can search for and send emoji 1`] = `
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":r74:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;
exports[`Can search for and send emoji with the keyboard 1`] = `
<div
aria-hidden="true"
data-aria-hidden="true"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-haspopup="true"
aria-label="action.raise_hand_or_send_reaction"
aria-labelledby=":ra3:"
class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
data-kind="primary"
data-size="lg"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
/>
</svg>
</button>
</div>
`;