R Midhun Suresh
2933b51fea
* Ignore specific directories Otherwise newly generated screenshots will be ignored. * Create a CallStartedTileView This view will render a tile that shows when an EC call was started in the timeline. * Add storybook tests * Add vite tests * Export the view from shared-components package * Add a viewmodel for driving the view * Support rendering the tile in the tile factory * Fix tile rendering * Add comment to explain css height * Use semantic token for gap * Update snapshot * Use min-height over height This will scale the element if the user sets a custom font size. * Don't show timestamp for call started tile Timestamp is already shown as a part of the tile content. * Fix broken tile on bubble layout The tile should be full-width and not shown within a bubble. * Fix tests * Update storybook title
72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
/*
|
|
* Copyright 2026 Element Creations Ltd.
|
|
*
|
|
* 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 MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
|
|
import { CallType } from "@element-hq/web-shared-components";
|
|
import { waitFor } from "jest-matrix-react";
|
|
|
|
import { mkEvent } from "../../test-utils";
|
|
import { CallStartedTileViewModel } from "../../../src/viewmodels/room/timeline/event-tile/call/CallStartedTileViewModel";
|
|
import SettingsStore from "../../../src/settings/SettingsStore";
|
|
import { SettingLevel } from "../../../src/settings/SettingLevel";
|
|
|
|
function getMockedRtcNotificationEvent(intent: string, senderTs: number, serverTs: number): MatrixEvent {
|
|
const mockEvent = mkEvent({
|
|
type: EventType.RTCNotification,
|
|
user: "@foo:m.org",
|
|
content: {
|
|
"m.call.intent": intent,
|
|
"sender_ts": senderTs,
|
|
},
|
|
ts: serverTs,
|
|
event: true,
|
|
});
|
|
return mockEvent;
|
|
}
|
|
|
|
describe("CallStartedTileViewModel", () => {
|
|
it("should set voice intent in state", () => {
|
|
const mxEvent = getMockedRtcNotificationEvent("audio", 1752583130365, 1752583130365);
|
|
const vm = new CallStartedTileViewModel({ mxEvent });
|
|
const { type } = vm.getSnapshot();
|
|
expect(type).toStrictEqual(CallType.Voice);
|
|
});
|
|
|
|
it("should set video intent in state", () => {
|
|
const mxEvent = getMockedRtcNotificationEvent("video", 1752583130365, 1752583130365);
|
|
const vm = new CallStartedTileViewModel({ mxEvent });
|
|
const { type } = vm.getSnapshot();
|
|
expect(type).toStrictEqual(CallType.Video);
|
|
});
|
|
|
|
it("should calculate time string correctly", () => {
|
|
const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
|
|
const vm = new CallStartedTileViewModel({ mxEvent });
|
|
const { timestamp } = vm.getSnapshot();
|
|
expect(timestamp).toStrictEqual("17:55");
|
|
});
|
|
|
|
it("should calculate time string correctly when configured to use 12 hour format", async () => {
|
|
const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
|
|
await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
|
|
const vm = new CallStartedTileViewModel({ mxEvent });
|
|
const { timestamp } = vm.getSnapshot();
|
|
expect(timestamp).toStrictEqual("5:55 PM");
|
|
SettingsStore.reset();
|
|
});
|
|
|
|
it("should change timestamp format when setting is modified", async () => {
|
|
const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
|
|
const vm = new CallStartedTileViewModel({ mxEvent });
|
|
expect(vm.getSnapshot().timestamp).toStrictEqual("17:55");
|
|
await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
|
|
await waitFor(() => {
|
|
expect(vm.getSnapshot().timestamp).toStrictEqual("5:55 PM");
|
|
});
|
|
});
|
|
});
|