Merge branch 'develop' into feat/matrix-wysisyg-integration
This commit is contained in:
Florian Duros
GitHub
commit
7ad39ba6c7
10 changed files with 102 additions and 163 deletions
|
|
@ -18,7 +18,6 @@ import React from 'react';
|
|||
// eslint-disable-next-line deprecate/import
|
||||
import { mount, ReactWrapper } from 'enzyme';
|
||||
import { render, screen, act, fireEvent, waitFor, getByRole } from "@testing-library/react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { mocked, Mocked } from "jest-mock";
|
||||
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
|
|
|||
|
|
@ -15,13 +15,12 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
// eslint-disable-next-line deprecate/import
|
||||
import { mount, ReactWrapper, HTMLAttributes } from 'enzyme';
|
||||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import { Room } from 'matrix-js-sdk/src/matrix';
|
||||
import { EventType } from "matrix-js-sdk/src/@types/event";
|
||||
import { act } from "react-dom/test-utils";
|
||||
import { mocked } from 'jest-mock';
|
||||
import { render, screen, fireEvent, RenderResult } from '@testing-library/react';
|
||||
|
||||
import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
|
||||
import { MetaSpace } from "../../../../src/stores/spaces";
|
||||
|
|
@ -52,55 +51,53 @@ const setupSpace = (client: MatrixClient): Room => {
|
|||
return testSpace;
|
||||
};
|
||||
|
||||
const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<ReactWrapper> => {
|
||||
const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
|
||||
await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
|
||||
act(() => {
|
||||
SpaceStore.instance.setActiveSpace(testSpace.roomId);
|
||||
});
|
||||
|
||||
const wrapper = mount(<RoomListHeader />);
|
||||
const wrapper = render(<RoomListHeader />);
|
||||
|
||||
expect(wrapper.text()).toBe("Test Space");
|
||||
expect(wrapper.container.textContent).toBe("Test Space");
|
||||
act(() => {
|
||||
wrapper.find('[aria-label="Test Space menu"]').hostNodes().simulate("click");
|
||||
wrapper.container.querySelector<HTMLElement>('[aria-label="Test Space menu"]').click();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<ReactWrapper> => {
|
||||
const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
|
||||
await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
|
||||
act(() => {
|
||||
SpaceStore.instance.setActiveSpace(testSpace.roomId);
|
||||
});
|
||||
|
||||
const wrapper = mount(<RoomListHeader />);
|
||||
const wrapper = render(<RoomListHeader />);
|
||||
|
||||
expect(wrapper.text()).toBe("Test Space");
|
||||
expect(wrapper.container.textContent).toBe("Test Space");
|
||||
act(() => {
|
||||
wrapper.find('[aria-label="Add"]').hostNodes().simulate("click");
|
||||
wrapper.container.querySelector<HTMLElement>('[aria-label="Add"]').click();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
const checkIsDisabled = (menuItem: ReactWrapper<HTMLAttributes>): void => {
|
||||
expect(menuItem.props().disabled).toBeTruthy();
|
||||
expect(menuItem.props()['aria-disabled']).toBeTruthy();
|
||||
const checkIsDisabled = (menuItem: HTMLElement): void => {
|
||||
expect(menuItem).toHaveAttribute("disabled");
|
||||
expect(menuItem).toHaveAttribute("aria-disabled", "true");
|
||||
};
|
||||
|
||||
const checkMenuLabels = (items: ReactWrapper<HTMLAttributes>, labelArray: Array<string>) => {
|
||||
const checkMenuLabels = (items: NodeListOf<Element>, labelArray: Array<string>) => {
|
||||
expect(items).toHaveLength(labelArray.length);
|
||||
|
||||
const checkLabel = (item: ReactWrapper<HTMLAttributes>, label: string) => {
|
||||
expect(item.find(".mx_IconizedContextMenu_label").text()).toBe(label);
|
||||
const checkLabel = (item: Element, label: string) => {
|
||||
expect(item.querySelector(".mx_IconizedContextMenu_label").textContent).toBe(label);
|
||||
};
|
||||
|
||||
labelArray.forEach((label, index) => {
|
||||
console.log('index', index, 'label', label);
|
||||
checkLabel(items.at(index), label);
|
||||
checkLabel(items[index], label);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -125,26 +122,23 @@ describe("RoomListHeader", () => {
|
|||
SpaceStore.instance.setActiveSpace(MetaSpace.Home);
|
||||
});
|
||||
|
||||
const wrapper = mount(<RoomListHeader />);
|
||||
const { container } = render(<RoomListHeader />);
|
||||
|
||||
expect(wrapper.text()).toBe("Home");
|
||||
act(() => {
|
||||
wrapper.find('[aria-label="Home options"]').hostNodes().simulate("click");
|
||||
});
|
||||
wrapper.update();
|
||||
expect(container.textContent).toBe("Home");
|
||||
fireEvent.click(screen.getByLabelText("Home options"));
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
|
||||
expect(items).toHaveLength(1);
|
||||
expect(items.at(0).text()).toBe("Show all rooms");
|
||||
expect(items[0].textContent).toBe("Show all rooms");
|
||||
});
|
||||
|
||||
it("renders a main menu for spaces", async () => {
|
||||
const testSpace = setupSpace(client);
|
||||
const wrapper = await setupMainMenu(client, testSpace);
|
||||
await setupMainMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
|
||||
|
||||
checkMenuLabels(items, [
|
||||
"Space home",
|
||||
|
|
@ -158,10 +152,10 @@ describe("RoomListHeader", () => {
|
|||
|
||||
it("renders a plus menu for spaces", async () => {
|
||||
const testSpace = setupSpace(client);
|
||||
const wrapper = await setupPlusMenu(client, testSpace);
|
||||
await setupPlusMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
|
||||
|
||||
checkMenuLabels(items, [
|
||||
"New room",
|
||||
|
|
@ -178,17 +172,14 @@ describe("RoomListHeader", () => {
|
|||
});
|
||||
|
||||
const testSpace = setupSpace(client);
|
||||
const wrapper = await setupMainMenu(client, testSpace);
|
||||
await setupMainMenu(client, testSpace);
|
||||
|
||||
act(() => {
|
||||
SpaceStore.instance.setActiveSpace(MetaSpace.Favourites);
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.text()).toBe("Favourites");
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
expect(menu).toHaveLength(0);
|
||||
screen.getByText("Favourites");
|
||||
expect(screen.queryByRole("menu")).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('UIComponents', () => {
|
||||
|
|
@ -198,10 +189,10 @@ describe("RoomListHeader", () => {
|
|||
blockUIComponent(UIComponent.CreateSpaces);
|
||||
|
||||
const testSpace = setupSpace(client);
|
||||
const wrapper = await setupMainMenu(client, testSpace);
|
||||
await setupMainMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
|
||||
checkMenuLabels(items, [
|
||||
"Space home",
|
||||
"Manage & explore rooms",
|
||||
|
|
@ -217,10 +208,10 @@ describe("RoomListHeader", () => {
|
|||
blockUIComponent(UIComponent.CreateRooms);
|
||||
|
||||
const testSpace = setupSpace(client);
|
||||
const wrapper = await setupMainMenu(client, testSpace);
|
||||
await setupMainMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
|
||||
checkMenuLabels(items, [
|
||||
"Space home",
|
||||
"Explore rooms", // not Manage & explore rooms
|
||||
|
|
@ -238,10 +229,10 @@ describe("RoomListHeader", () => {
|
|||
blockUIComponent(UIComponent.CreateSpaces);
|
||||
|
||||
const testSpace = setupSpace(client);
|
||||
const wrapper = await setupPlusMenu(client, testSpace);
|
||||
await setupPlusMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
|
||||
|
||||
checkMenuLabels(items, [
|
||||
"New room",
|
||||
|
|
@ -256,10 +247,10 @@ describe("RoomListHeader", () => {
|
|||
blockUIComponent(UIComponent.CreateRooms);
|
||||
|
||||
const testSpace = setupSpace(client);
|
||||
const wrapper = await setupPlusMenu(client, testSpace);
|
||||
await setupPlusMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
|
||||
|
||||
checkMenuLabels(items, [
|
||||
"New room",
|
||||
|
|
@ -269,7 +260,7 @@ describe("RoomListHeader", () => {
|
|||
]);
|
||||
|
||||
// "Add existing room" is disabled
|
||||
checkIsDisabled(items.at(2));
|
||||
checkIsDisabled(items[2]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -280,10 +271,10 @@ describe("RoomListHeader", () => {
|
|||
mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
|
||||
(stateEventType, userId) => stateEventType !== EventType.SpaceChild);
|
||||
|
||||
const wrapper = await setupMainMenu(client, testSpace);
|
||||
await setupMainMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
|
||||
checkMenuLabels(items, [
|
||||
"Space home",
|
||||
"Explore rooms", // not Manage & explore rooms
|
||||
|
|
@ -299,10 +290,10 @@ describe("RoomListHeader", () => {
|
|||
mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
|
||||
(stateEventType, userId) => stateEventType !== EventType.SpaceChild);
|
||||
|
||||
const wrapper = await setupPlusMenu(client, testSpace);
|
||||
await setupPlusMenu(client, testSpace);
|
||||
|
||||
const menu = wrapper.find(".mx_IconizedContextMenu");
|
||||
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
|
||||
const menu = screen.getByRole("menu");
|
||||
const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
|
||||
|
||||
checkMenuLabels(items, [
|
||||
"New room",
|
||||
|
|
@ -312,9 +303,9 @@ describe("RoomListHeader", () => {
|
|||
]);
|
||||
|
||||
// "Add existing room" is disabled
|
||||
checkIsDisabled(items.at(2));
|
||||
checkIsDisabled(items[2]);
|
||||
// "Add space" is disabled
|
||||
checkIsDisabled(items.at(3));
|
||||
checkIsDisabled(items[3]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue