Remove Enzyme tests in favour of React testing-library (#10289)
This commit is contained in:
parent
303b878b17
commit
667ec166d7
10 changed files with 432 additions and 3163 deletions
|
@ -15,8 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
// eslint-disable-next-line deprecate/import
|
||||
import { mount } from "enzyme";
|
||||
import { render } from "@testing-library/react";
|
||||
|
||||
import ContextMenu, { ChevronFace } from "../../../../src/components/structures/ContextMenu";
|
||||
import UIStore from "../../../../src/stores/UIStore";
|
||||
|
@ -41,11 +40,11 @@ describe("<ContextMenu />", () => {
|
|||
|
||||
const targetChevronOffset = 25;
|
||||
|
||||
describe("near top edge of window", () => {
|
||||
it("near top edge of window", () => {
|
||||
const targetY = -50;
|
||||
const onFinished = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<ContextMenu
|
||||
bottom={windowSize - targetY - menuSize}
|
||||
right={menuSize}
|
||||
|
@ -54,25 +53,25 @@ describe("<ContextMenu />", () => {
|
|||
chevronOffset={targetChevronOffset}
|
||||
/>,
|
||||
);
|
||||
const chevron = wrapper.find(".mx_ContextualMenu_chevron_left");
|
||||
const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_left")!;
|
||||
|
||||
const bottomStyle = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("bottom"));
|
||||
const bottomStyle = parseInt(
|
||||
document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("bottom"),
|
||||
);
|
||||
const actualY = windowSize - bottomStyle - menuSize;
|
||||
const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
|
||||
const actualChevronOffset = parseInt(chevron.style.getPropertyValue("top"));
|
||||
|
||||
it("stays within the window", () => {
|
||||
expect(actualY).toBeGreaterThanOrEqual(0);
|
||||
});
|
||||
it("positions the chevron correctly", () => {
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
|
||||
});
|
||||
// stays within the window
|
||||
expect(actualY).toBeGreaterThanOrEqual(0);
|
||||
// positions the chevron correctly
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
|
||||
});
|
||||
|
||||
describe("near right edge of window", () => {
|
||||
it("near right edge of window", () => {
|
||||
const targetX = windowSize - menuSize + 50;
|
||||
const onFinished = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<ContextMenu
|
||||
bottom={0}
|
||||
onFinished={onFinished}
|
||||
|
@ -81,24 +80,24 @@ describe("<ContextMenu />", () => {
|
|||
chevronOffset={targetChevronOffset}
|
||||
/>,
|
||||
);
|
||||
const chevron = wrapper.find(".mx_ContextualMenu_chevron_top");
|
||||
const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_top")!;
|
||||
|
||||
const actualX = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
|
||||
const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
|
||||
const actualX = parseInt(
|
||||
document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("left"),
|
||||
);
|
||||
const actualChevronOffset = parseInt(chevron.style.getPropertyValue("left"));
|
||||
|
||||
it("stays within the window", () => {
|
||||
expect(actualX + menuSize).toBeLessThanOrEqual(windowSize);
|
||||
});
|
||||
it("positions the chevron correctly", () => {
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
|
||||
});
|
||||
// stays within the window
|
||||
expect(actualX + menuSize).toBeLessThanOrEqual(windowSize);
|
||||
// positions the chevron correctly
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
|
||||
});
|
||||
|
||||
describe("near bottom edge of window", () => {
|
||||
it("near bottom edge of window", () => {
|
||||
const targetY = windowSize - menuSize + 50;
|
||||
const onFinished = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<ContextMenu
|
||||
top={targetY}
|
||||
left={0}
|
||||
|
@ -107,24 +106,24 @@ describe("<ContextMenu />", () => {
|
|||
chevronOffset={targetChevronOffset}
|
||||
/>,
|
||||
);
|
||||
const chevron = wrapper.find(".mx_ContextualMenu_chevron_right");
|
||||
const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_right")!;
|
||||
|
||||
const actualY = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
|
||||
const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("top"));
|
||||
const actualY = parseInt(
|
||||
document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("top"),
|
||||
);
|
||||
const actualChevronOffset = parseInt(chevron.style.getPropertyValue("top"));
|
||||
|
||||
it("stays within the window", () => {
|
||||
expect(actualY + menuSize).toBeLessThanOrEqual(windowSize);
|
||||
});
|
||||
it("positions the chevron correctly", () => {
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
|
||||
});
|
||||
// stays within the window
|
||||
expect(actualY + menuSize).toBeLessThanOrEqual(windowSize);
|
||||
// positions the chevron correctly
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
|
||||
});
|
||||
|
||||
describe("near left edge of window", () => {
|
||||
it("near left edge of window", () => {
|
||||
const targetX = -50;
|
||||
const onFinished = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
render(
|
||||
<ContextMenu
|
||||
top={0}
|
||||
right={windowSize - targetX - menuSize}
|
||||
|
@ -133,25 +132,25 @@ describe("<ContextMenu />", () => {
|
|||
chevronOffset={targetChevronOffset}
|
||||
/>,
|
||||
);
|
||||
const chevron = wrapper.find(".mx_ContextualMenu_chevron_bottom");
|
||||
const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_bottom")!;
|
||||
|
||||
const rightStyle = parseInt(wrapper.getDOMNode<HTMLElement>().style.getPropertyValue("right"));
|
||||
const rightStyle = parseInt(
|
||||
document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("right"),
|
||||
);
|
||||
const actualX = windowSize - rightStyle - menuSize;
|
||||
const actualChevronOffset = parseInt(chevron.getDOMNode<HTMLElement>().style.getPropertyValue("left"));
|
||||
const actualChevronOffset = parseInt(chevron.style.getPropertyValue("left"));
|
||||
|
||||
it("stays within the window", () => {
|
||||
expect(actualX).toBeGreaterThanOrEqual(0);
|
||||
});
|
||||
it("positions the chevron correctly", () => {
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
|
||||
});
|
||||
// stays within the window
|
||||
expect(actualX).toBeGreaterThanOrEqual(0);
|
||||
// positions the chevron correctly
|
||||
expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
|
||||
});
|
||||
|
||||
it("should automatically close when a modal is opened", () => {
|
||||
const targetX = -50;
|
||||
const onFinished = jest.fn();
|
||||
|
||||
mount(
|
||||
render(
|
||||
<ContextMenu
|
||||
top={0}
|
||||
right={windowSize - targetX - menuSize}
|
||||
|
@ -171,7 +170,7 @@ describe("<ContextMenu />", () => {
|
|||
const onFinished = jest.fn();
|
||||
|
||||
Modal.createDialog(BaseDialog);
|
||||
mount(
|
||||
render(
|
||||
<ContextMenu
|
||||
top={0}
|
||||
right={windowSize - targetX - menuSize}
|
||||
|
|
|
@ -15,8 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
// eslint-disable-next-line deprecate/import
|
||||
import { mount, ReactWrapper } from "enzyme";
|
||||
import { fireEvent, render, RenderResult } from "@testing-library/react";
|
||||
import { EventStatus, MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import {
|
||||
|
@ -30,7 +29,6 @@ import { M_POLL_KIND_DISCLOSED } from "matrix-js-sdk/src/@types/polls";
|
|||
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
|
||||
import { FeatureSupport, Thread } from "matrix-js-sdk/src/models/thread";
|
||||
import { mocked } from "jest-mock";
|
||||
import { act } from "@testing-library/react";
|
||||
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
|
||||
|
@ -70,17 +68,16 @@ describe("MessageContextMenu", () => {
|
|||
const props = {
|
||||
link: "https://google.com/",
|
||||
};
|
||||
const menu = createMenuWithContent(eventContent, props);
|
||||
const copyLinkButton = menu.find('a[aria-label="Copy link"]');
|
||||
expect(copyLinkButton).toHaveLength(1);
|
||||
expect(copyLinkButton.props().href).toBe(props.link);
|
||||
createMenuWithContent(eventContent, props);
|
||||
const copyLinkButton = document.querySelector('a[aria-label="Copy link"]');
|
||||
expect(copyLinkButton).toHaveAttribute("href", props.link);
|
||||
});
|
||||
|
||||
it("does not show copy link button when not supplied a link", () => {
|
||||
const eventContent = createMessageEventContent("hello");
|
||||
const menu = createMenuWithContent(eventContent);
|
||||
const copyLinkButton = menu.find('a[aria-label="Copy link"]');
|
||||
expect(copyLinkButton).toHaveLength(0);
|
||||
createMenuWithContent(eventContent);
|
||||
const copyLinkButton = document.querySelector('a[aria-label="Copy link"]');
|
||||
expect(copyLinkButton).toBeFalsy();
|
||||
});
|
||||
|
||||
describe("message pinning", () => {
|
||||
|
@ -100,9 +97,9 @@ describe("MessageContextMenu", () => {
|
|||
// mock permission to disallow adding pinned messages to room
|
||||
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
|
||||
|
||||
const menu = createMenu(event, {}, {}, undefined, room);
|
||||
createMenu(event, {}, {}, undefined, room);
|
||||
|
||||
expect(menu.find('div[aria-label="Pin"]')).toHaveLength(0);
|
||||
expect(document.querySelector('div[aria-label="Pin"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("does not show pin option for beacon_info event", () => {
|
||||
|
@ -112,9 +109,9 @@ describe("MessageContextMenu", () => {
|
|||
// mock permission to allow adding pinned messages to room
|
||||
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
|
||||
|
||||
const menu = createMenu(deadBeaconEvent, {}, {}, undefined, room);
|
||||
createMenu(deadBeaconEvent, {}, {}, undefined, room);
|
||||
|
||||
expect(menu.find('div[aria-label="Pin"]')).toHaveLength(0);
|
||||
expect(document.querySelector('div[aria-label="Pin"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("does not show pin option when pinning feature is disabled", () => {
|
||||
|
@ -131,9 +128,9 @@ describe("MessageContextMenu", () => {
|
|||
// disable pinning feature
|
||||
jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
|
||||
|
||||
const menu = createMenu(pinnableEvent, {}, {}, undefined, room);
|
||||
createMenu(pinnableEvent, {}, {}, undefined, room);
|
||||
|
||||
expect(menu.find('div[aria-label="Pin"]')).toHaveLength(0);
|
||||
expect(document.querySelector('div[aria-label="Pin"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("shows pin option when pinning feature is enabled", () => {
|
||||
|
@ -148,9 +145,9 @@ describe("MessageContextMenu", () => {
|
|||
// mock permission to allow adding pinned messages to room
|
||||
jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
|
||||
|
||||
const menu = createMenu(pinnableEvent, {}, {}, undefined, room);
|
||||
createMenu(pinnableEvent, {}, {}, undefined, room);
|
||||
|
||||
expect(menu.find('div[aria-label="Pin"]')).toHaveLength(1);
|
||||
expect(document.querySelector('div[aria-label="Pin"]')).toBeTruthy();
|
||||
});
|
||||
|
||||
it("pins event on pin option click", () => {
|
||||
|
@ -172,11 +169,9 @@ describe("MessageContextMenu", () => {
|
|||
const pinsAccountData = new MatrixEvent({ content: { event_ids: ["!1", "!2"] } });
|
||||
jest.spyOn(room, "getAccountData").mockReturnValue(pinsAccountData);
|
||||
|
||||
const menu = createMenu(pinnableEvent, { onFinished }, {}, undefined, room);
|
||||
createMenu(pinnableEvent, { onFinished }, {}, undefined, room);
|
||||
|
||||
act(() => {
|
||||
menu.find('div[aria-label="Pin"]').simulate("click");
|
||||
});
|
||||
fireEvent.click(document.querySelector('div[aria-label="Pin"]')!);
|
||||
|
||||
// added to account data
|
||||
expect(client.setRoomAccountData).toHaveBeenCalledWith(roomId, ReadPinsEventId, {
|
||||
|
@ -228,11 +223,9 @@ describe("MessageContextMenu", () => {
|
|||
const pinsAccountData = new MatrixEvent({ content: { event_ids: ["!1", "!2"] } });
|
||||
jest.spyOn(room, "getAccountData").mockReturnValue(pinsAccountData);
|
||||
|
||||
const menu = createMenu(pinnableEvent, {}, {}, undefined, room);
|
||||
createMenu(pinnableEvent, {}, {}, undefined, room);
|
||||
|
||||
act(() => {
|
||||
menu.find('div[aria-label="Unpin"]').simulate("click");
|
||||
});
|
||||
fireEvent.click(document.querySelector('div[aria-label="Unpin"]')!);
|
||||
|
||||
expect(client.setRoomAccountData).not.toHaveBeenCalled();
|
||||
|
||||
|
@ -250,14 +243,14 @@ describe("MessageContextMenu", () => {
|
|||
describe("message forwarding", () => {
|
||||
it("allows forwarding a room message", () => {
|
||||
const eventContent = createMessageEventContent("hello");
|
||||
const menu = createMenuWithContent(eventContent);
|
||||
expect(menu.find('div[aria-label="Forward"]')).toHaveLength(1);
|
||||
createMenuWithContent(eventContent);
|
||||
expect(document.querySelector('div[aria-label="Forward"]')).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not allow forwarding a poll", () => {
|
||||
const eventContent = PollStartEvent.from("why?", ["42"], M_POLL_KIND_DISCLOSED);
|
||||
const menu = createMenuWithContent(eventContent);
|
||||
expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
|
||||
createMenuWithContent(eventContent);
|
||||
expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("should not allow forwarding a voice broadcast", () => {
|
||||
|
@ -267,8 +260,8 @@ describe("MessageContextMenu", () => {
|
|||
"@user:example.com",
|
||||
"ABC123",
|
||||
);
|
||||
const menu = createMenu(broadcastStartEvent);
|
||||
expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
|
||||
createMenu(broadcastStartEvent);
|
||||
expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
describe("forwarding beacons", () => {
|
||||
|
@ -279,8 +272,8 @@ describe("MessageContextMenu", () => {
|
|||
const beacon = new Beacon(deadBeaconEvent);
|
||||
const beacons = new Map<BeaconIdentifier, Beacon>();
|
||||
beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
|
||||
const menu = createMenu(deadBeaconEvent, {}, {}, beacons);
|
||||
expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
|
||||
createMenu(deadBeaconEvent, {}, {}, beacons);
|
||||
expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("does not allow forwarding a beacon that is not live but has a latestLocation", () => {
|
||||
|
@ -294,8 +287,8 @@ describe("MessageContextMenu", () => {
|
|||
beacon._latestLocationEvent = beaconLocation;
|
||||
const beacons = new Map<BeaconIdentifier, Beacon>();
|
||||
beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
|
||||
const menu = createMenu(deadBeaconEvent, {}, {}, beacons);
|
||||
expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
|
||||
createMenu(deadBeaconEvent, {}, {}, beacons);
|
||||
expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("does not allow forwarding a live beacon that does not have a latestLocation", () => {
|
||||
|
@ -304,8 +297,8 @@ describe("MessageContextMenu", () => {
|
|||
const beacon = new Beacon(beaconEvent);
|
||||
const beacons = new Map<BeaconIdentifier, Beacon>();
|
||||
beacons.set(getBeaconInfoIdentifier(beaconEvent), beacon);
|
||||
const menu = createMenu(beaconEvent, {}, {}, beacons);
|
||||
expect(menu.find('div[aria-label="Forward"]')).toHaveLength(0);
|
||||
createMenu(beaconEvent, {}, {}, beacons);
|
||||
expect(document.querySelector('div[aria-label="Forward"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("allows forwarding a live beacon that has a location", () => {
|
||||
|
@ -319,8 +312,8 @@ describe("MessageContextMenu", () => {
|
|||
beacon._latestLocationEvent = beaconLocation;
|
||||
const beacons = new Map<BeaconIdentifier, Beacon>();
|
||||
beacons.set(getBeaconInfoIdentifier(liveBeaconEvent), beacon);
|
||||
const menu = createMenu(liveBeaconEvent, {}, {}, beacons);
|
||||
expect(menu.find('div[aria-label="Forward"]')).toHaveLength(1);
|
||||
createMenu(liveBeaconEvent, {}, {}, beacons);
|
||||
expect(document.querySelector('div[aria-label="Forward"]')).toBeTruthy();
|
||||
});
|
||||
|
||||
it("opens forward dialog with correct event", () => {
|
||||
|
@ -335,11 +328,9 @@ describe("MessageContextMenu", () => {
|
|||
beacon._latestLocationEvent = beaconLocation;
|
||||
const beacons = new Map<BeaconIdentifier, Beacon>();
|
||||
beacons.set(getBeaconInfoIdentifier(liveBeaconEvent), beacon);
|
||||
const menu = createMenu(liveBeaconEvent, {}, {}, beacons);
|
||||
createMenu(liveBeaconEvent, {}, {}, beacons);
|
||||
|
||||
act(() => {
|
||||
menu.find('div[aria-label="Forward"]').simulate("click");
|
||||
});
|
||||
fireEvent.click(document.querySelector('div[aria-label="Forward"]')!);
|
||||
|
||||
// called with forwardableEvent, not beaconInfo event
|
||||
expect(dispatchSpy).toHaveBeenCalledWith(
|
||||
|
@ -354,8 +345,8 @@ describe("MessageContextMenu", () => {
|
|||
describe("open as map link", () => {
|
||||
it("does not allow opening a plain message in open street maps", () => {
|
||||
const eventContent = createMessageEventContent("hello");
|
||||
const menu = createMenuWithContent(eventContent);
|
||||
expect(menu.find('a[aria-label="Open in OpenStreetMap"]')).toHaveLength(0);
|
||||
createMenuWithContent(eventContent);
|
||||
expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("does not allow opening a beacon that does not have a shareable location event", () => {
|
||||
|
@ -363,15 +354,16 @@ describe("MessageContextMenu", () => {
|
|||
const beacon = new Beacon(deadBeaconEvent);
|
||||
const beacons = new Map<BeaconIdentifier, Beacon>();
|
||||
beacons.set(getBeaconInfoIdentifier(deadBeaconEvent), beacon);
|
||||
const menu = createMenu(deadBeaconEvent, {}, {}, beacons);
|
||||
expect(menu.find('a[aria-label="Open in OpenStreetMap"]')).toHaveLength(0);
|
||||
createMenu(deadBeaconEvent, {}, {}, beacons);
|
||||
expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toBeFalsy();
|
||||
});
|
||||
|
||||
it("allows opening a location event in open street map", () => {
|
||||
const locationEvent = makeLocationEvent("geo:50,50");
|
||||
const menu = createMenu(locationEvent);
|
||||
createMenu(locationEvent);
|
||||
// exists with a href with the lat/lon from the location event
|
||||
expect(menu.find('a[aria-label="Open in OpenStreetMap"]').at(0).props().href).toEqual(
|
||||
expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toHaveAttribute(
|
||||
"href",
|
||||
"https://www.openstreetmap.org/?mlat=50&mlon=50#map=16/50/50",
|
||||
);
|
||||
});
|
||||
|
@ -387,9 +379,10 @@ describe("MessageContextMenu", () => {
|
|||
beacon._latestLocationEvent = beaconLocation;
|
||||
const beacons = new Map<BeaconIdentifier, Beacon>();
|
||||
beacons.set(getBeaconInfoIdentifier(liveBeaconEvent), beacon);
|
||||
const menu = createMenu(liveBeaconEvent, {}, {}, beacons);
|
||||
createMenu(liveBeaconEvent, {}, {}, beacons);
|
||||
// exists with a href with the lat/lon from the location event
|
||||
expect(menu.find('a[aria-label="Open in OpenStreetMap"]').at(0).props().href).toEqual(
|
||||
expect(document.querySelector('a[aria-label="Open in OpenStreetMap"]')).toHaveAttribute(
|
||||
"href",
|
||||
"https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41",
|
||||
);
|
||||
});
|
||||
|
@ -401,9 +394,9 @@ describe("MessageContextMenu", () => {
|
|||
const eventContent = createMessageEventContent(text);
|
||||
mocked(getSelectedText).mockReturnValue(text);
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent);
|
||||
const copyButton = menu.find('div[aria-label="Copy"]');
|
||||
copyButton.simulate("mousedown");
|
||||
createRightClickMenuWithContent(eventContent);
|
||||
const copyButton = document.querySelector('div[aria-label="Copy"]')!;
|
||||
fireEvent.mouseDown(copyButton);
|
||||
expect(copyPlaintext).toHaveBeenCalledWith(text);
|
||||
});
|
||||
|
||||
|
@ -412,27 +405,27 @@ describe("MessageContextMenu", () => {
|
|||
const eventContent = createMessageEventContent(text);
|
||||
mocked(getSelectedText).mockReturnValue("");
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent);
|
||||
const copyButton = menu.find('div[aria-label="Copy"]');
|
||||
expect(copyButton).toHaveLength(0);
|
||||
createRightClickMenuWithContent(eventContent);
|
||||
const copyButton = document.querySelector('div[aria-label="Copy"]');
|
||||
expect(copyButton).toBeFalsy();
|
||||
});
|
||||
|
||||
it("shows edit button when we can edit", () => {
|
||||
const eventContent = createMessageEventContent("hello");
|
||||
mocked(canEditContent).mockReturnValue(true);
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent);
|
||||
const editButton = menu.find('div[aria-label="Edit"]');
|
||||
expect(editButton).toHaveLength(1);
|
||||
createRightClickMenuWithContent(eventContent);
|
||||
const editButton = document.querySelector('div[aria-label="Edit"]');
|
||||
expect(editButton).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not show edit button when we cannot edit", () => {
|
||||
const eventContent = createMessageEventContent("hello");
|
||||
mocked(canEditContent).mockReturnValue(false);
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent);
|
||||
const editButton = menu.find('div[aria-label="Edit"]');
|
||||
expect(editButton).toHaveLength(0);
|
||||
createRightClickMenuWithContent(eventContent);
|
||||
const editButton = document.querySelector('div[aria-label="Edit"]');
|
||||
expect(editButton).toBeFalsy();
|
||||
});
|
||||
|
||||
it("shows reply button when we can reply", () => {
|
||||
|
@ -441,9 +434,9 @@ describe("MessageContextMenu", () => {
|
|||
canSendMessages: true,
|
||||
};
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent, context);
|
||||
const replyButton = menu.find('div[aria-label="Reply"]');
|
||||
expect(replyButton).toHaveLength(1);
|
||||
createRightClickMenuWithContent(eventContent, context);
|
||||
const replyButton = document.querySelector('div[aria-label="Reply"]');
|
||||
expect(replyButton).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not show reply button when we cannot reply", () => {
|
||||
|
@ -455,9 +448,9 @@ describe("MessageContextMenu", () => {
|
|||
// queued messages are not actionable
|
||||
unsentMessage.setStatus(EventStatus.QUEUED);
|
||||
|
||||
const menu = createMenu(unsentMessage, {}, context);
|
||||
const replyButton = menu.find('div[aria-label="Reply"]');
|
||||
expect(replyButton).toHaveLength(0);
|
||||
createMenu(unsentMessage, {}, context);
|
||||
const replyButton = document.querySelector('div[aria-label="Reply"]');
|
||||
expect(replyButton).toBeFalsy();
|
||||
});
|
||||
|
||||
it("shows react button when we can react", () => {
|
||||
|
@ -466,9 +459,9 @@ describe("MessageContextMenu", () => {
|
|||
canReact: true,
|
||||
};
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent, context);
|
||||
const reactButton = menu.find('div[aria-label="React"]');
|
||||
expect(reactButton).toHaveLength(1);
|
||||
createRightClickMenuWithContent(eventContent, context);
|
||||
const reactButton = document.querySelector('div[aria-label="React"]');
|
||||
expect(reactButton).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not show react button when we cannot react", () => {
|
||||
|
@ -477,9 +470,9 @@ describe("MessageContextMenu", () => {
|
|||
canReact: false,
|
||||
};
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent, context);
|
||||
const reactButton = menu.find('div[aria-label="React"]');
|
||||
expect(reactButton).toHaveLength(0);
|
||||
createRightClickMenuWithContent(eventContent, context);
|
||||
const reactButton = document.querySelector('div[aria-label="React"]');
|
||||
expect(reactButton).toBeFalsy();
|
||||
});
|
||||
|
||||
it("shows view in room button when the event is a thread root", () => {
|
||||
|
@ -493,17 +486,17 @@ describe("MessageContextMenu", () => {
|
|||
timelineRenderingType: TimelineRenderingType.Thread,
|
||||
};
|
||||
|
||||
const menu = createMenu(mxEvent, props, context);
|
||||
const reactButton = menu.find('div[aria-label="View in room"]');
|
||||
expect(reactButton).toHaveLength(1);
|
||||
createMenu(mxEvent, props, context);
|
||||
const reactButton = document.querySelector('div[aria-label="View in room"]');
|
||||
expect(reactButton).toBeTruthy();
|
||||
});
|
||||
|
||||
it("does not show view in room button when the event is not a thread root", () => {
|
||||
const eventContent = createMessageEventContent("hello");
|
||||
|
||||
const menu = createRightClickMenuWithContent(eventContent);
|
||||
const reactButton = menu.find('div[aria-label="View in room"]');
|
||||
expect(reactButton).toHaveLength(0);
|
||||
createRightClickMenuWithContent(eventContent);
|
||||
const reactButton = document.querySelector('div[aria-label="View in room"]');
|
||||
expect(reactButton).toBeFalsy();
|
||||
});
|
||||
|
||||
it("creates a new thread on reply in thread click", () => {
|
||||
|
@ -516,11 +509,10 @@ describe("MessageContextMenu", () => {
|
|||
};
|
||||
jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
|
||||
|
||||
const menu = createRightClickMenu(mxEvent, context);
|
||||
createRightClickMenu(mxEvent, context);
|
||||
|
||||
const replyInThreadButton = menu.find('div[aria-label="Reply in thread"]');
|
||||
expect(replyInThreadButton).toHaveLength(1);
|
||||
replyInThreadButton.simulate("click");
|
||||
const replyInThreadButton = document.querySelector('div[aria-label="Reply in thread"]')!;
|
||||
fireEvent.click(replyInThreadButton);
|
||||
|
||||
expect(dispatcher.dispatch).toHaveBeenCalledWith({
|
||||
action: Action.ShowThread,
|
||||
|
@ -531,11 +523,11 @@ describe("MessageContextMenu", () => {
|
|||
});
|
||||
});
|
||||
|
||||
function createRightClickMenuWithContent(eventContent: object, context?: Partial<IRoomState>): ReactWrapper {
|
||||
function createRightClickMenuWithContent(eventContent: object, context?: Partial<IRoomState>): RenderResult {
|
||||
return createMenuWithContent(eventContent, { rightClick: true }, context);
|
||||
}
|
||||
|
||||
function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial<IRoomState>): ReactWrapper {
|
||||
function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial<IRoomState>): RenderResult {
|
||||
return createMenu(mxEvent, { rightClick: true }, context);
|
||||
}
|
||||
|
||||
|
@ -543,7 +535,7 @@ function createMenuWithContent(
|
|||
eventContent: object,
|
||||
props?: Partial<React.ComponentProps<typeof MessageContextMenu>>,
|
||||
context?: Partial<IRoomState>,
|
||||
): ReactWrapper {
|
||||
): RenderResult {
|
||||
// XXX: We probably shouldn't be assuming all events are going to be message events, but considering this
|
||||
// test is for the Message context menu, it's a fairly safe assumption.
|
||||
const mxEvent = new MatrixEvent({ type: EventType.RoomMessage, content: eventContent });
|
||||
|
@ -562,7 +554,7 @@ function createMenu(
|
|||
context: Partial<IRoomState> = {},
|
||||
beacons: Map<BeaconIdentifier, Beacon> = new Map(),
|
||||
room: Room = makeDefaultRoom(),
|
||||
): ReactWrapper {
|
||||
): RenderResult {
|
||||
const client = MatrixClientPeg.get();
|
||||
|
||||
// @ts-ignore illegally set private prop
|
||||
|
@ -573,7 +565,7 @@ function createMenu(
|
|||
client.getUserId = jest.fn().mockReturnValue("@user:example.com");
|
||||
client.getRoom = jest.fn().mockReturnValue(room);
|
||||
|
||||
return mount(
|
||||
return render(
|
||||
<RoomContext.Provider value={context as IRoomState}>
|
||||
<MessageContextMenu mxEvent={mxEvent} onFinished={jest.fn()} {...props} />
|
||||
</RoomContext.Provider>,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue