Clean up our tests in preparation for the testing sprint (#2466)

* Fix coverage reporting

Codecov hasn't been working recently because Vitest doesn't report coverage by default.

* Suppress some noisy log lines

Closes https://github.com/element-hq/element-call/issues/686

* Store test files alongside source files

This way we benefit from not having to maintain the same directory structure twice, and our linters etc. will actually lint test files by default.

* Stop using Vitest globals

Vitest provides globals primarily to make the transition from Jest more smooth. But importing its functions explicitly is considered a better pattern, and we have so few tests right now that it's trivial to migrate them all.

* Remove Storybook directory

We no longer use Storybook.

* Configure Codecov

Add a coverage gate for all new changes and disable its comments.

* upgrade vitest

---------

Co-authored-by: Timo <toger5@hotmail.de>

src/Avatar.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import { useMemo, FC } from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
 
-import { getAvatarUrl } from "./matrix-utils";
+import { getAvatarUrl } from "./utils/matrix";
 import { useClient } from "./ClientContext";
 
 export enum Size {

src/ClientContext.tsx

@@ -39,7 +39,7 @@ import {
   CryptoStoreIntegrityError,
   fallbackICEServerAllowed,
   initClient,
-} from "./matrix-utils";
+} from "./utils/matrix";
 import { widget } from "./widget";
 import {
   PosthogAnalytics,

src/Toast.test.tsx

@@ -0,0 +1,55 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import { render, configure } from "@testing-library/react";
+
+import { Toast } from "../src/Toast";
+import { withFakeTimers } from "./utils/test";
+
+configure({
+  defaultHidden: true,
+});
+
+describe("Toast", () => {
+  test("renders", () => {
+    const { queryByRole } = render(
+      <Toast open={false} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(queryByRole("dialog")).toBe(null);
+    const { getByRole } = render(
+      <Toast open={true} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(getByRole("dialog")).toMatchSnapshot();
+  });
+
+  test("dismisses itself after the specified timeout", () => {
+    withFakeTimers(() => {
+      const onDismiss = vi.fn();
+      render(
+        <Toast open={true} onDismiss={onDismiss} autoDismiss={2000}>
+          Hello world!
+        </Toast>,
+      );
+      vi.advanceTimersByTime(2000);
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+});

src/Toast.tsx

@@ -86,7 +86,7 @@ export const Toast: FC<Props> = ({
         <DialogOverlay
           className={classNames(overlayStyles.bg, overlayStyles.animate)}
         />
-        <DialogContent asChild>
+        <DialogContent aria-describedby={undefined} asChild>
           <DialogClose
             className={classNames(
               overlayStyles.overlay,

src/UrlParams.test.ts

@@ -0,0 +1,98 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, it } from "vitest";
+
+import { getRoomIdentifierFromUrl } from "../src/UrlParams";
+
+const ROOM_NAME = "roomNameHere";
+const ROOM_ID = "!d45f138fsd";
+const ORIGIN = "https://call.element.io";
+const HOMESERVER = "localhost";
+
+describe("UrlParams", () => {
+  describe("handles URL with /room/", () => {
+    it("and nothing else", () => {
+      expect(
+        getRoomIdentifierFromUrl(`/room/${ROOM_NAME}`, "", "").roomAlias,
+      ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
+    });
+
+    it("and #", () => {
+      expect(
+        getRoomIdentifierFromUrl("", `${ORIGIN}/room/`, `#${ROOM_NAME}`)
+          .roomAlias,
+      ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
+    });
+
+    it("and # and server part", () => {
+      expect(
+        getRoomIdentifierFromUrl("", `/room/`, `#${ROOM_NAME}:${HOMESERVER}`)
+          .roomAlias,
+      ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
+    });
+
+    it("and server part", () => {
+      expect(
+        getRoomIdentifierFromUrl(`/room/${ROOM_NAME}:${HOMESERVER}`, "", "")
+          .roomAlias,
+      ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
+    });
+  });
+
+  describe("handles URL without /room/", () => {
+    it("and nothing else", () => {
+      expect(getRoomIdentifierFromUrl(`/${ROOM_NAME}`, "", "").roomAlias).toBe(
+        `#${ROOM_NAME}:${HOMESERVER}`,
+      );
+    });
+
+    it("and with #", () => {
+      expect(getRoomIdentifierFromUrl("", "", `#${ROOM_NAME}`).roomAlias).toBe(
+        `#${ROOM_NAME}:${HOMESERVER}`,
+      );
+    });
+
+    it("and with # and server part", () => {
+      expect(
+        getRoomIdentifierFromUrl("", "", `#${ROOM_NAME}:${HOMESERVER}`)
+          .roomAlias,
+      ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
+    });
+
+    it("and with server part", () => {
+      expect(
+        getRoomIdentifierFromUrl(`/${ROOM_NAME}:${HOMESERVER}`, "", "")
+          .roomAlias,
+      ).toBe(`#${ROOM_NAME}:${HOMESERVER}`);
+    });
+  });
+
+  describe("handles search params", () => {
+    it("(roomId)", () => {
+      expect(
+        getRoomIdentifierFromUrl("", `?roomId=${ROOM_ID}`, "").roomId,
+      ).toBe(ROOM_ID);
+    });
+  });
+
+  it("ignores room alias", () => {
+    expect(
+      getRoomIdentifierFromUrl("", `/room/${ROOM_NAME}:${HOMESERVER}`, "")
+        .roomAlias,
+    ).toBeFalsy();
+  });
+});

src/__snapshots__/Toast-test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toast renders 1`] = `
+<button
+  aria-labelledby="radix-:r4:"
+  class="overlay animate toast"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+  type="button"
+>
+  <h3
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    id="radix-:r4:"
+  >
+    Hello world!
+  </h3>
+</button>
+`;

src/__snapshots__/Toast.test.tsx.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toast > renders 1`] = `
+<button
+  aria-labelledby="radix-:r4:"
+  class="overlay animate toast"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+  type="button"
+>
+  <h3
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    id="radix-:r4:"
+  >
+    Hello world!
+  </h3>
+</button>
+`;

src/analytics/PosthogAnalytics.ts

@@ -144,7 +144,7 @@ export class PosthogAnalytics {
         advanced_disable_decide: true,
       });
       this.enabled = true;
-    } else {
+    } else if (import.meta.env.MODE !== "test") {
       logger.info(
         "Posthog is not enabled because there is no api key or no host given in the config",
       );

src/auth/useInteractiveLogin.ts

@@ -22,7 +22,7 @@ import {
   MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 
-import { initClient } from "../matrix-utils";
+import { initClient } from "../utils/matrix";
 import { Session } from "../ClientContext";
 
 export function useInteractiveLogin(): (

src/auth/useInteractiveRegistration.ts

@@ -22,7 +22,7 @@ import {
   RegisterResponse,
 } from "matrix-js-sdk/src/matrix";
 
-import { initClient } from "../matrix-utils";
+import { initClient } from "../utils/matrix";
 import { Session } from "../ClientContext";
 import { Config } from "../config/Config";
 import { widget } from "../widget";

src/auth/useRecaptcha.ts

@@ -13,17 +13,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-
+// import "@types/grecaptcha";
 import { useEffect, useCallback, useRef, useState } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { translatedError } from "../TranslatedError";
-
 declare global {
   interface Window {
     mxOnRecaptchaLoaded: () => void;
+    // grecaptcha: any;
   }
 }
 

src/config/Config.ts

@@ -44,6 +44,18 @@ export class Config {
     return Config.internalInstance.initPromise;
   }
 
+  /**
+   * This is a alternative initializer that does not load anything
+   * from a hosted config file but instead just initializes the conifg using the
+   * default config.
+   *
+   * It is supposed to only be used in tests. (It is executed in `vite.setup.js`)
+   */
+  public static initDefault(): void {
+    Config.internalInstance = new Config();
+    Config.internalInstance.config = { ...DEFAULT_CONFIG };
+  }
+
   // Convenience accessors
   public static defaultHomeserverUrl(): string | undefined {
     return (

src/home/CallList.test.tsx

@@ -0,0 +1,49 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { render, RenderResult } from "@testing-library/react";
+import { MatrixClient } from "matrix-js-sdk";
+import { MemoryRouter } from "react-router-dom";
+import { describe, expect, it } from "vitest";
+
+import { CallList } from "../../src/home/CallList";
+import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
+
+describe("CallList", () => {
+  const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {
+    return render(
+      <MemoryRouter>
+        <CallList client={{} as MatrixClient} rooms={rooms} />
+      </MemoryRouter>,
+    );
+  };
+
+  it("should show room", async () => {
+    const rooms = [
+      {
+        roomName: "Room #1",
+        roomAlias: "#room-name:server.org",
+        room: {
+          roomId: "!roomId",
+        },
+      },
+    ] as GroupCallRoom[];
+
+    const result = renderComponent(rooms);
+
+    expect(result.queryByText("Room #1")).toBeTruthy();
+  });
+});

src/home/CallList.tsx

@@ -23,7 +23,7 @@ import { FC } from "react";
 import { CopyButton } from "../button";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
-import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../utils/matrix";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";

src/home/RegisteredView.tsx

@@ -26,7 +26,7 @@ import {
   getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";

src/home/UnauthenticatedView.tsx

@@ -31,7 +31,7 @@ import {
   getRelativeRoomUrl,
   roomAliasLocalpartFromRoomName,
   sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";

src/initializer.test.ts

@@ -0,0 +1,37 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect, test } from "vitest";
+
+import { Initializer } from "../src/initializer";
+
+test("initBeforeReact sets font family from URL param", () => {
+  window.location.hash = "#?font=DejaVu Sans";
+  Initializer.initBeforeReact();
+  expect(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      "--font-family",
+    ),
+  ).toBe('"DejaVu Sans"');
+});
+
+test("initBeforeReact sets font scale from URL param", () => {
+  window.location.hash = "#?fontScale=1.2";
+  Initializer.initBeforeReact();
+  expect(
+    getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
+  ).toBe("1.2");
+});

src/otel/ObjectFlattener.test.ts

@@ -0,0 +1,290 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
+import {
+  AudioConcealment,
+  ByteSentStatsReport,
+  ConnectionStatsReport,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import { describe, expect, it } from "vitest";
+
+import { ObjectFlattener } from "../../src/otel/ObjectFlattener";
+
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+describe("ObjectFlattener", () => {
+  const noConcealment: AudioConcealment = {
+    concealedAudio: 0,
+    totalAudioDuration: 0,
+  };
+
+  const statsReport: GroupCallStatsReport<ConnectionStatsReport> = {
+    report: {
+      callId: "callId",
+      opponentMemberId: "opponentMemberId",
+      bandwidth: { upload: 426, download: 0 },
+      bitrate: {
+        upload: 426,
+        download: 0,
+        audio: {
+          upload: 124,
+          download: 0,
+        },
+        video: {
+          upload: 302,
+          download: 0,
+        },
+      },
+      packetLoss: {
+        total: 0,
+        download: 0,
+        upload: 0,
+      },
+      framerate: {
+        local: new Map([
+          ["LOCAL_AUDIO_TRACK_ID", 0],
+          ["LOCAL_VIDEO_TRACK_ID", 30],
+        ]),
+        remote: new Map([
+          ["REMOTE_AUDIO_TRACK_ID", 0],
+          ["REMOTE_VIDEO_TRACK_ID", 60],
+        ]),
+      },
+      resolution: {
+        local: new Map([
+          ["LOCAL_AUDIO_TRACK_ID", { height: -1, width: -1 }],
+          ["LOCAL_VIDEO_TRACK_ID", { height: 460, width: 780 }],
+        ]),
+        remote: new Map([
+          ["REMOTE_AUDIO_TRACK_ID", { height: -1, width: -1 }],
+          ["REMOTE_VIDEO_TRACK_ID", { height: 960, width: 1080 }],
+        ]),
+      },
+      jitter: new Map([
+        ["REMOTE_AUDIO_TRACK_ID", 2],
+        ["REMOTE_VIDEO_TRACK_ID", 50],
+      ]),
+      codec: {
+        local: new Map([
+          ["LOCAL_AUDIO_TRACK_ID", "opus"],
+          ["LOCAL_VIDEO_TRACK_ID", "v8"],
+        ]),
+        remote: new Map([
+          ["REMOTE_AUDIO_TRACK_ID", "opus"],
+          ["REMOTE_VIDEO_TRACK_ID", "v9"],
+        ]),
+      },
+      transport: [
+        {
+          ip: "ff11::5fa:abcd:999c:c5c5:50000",
+          type: "udp",
+          localIp: "2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
+          isFocus: true,
+          localCandidateType: "host",
+          remoteCandidateType: "host",
+          networkType: "ethernet",
+          rtt: NaN,
+        },
+        {
+          ip: "10.10.10.2:22222",
+          type: "tcp",
+          localIp: "10.10.10.100:33333",
+          isFocus: true,
+          localCandidateType: "srfx",
+          remoteCandidateType: "srfx",
+          networkType: "ethernet",
+          rtt: 0,
+        },
+      ],
+      audioConcealment: new Map([
+        ["REMOTE_AUDIO_TRACK_ID", noConcealment],
+        ["REMOTE_VIDEO_TRACK_ID", noConcealment],
+      ]),
+      totalAudioConcealment: noConcealment,
+    },
+  };
+
+  describe("on flattenObjectRecursive", () => {
+    it("should flatter an Map object", () => {
+      const flatObject = {};
+      ObjectFlattener.flattenObjectRecursive(
+        statsReport.report.resolution,
+        flatObject,
+        "matrix.call.stats.connection.resolution.",
+        0,
+      );
+      expect(flatObject).toEqual({
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.width":
+          -1,
+
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.height": 460,
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.width": 780,
+
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.width":
+          -1,
+
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.height": 960,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.width": 1080,
+      });
+    });
+    it("should flatter an Array object", () => {
+      const flatObject = {};
+      ObjectFlattener.flattenObjectRecursive(
+        statsReport.report.transport,
+        flatObject,
+        "matrix.call.stats.connection.transport.",
+        0,
+      );
+      expect(flatObject).toEqual({
+        "matrix.call.stats.connection.transport.0.ip":
+          "ff11::5fa:abcd:999c:c5c5:50000",
+        "matrix.call.stats.connection.transport.0.type": "udp",
+        "matrix.call.stats.connection.transport.0.localIp":
+          "2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
+        "matrix.call.stats.connection.transport.0.isFocus": true,
+        "matrix.call.stats.connection.transport.0.localCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.remoteCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.0.rtt": "NaN",
+        "matrix.call.stats.connection.transport.1.ip": "10.10.10.2:22222",
+        "matrix.call.stats.connection.transport.1.type": "tcp",
+        "matrix.call.stats.connection.transport.1.localIp":
+          "10.10.10.100:33333",
+        "matrix.call.stats.connection.transport.1.isFocus": true,
+        "matrix.call.stats.connection.transport.1.localCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.remoteCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.1.rtt": 0,
+      });
+    });
+  });
+
+  describe("on flattenReportObject Connection Stats", () => {
+    it("should flatten a Report to otel Attributes Object", () => {
+      expect(
+        ObjectFlattener.flattenReportObject(
+          "matrix.call.stats.connection",
+          statsReport.report,
+        ),
+      ).toEqual({
+        "matrix.call.stats.connection.callId": "callId",
+        "matrix.call.stats.connection.opponentMemberId": "opponentMemberId",
+        "matrix.call.stats.connection.bandwidth.download": 0,
+        "matrix.call.stats.connection.bandwidth.upload": 426,
+        "matrix.call.stats.connection.bitrate.audio.download": 0,
+        "matrix.call.stats.connection.bitrate.audio.upload": 124,
+        "matrix.call.stats.connection.bitrate.download": 0,
+        "matrix.call.stats.connection.bitrate.upload": 426,
+        "matrix.call.stats.connection.bitrate.video.download": 0,
+        "matrix.call.stats.connection.bitrate.video.upload": 302,
+        "matrix.call.stats.connection.codec.local.LOCAL_AUDIO_TRACK_ID": "opus",
+        "matrix.call.stats.connection.codec.local.LOCAL_VIDEO_TRACK_ID": "v8",
+        "matrix.call.stats.connection.codec.remote.REMOTE_AUDIO_TRACK_ID":
+          "opus",
+        "matrix.call.stats.connection.codec.remote.REMOTE_VIDEO_TRACK_ID": "v9",
+        "matrix.call.stats.connection.framerate.local.LOCAL_AUDIO_TRACK_ID": 0,
+        "matrix.call.stats.connection.framerate.local.LOCAL_VIDEO_TRACK_ID": 30,
+        "matrix.call.stats.connection.framerate.remote.REMOTE_AUDIO_TRACK_ID": 0,
+        "matrix.call.stats.connection.framerate.remote.REMOTE_VIDEO_TRACK_ID": 60,
+        "matrix.call.stats.connection.jitter.REMOTE_AUDIO_TRACK_ID": 2,
+        "matrix.call.stats.connection.jitter.REMOTE_VIDEO_TRACK_ID": 50,
+        "matrix.call.stats.connection.packetLoss.download": 0,
+        "matrix.call.stats.connection.packetLoss.total": 0,
+        "matrix.call.stats.connection.packetLoss.upload": 0,
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.local.LOCAL_AUDIO_TRACK_ID.width":
+          -1,
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.height": 460,
+        "matrix.call.stats.connection.resolution.local.LOCAL_VIDEO_TRACK_ID.width": 780,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.height":
+          -1,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_AUDIO_TRACK_ID.width":
+          -1,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.height": 960,
+        "matrix.call.stats.connection.resolution.remote.REMOTE_VIDEO_TRACK_ID.width": 1080,
+        "matrix.call.stats.connection.transport.0.ip":
+          "ff11::5fa:abcd:999c:c5c5:50000",
+        "matrix.call.stats.connection.transport.0.type": "udp",
+        "matrix.call.stats.connection.transport.0.localIp":
+          "2aaa:9999:2aaa:999:8888:2aaa:2aaa:7777:50000",
+        "matrix.call.stats.connection.transport.0.isFocus": true,
+        "matrix.call.stats.connection.transport.0.localCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.remoteCandidateType": "host",
+        "matrix.call.stats.connection.transport.0.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.0.rtt": "NaN",
+        "matrix.call.stats.connection.transport.1.ip": "10.10.10.2:22222",
+        "matrix.call.stats.connection.transport.1.type": "tcp",
+        "matrix.call.stats.connection.transport.1.localIp":
+          "10.10.10.100:33333",
+        "matrix.call.stats.connection.transport.1.isFocus": true,
+        "matrix.call.stats.connection.transport.1.localCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.remoteCandidateType": "srfx",
+        "matrix.call.stats.connection.transport.1.networkType": "ethernet",
+        "matrix.call.stats.connection.transport.1.rtt": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_AUDIO_TRACK_ID.concealedAudio": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_AUDIO_TRACK_ID.totalAudioDuration": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_VIDEO_TRACK_ID.concealedAudio": 0,
+        "matrix.call.stats.connection.audioConcealment.REMOTE_VIDEO_TRACK_ID.totalAudioDuration": 0,
+        "matrix.call.stats.connection.totalAudioConcealment.concealedAudio": 0,
+        "matrix.call.stats.connection.totalAudioConcealment.totalAudioDuration": 0,
+      });
+    });
+  });
+
+  describe("on flattenByteSendStatsReportObject", () => {
+    const byteSentStatsReport = new Map<
+      string,
+      number
+    >() as ByteSentStatsReport;
+    byteSentStatsReport.callId = "callId";
+    byteSentStatsReport.opponentMemberId = "opponentMemberId";
+    byteSentStatsReport.set("4aa92608-04c6-428e-8312-93e17602a959", 132093);
+    byteSentStatsReport.set("a08e4237-ee30-4015-a932-b676aec894b1", 913448);
+
+    it("should flatten a Report to otel Attributes Object", () => {
+      expect(
+        ObjectFlattener.flattenReportObject(
+          "matrix.call.stats.bytesSend",
+          byteSentStatsReport,
+        ),
+      ).toEqual({
+        "matrix.call.stats.bytesSend.4aa92608-04c6-428e-8312-93e17602a959": 132093,
+        "matrix.call.stats.bytesSend.a08e4237-ee30-4015-a932-b676aec894b1": 913448,
+      });
+      expect(byteSentStatsReport.callId).toEqual("callId");
+      expect(byteSentStatsReport.opponentMemberId).toEqual("opponentMemberId");
+    });
+  });
+});

src/room/AppSelectionModal.tsx

@@ -22,7 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { Modal } from "../Modal";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
-import { getAbsoluteRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./AppSelectionModal.module.css";
 import { editFragmentQuery } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";

src/room/GroupCallView.tsx

@@ -35,7 +35,7 @@ import { MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
-import { findDeviceByName } from "../media-utils";
+import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
 import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";

src/room/InviteModal.tsx

@@ -25,7 +25,7 @@ import {
 import useClipboard from "react-use-clipboard";
 
 import { Modal } from "../Modal";
-import { getAbsoluteRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./InviteModal.module.css";
 import { Toast } from "../Toast";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";

src/room/checkForParallelCalls.test.ts

@@ -0,0 +1,164 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { vi, Mocked, test, expect } from "vitest";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
+
+import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics";
+import { checkForParallelCalls } from "../../src/room/checkForParallelCalls";
+import { withFakeTimers } from "../utils/test";
+
+const withMockedPosthog = (
+  continuation: (posthog: Mocked<PosthogAnalytics>) => void,
+): void => {
+  const posthog = vi.mocked({
+    trackEvent: vi.fn(),
+  } as unknown as PosthogAnalytics);
+  const instanceSpy = vi
+    .spyOn(PosthogAnalytics, "instance", "get")
+    .mockReturnValue(posthog);
+  try {
+    continuation(posthog);
+  } finally {
+    instanceSpy.mockRestore();
+  }
+};
+
+const mockRoomState = (
+  groupCallMemberContents: Record<string, unknown>[],
+): RoomState => {
+  const stateEvents = groupCallMemberContents.map((content) => ({
+    getContent: (): Record<string, unknown> => content,
+  }));
+  return { getStateEvents: () => stateEvents } as unknown as RoomState;
+};
+
+test("checkForParallelCalls does nothing if all participants are in the same call", () => {
+  withFakeTimers(() => {
+    withMockedPosthog((posthog) => {
+      const roomState = mockRoomState([
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Call",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            {
+              "m.call_id": null, // invalid
+              "m.devices": [
+                {
+                  device_id: "Element Android",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            null, // invalid
+          ],
+        },
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Desktop",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+
+      checkForParallelCalls(roomState);
+      expect(posthog.trackEvent).not.toHaveBeenCalled();
+    });
+  });
+});
+
+test("checkForParallelCalls sends diagnostics to PostHog if there is a split-brain", () => {
+  withFakeTimers(() => {
+    withMockedPosthog((posthog) => {
+      const roomState = mockRoomState([
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Call",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            {
+              "m.call_id": "2",
+              "m.devices": [
+                {
+                  device_id: "Element Android",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          "m.calls": [
+            {
+              "m.call_id": "1",
+              "m.devices": [
+                {
+                  device_id: "Element Desktop",
+                  session_id: "a",
+                  expires_ts: Date.now() + 1000,
+                },
+              ],
+            },
+            {
+              "m.call_id": "2",
+              "m.devices": [
+                {
+                  device_id: "Element Call",
+                  session_id: "a",
+                  expires_ts: Date.now() - 1000,
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+
+      checkForParallelCalls(roomState);
+      expect(posthog.trackEvent).toHaveBeenCalledWith({
+        eventName: "ParallelCalls",
+        participantsPerCall: {
+          "1": 2,
+          "2": 1,
+        },
+      });
+    });
+  });
+});

src/rtcSessionHelper.test.ts

@@ -0,0 +1,94 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { expect, test, vi } from "vitest";
+
+import { enterRTCSession } from "../src/rtcSessionHelpers";
+import { Config } from "../src/config/Config";
+
+test("It joins the correct Session", async () => {
+  const focusFromOlderMembership = {
+    type: "livekit",
+    livekit_service_url: "http://my-oldest-member-service-url.com",
+    livekit_alias: "my-oldest-member-service-alias",
+  };
+
+  const focusConfigFromWellKnown = {
+    type: "livekit",
+    livekit_service_url: "http://my-well-known-service-url.com",
+  };
+  const focusConfigFromWellKnown2 = {
+    type: "livekit",
+    livekit_service_url: "http://my-well-known-service-url2.com",
+  };
+  const clientWellKnown = {
+    "org.matrix.msc4143.rtc_foci": [
+      focusConfigFromWellKnown,
+      focusConfigFromWellKnown2,
+    ],
+  };
+
+  vi.spyOn(Config, "get").mockReturnValue({
+    livekit: { livekit_service_url: "http://my-default-service-url.com" },
+    eula: "",
+  });
+  const mockedSession = vi.mocked({
+    room: {
+      roomId: "roomId",
+      client: {
+        getClientWellKnown: vi.fn().mockReturnValue(clientWellKnown),
+      },
+    },
+    memberships: [],
+    getFocusInUse: vi.fn().mockReturnValue(focusFromOlderMembership),
+    getOldestMembership: vi.fn().mockReturnValue({
+      getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
+    }),
+    joinRoomSession: vi.fn(),
+  }) as unknown as MatrixRTCSession;
+  await enterRTCSession(mockedSession, false);
+
+  expect(mockedSession.joinRoomSession).toHaveBeenLastCalledWith(
+    [
+      {
+        livekit_alias: "my-oldest-member-service-alias",
+        livekit_service_url: "http://my-oldest-member-service-url.com",
+        type: "livekit",
+      },
+      {
+        livekit_alias: "roomId",
+        livekit_service_url: "http://my-well-known-service-url.com",
+        type: "livekit",
+      },
+      {
+        livekit_alias: "roomId",
+        livekit_service_url: "http://my-well-known-service-url2.com",
+        type: "livekit",
+      },
+      {
+        livekit_alias: "roomId",
+        livekit_service_url: "http://my-default-service-url.com",
+        type: "livekit",
+      },
+    ],
+    {
+      focus_selection: "oldest_membership",
+      type: "livekit",
+    },
+    { manageMediaKeys: false },
+  );
+});

src/state/CallViewModel.ts

@@ -67,7 +67,7 @@ import {
   ScreenShareViewModel,
   UserMediaViewModel,
 } from "./MediaViewModel";
-import { accumulate, finalizeValue } from "../observable-utils";
+import { accumulate, finalizeValue } from "../utils/observable";
 import { ObservableScope } from "./ObservableScope";
 import { duplicateTiles } from "../settings/settings";
 import { isFirefox } from "../Platform";

src/useCallViewKeyboardShortcuts.test.tsx

@@ -0,0 +1,92 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { render } from "@testing-library/react";
+import { FC, useRef } from "react";
+import { expect, test, vi } from "vitest";
+import { Button } from "@vector-im/compound-web";
+import userEvent from "@testing-library/user-event";
+
+import { useCallViewKeyboardShortcuts } from "../src/useCallViewKeyboardShortcuts";
+
+interface TestComponentProps {
+  setMicrophoneMuted: (muted: boolean) => void;
+  onButtonClick?: () => void;
+}
+
+const TestComponent: FC<TestComponentProps> = ({
+  setMicrophoneMuted,
+  onButtonClick = (): void => {},
+}) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useCallViewKeyboardShortcuts(
+    ref,
+    () => {},
+    () => {},
+    setMicrophoneMuted,
+  );
+  return (
+    <div ref={ref}>
+      <Button onClick={onButtonClick}>I'm a button</Button>
+    </div>
+  );
+};
+
+test("spacebar unmutes", async () => {
+  const user = userEvent.setup();
+  let muted = true;
+  render(<TestComponent setMicrophoneMuted={(m) => (muted = m)} />);
+
+  await user.keyboard("[Space>]");
+  expect(muted).toBe(false);
+  await user.keyboard("[/Space]");
+  expect(muted).toBe(true);
+});
+
+test("spacebar prioritizes pressing a button", async () => {
+  const user = userEvent.setup();
+  const setMuted = vi.fn();
+  const onClick = vi.fn();
+  render(
+    <TestComponent setMicrophoneMuted={setMuted} onButtonClick={onClick} />,
+  );
+
+  await user.tab(); // Focus the button
+  await user.keyboard("[Space]");
+  expect(setMuted).not.toBeCalled();
+  expect(onClick).toBeCalled();
+});
+
+test("unmuting happens in place of the default action", async () => {
+  const user = userEvent.setup();
+  const defaultPrevented = vi.fn();
+  // In the real application, we mostly just want the spacebar shortcut to avoid
+  // scrolling the page. But to test that here in JSDOM, we need some kind of
+  // container element that can be interactive and receive focus / keydown
+  // events. <video> is kind of a weird choice, but it'll do the job.
+  render(
+    <video
+      tabIndex={0}
+      onKeyDown={(e) => defaultPrevented(e.isDefaultPrevented())}
+    >
+      <TestComponent setMicrophoneMuted={() => {}} />
+    </video>,
+  );
+
+  await user.tab(); // Focus the <video>
+  await user.keyboard("[Space]");
+  expect(defaultPrevented).toBeCalledWith(true);
+});

src/utils/matrix.ts

@@ -32,11 +32,11 @@ import { secureRandomBase64Url } from "matrix-js-sdk/src/randomstring";
 
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
-import IndexedDBWorker from "./IndexedDBWorker?worker";
-import { generateUrlSearchParams, getUrlParams } from "./UrlParams";
-import { Config } from "./config/Config";
-import { E2eeType } from "./e2ee/e2eeType";
-import { EncryptionSystem, saveKeyForRoom } from "./e2ee/sharedKeyManagement";
+import IndexedDBWorker from "../IndexedDBWorker?worker";
+import { generateUrlSearchParams, getUrlParams } from "../UrlParams";
+import { Config } from "../config/Config";
+import { E2eeType } from "../e2ee/e2eeType";
+import { EncryptionSystem, saveKeyForRoom } from "../e2ee/sharedKeyManagement";
 
 export const fallbackICEServerAllowed =
   import.meta.env.VITE_FALLBACK_STUN_ALLOWED === "true";

src/utils/test.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { vi } from "vitest";
+
+export function withFakeTimers(continuation: () => void): void {
+  vi.useFakeTimers();
+  try {
+    continuation();
+  } finally {
+    vi.useRealTimers();
+  }
+}

src/vitest.setup.ts

@@ -0,0 +1,39 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import "global-jsdom/register";
+
+import i18n from "i18next";
+import posthog from "posthog-js";
+import { initReactI18next } from "react-i18next";
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+
+import { Config } from "./config/Config";
+
+// Bare-minimum i18n config
+i18n.use(initReactI18next).init({
+  lng: "en-GB",
+  fallbackLng: "en-GB",
+  interpolation: {
+    escapeValue: false, // React has built-in XSS protections
+  },
+});
+
+Config.initDefault();
+posthog.opt_out_capturing();
+
+afterEach(cleanup);

src/widget.ts

@@ -200,7 +200,8 @@ export const widget = ((): WidgetHelpers | null => {
 
       return { api, lazyActions, client: clientPromise };
     } else {
-      logger.info("No widget API available");
+      if (import.meta.env.MODE !== "test")
+        logger.info("No widget API available");
       return null;
     }
   } catch (e) {