From 3fd6b62254e792d26a46659299a826fc67c716f5 Mon Sep 17 00:00:00 2001 From: maheichyk Date: Wed, 30 Aug 2023 09:52:41 +0300 Subject: [PATCH] Add support for rendering a custom wrapper around Element (#25537) Co-authored-by: Mikhail Aheichyk --- package.json | 2 +- src/vector/app.tsx | 27 ++++++---- test/app-tests/loading-test.tsx | 25 +++------- test/app-tests/wrapper-test.tsx | 87 +++++++++++++++++++++++++++++++++ test/test-utils.ts | 11 +++++ yarn.lock | 2 +- 6 files changed, 125 insertions(+), 29 deletions(-) create mode 100644 test/app-tests/wrapper-test.tsx diff --git a/package.json b/package.json index ae378d9d33..406cf53861 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ }, "dependencies": { "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz", - "@matrix-org/react-sdk-module-api": "^2.0.0", + "@matrix-org/react-sdk-module-api": "^2.1.0", "gfm.css": "^1.1.2", "jsrsasign": "^10.5.25", "katex": "^0.16.0", diff --git a/src/vector/app.tsx b/src/vector/app.tsx index dd69320faf..8a0e308628 100644 --- a/src/vector/app.tsx +++ b/src/vector/app.tsx @@ -33,6 +33,8 @@ import { createClient } from "matrix-js-sdk/src/matrix"; import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject"; import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat"; import { ValidatedServerConfig } from "matrix-react-sdk/src/utils/ValidatedServerConfig"; +import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle"; +import { ModuleRunner } from "matrix-react-sdk/src/modules/ModuleRunner"; import { parseQs } from "./url_utils"; import VectorBasePlatform from "./platform/VectorBasePlatform"; @@ -109,17 +111,22 @@ export async function loadApp(fragParams: {}): Promise { const initialScreenAfterLogin = getInitialScreenAfterLogin(window.location); + const wrapperOpts: WrapperOpts = { Wrapper: React.Fragment }; + ModuleRunner.instance.invoke(WrapperLifecycle.Wrapper, wrapperOpts); + return ( - + + + ); } diff --git a/test/app-tests/loading-test.tsx b/test/app-tests/loading-test.tsx index c1f7cbf268..af53a29ffd 100644 --- a/test/app-tests/loading-test.tsx +++ b/test/app-tests/loading-test.tsx @@ -34,7 +34,7 @@ import { ActionPayload } from "matrix-react-sdk/src/dispatcher/payloads"; import "../jest-mocks"; import WebPlatform from "../../src/vector/platform/WebPlatform"; import { parseQs, parseQsFromFragment } from "../../src/vector/url_utils"; -import { cleanLocalstorage, deleteIndexedDB } from "../test-utils"; +import { cleanLocalstorage, deleteIndexedDB, waitForLoadingSpinner, waitForWelcomeComponent } from "../test-utils"; const DEFAULT_HS_URL = "http://my_server"; const DEFAULT_IS_URL = "http://my_is"; @@ -189,7 +189,7 @@ describe("loading:", function () { .then(async () => { // at this point, we're trying to do a guest registration; // we expect a spinner - await assertAtLoadingSpinner(); + await waitForLoadingSpinner(); httpBackend .when("POST", "/register") @@ -202,7 +202,7 @@ describe("loading:", function () { }) .then(() => { // Wait for another trip around the event loop for the UI to update - return awaitWelcomeComponent(matrixChat); + return waitForWelcomeComponent(matrixChat); }) .then(() => { return waitFor(() => expect(windowLocation?.hash).toEqual("#/welcome")); @@ -222,7 +222,7 @@ describe("loading:", function () { .then(async () => { // at this point, we're trying to do a guest registration; // we expect a spinner - await assertAtLoadingSpinner(); + await waitForLoadingSpinner(); httpBackend .when("POST", "/register") @@ -391,7 +391,7 @@ describe("loading:", function () { .then(async () => { // at this point, we're trying to do a guest registration; // we expect a spinner - await assertAtLoadingSpinner(); + await waitForLoadingSpinner(); httpBackend .when("POST", "/register") @@ -427,7 +427,7 @@ describe("loading:", function () { .then(async () => { // at this point, we're trying to do a guest registration; // we expect a spinner - await assertAtLoadingSpinner(); + await waitForLoadingSpinner(); httpBackend .when("POST", "/register") @@ -468,7 +468,7 @@ describe("loading:", function () { .then(async () => { // at this point, we're trying to do a guest registration; // we expect a spinner - await assertAtLoadingSpinner(); + await waitForLoadingSpinner(); httpBackend .when("POST", "/register") @@ -562,7 +562,7 @@ describe("loading:", function () { return sleep(1) .then(async () => { // we expect a spinner while we're logging in - await assertAtLoadingSpinner(); + await waitForLoadingSpinner(); httpBackend .when("POST", "/login") @@ -650,11 +650,6 @@ describe("loading:", function () { } }); -// assert that we are on the loading page -async function assertAtLoadingSpinner(): Promise { - await screen.findByRole("progressbar"); -} - async function awaitLoggedIn(matrixChat: RenderResult): Promise { if (matrixChat.container.querySelector(".mx_MatrixChat_wrapper")) return; // already logged in @@ -680,10 +675,6 @@ async function awaitLoginComponent(matrixChat?: RenderResult): Promise { await waitFor(() => matrixChat?.container.querySelector(".mx_AuthPage")); } -async function awaitWelcomeComponent(matrixChat?: RenderResult): Promise { - await waitFor(() => matrixChat?.container.querySelector(".mx_Welcome")); -} - function moveFromWelcomeToLogin(matrixChat?: RenderResult): Promise { dis.dispatch({ action: "start_login" }); return awaitLoginComponent(matrixChat); diff --git a/test/app-tests/wrapper-test.tsx b/test/app-tests/wrapper-test.tsx new file mode 100644 index 0000000000..6f72dbb606 --- /dev/null +++ b/test/app-tests/wrapper-test.tsx @@ -0,0 +1,87 @@ +/* +Copyright 2023 Mikhail Aheichyk +Copyright 2023 Nordeck IT + Consulting GmbH. + +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 React from "react"; +import SdkConfig from "matrix-react-sdk/src/SdkConfig"; +import PlatformPeg from "matrix-react-sdk/src/PlatformPeg"; +import fetchMock from "fetch-mock-jest"; +import { render, RenderResult, screen } from "@testing-library/react"; +import { ModuleRunner } from "matrix-react-sdk/src/modules/ModuleRunner"; +import { WrapperLifecycle, WrapperOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WrapperLifecycle"; + +import WebPlatform from "../../src/vector/platform/WebPlatform"; +import { loadApp } from "../../src/vector/app"; +import { waitForLoadingSpinner, waitForWelcomeComponent } from "../test-utils"; + +fetchMock.config.overwriteRoutes = true; + +describe("Wrapper", () => { + beforeEach(async () => { + SdkConfig.reset(); + PlatformPeg.set(new WebPlatform()); + fetchMock.get("https://matrix-client.matrix.org/_matrix/client/versions", { + unstable_features: {}, + versions: ["v1.1"], + }); + fetchMock.get("https://matrix.org/.well-known/matrix/client", { + "m.homeserver": { + base_url: "https://matrix-client.matrix.org", + }, + }); + fetchMock.get("/version", "1.10.13"); + }); + + it("wrap a matrix chat with header and footer", async () => { + SdkConfig.put({ + default_server_config: { + "m.homeserver": { + base_url: "https://matrix-client.matrix.org", + }, + }, + }); + + jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts) => { + if (lifecycleEvent === WrapperLifecycle.Wrapper) { + (opts as WrapperOpts).Wrapper = ({ children }) => { + return ( + <> +
Header
+
{children}
+
Footer
+ + ); + }; + } + }); + + const matrixChatResult: RenderResult = render(await loadApp({})); + + // at this point, we're trying to do a guest registration; + // we expect a spinner + await waitForLoadingSpinner(); + + await waitForWelcomeComponent(matrixChatResult); + + // Are not semantic elements because Element has a footer already. + const header = screen.getByTestId("wrapper-header"); + const matrixChat = screen.getByTestId("wrapper-matrix-chat"); + const footer = screen.getByTestId("wrapper-footer"); + + expect(header.nextSibling).toBe(matrixChat); + expect(matrixChat.nextSibling).toBe(footer); + }); +}); diff --git a/test/test-utils.ts b/test/test-utils.ts index af9502ea52..6367f7092b 100644 --- a/test/test-utils.ts +++ b/test/test-utils.ts @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { RenderResult, screen, waitFor } from "@testing-library/react"; + export function cleanLocalstorage(): void { window.localStorage.clear(); } @@ -47,3 +49,12 @@ export function deleteIndexedDB(dbName: string): Promise { throw e; }); } + +// wait for loading page +export async function waitForLoadingSpinner(): Promise { + await screen.findByRole("progressbar"); +} + +export async function waitForWelcomeComponent(matrixChat?: RenderResult): Promise { + await waitFor(() => matrixChat?.container.querySelector(".mx_Welcome")); +} diff --git a/yarn.lock b/yarn.lock index 1d8e1ff937..9021fee362 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1664,7 +1664,7 @@ version "3.2.14" resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz#acd96c00a881d0f462e1f97a56c73742c8dbc984" -"@matrix-org/react-sdk-module-api@^2.0.0", "@matrix-org/react-sdk-module-api@^2.1.0": +"@matrix-org/react-sdk-module-api@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@matrix-org/react-sdk-module-api/-/react-sdk-module-api-2.1.0.tgz#ca9d67853512fda1df2786810b90be31dd8dc7b1" integrity sha512-SARD5BsmZYv1hvuezLfBUafJ9+rPLbk5WO0S3vZgkLH3jJQrk7f/65qBB5fLKF2ljprfZ1GTpuBeq04wn7Tnmg==