OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Convert enzyme to rtl: BasicMessageComposer (#9839)

pull/28788/head^2
alunturner 2022-12-29 20:52:51 +00:00 committed by GitHub
parent adab82edae
commit b034ada6fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 131 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
test/components/views/rooms/BasicMessageComposer-test.tsx
View File

@ -15,8 +15,8 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
import BasicMessageComposer from "../../../../src/components/views/rooms/BasicMessageComposer";
@ -35,30 +35,40 @@ describe("BasicMessageComposer", () => {
it("should allow a user to paste a URL without it being mangled", () => {
const model = new EditorModel([], pc, renderer);
const wrapper = render(model);
wrapper.find(".mx_BasicMessageComposer_input").simulate("paste", {
clipboardData: {
getData: (type) => {
if (type === "text/plain") {
return "https://element.io";
}
},
},
});
expect(model.parts).toHaveLength(1);
expect(model.parts[0].text).toBe("https://element.io");
});
});
function render(model: EditorModel): ReactWrapper {
const client: MatrixClient = MatrixClientPeg.get();
const roomId = "!1234567890:domain";
const userId = client.getUserId();
const userId = client.getSafeUserId();
const room = new Room(roomId, client, userId);
return mount(<BasicMessageComposer model={model} room={room} />);
const testUrl = "https://element.io";
const mockDataTransfer = generateMockDataTransferForString(testUrl);
render(<BasicMessageComposer model={model} room={room} />);
userEvent.paste(mockDataTransfer);
expect(model.parts).toHaveLength(1);
expect(model.parts[0].text).toBe(testUrl);
expect(screen.getByText(testUrl)).toBeInTheDocument();
});
});
function generateMockDataTransferForString(string: string): DataTransfer {
return {
getData: (type) => {
if (type === "text/plain") {
return string;
}
return "";
},
dropEffect: "link",
effectAllowed: "link",
files: {} as FileList,
items: {} as DataTransferItemList,
types: [],
clearData: () => {},
setData: () => {},
setDragImage: () => {},
};
}

32
test/editor/mock.ts
View File

@ -16,17 +16,18 @@ limitations under the License.
import { Room, MatrixClient } from "matrix-js-sdk/src/matrix";
import AutocompleteWrapperModel from "../../src/editor/autocomplete";
import { PartCreator } from "../../src/editor/parts";
import AutocompleteWrapperModel, { UpdateCallback } from "../../src/editor/autocomplete";
import { Caret } from "../../src/editor/caret";
import { PillPart, Part, PartCreator } from "../../src/editor/parts";
import DocumentPosition from "../../src/editor/position";
class MockAutoComplete {
public _updateCallback;
public _partCreator;
public _completions;
public _part;
public _part: Part | null;
constructor(updateCallback, partCreator, completions) {
constructor(updateCallback: UpdateCallback, partCreator: PartCreator, completions: PillPart[]) {
this._updateCallback = updateCallback;
this._partCreator = partCreator;
this._completions = completions;
@ -39,13 +40,13 @@ class MockAutoComplete {
tryComplete(close = true) {
const matches = this._completions.filter((o) => {
return o.resourceId.startsWith(this._part.text);
return this._part && o.resourceId.startsWith(this._part.text);
});
if (matches.length === 1 && this._part.text.length > 1) {
if (matches.length === 1 && this._part && this._part.text.length > 1) {
const match = matches[0];
let pill;
if (match.resourceId[0] === "@") {
pill = this._partCreator.userPill(match.label, match.resourceId);
pill = this._partCreator.userPill(match.text, match.resourceId);
} else {
pill = this._partCreator.roomPill(match.resourceId);
}
@ -54,7 +55,7 @@ class MockAutoComplete {
}
// called by EditorModel when typing into pill-candidate part
onPartUpdate(part, pos) {
onPartUpdate(part: Part, pos: DocumentPosition) {
this._part = part;
}
}
@ -67,9 +68,9 @@ class MockRoom {
}
}
export function createPartCreator(completions = []) {
const autoCompleteCreator = (partCreator) => {
return (updateCallback) =>
export function createPartCreator(completions: PillPart[] = []) {
const autoCompleteCreator = (partCreator: PartCreator) => {
return (updateCallback: UpdateCallback) =>
new MockAutoComplete(updateCallback, partCreator, completions) as unknown as AutocompleteWrapperModel;
};
const room = new MockRoom() as unknown as Room;
@ -81,11 +82,16 @@ export function createPartCreator(completions = []) {
}
export function createRenderer() {
const render = (c: DocumentPosition) => {
const render = (c: Caret) => {
render.caret = c;
render.count += 1;
};
render.count = 0;
render.caret = null as DocumentPosition;
render.caret = null as unknown as Caret;
return render;
}
// in many tests we need to narrow the caret type
export function isDocumentPosition(caret: Caret): caret is DocumentPosition {
return caret instanceof DocumentPosition;
}

51
test/editor/model-test.ts
View File

@ -15,8 +15,9 @@ limitations under the License.
*/
import EditorModel from "../../src/editor/model";
import { createPartCreator, createRenderer } from "./mock";
import { createPartCreator, createRenderer, isDocumentPosition } from "./mock";
import DocumentOffset from "../../src/editor/offset";
import { PillPart } from "../../src/editor/parts";
describe("editor/model", function () {
describe("plain text manipulation", function () {
@ -25,8 +26,10 @@ describe("editor/model", function () {
const model = new EditorModel([], createPartCreator(), renderer);
model.update("hello", "insertText", new DocumentOffset(5, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(0);
expect(renderer.caret.offset).toBe(5);
}
expect(model.parts.length).toBe(1);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello");
@ -37,8 +40,10 @@ describe("editor/model", function () {
const model = new EditorModel([pc.plain("hello")], pc, renderer);
model.update("hello world", "insertText", new DocumentOffset(11, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(0);
expect(renderer.caret.offset).toBe(11);
}
expect(model.parts.length).toBe(1);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello world");
@ -49,8 +54,10 @@ describe("editor/model", function () {
const model = new EditorModel([pc.plain("world")], pc, renderer);
model.update("hello world", "insertText", new DocumentOffset(6, false));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(0);
expect(renderer.caret.offset).toBe(6);
}
expect(model.parts.length).toBe(1);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello world");
@ -63,8 +70,10 @@ describe("editor/model", function () {
const model = new EditorModel([pc.plain("hello")], pc, renderer);
model.update("hello\n", "insertText", new DocumentOffset(6, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(1);
expect(renderer.caret.offset).toBe(1);
}
expect(model.parts.length).toBe(2);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello");
@ -77,8 +86,10 @@ describe("editor/model", function () {
const model = new EditorModel([pc.plain("hello")], pc, renderer);
model.update("hello\n\n\nworld!", "insertText", new DocumentOffset(14, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(4);
expect(renderer.caret.offset).toBe(6);
}
expect(model.parts.length).toBe(5);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello");
@ -101,8 +112,10 @@ describe("editor/model", function () {
);
model.update("hello\nwarm\nworld", "insertText", new DocumentOffset(10, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(2);
expect(renderer.caret.offset).toBe(4);
}
expect(model.parts.length).toBe(5);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello");
@ -122,8 +135,10 @@ describe("editor/model", function () {
const pc = createPartCreator();
const model = new EditorModel([pc.plain("try "), pc.roomPill("#someroom")], pc, renderer);
model.update("try foo#someroom", "insertText", new DocumentOffset(7, false));
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(0);
expect(renderer.caret.offset).toBe(7);
}
expect(model.parts.length).toBe(2);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("try foo");
@ -135,8 +150,10 @@ describe("editor/model", function () {
const pc = createPartCreator();
const model = new EditorModel([pc.plain("try "), pc.roomPill("#someroom"), pc.plain("?")], pc, renderer);
model.update("try #some perhapsroom?", "insertText", new DocumentOffset(17, false));
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(2);
expect(renderer.caret.offset).toBe(8);
}
expect(model.parts.length).toBe(3);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("try ");
@ -151,8 +168,10 @@ describe("editor/model", function () {
const model = new EditorModel([pc.roomPill("#someroom")], pc, renderer);
model.update("#someroo", "deleteContentBackward", new DocumentOffset(8, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(-1);
expect(renderer.caret.offset).toBe(0);
}
expect(model.parts.length).toBe(0);
});
it("remove non-editable part with delete", function () {
@ -161,22 +180,26 @@ describe("editor/model", function () {
const model = new EditorModel([pc.roomPill("#someroom")], pc, renderer);
model.update("someroom", "deleteContentForward", new DocumentOffset(0, false));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(-1);
expect(renderer.caret.offset).toBe(0);
}
expect(model.parts.length).toBe(0);
});
});
describe("auto-complete", function () {
it("insert user pill", function () {
const renderer = createRenderer();
const pc = createPartCreator([{ resourceId: "@alice", label: "Alice" }]);
const pc = createPartCreator([{ resourceId: "@alice", text: "Alice" } as PillPart]);
const model = new EditorModel([pc.plain("hello ")], pc, renderer);
model.update("hello @a", "insertText", new DocumentOffset(8, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(1);
expect(renderer.caret.offset).toBe(2);
}
expect(model.parts.length).toBe(2);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello ");
@ -188,8 +211,10 @@ describe("editor/model", function () {
model.autoComplete.tryComplete(); // see MockAutoComplete
expect(renderer.count).toBe(2);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(1);
expect(renderer.caret.offset).toBe(5);
}
expect(model.parts.length).toBe(2);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello ");
@ -199,14 +224,16 @@ describe("editor/model", function () {
it("insert room pill", function () {
const renderer = createRenderer();
const pc = createPartCreator([{ resourceId: "#riot-dev" }]);
const pc = createPartCreator([{ resourceId: "#riot-dev" } as PillPart]);
const model = new EditorModel([pc.plain("hello ")], pc, renderer);
model.update("hello #r", "insertText", new DocumentOffset(8, true));
expect(renderer.count).toBe(1);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(1);
expect(renderer.caret.offset).toBe(2);
}
expect(model.parts.length).toBe(2);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello ");
@ -218,8 +245,10 @@ describe("editor/model", function () {
model.autoComplete.tryComplete(); // see MockAutoComplete
expect(renderer.count).toBe(2);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(1);
expect(renderer.caret.offset).toBe(9);
}
expect(model.parts.length).toBe(2);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello ");
@ -229,7 +258,7 @@ describe("editor/model", function () {
it("type after inserting pill", function () {
const renderer = createRenderer();
const pc = createPartCreator([{ resourceId: "#riot-dev" }]);
const pc = createPartCreator([{ resourceId: "#riot-dev" } as PillPart]);
const model = new EditorModel([pc.plain("hello ")], pc, renderer);
model.update("hello #r", "insertText", new DocumentOffset(8, true));
@ -239,8 +268,10 @@ describe("editor/model", function () {
model.update("hello #riot-dev!!", "insertText", new DocumentOffset(17, true));
expect(renderer.count).toBe(3);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(2);
expect(renderer.caret.offset).toBe(2);
}
expect(model.parts.length).toBe(3);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("hello ");
@ -252,14 +283,16 @@ describe("editor/model", function () {
it("pasting text does not trigger auto-complete", function () {
const renderer = createRenderer();
const pc = createPartCreator([{ resourceId: "#define-room" }]);
const pc = createPartCreator([{ resourceId: "#define-room" } as PillPart]);
const model = new EditorModel([pc.plain("try ")], pc, renderer);
model.update("try #define", "insertFromPaste", new DocumentOffset(11, true));
expect(model.autoComplete).toBeFalsy();
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(0);
expect(renderer.caret.offset).toBe(11);
}
expect(model.parts.length).toBe(1);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("try #define");
@ -267,14 +300,16 @@ describe("editor/model", function () {
it("dropping text does not trigger auto-complete", function () {
const renderer = createRenderer();
const pc = createPartCreator([{ resourceId: "#define-room" }]);
const pc = createPartCreator([{ resourceId: "#define-room" } as PillPart]);
const model = new EditorModel([pc.plain("try ")], pc, renderer);
model.update("try #define", "insertFromDrop", new DocumentOffset(11, true));
expect(model.autoComplete).toBeFalsy();
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.index).toBe(0);
expect(renderer.caret.offset).toBe(11);
}
expect(model.parts.length).toBe(1);
expect(model.parts[0].type).toBe("plain");
expect(model.parts[0].text).toBe("try #define");
@ -282,7 +317,7 @@ describe("editor/model", function () {
it("insert room pill without splitting at the colon", () => {
const renderer = createRenderer();
const pc = createPartCreator([{ resourceId: "#room:server" }]);
const pc = createPartCreator([{ resourceId: "#room:server" } as PillPart]);
const model = new EditorModel([], pc, renderer);
model.update("#roo", "insertText", new DocumentOffset(4, true));
@ -302,7 +337,7 @@ describe("editor/model", function () {
it("allow typing e-mail addresses without splitting at the @", () => {
const renderer = createRenderer();
const pc = createPartCreator([{ resourceId: "@alice", label: "Alice" }]);
const pc = createPartCreator([{ resourceId: "@alice", text: "Alice" } as PillPart]);
const model = new EditorModel([], pc, renderer);
model.update("foo@a", "insertText", new DocumentOffset(5, true));

4
test/editor/operations-test.ts
View File

@ -15,7 +15,7 @@ limitations under the License.
*/
import EditorModel from "../../src/editor/model";
import { createPartCreator, createRenderer } from "./mock";
import { createPartCreator, createRenderer, isDocumentPosition } from "./mock";
import {
formatRange,
formatRangeAsCode,
@ -86,7 +86,9 @@ describe("editor/operations: formatting operations", () => {
expect(range.parts[0].text).toBe(input);
formatRangeAsLink(range, text);
if (isDocumentPosition(renderer.caret)) {
expect(renderer.caret.offset).toBe(4 + expectation.indexOf("|"));
}
expect(model.parts[0].text).toBe("foo " + expectation.replace("|", "") + " bar");
});
});