From b034ada6fd0302cc06499ba108346ae94dca5923 Mon Sep 17 00:00:00 2001
From: alunturner <56027671+alunturner@users.noreply.github.com>
Date: Thu, 29 Dec 2022 20:52:51 +0000
Subject: [PATCH] Convert enzyme to rtl: BasicMessageComposer (#9839)
---
.../views/rooms/BasicMessageComposer-test.tsx | 52 ++++----
test/editor/mock.ts | 32 +++--
test/editor/model-test.ts | 119 +++++++++++-------
test/editor/operations-test.ts | 6 +-
4 files changed, 131 insertions(+), 78 deletions(-)
diff --git a/test/components/views/rooms/BasicMessageComposer-test.tsx b/test/components/views/rooms/BasicMessageComposer-test.tsx
index 4a0da2d19c..3ab85957cb 100644
--- a/test/components/views/rooms/BasicMessageComposer-test.tsx
+++ b/test/components/views/rooms/BasicMessageComposer-test.tsx
@@ -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 client: MatrixClient = MatrixClientPeg.get();
- const wrapper = render(model);
+ const roomId = "!1234567890:domain";
+ const userId = client.getSafeUserId();
- wrapper.find(".mx_BasicMessageComposer_input").simulate("paste", {
- clipboardData: {
- getData: (type) => {
- if (type === "text/plain") {
- return "https://element.io";
- }
- },
- },
- });
+ const room = new Room(roomId, client, userId);
+
+ const testUrl = "https://element.io";
+ const mockDataTransfer = generateMockDataTransferForString(testUrl);
+
+ render();
+ userEvent.paste(mockDataTransfer);
expect(model.parts).toHaveLength(1);
- expect(model.parts[0].text).toBe("https://element.io");
+ expect(model.parts[0].text).toBe(testUrl);
+ expect(screen.getByText(testUrl)).toBeInTheDocument();
});
});
-function render(model: EditorModel): ReactWrapper {
- const client: MatrixClient = MatrixClientPeg.get();
-
- const roomId = "!1234567890:domain";
- const userId = client.getUserId();
- const room = new Room(roomId, client, userId);
-
- return mount();
+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: () => {},
+ };
}
diff --git a/test/editor/mock.ts b/test/editor/mock.ts
index b8e42ef705..c8957d704d 100644
--- a/test/editor/mock.ts
+++ b/test/editor/mock.ts
@@ -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;
+}
diff --git a/test/editor/model-test.ts b/test/editor/model-test.ts
index 3b4515f067..2639a251c7 100644
--- a/test/editor/model-test.ts
+++ b/test/editor/model-test.ts
@@ -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);
- expect(renderer.caret.index).toBe(0);
- expect(renderer.caret.offset).toBe(5);
+ 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);
- expect(renderer.caret.index).toBe(0);
- expect(renderer.caret.offset).toBe(11);
+ 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);
- expect(renderer.caret.index).toBe(0);
- expect(renderer.caret.offset).toBe(6);
+ 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);
- expect(renderer.caret.index).toBe(1);
- expect(renderer.caret.offset).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);
- expect(renderer.caret.index).toBe(4);
- expect(renderer.caret.offset).toBe(6);
+ 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);
- expect(renderer.caret.index).toBe(2);
- expect(renderer.caret.offset).toBe(4);
+ 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));
- expect(renderer.caret.index).toBe(0);
- expect(renderer.caret.offset).toBe(7);
+ 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));
- expect(renderer.caret.index).toBe(2);
- expect(renderer.caret.offset).toBe(8);
+ 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);
- expect(renderer.caret.index).toBe(-1);
- expect(renderer.caret.offset).toBe(0);
+ 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);
- expect(renderer.caret.index).toBe(-1);
- expect(renderer.caret.offset).toBe(0);
+ 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);
- expect(renderer.caret.index).toBe(1);
- expect(renderer.caret.offset).toBe(2);
+ 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);
- expect(renderer.caret.index).toBe(1);
- expect(renderer.caret.offset).toBe(5);
+ 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);
- expect(renderer.caret.index).toBe(1);
- expect(renderer.caret.offset).toBe(2);
+ 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);
- expect(renderer.caret.index).toBe(1);
- expect(renderer.caret.offset).toBe(9);
+ 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);
- expect(renderer.caret.index).toBe(2);
- expect(renderer.caret.offset).toBe(2);
+ 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();
- expect(renderer.caret.index).toBe(0);
- expect(renderer.caret.offset).toBe(11);
+ 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();
- expect(renderer.caret.index).toBe(0);
- expect(renderer.caret.offset).toBe(11);
+ 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));
diff --git a/test/editor/operations-test.ts b/test/editor/operations-test.ts
index abcb8832a4..dc18168b42 100644
--- a/test/editor/operations-test.ts
+++ b/test/editor/operations-test.ts
@@ -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);
- expect(renderer.caret.offset).toBe(4 + expectation.indexOf("|"));
+ if (isDocumentPosition(renderer.caret)) {
+ expect(renderer.caret.offset).toBe(4 + expectation.indexOf("|"));
+ }
expect(model.parts[0].text).toBe("foo " + expectation.replace("|", "") + " bar");
});
});