sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Refactor MessageTimestamp using MVVM and move to shared-components (#31988)

Browse Source 
* 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
This commit is contained in:
rbondesson
2026-02-20 09:29:26 +00:00
committed by GitHub
parent f90b329490
commit ca3bc30f90
33 changed files with 1072 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/unit-tests/components/views/messages/MessageTimestamp-test.tsx
-55
View File
@@ -1,55 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
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 React from "react";
import { render, screen } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import MessageTimestamp from "../../../../../src/components/views/messages/MessageTimestamp";
jest.mock("../../../../../src/settings/SettingsStore");
describe("MessageTimestamp", () => {
// 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;
it("should render HH:MM", () => {
const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />);
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<span
aria-hidden="true"
aria-live="off"
class="mx_MessageTimestamp"
tabindex="0"
>
08:09
</span>
</DocumentFragment>
`);
});
it("should show full date & time on hover", async () => {
const { container } = render(<MessageTimestamp ts={nowDate.getTime()} />);
await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(`"Fri, Dec 17, 2021, 08:09:00"`);
});
it("should show sent & received time on hover if passed", async () => {
const { container } = render(
<MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />,
);
await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(
`"Sent at: Fri, Dec 17, 2021, 08:09:00Received at: Sat, Dec 18, 2021, 08:09:00"`,
);
});
});
test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
+1 -1
View File
@@ -93,7 +93,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
</div>
<a
aria-live="off"
class="mx_MessageTimestamp"
class="mx_MessageTimestamp _content_kc5mt_8"
href="https://matrix.to/#/!room:server/undefined"
>
Thu, Jan 15, 1970, 06:56
test/unit-tests/utils/exportUtils/HTMLExport-test.ts
+1 -1
View File
@@ -246,7 +246,7 @@ describe("HTMLExport", () => {
const file = getMessageFile(exporter);
expect(await file.text()).toMatchSnapshot();
});
}, 10000);
it("should include the room's avatar", async () => {
mockMessages(EVENT_MESSAGE);
test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+1 -1
View File
File diff suppressed because one or more lines are too long
test/viewmodels/message-body/MessageTimestampViewModel-test.tsx
+123
View File
@@ -0,0 +1,123 @@
/*
* 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",
});
});
});