From e9d723269f2e503a2c0ca6895c55310280dd73e4 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 30 Jan 2023 17:01:54 +0000 Subject: [PATCH] Use CopyableText in devtools (#9993) Co-authored-by: Alun Turner --- .../views/dialogs/DevtoolsDialog.tsx | 15 +- .../views/dialogs/DevtoolsDialog-test.tsx | 71 ++++++ .../DevtoolsDialog-test.tsx.snap | 229 ++++++++++++++++++ 3 files changed, 310 insertions(+), 5 deletions(-) create mode 100644 test/components/views/dialogs/DevtoolsDialog-test.tsx create mode 100644 test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap diff --git a/src/components/views/dialogs/DevtoolsDialog.tsx b/src/components/views/dialogs/DevtoolsDialog.tsx index 862bf27c8a..f16dd94f6b 100644 --- a/src/components/views/dialogs/DevtoolsDialog.tsx +++ b/src/components/views/dialogs/DevtoolsDialog.tsx @@ -1,6 +1,6 @@ /* Copyright 2022 Michael Telatynski <7t3chguy@gmail.com> -Copyright 2018-2021 The Matrix.org Foundation C.I.C. +Copyright 2018-2023 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -32,6 +32,7 @@ import SettingsFlag from "../elements/SettingsFlag"; import { SettingLevel } from "../../../settings/SettingLevel"; import ServerInfo from "./devtools/ServerInfo"; import { Features } from "../../../settings/Settings"; +import CopyableText from "../elements/CopyableText"; enum Category { Room, @@ -119,11 +120,15 @@ const DevtoolsDialog: React.FC = ({ roomId, onFinished }) => { {(cli) => ( <>
{label}
-
{_t("Room ID: %(roomId)s", { roomId })}
+ roomId} border={false}> + {_t("Room ID: %(roomId)s", { roomId })} +
- - {body} - + {cli.getRoom(roomId) && ( + + {body} + + )} )} diff --git a/test/components/views/dialogs/DevtoolsDialog-test.tsx b/test/components/views/dialogs/DevtoolsDialog-test.tsx new file mode 100644 index 0000000000..bc451255fa --- /dev/null +++ b/test/components/views/dialogs/DevtoolsDialog-test.tsx @@ -0,0 +1,71 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +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 { getByLabelText, render } from "@testing-library/react"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { MatrixClient } from "matrix-js-sdk/src/client"; +import userEvent from "@testing-library/user-event"; + +import { stubClient } from "../../../test-utils"; +import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; +import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; +import DevtoolsDialog from "../../../../src/components/views/dialogs/DevtoolsDialog"; + +describe("DevtoolsDialog", () => { + let cli: MatrixClient; + let room: Room; + + function getComponent(roomId: string, onFinished = () => true) { + return render( + + + , + ); + } + + beforeEach(() => { + stubClient(); + cli = MatrixClientPeg.get(); + room = new Room("!id", cli, "@alice:matrix.org"); + + jest.spyOn(cli, "getRoom").mockReturnValue(room); + }); + + afterAll(() => { + jest.restoreAllMocks(); + }); + + it("renders the devtools dialog", () => { + const { asFragment } = getComponent(room.roomId); + expect(asFragment()).toMatchSnapshot(); + }); + + it("copies the roomid", async () => { + const user = userEvent.setup(); + jest.spyOn(navigator.clipboard, "writeText"); + + const { container } = getComponent(room.roomId); + + const copyBtn = getByLabelText(container, "Copy"); + await user.click(copyBtn); + const copiedBtn = getByLabelText(container, "Copied!"); + + expect(copiedBtn).toBeInTheDocument(); + expect(navigator.clipboard.writeText).toHaveBeenCalled(); + expect(navigator.clipboard.readText()).resolves.toBe(room.roomId); + }); +}); diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap new file mode 100644 index 0000000000..62014e2d2b --- /dev/null +++ b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap @@ -0,0 +1,229 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DevtoolsDialog renders the devtools dialog 1`] = ` + +
+