From ca239fee4d56d0d9456744870d82f795843bff4c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Nov 2024 14:16:29 +0000 Subject: [PATCH] Update type and usage of window.matrixChat to be better React 18 friendly (#28415) * Update type and usage of window.matrixChat to be better React 18 friendly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Make modules import async to make the file testable Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/@types/global.d.ts | 4 +- src/utils/login.ts | 4 +- src/vector/init.tsx | 10 +- src/vector/routing.ts | 3 +- test/unit-tests/utils/login-test.ts | 22 ++ .../vector/__snapshots__/init-test.ts.snap | 261 ++++++++++++++++++ test/unit-tests/vector/init-test.ts | 33 +++ test/unit-tests/vector/routing-test.ts | 27 +- 8 files changed, 351 insertions(+), 13 deletions(-) create mode 100644 test/unit-tests/utils/login-test.ts create mode 100644 test/unit-tests/vector/__snapshots__/init-test.ts.snap create mode 100644 test/unit-tests/vector/init-test.ts diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index e5a86c3872..be36c5b689 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -10,7 +10,6 @@ Please see LICENSE files in the repository root for full details. import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first import "@types/modernizr"; -import type { Renderer } from "react-dom"; import type { logger } from "matrix-js-sdk/src/logger"; import ContentMessages from "../ContentMessages"; import { IMatrixClientPeg } from "../MatrixClientPeg"; @@ -44,6 +43,7 @@ import AutoRageshakeStore from "../stores/AutoRageshakeStore"; import { IConfigOptions } from "../IConfigOptions"; import { MatrixDispatcher } from "../dispatcher/dispatcher"; import { DeepReadonly } from "./common"; +import MatrixChat from "../components/structures/MatrixChat"; /* eslint-disable @typescript-eslint/naming-convention */ @@ -71,7 +71,7 @@ declare global { interface Window { mxSendRageshake: (text: string, withLogs?: boolean) => void; matrixLogger: typeof logger; - matrixChat: ReturnType; + matrixChat?: MatrixChat; mxSendSentryReport: (userText: string, issueUrl: string, error: Error) => Promise; mxLoginWithAccessToken: (hsUrl: string, accessToken: string) => Promise; mxAutoRageshakeStore?: AutoRageshakeStore; diff --git a/src/utils/login.ts b/src/utils/login.ts index 31898e1b00..cc6a6e0adf 100644 --- a/src/utils/login.ts +++ b/src/utils/login.ts @@ -6,7 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import type MatrixChat from "../components/structures/MatrixChat"; import Views from "../Views"; export function isLoggedIn(): boolean { @@ -14,6 +13,5 @@ export function isLoggedIn(): boolean { // `element-web` and into this file? Better yet, we should probably create a // store to hold this state. // See also https://github.com/vector-im/element-web/issues/15034. - const app = window.matrixChat; - return (app as MatrixChat)?.state.view === Views.LOGGED_IN; + return window.matrixChat?.state.view === Views.LOGGED_IN; } diff --git a/src/vector/init.tsx b/src/vector/init.tsx index 2028f9af36..97b203cd5b 100644 --- a/src/vector/init.tsx +++ b/src/vector/init.tsx @@ -23,9 +23,6 @@ import ElectronPlatform from "./platform/ElectronPlatform"; import PWAPlatform from "./platform/PWAPlatform"; import WebPlatform from "./platform/WebPlatform"; import { initRageshake, initRageshakeStore } from "./rageshakesetup"; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore - this path is created at runtime and therefore won't exist at typecheck time -import { INSTALLED_MODULES } from "../modules"; export const rageshakePromise = initRageshake(); @@ -104,7 +101,7 @@ export async function showError(title: string, messages?: string[]): Promise , @@ -117,7 +114,7 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise , @@ -126,6 +123,9 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore - this path is created at runtime and therefore won't exist at typecheck time + const { INSTALLED_MODULES } = await import("../modules"); for (const InstalledModule of INSTALLED_MODULES) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - we know the constructor exists even if TypeScript can't be convinced of that diff --git a/src/vector/routing.ts b/src/vector/routing.ts index 4a76237eca..216f3ac63b 100644 --- a/src/vector/routing.ts +++ b/src/vector/routing.ts @@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details. import { logger } from "matrix-js-sdk/src/logger"; import { QueryDict } from "matrix-js-sdk/src/utils"; -import MatrixChatType from "../components/structures/MatrixChat"; import { parseQsFromFragment } from "./url_utils"; let lastLocationHashSet: string | null = null; @@ -31,7 +30,7 @@ function routeUrl(location: Location): void { logger.log("Routing URL ", location.href); const s = getScreenFromLocation(location); - (window.matrixChat as MatrixChatType).showScreen(s.screen, s.params); + window.matrixChat.showScreen(s.screen, s.params); } function onHashChange(): void { diff --git a/test/unit-tests/utils/login-test.ts b/test/unit-tests/utils/login-test.ts new file mode 100644 index 0000000000..f09152f4e2 --- /dev/null +++ b/test/unit-tests/utils/login-test.ts @@ -0,0 +1,22 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only +Please see LICENSE files in the repository root for full details. +*/ + +import MatrixChat from "../../../src/components/structures/MatrixChat.tsx"; +import { isLoggedIn } from "../../../src/utils/login.ts"; +import Views from "../../../src/Views.ts"; + +describe("isLoggedIn", () => { + it("should return true if MatrixChat state view is LOGGED_IN", () => { + window.matrixChat = { + state: { + view: Views.LOGGED_IN, + }, + } as unknown as MatrixChat; + + expect(isLoggedIn()).toBe(true); + }); +}); diff --git a/test/unit-tests/vector/__snapshots__/init-test.ts.snap b/test/unit-tests/vector/__snapshots__/init-test.ts.snap new file mode 100644 index 0000000000..eeb5e5967c --- /dev/null +++ b/test/unit-tests/vector/__snapshots__/init-test.ts.snap @@ -0,0 +1,261 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`showError should match snapshot 1`] = ` +
+
+ +
+

+ Error title +

+

+ msg1 +

+

+ msg2 +

+
+
+
+`; + +exports[`showIncompatibleBrowser should match snapshot 1`] = ` +
+
+ +
+

+ Element does not support this browser +

+

+ Element uses some browser features which are not available in your current browser. If you continue, some features may stop working and there is a risk that you may lose data in the future. +

+

+ + For the best experience, use + + Chrome + + , + + Firefox + + , + + Edge + + , or + + Safari + + . + +

+
+ + +
+
+