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