mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-05 05:38:41 +03:00
f5226f9d5b
* Render a CollapsibleButton's children (needed by UploadButton) * Make UploadButton ready to live inside an overflow menu * Always show overflow menu in composer: main buttons are emoji and attach * Re-order composer buttons as per design * Re-word composer button captions to be simple nouns * Don't rotate More options button when clicked * Move the composer menu and dialogs 16px in from right * Reduce shadow on composer More menu * From review: remove else clause * From review: take input out of button * Update test snapshots * Update snapshots
210 lines
6.4 KiB
TypeScript
210 lines
6.4 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 React from "react";
|
|
import { mount, ReactWrapper } from "enzyme";
|
|
import { Room } from "matrix-js-sdk/src/models/room";
|
|
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
|
|
|
import * as TestUtils from "../../../test-utils";
|
|
import sdk from "../../../skinned-sdk";
|
|
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
|
import { Layout } from "../../../../src/settings/enums/Layout";
|
|
import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
|
|
import { createTestClient } from "../../../test-utils";
|
|
import { IRoomState } from "../../../../src/components/structures/RoomView";
|
|
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
|
|
|
const _MessageComposerButtons = sdk.getComponent("views.rooms.MessageComposerButtons");
|
|
const MessageComposerButtons = TestUtils.wrapInMatrixClientContext(
|
|
_MessageComposerButtons,
|
|
);
|
|
|
|
describe("MessageComposerButtons", () => {
|
|
it("Renders emoji and upload buttons in wide mode", () => {
|
|
const buttons = wrapAndRender(
|
|
<MessageComposerButtons
|
|
isMenuOpen={false}
|
|
narrowMode={false}
|
|
showLocationButton={true}
|
|
showStickersButton={true}
|
|
toggleButtonMenu={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(buttonLabels(buttons)).toEqual([
|
|
"Emoji",
|
|
"Attachment",
|
|
"More options",
|
|
]);
|
|
});
|
|
|
|
it("Renders other buttons in menu in wide mode", () => {
|
|
const buttons = wrapAndRender(
|
|
<MessageComposerButtons
|
|
isMenuOpen={true}
|
|
narrowMode={false}
|
|
showLocationButton={true}
|
|
showStickersButton={true}
|
|
toggleButtonMenu={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(buttonLabels(buttons)).toEqual([
|
|
"Emoji",
|
|
"Attachment",
|
|
"More options",
|
|
[
|
|
"Sticker",
|
|
"Voice Message",
|
|
"Poll",
|
|
"Location",
|
|
],
|
|
]);
|
|
});
|
|
|
|
it("Renders only some buttons in narrow mode", () => {
|
|
const buttons = wrapAndRender(
|
|
<MessageComposerButtons
|
|
isMenuOpen={false}
|
|
narrowMode={true}
|
|
showLocationButton={true}
|
|
showStickersButton={true}
|
|
toggleButtonMenu={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(buttonLabels(buttons)).toEqual([
|
|
"Emoji",
|
|
"More options",
|
|
]);
|
|
});
|
|
|
|
it("Renders other buttons in menu (except voice messages) in narrow mode", () => {
|
|
const buttons = wrapAndRender(
|
|
<MessageComposerButtons
|
|
isMenuOpen={true}
|
|
narrowMode={true}
|
|
showLocationButton={true}
|
|
showStickersButton={true}
|
|
toggleButtonMenu={() => {}}
|
|
/>,
|
|
);
|
|
|
|
expect(buttonLabels(buttons)).toEqual([
|
|
"Emoji",
|
|
"More options",
|
|
[
|
|
"Attachment",
|
|
"Sticker",
|
|
"Poll",
|
|
"Location",
|
|
],
|
|
]);
|
|
});
|
|
});
|
|
|
|
function wrapAndRender(component: React.ReactElement): ReactWrapper {
|
|
const mockClient = MatrixClientPeg.matrixClient = createTestClient();
|
|
const roomId = "myroomid";
|
|
const mockRoom: any = {
|
|
currentState: undefined,
|
|
roomId,
|
|
client: mockClient,
|
|
getMember: function(userId: string): RoomMember {
|
|
return new RoomMember(roomId, userId);
|
|
},
|
|
};
|
|
const roomState = createRoomState(mockRoom);
|
|
|
|
return mount(
|
|
<MatrixClientContext.Provider value={mockClient}>
|
|
<RoomContext.Provider value={roomState}>
|
|
{ component }
|
|
</RoomContext.Provider>
|
|
</MatrixClientContext.Provider>,
|
|
);
|
|
}
|
|
|
|
function createRoomState(room: Room): IRoomState {
|
|
return {
|
|
room: room,
|
|
roomId: room.roomId,
|
|
roomLoading: true,
|
|
peekLoading: false,
|
|
shouldPeek: true,
|
|
membersLoaded: false,
|
|
numUnreadMessages: 0,
|
|
draggingFile: false,
|
|
searching: false,
|
|
guestsCanJoin: false,
|
|
canPeek: false,
|
|
showApps: false,
|
|
isPeeking: false,
|
|
showRightPanel: true,
|
|
joining: false,
|
|
atEndOfLiveTimeline: true,
|
|
atEndOfLiveTimelineInit: false,
|
|
showTopUnreadMessagesBar: false,
|
|
statusBarVisible: false,
|
|
canReact: false,
|
|
canReply: false,
|
|
layout: Layout.Group,
|
|
lowBandwidth: false,
|
|
alwaysShowTimestamps: false,
|
|
showTwelveHourTimestamps: false,
|
|
readMarkerInViewThresholdMs: 3000,
|
|
readMarkerOutOfViewThresholdMs: 30000,
|
|
showHiddenEventsInTimeline: false,
|
|
showReadReceipts: true,
|
|
showRedactions: true,
|
|
showJoinLeaves: true,
|
|
showAvatarChanges: true,
|
|
showDisplaynameChanges: true,
|
|
matrixClientIsReady: false,
|
|
dragCounter: 0,
|
|
timelineRenderingType: TimelineRenderingType.Room,
|
|
liveTimeline: undefined,
|
|
};
|
|
}
|
|
|
|
function buttonLabels(buttons: ReactWrapper): any[] {
|
|
// Note: Depends on the fact that the mini buttons use aria-label
|
|
// and the labels under More options use textContent
|
|
const mainButtons = (
|
|
buttons
|
|
.find('div.mx_MessageComposer_button[aria-label]')
|
|
.map((button: ReactWrapper) => button.prop("aria-label") as string)
|
|
.filter(x => x)
|
|
);
|
|
|
|
const extraButtons = (
|
|
buttons
|
|
.find('.mx_MessageComposer_Menu div.mx_AccessibleButton[role="menuitem"]')
|
|
.map((button: ReactWrapper) => button.text())
|
|
.filter(x => x)
|
|
);
|
|
|
|
const list: any[] = [
|
|
...mainButtons,
|
|
];
|
|
|
|
if (extraButtons.length > 0) {
|
|
list.push(extraButtons);
|
|
}
|
|
|
|
return list;
|
|
}
|