Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-08 20:09:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update and simplify tests

Browse Source
This commit is contained in:
Robin
2026-05-20 13:43:33 +02:00
parent 43f1b89535
commit 4b175b814e
1 changed files with 19 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/room/InCallView.test.tsx
View File

@@ -14,7 +14,12 @@ import {
type MockedFunction, type MockedFunction,
vi, vi,
} from "vitest"; } from "vitest";
import { render, type RenderResult } from "@testing-library/react"; import {
getByRole,
render,
screen,
type RenderResult,
} from "@testing-library/react";
import { type LocalParticipant } from "livekit-client"; import { type LocalParticipant } from "livekit-client";
import { BehaviorSubject, of } from "rxjs"; import { BehaviorSubject, of } from "rxjs";
import { BrowserRouter, MemoryRouter } from "react-router-dom"; import { BrowserRouter, MemoryRouter } from "react-router-dom";
@@ -189,57 +194,35 @@ describe("InCallView", () => {
expect(container).toMatchSnapshot(); expect(container).toMatchSnapshot();
}); });
}); });
describe("settings button with AppBar header", () => { describe("settings button with AppBar header", () => {
it("mobile landscape, is accessible when showHeader is false", () => { it("mobile portrait, is visible in the header", () => {
// windowSize with height <= 600 results in "flat" windowMode, createInCallView({
// which means showHeader$ emits false.
const { getAllByRole } = createInCallView({
initialRoute: "/?header=app_bar", initialRoute: "/?header=app_bar",
withAppBar: true, withAppBar: true,
callViewModelOptions: { callViewModelOptions: {
// Set windowMode$ to "flat" (height <= 600) // Narrow like a mobile phone in portrait orientation
windowSize$: constant({ width: 1000, height: 500 }), windowSize$: constant({ width: 400, height: 700 }),
}, },
}); });
// When showHeader is false, hideSettingsButton is false,
// so the settings button is visible in the footer. getByRole(screen.getByRole("banner"), "button", { name: "Settings" });
const settingsBtn = getAllByRole("button", { name: "Settings" });
// here we check for two settings buttons because there are two buttons in the bottom bar. One for the
// the narrow layout and another one for the wide layout.
// Their visibility uses @media css queries, which cannot be tested in JSDOM,
// but we can at least check that both buttons are rendered and have the correct classes.
expect(settingsBtn.length).toBe(2);
expect(settingsBtn[0]).toHaveAttribute(
"data-testid",
"settings-bottom-left",
);
expect(settingsBtn[0]).toBeVisible();
}); });
it("mobile portrait, is accessible when showHeader is true", () => { it("mobile landscape, is not visible anywhere", () => {
// windowSize with height > 600 and width > 600 results in "normal" windowMode, const { queryByRole } = createInCallView({
// which means showHeader$ emits true.
const { getAllByRole } = createInCallView({
initialRoute: "/?header=app_bar", initialRoute: "/?header=app_bar",
withAppBar: true, withAppBar: true,
callViewModelOptions: { callViewModelOptions: {
// Set windowMode$ to "normal" (height >= 600) // Flat like a mobile phone in landscape orientation
windowSize$: constant({ width: 1000, height: 800 }), windowSize$: constant({ width: 700, height: 400 }),
}, },
}); });
// When showHeader is true and headerStyle is AppBar,
// hideSettingsButton is true in the footer, but the settings
// button is rendered in the AppBar via useAppBarSecondaryButton.
const settingsBtns = getAllByRole("button", { name: "Settings" });
expect(settingsBtns.length).toBe(1); expect(queryByRole("button", { name: "Settings" })).toBe(null);
expect(settingsBtns[0]).toHaveAttribute(
"data-testid",
"settings-app-bar",
);
expect(settingsBtns[0]).toBeVisible();
}); });
}); });
describe("audioOutputSwitcher", () => { describe("audioOutputSwitcher", () => {
it("is visible and can be clicked", async () => { it("is visible and can be clicked", async () => {
const user = userEvent.setup(); const user = userEvent.setup();