element-web/test/components/views/right_panel/RightPanelTabs-test.tsx

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

73 lines
3.2 KiB
TypeScript
Raw Normal View History

Add tabs to the right panel (#12672) * Create new method for header button behaviour With the introduction of tabs, the behaviour of the header buttons is changed as follows: - Close any right panel if open - Open the correct right panel if no panel was open before The old method (and behaviour) is retained as showOrHidePhase. * Implement tabs in the right panel There are three tabs: Info, People and Threads * Remove unwanted code from RoomSummaryCard - Remove the menu item for opening the memberlist since that is now taken of by the tabs. - Remove the close button * Remove code for focusing close button from tac item See https://github.com/matrix-org/matrix-react-sdk/pull/12410 There's no longer a close button to focus so we instead focus the thread tab. This is done in RightPaneltabs.tsx so we just need to remove this code. * Introduce a room info icon to the header This was previously present in the legacy room header but not in the new header. * BaseCard changes - Adds id, ariaLabelledBy and role props to implement tab accessibility. - Adds hideHeaderButtons prop to hide header buttons (think back and close buttons). - Change confusing header rendering code: header is not rendered ONLY when no header is passed AND hideHeaderButtons is true. * Refactor repeated code into function Created a new function createSpaceScopeHeader which returns the component if the room is a space room. Previously this code was duplicated in every component that uses SpaceScopeHeader component. * Pass BaseCard attributes and use helper function Actually using the code from the last two commits * Add, update and remove tests/screenshots/snapshots * Fix distance between search bar and tabs * Update compound * Update screenshots/snapshots
2024-07-09 11:36:50 +00:00
/*
Copyright 2024 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 { render, fireEvent } from "@testing-library/react";
import dis from "../../../../src/dispatcher/dispatcher";
import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
import { RightPanelTabs } from "../../../../src/components/views/right_panel/RightPanelTabs";
import { Action } from "../../../../src/dispatcher/actions";
describe("<RightPanelTabs />", () => {
it("Component renders the correct tabs", () => {
const { container, getByRole } = render(<RightPanelTabs phase={RightPanelPhases.RoomSummary} />);
expect(container).toMatchSnapshot();
// We expect Info, People and Threads as tabs
expect(getByRole("tab", { name: "Info" })).toBeDefined();
expect(getByRole("tab", { name: "People" })).toBeDefined();
expect(getByRole("tab", { name: "Threads" })).toBeDefined();
});
it("Correct tab is active", () => {
const { container } = render(<RightPanelTabs phase={RightPanelPhases.RoomMemberList} />);
expect(container).toMatchSnapshot();
// Assert that the active tab is Info
expect(container.querySelectorAll("[aria-selected='true'").length).toEqual(1);
expect(container.querySelector("[aria-selected='true'")).toHaveAccessibleName("People");
});
it("Renders nothing for some phases, eg: FilePanel", () => {
const { container } = render(<RightPanelTabs phase={RightPanelPhases.FilePanel} />);
expect(container).toBeEmptyDOMElement();
});
it("onClick behaviors work as expected", () => {
const spy = jest.spyOn(RightPanelStore.instance, "pushCard");
const { getByRole } = render(<RightPanelTabs phase={RightPanelPhases.RoomSummary} />);
// Info -> People
fireEvent.click(getByRole("tab", { name: "People" }));
expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.RoomMemberList }, true);
// People -> Threads
fireEvent.click(getByRole("tab", { name: "Threads" }));
expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.ThreadPanel }, true);
// Threads -> Info
fireEvent.click(getByRole("tab", { name: "Info" }));
expect(spy).toHaveBeenLastCalledWith({ phase: RightPanelPhases.RoomSummary }, true);
});
it("Threads tab is focused on action", () => {
const { getByRole } = render(<RightPanelTabs phase={RightPanelPhases.ThreadPanel} />);
dis.dispatch({ action: Action.FocusThreadsPanel }, true);
expect(getByRole("tab", { name: "Threads" })).toHaveFocus();
});
});