Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Tests for RoomCreate #9997

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/views/messages/RoomCreate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<IProps> {
private onLinkClicked = (e: React.MouseEvent): void => {
e.preventDefault();
Expand Down
86 changes: 86 additions & 0 deletions test/components/views/messages/RoomCreate-test.tsx
Original file line number Diff line number Diff line change
@@ -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("<RoomCreate />", () => {
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(<RoomCreate mxEvent={event} />);
}

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",
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A very minor point that adds very little here, but I think the 'right' way (think I picked this up from the creator of RTL, not the docs, in this post here: KCD) is to render the component then use screen for querying.

As I said, minimal gain here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion, applied - thanks.

});

it("Opens the old room on click", () => {
const wrapper = getComponent(createEvent);
const link = wrapper.getByText("Click here to see older messages.");
fireEvent.click(link);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would you think to using userEvent here instead? I'd say a larger gain to doing that than the previous suggestion, as userEvent fires a few more events (mouseover, hover etc.) than purely the click action so is a better model of user interaction. It would be imported and then used as userEvent.click(link) so would read the same.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good - I was not aware of this - thanks!

expect(dis.dispatch).toHaveBeenCalledWith({
action: Action.ViewRoom,
event_id: "tombstone_event_id",
highlighted: true,
room_id: "old_room_id",
metricsTrigger: "Predecessor",
metricsViaKeyboard: false,
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<RoomCreate /> Renders as expected 1`] = `
<DocumentFragment>
<div
class="mx_EventTileBubble mx_CreateEvent"
>
<div
class="mx_EventTileBubble_title"
>
This room is a continuation of another conversation.
</div>
<div
class="mx_EventTileBubble_subtitle"
>
<a
href="https://matrix.to/#/old_room_id/tombstone_event_id"
>
Click here to see older messages.
</a>
</div>
</div>
</DocumentFragment>
`;