PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

fix ts issues in SendMessageComposer-test (#8077)

Browse source 
* fix ts issues in SendMessageComposer-test

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove empty file

Signed-off-by: Kerry Archibald <kerrya@element.io>

* better event type for m.room.message

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-03-18 11:07:33 +01:00 committed by GitHub
parent cdcf6d0fd1
commit da097d42ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/rooms/SendMessageComposer.tsx
View file

@ -104,7 +104,7 @@ export function attachRelation(
export function createMessageContent( export function createMessageContent(
model: EditorModel, model: EditorModel,
replyToEvent: MatrixEvent, replyToEvent: MatrixEvent,
relation: IEventRelation, relation: IEventRelation | undefined,
permalinkCreator: RoomPermalinkCreator, permalinkCreator: RoomPermalinkCreator,
includeReplyLegacyFallback = true, includeReplyLegacyFallback = true,
): IContent { ): IContent {

149
test/components/views/rooms/SendMessageComposer-test.tsx
View file

@ -17,6 +17,7 @@ limitations under the License.
import React from "react"; import React from "react";
import { act } from "react-dom/test-utils"; import { act } from "react-dom/test-utils";
import { sleep } from "matrix-js-sdk/src/utils"; import { sleep } from "matrix-js-sdk/src/utils";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import '../../../skinned-sdk'; // Must be first for skinning to work import '../../../skinned-sdk'; // Must be first for skinning to work
@ -30,16 +31,26 @@ import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/Roo
import EditorModel from "../../../../src/editor/model"; import EditorModel from "../../../../src/editor/model";
import { createPartCreator, createRenderer } from "../../../editor/mock"; import { createPartCreator, createRenderer } from "../../../editor/mock";
import { createTestClient, mkEvent, mkStubRoom } from "../../../test-utils"; import { createTestClient, mkEvent, mkStubRoom } from "../../../test-utils";
import BasicMessageComposer from "../../../../src/components/views/rooms/BasicMessageComposer";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import MatrixToPermalinkConstructor from "../../../../src/utils/permalinks/MatrixToPermalinkConstructor";
import defaultDispatcher from "../../../../src/dispatcher/dispatcher"; import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import DocumentOffset from '../../../../src/editor/offset'; import DocumentOffset from '../../../../src/editor/offset';
import { Layout } from '../../../../src/settings/enums/Layout'; import { Layout } from '../../../../src/settings/enums/Layout';
import PlatformPeg from "../../../../src/PlatformPeg"; import PlatformPeg from "../../../../src/PlatformPeg";
import { IRoomState } from "../../../../src/components/structures/RoomView";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
import BasePlatform from "../../../../src/BasePlatform";
const WrapWithProviders: React.FC<{
roomContext: IRoomState;
client: MatrixClient;
}> = ({ children, roomContext, client }) => <MatrixClientContext.Provider value={client}>
<RoomContext.Provider value={roomContext}>
{ children }
</RoomContext.Provider>
</MatrixClientContext.Provider>;
describe('<SendMessageComposer/>', () => { describe('<SendMessageComposer/>', () => {
const roomContext = { const defaultRoomContext = {
roomLoading: true, roomLoading: true,
peekLoading: false, peekLoading: false,
shouldPeek: true, shouldPeek: true,
@ -82,7 +93,7 @@ describe('<SendMessageComposer/>', () => {
const documentOffset = new DocumentOffset(11, true); const documentOffset = new DocumentOffset(11, true);
model.update("hello world", "insertText", documentOffset); model.update("hello world", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator); const content = createMessageContent(model, null, undefined, permalinkCreator);
expect(content).toEqual({ expect(content).toEqual({
body: "hello world", body: "hello world",
@ -95,7 +106,7 @@ describe('<SendMessageComposer/>', () => {
const documentOffset = new DocumentOffset(13, true); const documentOffset = new DocumentOffset(13, true);
model.update("hello *world*", "insertText", documentOffset); model.update("hello *world*", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator); const content = createMessageContent(model, null, undefined, permalinkCreator);
expect(content).toEqual({ expect(content).toEqual({
body: "hello *world*", body: "hello *world*",
@ -110,7 +121,7 @@ describe('<SendMessageComposer/>', () => {
const documentOffset = new DocumentOffset(22, true); const documentOffset = new DocumentOffset(22, true);
model.update("/me blinks __quickly__", "insertText", documentOffset); model.update("/me blinks __quickly__", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator); const content = createMessageContent(model, null, undefined, permalinkCreator);
expect(content).toEqual({ expect(content).toEqual({
body: "blinks __quickly__", body: "blinks __quickly__",
@ -126,7 +137,7 @@ describe('<SendMessageComposer/>', () => {
model.update("//dev/null is my favourite place", "insertText", documentOffset); model.update("//dev/null is my favourite place", "insertText", documentOffset);
const content = createMessageContent(model, null, false, permalinkCreator); const content = createMessageContent(model, null, undefined, permalinkCreator);
expect(content).toEqual({ expect(content).toEqual({
body: "/dev/null is my favourite place", body: "/dev/null is my favourite place",
@ -136,13 +147,14 @@ describe('<SendMessageComposer/>', () => {
}); });
describe("functions correctly mounted", () => { describe("functions correctly mounted", () => {
const mockClient = MatrixClientPeg.matrixClient = createTestClient(); const mockClient = createTestClient();
const mockRoom = mkStubRoom('myfakeroom') as any; jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient);
const mockRoom = mkStubRoom('myfakeroom', 'myfakeroom', mockClient) as any;
const mockEvent = mkEvent({ const mockEvent = mkEvent({
type: "m.room.message", type: "m.room.message",
room: 'myfakeroom', room: 'myfakeroom',
user: 'myfakeuser', user: 'myfakeuser',
content: "Replying to this", content: { "msgtype": "m.text", "body": "Replying to this" },
event: true, event: true,
}); });
mockRoom.findEventById = jest.fn(eventId => { mockRoom.findEventById = jest.fn(eventId => {
@ -156,45 +168,48 @@ describe('<SendMessageComposer/>', () => {
spyDispatcher.mockReset(); spyDispatcher.mockReset();
}); });
it("renders text and placeholder correctly", () => { const addTextToComposer = (wrapper, text) => act(() => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}> // couldn't get input event on contenteditable to work
<RoomContext.Provider value={roomContext}> // paste works without illegal private method access
<SendMessageComposer const pasteEvent = {
room={mockRoom as any} clipboardData: {
placeholder="placeholder string" types: [],
permalinkCreator={new MatrixToPermalinkConstructor() as any} files: [],
/> getData: type => type === "text/plain" ? text : undefined,
</RoomContext.Provider> },
</MatrixClientContext.Provider>); };
wrapper.find('[role="textbox"]').simulate('paste', pasteEvent);
wrapper.update();
});
const defaultProps = {
room: mockRoom,
toggleStickerPickerOpen: jest.fn(),
permalinkCreator: new RoomPermalinkCreator(mockRoom),
};
const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
return mount(<SendMessageComposer {...defaultProps} {...props} />, {
wrappingComponent: WrapWithProviders,
wrappingComponentProps: { roomContext, client },
});
};
fit("renders text and placeholder correctly", () => {
const wrapper = getComponent({ placeholder: "placeholder string" });
expect(wrapper.find('[aria-label="placeholder string"]')).toHaveLength(1); expect(wrapper.find('[aria-label="placeholder string"]')).toHaveLength(1);
act(() => { addTextToComposer(wrapper, "Test Text");
wrapper.find(BasicMessageComposer).instance().insertText("Test Text");
wrapper.update();
});
expect(wrapper.text()).toBe("Test Text"); expect(wrapper.text()).toBe("Test Text");
}); });
it("correctly persists state to and from localStorage", () => { it("correctly persists state to and from localStorage", () => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}> const wrapper = getComponent({ replyToEvent: mockEvent });
<RoomContext.Provider value={roomContext}>
<SendMessageComposer addTextToComposer(wrapper, "Test Text");
room={mockRoom as any}
placeholder=""
permalinkCreator={new MatrixToPermalinkConstructor() as any}
replyToEvent={mockEvent}
/>
</RoomContext.Provider>
</MatrixClientContext.Provider>);
act(() => {
wrapper.find(BasicMessageComposer).instance().insertText("Test Text");
wrapper.update();
});
// @ts-ignore
const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey; const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey;
expect(wrapper.text()).toBe("Test Text"); expect(wrapper.text()).toBe("Test Text");
@ -224,22 +239,11 @@ describe('<SendMessageComposer/>', () => {
}); });
it("persists state correctly without replyToEvent onbeforeunload", () => { it("persists state correctly without replyToEvent onbeforeunload", () => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}> const wrapper = getComponent();
<RoomContext.Provider value={roomContext}>
<SendMessageComposer addTextToComposer(wrapper, "Hello World");
room={mockRoom as any}
placeholder=""
permalinkCreator={new MatrixToPermalinkConstructor() as any}
/>
</RoomContext.Provider>
</MatrixClientContext.Provider>);
act(() => {
wrapper.find(BasicMessageComposer).instance().insertText("Hello World");
wrapper.update();
});
// @ts-ignore
const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey; const key = wrapper.find(SendMessageComposerClass).instance().editorStateKey;
expect(wrapper.text()).toBe("Hello World"); expect(wrapper.text()).toBe("Hello World");
@ -253,22 +257,13 @@ describe('<SendMessageComposer/>', () => {
}); });
it("persists to session history upon sending", async () => { it("persists to session history upon sending", async () => {
PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false }); jest.spyOn(PlatformPeg, 'get').mockReturnValue(
{ overrideBrowserShortcuts: () => false } as unknown as BasePlatform);
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}> const wrapper = getComponent({ replyToEvent: mockEvent });
<RoomContext.Provider value={roomContext}>
<SendMessageComposer
room={mockRoom as any}
placeholder="placeholder"
permalinkCreator={new MatrixToPermalinkConstructor() as any}
replyToEvent={mockEvent}
/>
</RoomContext.Provider>
</MatrixClientContext.Provider>);
addTextToComposer(wrapper, "This is a message");
act(() => { act(() => {
wrapper.find(BasicMessageComposer).instance().insertText("This is a message");
wrapper.find(".mx_SendMessageComposer").simulate("keydown", { key: "Enter" }); wrapper.find(".mx_SendMessageComposer").simulate("keydown", { key: "Enter" });
wrapper.update(); wrapper.update();
}); });
@ -289,22 +284,14 @@ describe('<SendMessageComposer/>', () => {
}); });
it('correctly sets the editorStateKey for threads', () => { it('correctly sets the editorStateKey for threads', () => {
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}> const relation = {
<RoomContext.Provider value={roomContext}> rel_type: "m.thread",
event_id: "myFakeThreadId",
<SendMessageComposer };
room={mockRoom as any} const includeReplyLegacyFallback = false;
placeholder="" const wrapper = getComponent({ relation, includeReplyLegacyFallback });
permalinkCreator={new MatrixToPermalinkConstructor() as any}
relation={{
rel_type: "m.thread",
event_id: "myFakeThreadId",
}}
includeReplyLegacyFallback={false}
/>
</RoomContext.Provider>
</MatrixClientContext.Provider>);
const instance = wrapper.find(SendMessageComposerClass).instance(); const instance = wrapper.find(SendMessageComposerClass).instance();
// @ts-ignore
const key = instance.editorStateKey; const key = instance.editorStateKey;
expect(key).toEqual('mx_cider_state_myfakeroom_myFakeThreadId'); expect(key).toEqual('mx_cider_state_myfakeroom_myFakeThreadId');
}); });

4
tsconfig.json
View file

@ -32,5 +32,9 @@
"./test/components/structures/**/*.tsx", "./test/components/structures/**/*.tsx",
"./test/components/views/context_menus/**/*.ts", "./test/components/views/context_menus/**/*.ts",
"./test/components/views/context_menus/**/*.tsx", "./test/components/views/context_menus/**/*.tsx",
"./test/components/views/rooms/SendMessageComposer-test.tsx" ,
], ],
"exclude": [
"./test/end-to-end-tests/"
]
} }