From 251a387dcae0b6a5d763758ee1ecfc65b6cff9cf Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Thu, 26 Jan 2023 15:35:57 +0000 Subject: [PATCH 1/3] Tests for RoomCreate tile --- src/components/views/messages/RoomCreate.tsx | 6 +- .../views/messages/RoomCreate-test.tsx | 86 +++++++++++++++++++ .../__snapshots__/RoomCreate-test.tsx.snap | 24 ++++++ 3 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 test/components/views/messages/RoomCreate-test.tsx create mode 100644 test/components/views/messages/__snapshots__/RoomCreate-test.tsx.snap diff --git a/src/components/views/messages/RoomCreate.tsx b/src/components/views/messages/RoomCreate.tsx index a9035ca03cb..8bff5dfdcc5 100644 --- a/src/components/views/messages/RoomCreate.tsx +++ b/src/components/views/messages/RoomCreate.tsx @@ -27,11 +27,15 @@ import EventTileBubble from "./EventTileBubble"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; interface IProps { - /* the MatrixEvent to show */ + /** The m.room.create MatrixEvent that this tile represents */ mxEvent: MatrixEvent; timestamp?: JSX.Element; } +/** + * A message tile showing that this room was created as an upgrade of a previous + * room. + */ export default class RoomCreate extends React.Component { private onLinkClicked = (e: React.MouseEvent): void => { e.preventDefault(); diff --git a/test/components/views/messages/RoomCreate-test.tsx b/test/components/views/messages/RoomCreate-test.tsx new file mode 100644 index 00000000000..3feff2de8e7 --- /dev/null +++ b/test/components/views/messages/RoomCreate-test.tsx @@ -0,0 +1,86 @@ +/* +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 { fireEvent, render, RenderResult } from "@testing-library/react"; +import { mocked } from "jest-mock"; +import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; + +import dis from "../../../../src/dispatcher/dispatcher"; +import SettingsStore from "../../../../src/settings/SettingsStore"; +import RoomCreate from "../../../../src/components/views/messages/RoomCreate"; +import { stubClient } from "../../../test-utils/test-utils"; +import { Action } from "../../../../src/dispatcher/actions"; + +jest.mock("../../../../src/dispatcher/dispatcher"); + +describe("", () => { + const userId = "@alice:server.org"; + const roomId = "!room:server.org"; + const createEvent = new MatrixEvent({ + type: EventType.RoomCreate, + sender: userId, + room_id: roomId, + content: { + predecessor: { room_id: "old_room_id", event_id: "tombstone_event_id" }, + }, + event_id: "$create", + }); + + function getComponent(event: MatrixEvent): RenderResult { + return render(); + } + + beforeEach(() => { + jest.clearAllMocks(); + mocked(dis.dispatch).mockReset(); + jest.spyOn(SettingsStore, "getValue").mockReturnValue(false); + jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined); + stubClient(); + }); + + afterAll(() => { + jest.spyOn(SettingsStore, "getValue").mockRestore(); + jest.spyOn(SettingsStore, "setValue").mockRestore(); + }); + + it("Renders as expected", () => { + const wrapper = getComponent(createEvent); + expect(wrapper.asFragment()).toMatchSnapshot(); + }); + + it("Links to the old version of the room", () => { + const wrapper = getComponent(createEvent); + expect(wrapper.getByText("Click here to see older messages.")).toHaveAttribute( + "href", + "https://matrix.to/#/old_room_id/tombstone_event_id", + ); + }); + + it("Opens the old room on click", () => { + const wrapper = getComponent(createEvent); + const link = wrapper.getByText("Click here to see older messages."); + fireEvent.click(link); + expect(dis.dispatch).toHaveBeenCalledWith({ + action: Action.ViewRoom, + event_id: "tombstone_event_id", + highlighted: true, + room_id: "old_room_id", + metricsTrigger: "Predecessor", + metricsViaKeyboard: false, + }); + }); +}); diff --git a/test/components/views/messages/__snapshots__/RoomCreate-test.tsx.snap b/test/components/views/messages/__snapshots__/RoomCreate-test.tsx.snap new file mode 100644 index 00000000000..97c1cee66f6 --- /dev/null +++ b/test/components/views/messages/__snapshots__/RoomCreate-test.tsx.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` Renders as expected 1`] = ` + +
+
+ This room is a continuation of another conversation. +
+
+ + Click here to see older messages. + +
+
+ +`; From 72d083ede4e880052781482d190275e898247bf7 Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Fri, 27 Jan 2023 15:01:11 +0000 Subject: [PATCH 2/3] Prefer screen instead of holding the return from render --- .../views/messages/RoomCreate-test.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/test/components/views/messages/RoomCreate-test.tsx b/test/components/views/messages/RoomCreate-test.tsx index 3feff2de8e7..63515e0b28a 100644 --- a/test/components/views/messages/RoomCreate-test.tsx +++ b/test/components/views/messages/RoomCreate-test.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import React from "react"; -import { fireEvent, render, RenderResult } from "@testing-library/react"; +import { fireEvent, render, screen } from "@testing-library/react"; import { mocked } from "jest-mock"; import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; @@ -40,10 +40,6 @@ describe("", () => { event_id: "$create", }); - function getComponent(event: MatrixEvent): RenderResult { - return render(); - } - beforeEach(() => { jest.clearAllMocks(); mocked(dis.dispatch).mockReset(); @@ -58,21 +54,21 @@ describe("", () => { }); it("Renders as expected", () => { - const wrapper = getComponent(createEvent); - expect(wrapper.asFragment()).toMatchSnapshot(); + const roomCreate = render(); + expect(roomCreate.asFragment()).toMatchSnapshot(); }); it("Links to the old version of the room", () => { - const wrapper = getComponent(createEvent); - expect(wrapper.getByText("Click here to see older messages.")).toHaveAttribute( + render(); + expect(screen.getByText("Click here to see older messages.")).toHaveAttribute( "href", "https://matrix.to/#/old_room_id/tombstone_event_id", ); }); it("Opens the old room on click", () => { - const wrapper = getComponent(createEvent); - const link = wrapper.getByText("Click here to see older messages."); + render(); + const link = screen.getByText("Click here to see older messages."); fireEvent.click(link); expect(dis.dispatch).toHaveBeenCalledWith({ action: Action.ViewRoom, From 762daa16e9d2dbe52b63168c8805d6b6eba991fe Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Fri, 27 Jan 2023 15:04:40 +0000 Subject: [PATCH 3/3] use userEvent instead of fireEvent --- .../views/messages/RoomCreate-test.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/test/components/views/messages/RoomCreate-test.tsx b/test/components/views/messages/RoomCreate-test.tsx index 63515e0b28a..31763f9ae89 100644 --- a/test/components/views/messages/RoomCreate-test.tsx +++ b/test/components/views/messages/RoomCreate-test.tsx @@ -15,7 +15,8 @@ limitations under the License. */ import React from "react"; -import { fireEvent, render, screen } from "@testing-library/react"; +import { act, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; @@ -66,17 +67,21 @@ describe("", () => { ); }); - it("Opens the old room on click", () => { + it("Opens the old room on click", async () => { render(); const link = screen.getByText("Click here to see older messages."); - fireEvent.click(link); - expect(dis.dispatch).toHaveBeenCalledWith({ - action: Action.ViewRoom, - event_id: "tombstone_event_id", - highlighted: true, - room_id: "old_room_id", - metricsTrigger: "Predecessor", - metricsViaKeyboard: false, - }); + + await act(() => userEvent.click(link)); + + await waitFor(() => + expect(dis.dispatch).toHaveBeenCalledWith({ + action: Action.ViewRoom, + event_id: "tombstone_event_id", + highlighted: true, + room_id: "old_room_id", + metricsTrigger: "Predecessor", + metricsViaKeyboard: false, + }), + ); }); });