From 3fc823e04933e3aaca15ecf6831c6d744fb6054e Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 15 Apr 2026 15:51:21 +0200 Subject: [PATCH] Fix unit tests --- src/button/Button.tsx | 8 ++--- src/components/CallFooter.tsx | 2 ++ src/room/InCallView.test.tsx | 27 +++++++++-------- src/room/InCallView.tsx | 6 +++- .../__snapshots__/InCallView.test.tsx.snap | 29 +++---------------- 5 files changed, 30 insertions(+), 42 deletions(-) diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 9dec7d9c..8cb876a8 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -164,7 +164,7 @@ export const LoudspeakerButton: FC = ({ ); }; -function classNamesForScrrenWidth( +function classNamesForScreenWidth( className?: string, forScreenWidth?: "wide" | "narrow", ): string { @@ -190,10 +190,10 @@ export const SettingsIconButton: FC = ({ return ( - + ); @@ -213,7 +213,7 @@ export const SettingsButton: FC = ({ return ( = ({ key="settings" showForScreenWidth="narrow" onClick={openSettings} + data-testid="settings-bottom-center" />, ); } @@ -222,6 +223,7 @@ export const CallFooter: FC = ({ kind="secondary" showForScreenWidth="wide" onClick={openSettings} + data-testid="settings-bottom-left" /> )} {children} diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx index 692b920c..c0b298a6 100644 --- a/src/room/InCallView.test.tsx +++ b/src/room/InCallView.test.tsx @@ -44,7 +44,6 @@ import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices"; import { constant } from "../state/Behavior"; import { AppBar } from "../AppBar"; import { initializeWidget } from "../widget"; -import callFooterStyles from "../components/CallFooter.module.css"; initializeWidget(); vi.hoisted( @@ -123,7 +122,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & { [local, alice], undefined, mediaDevices, - {}, + args.callViewModelOptions, ); rtcSession.joined = true; @@ -191,7 +190,7 @@ describe("InCallView", () => { }); }); describe("settings button with AppBar header", () => { - it("is accessible when showHeader is false", () => { + it("mobile landscape, is accessible when showHeader is false", () => { // windowSize with height <= 600 results in "flat" windowMode, // which means showHeader$ emits false. const { getAllByRole } = createInCallView({ @@ -204,20 +203,20 @@ describe("InCallView", () => { }); // When showHeader is false, hideSettingsButton is false, // so the settings button is visible in the footer. - const settingsBtns = getAllByRole("button", { name: "Settings" }); - expect(settingsBtns.length).toBe(2); - const [btnA, btnB] = settingsBtns; + 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(btnA).toBeInTheDocument(); - expect(btnA).toHaveClass(callFooterStyles.settingsOnlyShowWide); - expect(btnB).toBeInTheDocument(); - expect(btnB).toHaveClass(callFooterStyles.settingsOnlyShowNarrow); + expect(settingsBtn.length).toBe(2); + expect(settingsBtn[0]).toHaveAttribute( + "data-testid", + "settings-bottom-left", + ); + expect(settingsBtn[0]).toBeVisible(); }); - it("is accessible when showHeader is true", () => { + it("mobile portrait, is accessible when showHeader is true", () => { // windowSize with height > 600 and width > 600 results in "normal" windowMode, // which means showHeader$ emits true. const { getAllByRole } = createInCallView({ @@ -232,8 +231,12 @@ describe("InCallView", () => { // 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(settingsBtns.length).toBe(1); + expect(settingsBtns[0]).toHaveAttribute( + "data-testid", + "settings-app-bar", + ); expect(settingsBtns[0]).toBeVisible(); }); }); diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 133620f9..4940f4d8 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -565,7 +565,11 @@ export const InCallView: FC = ({ const settingsButtonInAppBar = headerStyle === HeaderStyle.AppBar && showHeader; useAppBarSecondaryButton( - , + , ); // Only hide the settings button if we have an AppBar header and we are showing the header diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap index 2a9638d8..be2fd99c 100644 --- a/src/room/__snapshots__/InCallView.test.tsx.snap +++ b/src/room/__snapshots__/InCallView.test.tsx.snap @@ -172,6 +172,7 @@ exports[`InCallView > rendering > renders 1`] = ` aria-labelledby="_r_8_" class="_icon-button_1215g_8 settingsOnlyShowWide" data-kind="secondary" + data-testid="settings-bottom-left" role="button" style="--cpd-icon-button-size: 32px;" tabindex="0" @@ -307,6 +308,7 @@ exports[`InCallView > rendering > renders 1`] = ` class="_button_13vu4_8 settingsOnlyShowNarrow _has-icon_13vu4_60 _icon-only_13vu4_53" data-kind="secondary" data-size="lg" + data-testid="settings-bottom-center" role="button" tabindex="0" > @@ -372,30 +374,7 @@ exports[`InCallView > rendering > renders 1`] = ` -