Files
element-web/test/viewmodels/message-body/MessageTimestampViewModel-test.tsx
T
rbondesson ca3bc30f90 Refactor MessageTimestamp using MVVM and move to shared-components (#31988)
* Create a MessageTimestampView in shared components

* Switching to use shared component and view model in element-web

* Add .mx_MessageTimestamp tp _common.pcss since it is used extensively in element-web

* Added comments to view model

* Updating after Add options for consistent screenshots

* Moved rendering of late icon to EventTile

* Update shared component snaps

* Added I18nContext.Provider to Modal.tsx and HtmlExport.tsx to make them work with shared components

* Avoid circular dependencies for ModuleApi

* Adjust role and wire handlers in view model

* Change to role="link"

* Revert I18nContext.Provider changes

* Updated snapshot

* Provide I18nContext for shared-components used inside dialogs and html-export rendered in a separate root.

* Add patch for react-sdk-module-api to shared components

* Add setProps to MessageTimeViewModel and useEffect on wrappers

* Added more tests to improve coverage

* Changes after PR review

* Use specific setters in the viewmodel more relating to the business logic.

* Remove unused CSS properties

* New snapshot after merge

* Removed aria-hidden logic and display tooltips in stories

* Remove await for toolitp in HasInhibitTooltip story

* Add screenshots with visible tooltips

* Fixes after merge and review comments

* Updated snapshots for unit tests

* Removed one test since tooltips are not rendered to snapshots
2026-02-20 09:29:26 +00:00

124 lines
4.1 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 * as DateUtils from "../../../src/DateUtils";
import { MessageTimestampViewModel } from "../../../src/viewmodels/message-body/MessageTimestampViewModel";
jest.mock("../../../src/settings/SettingsStore");
describe("MessageTimestampViewModel", () => {
// Friday Dec 17 2021, 9:09am
const nowDate = new Date("2021-12-17T08:09:00.000Z");
const HOUR_MS = 3600000;
const DAY_MS = HOUR_MS * 24;
afterEach(() => {
jest.restoreAllMocks();
});
it("should return the snapshot", () => {
const vm = new MessageTimestampViewModel({
ts: nowDate.getTime(),
});
expect(vm.getSnapshot()).toMatchObject({
ts: "08:09",
tsSentAt: "Fri, Dec 17, 2021, 08:09:00",
});
});
it("should return the snapshot with tsReceivedAt", () => {
const vm = new MessageTimestampViewModel({
ts: nowDate.getTime(),
receivedTs: nowDate.getTime() + DAY_MS,
});
expect(vm.getSnapshot()).toMatchObject({
ts: "08:09",
tsSentAt: "Fri, Dec 17, 2021, 08:09:00",
tsReceivedAt: "Sat, Dec 18, 2021, 08:09:00",
});
});
it("should return the snapshot with extra class names", () => {
const vm = new MessageTimestampViewModel({
ts: nowDate.getTime(),
});
expect(vm.getSnapshot()).toMatchObject({
ts: "08:09",
tsSentAt: "Fri, Dec 17, 2021, 08:09:00",
className: "mx_MessageTimestamp",
});
});
it("should use formatRelativeTime when showRelative is true", () => {
jest.spyOn(DateUtils, "formatFullDate").mockReturnValue("SENT_AT");
const formatRelativeTimeSpy = jest.spyOn(DateUtils, "formatRelativeTime").mockReturnValue("RELATIVE");
const vm = new MessageTimestampViewModel({
ts: nowDate.getTime(),
showRelative: true,
showTwelveHour: true,
});
expect(vm.getSnapshot()).toMatchObject({
ts: "RELATIVE",
tsSentAt: "SENT_AT",
});
expect(formatRelativeTimeSpy).toHaveBeenCalledWith(expect.any(Date), true);
});
it("should use full date when showFullDate is true and respect showSeconds", () => {
const formatFullDateSpy = jest
.spyOn(DateUtils, "formatFullDate")
.mockImplementation((_date, _showTwelveHour, showSeconds) =>
showSeconds === false ? "FULL_NO_SECONDS" : "SENT_AT",
);
const vm = new MessageTimestampViewModel({
ts: nowDate.getTime(),
showFullDate: true,
showSeconds: false,
});
expect(vm.getSnapshot()).toMatchObject({
ts: "FULL_NO_SECONDS",
tsSentAt: "SENT_AT",
});
expect(formatFullDateSpy).toHaveBeenCalled();
});
it("should use full time when showSeconds is true without full date", () => {
jest.spyOn(DateUtils, "formatFullDate").mockReturnValue("SENT_AT");
const formatFullTimeSpy = jest.spyOn(DateUtils, "formatFullTime").mockReturnValue("FULL_TIME");
const formatTimeSpy = jest.spyOn(DateUtils, "formatTime").mockReturnValue("TIME");
const vm = new MessageTimestampViewModel({
ts: nowDate.getTime(),
showSeconds: true,
});
expect(vm.getSnapshot()).toMatchObject({
ts: "FULL_TIME",
tsSentAt: "SENT_AT",
});
expect(formatFullTimeSpy).toHaveBeenCalled();
expect(formatTimeSpy).not.toHaveBeenCalled();
});
it("should include tooltip inhibition and href in the snapshot", () => {
const vm = new MessageTimestampViewModel({
ts: nowDate.getTime(),
inhibitTooltip: true,
href: "https://example.test",
});
expect(vm.getSnapshot()).toMatchObject({
inhibitTooltip: true,
href: "https://example.test",
});
});
});