element-web-Github/test/stores/right-panel/RightPanelStore-test.ts
R Midhun Suresh cf8b87fd14
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

247 lines
11 KiB
TypeScript

/*
Copyright 2022 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 { mocked, MockedObject } from "jest-mock";
import { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
import { stubClient } from "../../test-utils";
import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
import DMRoomMap from "../../../src/utils/DMRoomMap";
import { Action } from "../../../src/dispatcher/actions";
import defaultDispatcher from "../../../src/dispatcher/dispatcher";
import { ActiveRoomChangedPayload } from "../../../src/dispatcher/payloads/ActiveRoomChangedPayload";
import RightPanelStore from "../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../src/stores/right-panel/RightPanelStorePhases";
import SettingsStore from "../../../src/settings/SettingsStore";
describe("RightPanelStore", () => {
// Mock out the settings store so the right panel store can't persist values between tests
jest.spyOn(SettingsStore, "setValue").mockImplementation(async () => {});
const store = RightPanelStore.instance;
let cli: MockedObject<MatrixClient>;
beforeEach(() => {
stubClient();
cli = mocked(MatrixClientPeg.safeGet());
DMRoomMap.makeShared(cli);
// Make sure we start with a clean store
store.reset();
store.useUnitTestClient(cli);
});
const viewRoom = async (roomId: string) => {
const roomChanged = new Promise<void>((resolve) => {
const ref = defaultDispatcher.register((payload) => {
if (payload.action === Action.ActiveRoomChanged && payload.newRoomId === roomId) {
defaultDispatcher.unregister(ref);
resolve();
}
});
});
defaultDispatcher.dispatch<ActiveRoomChangedPayload>({
action: Action.ActiveRoomChanged,
oldRoomId: null,
newRoomId: roomId,
});
await roomChanged;
};
const setCard = (roomId: string, phase: RightPanelPhases) => store.setCard({ phase }, true, roomId);
describe("isOpen", () => {
it("is false if no rooms are open", () => {
expect(store.isOpen).toEqual(false);
});
it("is false if a room other than the current room is open", async () => {
await viewRoom("!1:example.org");
setCard("!2:example.org", RightPanelPhases.RoomSummary);
expect(store.isOpen).toEqual(false);
});
it("is true if the current room is open", async () => {
await viewRoom("!1:example.org");
setCard("!1:example.org", RightPanelPhases.RoomSummary);
expect(store.isOpen).toEqual(true);
});
});
describe("currentCard", () => {
it("has a phase of null if nothing is open", () => {
expect(store.currentCard.phase).toEqual(null);
});
it("has a phase of null if the panel is open but in another room", async () => {
await viewRoom("!1:example.org");
setCard("!2:example.org", RightPanelPhases.RoomSummary);
expect(store.currentCard.phase).toEqual(null);
});
it("reflects the phase of the current room", async () => {
await viewRoom("!1:example.org");
setCard("!1:example.org", RightPanelPhases.RoomSummary);
expect(store.currentCard.phase).toEqual(RightPanelPhases.RoomSummary);
});
});
describe("setCard", () => {
it("does nothing if given no room ID and not viewing a room", () => {
store.setCard({ phase: RightPanelPhases.RoomSummary }, true);
expect(store.isOpen).toEqual(false);
expect(store.currentCard.phase).toEqual(null);
});
it("does nothing if given an invalid state", async () => {
await viewRoom("!1:example.org");
// Needs a member specified to be valid
store.setCard({ phase: RightPanelPhases.RoomMemberInfo }, true, "!1:example.org");
expect(store.roomPhaseHistory).toEqual([]);
});
it("only creates a single history entry if given the same card twice", async () => {
await viewRoom("!1:example.org");
store.setCard({ phase: RightPanelPhases.RoomSummary }, true, "!1:example.org");
store.setCard({ phase: RightPanelPhases.RoomSummary }, true, "!1:example.org");
expect(store.roomPhaseHistory).toEqual([{ phase: RightPanelPhases.RoomSummary, state: {} }]);
});
it("opens the panel in the given room with the correct phase", () => {
store.setCard({ phase: RightPanelPhases.RoomSummary }, true, "!1:example.org");
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomSummary);
});
it("overwrites history if changing the phase", async () => {
await viewRoom("!1:example.org");
store.setCard({ phase: RightPanelPhases.RoomSummary }, true, "!1:example.org");
store.setCard({ phase: RightPanelPhases.RoomMemberList }, true, "!1:example.org");
expect(store.roomPhaseHistory).toEqual([{ phase: RightPanelPhases.RoomMemberList, state: {} }]);
});
});
describe("setCards", () => {
it("overwrites history", async () => {
await viewRoom("!1:example.org");
store.setCard({ phase: RightPanelPhases.RoomMemberList }, true, "!1:example.org");
store.setCards(
[{ phase: RightPanelPhases.RoomSummary }, { phase: RightPanelPhases.PinnedMessages }],
true,
"!1:example.org",
);
expect(store.roomPhaseHistory).toEqual([
{ phase: RightPanelPhases.RoomSummary, state: {} },
{ phase: RightPanelPhases.PinnedMessages, state: {} },
]);
});
});
describe("pushCard", () => {
it("does nothing if given no room ID and not viewing a room", () => {
store.pushCard({ phase: RightPanelPhases.RoomSummary }, true);
expect(store.isOpen).toEqual(false);
expect(store.currentCard.phase).toEqual(null);
});
it("opens the panel in the given room with the correct phase", () => {
store.pushCard({ phase: RightPanelPhases.RoomSummary }, true, "!1:example.org");
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomSummary);
});
it("appends the phase to any phases that were there before", async () => {
await viewRoom("!1:example.org");
store.setCard({ phase: RightPanelPhases.RoomSummary }, true, "!1:example.org");
store.pushCard({ phase: RightPanelPhases.PinnedMessages }, true, "!1:example.org");
expect(store.roomPhaseHistory).toEqual([
{ phase: RightPanelPhases.RoomSummary, state: {} },
{ phase: RightPanelPhases.PinnedMessages, state: {} },
]);
});
});
describe("popCard", () => {
it("removes the most recent card", () => {
store.setCards(
[{ phase: RightPanelPhases.RoomSummary }, { phase: RightPanelPhases.PinnedMessages }],
true,
"!1:example.org",
);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.PinnedMessages);
store.popCard("!1:example.org");
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomSummary);
});
});
describe("togglePanel", () => {
it("does nothing if the room has no phase to open to", () => {
expect(store.isOpenForRoom("!1:example.org")).toEqual(false);
store.togglePanel("!1:example.org");
expect(store.isOpenForRoom("!1:example.org")).toEqual(false);
});
it("works if a room is specified", () => {
store.setCard({ phase: RightPanelPhases.RoomSummary }, true, "!1:example.org");
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
store.togglePanel("!1:example.org");
expect(store.isOpenForRoom("!1:example.org")).toEqual(false);
store.togglePanel("!1:example.org");
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
});
it("operates on the current room if no room is specified", async () => {
await viewRoom("!1:example.org");
store.setCard({ phase: RightPanelPhases.RoomSummary }, true);
expect(store.isOpen).toEqual(true);
store.togglePanel(null);
expect(store.isOpen).toEqual(false);
store.togglePanel(null);
expect(store.isOpen).toEqual(true);
});
});
it("doesn't restore member info cards when switching back to a room", async () => {
await viewRoom("!1:example.org");
store.setCards(
[
{
phase: RightPanelPhases.RoomMemberList,
},
{
phase: RightPanelPhases.RoomMemberInfo,
state: { member: new RoomMember("!1:example.org", "@alice:example.org") },
},
],
true,
"!1:example.org",
);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberInfo);
// Switch away and back
await viewRoom("!2:example.org");
await viewRoom("!1:example.org");
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberList);
});
it("showOrHidePhase works as expected", async () => {
await viewRoom("!1:example.org");
// Open the memberlist panel
store.showOrHidePanel(RightPanelPhases.RoomMemberList);
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberList);
// showOrHide with RoomSummary should now close the panel
store.showOrHidePanel(RightPanelPhases.RoomSummary);
expect(store.isOpenForRoom("!1:example.org")).toEqual(false);
// showOrHide with RoomSummary should now open the panel
store.showOrHidePanel(RightPanelPhases.RoomSummary);
expect(store.isOpenForRoom("!1:example.org")).toEqual(true);
expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomSummary);
});
});