test: improve getTextEditor test helper (#9629)

* test: improve getTextEditor test helper

* fix test
This commit is contained in:
David Luzar 2025-06-07 17:45:37 +02:00 committed by GitHub
parent 469caadb87
commit 08cd4c4f9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 123 additions and 120 deletions

View File

@ -11,6 +11,10 @@ import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils"; import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils";
import { getTransformHandles } from "../src/transformHandles"; import { getTransformHandles } from "../src/transformHandles";
import {
getTextEditor,
TEXT_EDITOR_SELECTOR,
} from "../../excalidraw/tests/queries/dom";
const { h } = window; const { h } = window;
@ -244,18 +248,12 @@ describe("element binding", () => {
mouse.clickAt(text.x + 50, text.y + 50); mouse.clickAt(text.x + 50, text.y + 50);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).not.toBe(null);
fireEvent.change(editor, { target: { value: "" } }); fireEvent.change(editor, { target: { value: "" } });
fireEvent.keyDown(editor, { key: KEYS.ESCAPE }); fireEvent.keyDown(editor, { key: KEYS.ESCAPE });
expect( expect(document.querySelector(TEXT_EDITOR_SELECTOR)).toBe(null);
document.querySelector(".excalidraw-textEditorContainer > textarea"),
).toBe(null);
expect(arrow.endBinding).toBe(null); expect(arrow.endBinding).toBe(null);
}); });
@ -285,18 +283,14 @@ describe("element binding", () => {
UI.clickTool("text"); UI.clickTool("text");
mouse.clickAt(text.x + 50, text.y + 50); mouse.clickAt(text.x + 50, text.y + 50);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
fireEvent.change(editor, { target: { value: "asdasdasdasdas" } }); fireEvent.change(editor, { target: { value: "asdasdasdasdas" } });
fireEvent.keyDown(editor, { key: KEYS.ESCAPE }); fireEvent.keyDown(editor, { key: KEYS.ESCAPE });
expect( expect(document.querySelector(TEXT_EDITOR_SELECTOR)).toBe(null);
document.querySelector(".excalidraw-textEditorContainer > textarea"),
).toBe(null);
expect(arrow.endBinding?.elementId).toBe(text.id); expect(arrow.endBinding?.elementId).toBe(text.id);
}); });

View File

@ -32,7 +32,10 @@ import { getBoundTextElementPosition, getBoundTextMaxWidth } from "../src";
import { LinearElementEditor } from "../src"; import { LinearElementEditor } from "../src";
import { newArrowElement } from "../src"; import { newArrowElement } from "../src";
import { getTextEditor } from "../../excalidraw/tests/queries/dom"; import {
getTextEditor,
TEXT_EDITOR_SELECTOR,
} from "../../excalidraw/tests/queries/dom";
import type { import type {
ExcalidrawElement, ExcalidrawElement,
@ -287,7 +290,7 @@ describe("Test Linear Elements", () => {
mouse.doubleClick(); mouse.doubleClick();
expect(h.state.editingLinearElement).toEqual(null); expect(h.state.editingLinearElement).toEqual(null);
await getTextEditor(".excalidraw-textEditorContainer > textarea"); await getTextEditor();
}); });
it("shouldn't create text element on double click in line editor (arrow)", async () => { it("shouldn't create text element on double click in line editor (arrow)", async () => {
@ -301,9 +304,7 @@ describe("Test Linear Elements", () => {
expect(h.state.editingLinearElement?.elementId).toEqual(arrow.id); expect(h.state.editingLinearElement?.elementId).toEqual(arrow.id);
expect(h.elements.length).toEqual(1); expect(h.elements.length).toEqual(1);
expect( expect(document.querySelector(TEXT_EDITOR_SELECTOR)).toBe(null);
document.querySelector(".excalidraw-textEditorContainer > textarea"),
).toBe(null);
}); });
describe("Inside editor", () => { describe("Inside editor", () => {
@ -1034,12 +1035,10 @@ describe("Test Linear Elements", () => {
}); });
}); });
it("should match styles for text editor", () => { it("should match styles for text editor", async () => {
createTwoPointerLinearElement("arrow"); createTwoPointerLinearElement("arrow");
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).toMatchSnapshot(); expect(editor).toMatchSnapshot();
}); });
@ -1056,9 +1055,7 @@ describe("Test Linear Elements", () => {
expect(text.type).toBe("text"); expect(text.type).toBe("text");
expect(text.containerId).toBe(arrow.id); expect(text.containerId).toBe(arrow.id);
mouse.down(); mouse.down();
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
fireEvent.change(editor, { fireEvent.change(editor, {
target: { value: DEFAULT_TEXT }, target: { value: DEFAULT_TEXT },
@ -1086,9 +1083,7 @@ describe("Test Linear Elements", () => {
const textElement = h.elements[1] as ExcalidrawTextElementWithContainer; const textElement = h.elements[1] as ExcalidrawTextElementWithContainer;
expect(textElement.type).toBe("text"); expect(textElement.type).toBe("text");
expect(textElement.containerId).toBe(arrow.id); expect(textElement.containerId).toBe(arrow.id);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
fireEvent.change(editor, { fireEvent.change(editor, {
target: { value: DEFAULT_TEXT }, target: { value: DEFAULT_TEXT },
@ -1272,9 +1267,7 @@ describe("Test Linear Elements", () => {
mouse.select(arrow); mouse.select(arrow);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
fireEvent.change(editor, { target: { value: DEFAULT_TEXT } }); fireEvent.change(editor, { target: { value: DEFAULT_TEXT } });
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);

View File

@ -381,8 +381,7 @@ describe("stats for a non-generic element", () => {
it("text element", async () => { it("text element", async () => {
UI.clickTool("text"); UI.clickTool("text");
mouse.clickAt(20, 30); mouse.clickAt(20, 30);
const textEditorSelector = ".excalidraw-textEditorContainer > textarea"; const editor = await getTextEditor();
const editor = await getTextEditor(textEditorSelector, true);
updateTextEditor(editor, "Hello!"); updateTextEditor(editor, "Hello!");
act(() => { act(() => {
editor.blur(); editor.blur();
@ -575,8 +574,7 @@ describe("stats for multiple elements", () => {
// text, rectangle, frame // text, rectangle, frame
UI.clickTool("text"); UI.clickTool("text");
mouse.clickAt(20, 30); mouse.clickAt(20, 30);
const textEditorSelector = ".excalidraw-textEditorContainer > textarea"; const editor = await getTextEditor();
const editor = await getTextEditor(textEditorSelector, true);
updateTextEditor(editor, "Hello!"); updateTextEditor(editor, "Hello!");
act(() => { act(() => {
editor.blur(); editor.blur();

View File

@ -102,14 +102,14 @@ describe("Test <MermaidToExcalidraw/>", () => {
expect(dialog).not.toBeNull(); expect(dialog).not.toBeNull();
const selector = ".ttd-dialog-input"; const selector = ".ttd-dialog-input";
let editor = await getTextEditor(selector, true); let editor = await getTextEditor({ selector, waitForEditor: true });
expect(dialog.querySelector('[data-testid="mermaid-error"]')).toBeNull(); expect(dialog.querySelector('[data-testid="mermaid-error"]')).toBeNull();
expect(editor.textContent).toMatchSnapshot(); expect(editor.textContent).toMatchSnapshot();
updateTextEditor(editor, "flowchart TD1"); updateTextEditor(editor, "flowchart TD1");
editor = await getTextEditor(selector, false); editor = await getTextEditor({ selector, waitForEditor: false });
expect(editor.textContent).toBe("flowchart TD1"); expect(editor.textContent).toBe("flowchart TD1");
expect( expect(

View File

@ -1,5 +1,3 @@
import React from "react";
import { KEYS } from "@excalidraw/common"; import { KEYS } from "@excalidraw/common";
import { actionSelectAll } from "../actions"; import { actionSelectAll } from "../actions";
@ -10,6 +8,8 @@ import { API } from "../tests/helpers/api";
import { Keyboard, Pointer, UI } from "../tests/helpers/ui"; import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
import { render, unmountComponent } from "../tests/test-utils"; import { render, unmountComponent } from "../tests/test-utils";
import { getTextEditor } from "./queries/dom";
unmountComponent(); unmountComponent();
const mouse = new Pointer("mouse"); const mouse = new Pointer("mouse");
@ -245,7 +245,7 @@ describe("element locking", () => {
expect(h.state.editingTextElement?.id).toBe(h.elements[1].id); expect(h.state.editingTextElement?.id).toBe(h.elements[1].id);
}); });
it("should ignore locked text under cursor when clicked with text tool", () => { it("should ignore locked text under cursor when clicked with text tool", async () => {
const text = API.createElement({ const text = API.createElement({
type: "text", type: "text",
text: "ola", text: "ola",
@ -258,16 +258,14 @@ describe("element locking", () => {
API.setElements([text]); API.setElements([text]);
UI.clickTool("text"); UI.clickTool("text");
mouse.clickAt(text.x + 50, text.y + 50); mouse.clickAt(text.x + 50, text.y + 50);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
expect(h.state.editingTextElement?.id).not.toBe(text.id); expect(h.state.editingTextElement?.id).not.toBe(text.id);
expect(h.elements.length).toBe(2); expect(h.elements.length).toBe(2);
expect(h.state.editingTextElement?.id).toBe(h.elements[1].id); expect(h.state.editingTextElement?.id).toBe(h.elements[1].id);
}); });
it("should ignore text under cursor when double-clicked with selection tool", () => { it("should ignore text under cursor when double-clicked with selection tool", async () => {
const text = API.createElement({ const text = API.createElement({
type: "text", type: "text",
text: "ola", text: "ola",
@ -280,9 +278,7 @@ describe("element locking", () => {
API.setElements([text]); API.setElements([text]);
UI.clickTool("selection"); UI.clickTool("selection");
mouse.doubleClickAt(text.x + 50, text.y + 50); mouse.doubleClickAt(text.x + 50, text.y + 50);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
expect(h.state.editingTextElement?.id).not.toBe(text.id); expect(h.state.editingTextElement?.id).not.toBe(text.id);
expect(h.elements.length).toBe(2); expect(h.elements.length).toBe(2);
@ -328,7 +324,7 @@ describe("element locking", () => {
]); ]);
}); });
it("bound text shouldn't be editable via double-click", () => { it("bound text shouldn't be editable via double-click", async () => {
const container = API.createElement({ const container = API.createElement({
type: "rectangle", type: "rectangle",
width: 100, width: 100,
@ -353,16 +349,14 @@ describe("element locking", () => {
UI.clickTool("selection"); UI.clickTool("selection");
mouse.doubleClickAt(container.width / 2, container.height / 2); mouse.doubleClickAt(container.width / 2, container.height / 2);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
expect(h.state.editingTextElement?.id).not.toBe(text.id); expect(h.state.editingTextElement?.id).not.toBe(text.id);
expect(h.elements.length).toBe(3); expect(h.elements.length).toBe(3);
expect(h.state.editingTextElement?.id).toBe(h.elements[2].id); expect(h.state.editingTextElement?.id).toBe(h.elements[2].id);
}); });
it("bound text shouldn't be editable via text tool", () => { it("bound text shouldn't be editable via text tool", async () => {
const container = API.createElement({ const container = API.createElement({
type: "rectangle", type: "rectangle",
width: 100, width: 100,
@ -387,9 +381,7 @@ describe("element locking", () => {
UI.clickTool("text"); UI.clickTool("text");
mouse.clickAt(container.width / 2, container.height / 2); mouse.clickAt(container.width / 2, container.height / 2);
const editor = document.querySelector( const editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
) as HTMLTextAreaElement;
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
expect(h.state.editingTextElement?.id).not.toBe(text.id); expect(h.state.editingTextElement?.id).not.toBe(text.id);
expect(h.elements.length).toBe(3); expect(h.elements.length).toBe(3);

View File

@ -1,4 +1,3 @@
import React from "react";
import { vi } from "vitest"; import { vi } from "vitest";
import { ROUNDNESS, KEYS, arrayToMap, cloneJSON } from "@excalidraw/common"; import { ROUNDNESS, KEYS, arrayToMap, cloneJSON } from "@excalidraw/common";
@ -37,6 +36,8 @@ import {
waitFor, waitFor,
} from "./test-utils"; } from "./test-utils";
import { getTextEditor } from "./queries/dom";
import type { NormalizedZoomValue } from "../types"; import type { NormalizedZoomValue } from "../types";
const { h } = window; const { h } = window;
@ -846,9 +847,7 @@ describe("mutliple elements", () => {
}); });
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
let editor = document.querySelector<HTMLTextAreaElement>( let editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
)!;
fireEvent.input(editor, { target: { value: "arrow" } }); fireEvent.input(editor, { target: { value: "arrow" } });
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -860,9 +859,7 @@ describe("mutliple elements", () => {
}); });
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
editor = document.querySelector<HTMLTextAreaElement>( editor = await getTextEditor();
".excalidraw-textEditorContainer > textarea",
)!;
fireEvent.input(editor, { target: { value: "rect\ntext" } }); fireEvent.input(editor, { target: { value: "rect\ntext" } });
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);

View File

@ -36,7 +36,7 @@ import type {
} from "@excalidraw/element/types"; } from "@excalidraw/element/types";
import { createTestHook } from "../../components/App"; import { createTestHook } from "../../components/App";
import { getTextEditor } from "../queries/dom"; import { getTextEditor, TEXT_EDITOR_SELECTOR } from "../queries/dom";
import { act, fireEvent, GlobalTestState, screen } from "../test-utils"; import { act, fireEvent, GlobalTestState, screen } from "../test-utils";
import { API } from "./api"; import { API } from "./api";
@ -549,16 +549,15 @@ export class UI {
static async editText< static async editText<
T extends ExcalidrawTextElement | ExcalidrawTextContainer, T extends ExcalidrawTextElement | ExcalidrawTextContainer,
>(element: T, text: string) { >(element: T, text: string) {
const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
const openedEditor = const openedEditor =
document.querySelector<HTMLTextAreaElement>(textEditorSelector); document.querySelector<HTMLTextAreaElement>(TEXT_EDITOR_SELECTOR);
if (!openedEditor) { if (!openedEditor) {
mouse.select(element); mouse.select(element);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
} }
const editor = await getTextEditor(textEditorSelector); const editor = await getTextEditor();
if (!editor) { if (!editor) {
throw new Error("Can't find wysiwyg text editor in the dom"); throw new Error("Can't find wysiwyg text editor in the dom");
} }

View File

@ -1,13 +1,31 @@
import { waitFor } from "@testing-library/dom"; import { waitFor } from "@testing-library/dom";
import { fireEvent } from "@testing-library/react"; import { fireEvent } from "@testing-library/react";
export const getTextEditor = async (selector: string, waitForEditor = true) => { import {
const query = () => document.querySelector(selector) as HTMLTextAreaElement; stripIgnoredNodesFromErrorMessage,
if (waitForEditor) { trimErrorStack,
await waitFor(() => expect(query()).not.toBe(null)); } from "../test-utils";
export const TEXT_EDITOR_SELECTOR =
".excalidraw-textEditorContainer > textarea";
export const getTextEditor = async ({
selector = TEXT_EDITOR_SELECTOR,
waitForEditor = true,
}: { selector?: string; waitForEditor?: boolean } = {}) => {
const error = trimErrorStack(new Error());
try {
const query = () => document.querySelector(selector) as HTMLTextAreaElement;
if (waitForEditor) {
await waitFor(() => expect(query()).not.toBe(null));
return query();
}
return query(); return query();
} catch (err: any) {
stripIgnoredNodesFromErrorMessage(err);
err.stack = error.stack;
throw err;
} }
return query();
}; };
export const updateTextEditor = ( export const updateTextEditor = (

View File

@ -421,11 +421,7 @@ export const assertElements = <T extends AllPossibleKeys<ExcalidrawElement>>(
.join(", ")}]\n`, .join(", ")}]\n`,
)}`; )}`;
const error = new Error(errStr); throw trimErrorStack(new Error(errStr), 1);
const stack = err.stack.split("\n");
stack.splice(1, 1);
error.stack = stack.join("\n");
throw error;
} }
expect(mappedActualElements).toEqual( expect(mappedActualElements).toEqual(
@ -476,3 +472,21 @@ export const checkpointHistory = (history: History, name: string) => {
})), })),
).toMatchSnapshot(`[${name}] redo stack`); ).toMatchSnapshot(`[${name}] redo stack`);
}; };
/**
* removes one or more leading stack trace lines (leading to files) from the
* error stack trace
*/
export const trimErrorStack = (error: Error, range = 1) => {
const stack = error.stack?.split("\n");
if (stack) {
stack.splice(1, range);
error.stack = stack.join("\n");
}
return error;
};
export const stripIgnoredNodesFromErrorMessage = (error: Error) => {
error.message = error.message.replace(/\s+Ignored nodes:[\s\S]+/, "");
return error;
};

View File

@ -38,8 +38,6 @@ unmountComponent();
const tab = " "; const tab = " ";
const mouse = new Pointer("mouse"); const mouse = new Pointer("mouse");
const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
describe("textWysiwyg", () => { describe("textWysiwyg", () => {
describe("start text editing", () => { describe("start text editing", () => {
const { h } = window; const { h } = window;
@ -201,7 +199,7 @@ describe("textWysiwyg", () => {
mouse.clickAt(text.x + 50, text.y + 50); mouse.clickAt(text.x + 50, text.y + 50);
const editor = await getTextEditor(textEditorSelector, false); const editor = await getTextEditor();
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
expect(h.state.editingTextElement?.id).toBe(text.id); expect(h.state.editingTextElement?.id).toBe(text.id);
@ -223,7 +221,7 @@ describe("textWysiwyg", () => {
mouse.doubleClickAt(text.x + 50, text.y + 50); mouse.doubleClickAt(text.x + 50, text.y + 50);
const editor = await getTextEditor(textEditorSelector, false); const editor = await getTextEditor();
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
expect(h.state.editingTextElement?.id).toBe(text.id); expect(h.state.editingTextElement?.id).toBe(text.id);
@ -293,7 +291,7 @@ describe("textWysiwyg", () => {
// edit text // edit text
UI.clickTool("selection"); UI.clickTool("selection");
mouse.doubleClickAt(text.x + text.width / 2, text.y + text.height / 2); mouse.doubleClickAt(text.x + text.width / 2, text.y + text.height / 2);
const editor = await getTextEditor(textEditorSelector); const editor = await getTextEditor();
expect(editor).not.toBe(null); expect(editor).not.toBe(null);
expect(h.state.editingTextElement?.id).toBe(text.id); expect(h.state.editingTextElement?.id).toBe(text.id);
expect(h.elements.length).toBe(1); expect(h.elements.length).toBe(1);
@ -326,7 +324,7 @@ describe("textWysiwyg", () => {
// enter text editing mode // enter text editing mode
UI.clickTool("selection"); UI.clickTool("selection");
mouse.doubleClickAt(text.x + text.width / 2, text.y + text.height / 2); mouse.doubleClickAt(text.x + text.width / 2, text.y + text.height / 2);
const editor = await getTextEditor(textEditorSelector); const editor = await getTextEditor();
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
// restore after unwrapping // restore after unwrapping
UI.resize(text, "e", [40, 0]); UI.resize(text, "e", [40, 0]);
@ -372,7 +370,7 @@ describe("textWysiwyg", () => {
textElement = UI.createElement("text"); textElement = UI.createElement("text");
mouse.clickOn(textElement); mouse.clickOn(textElement);
textarea = await getTextEditor(textEditorSelector, true); textarea = await getTextEditor();
}); });
afterAll(() => { afterAll(() => {
@ -560,7 +558,7 @@ describe("textWysiwyg", () => {
UI.clickTool("text"); UI.clickTool("text");
mouse.click(0, 0); mouse.click(0, 0);
textarea = await getTextEditor(textEditorSelector, true); textarea = await getTextEditor();
updateTextEditor( updateTextEditor(
textarea, textarea,
"Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!", "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
@ -612,7 +610,7 @@ describe("textWysiwyg", () => {
{ id: text.id, type: "text" }, { id: text.id, type: "text" },
]); ]);
mouse.down(); mouse.down();
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
@ -639,7 +637,7 @@ describe("textWysiwyg", () => {
]); ]);
expect(text.angle).toBe(rectangle.angle); expect(text.angle).toBe(rectangle.angle);
mouse.down(); mouse.down();
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
@ -665,7 +663,7 @@ describe("textWysiwyg", () => {
API.setSelectedElements([diamond]); API.setSelectedElements([diamond]);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
const value = new Array(1000).fill("1").join("\n"); const value = new Array(1000).fill("1").join("\n");
@ -699,7 +697,7 @@ describe("textWysiwyg", () => {
expect(text.type).toBe("text"); expect(text.type).toBe("text");
expect(text.containerId).toBe(null); expect(text.containerId).toBe(null);
mouse.down(); mouse.down();
let editor = await getTextEditor(textEditorSelector, true); let editor = await getTextEditor();
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
mouse.doubleClickAt( mouse.doubleClickAt(
@ -713,7 +711,7 @@ describe("textWysiwyg", () => {
expect(text.containerId).toBe(rectangle.id); expect(text.containerId).toBe(rectangle.id);
mouse.down(); mouse.down();
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -734,7 +732,7 @@ describe("textWysiwyg", () => {
const text = h.elements[1] as ExcalidrawTextElementWithContainer; const text = h.elements[1] as ExcalidrawTextElementWithContainer;
expect(text.type).toBe("text"); expect(text.type).toBe("text");
expect(text.containerId).toBe(rectangle.id); expect(text.containerId).toBe(rectangle.id);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -767,7 +765,7 @@ describe("textWysiwyg", () => {
{ id: text.id, type: "text" }, { id: text.id, type: "text" },
]); ]);
mouse.down(); mouse.down();
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -791,7 +789,7 @@ describe("textWysiwyg", () => {
freedraw.y + freedraw.height / 2, freedraw.y + freedraw.height / 2,
); );
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -825,7 +823,7 @@ describe("textWysiwyg", () => {
expect(text.type).toBe("text"); expect(text.type).toBe("text");
expect(text.containerId).toBe(null); expect(text.containerId).toBe(null);
mouse.down(); mouse.down();
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
@ -839,7 +837,7 @@ describe("textWysiwyg", () => {
UI.clickTool("text"); UI.clickTool("text");
mouse.clickAt(20, 30); mouse.clickAt(20, 30);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor( updateTextEditor(
editor, editor,
@ -882,13 +880,13 @@ describe("textWysiwyg", () => {
); );
const text = h.elements[1] as ExcalidrawTextElementWithContainer; const text = h.elements[1] as ExcalidrawTextElementWithContainer;
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
expect(await getTextEditor(textEditorSelector, false)).toBe(null); expect(await getTextEditor({ waitForEditor: false })).toBe(null);
expect(h.state.editingTextElement).toBe(null); expect(h.state.editingTextElement).toBe(null);
@ -922,7 +920,7 @@ describe("textWysiwyg", () => {
Keyboard.keyDown(KEYS.ENTER); Keyboard.keyDown(KEYS.ENTER);
let text = h.elements[1] as ExcalidrawTextElementWithContainer; let text = h.elements[1] as ExcalidrawTextElementWithContainer;
let editor = await getTextEditor(textEditorSelector, true); let editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
@ -942,7 +940,7 @@ describe("textWysiwyg", () => {
mouse.select(rectangle); mouse.select(rectangle);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
updateTextEditor(editor, "Hello"); updateTextEditor(editor, "Hello");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -969,7 +967,7 @@ describe("textWysiwyg", () => {
const text = h.elements[1] as ExcalidrawTextElementWithContainer; const text = h.elements[1] as ExcalidrawTextElementWithContainer;
expect(text.containerId).toBe(rectangle.id); expect(text.containerId).toBe(rectangle.id);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -1004,7 +1002,7 @@ describe("textWysiwyg", () => {
// Bind first text // Bind first text
const text = h.elements[1] as ExcalidrawTextElementWithContainer; const text = h.elements[1] as ExcalidrawTextElementWithContainer;
expect(text.containerId).toBe(rectangle.id); expect(text.containerId).toBe(rectangle.id);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
expect(rectangle.boundElements).toStrictEqual([ expect(rectangle.boundElements).toStrictEqual([
@ -1024,7 +1022,7 @@ describe("textWysiwyg", () => {
it("should respect text alignment when resizing", async () => { it("should respect text alignment when resizing", async () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
let editor = await getTextEditor(textEditorSelector, true); let editor = await getTextEditor();
updateTextEditor(editor, "Hello"); updateTextEditor(editor, "Hello");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -1040,7 +1038,7 @@ describe("textWysiwyg", () => {
mouse.select(rectangle); mouse.select(rectangle);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
editor.select(); editor.select();
@ -1059,7 +1057,7 @@ describe("textWysiwyg", () => {
mouse.select(rectangle); mouse.select(rectangle);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
editor.select(); editor.select();
@ -1095,7 +1093,7 @@ describe("textWysiwyg", () => {
expect(text.type).toBe("text"); expect(text.type).toBe("text");
expect(text.containerId).toBe(rectangle.id); expect(text.containerId).toBe(rectangle.id);
mouse.down(); mouse.down();
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
@ -1109,7 +1107,7 @@ describe("textWysiwyg", () => {
it("should scale font size correctly when resizing using shift", async () => { it("should scale font size correctly when resizing using shift", async () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello"); updateTextEditor(editor, "Hello");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
const textElement = h.elements[1] as ExcalidrawTextElement; const textElement = h.elements[1] as ExcalidrawTextElement;
@ -1128,7 +1126,7 @@ describe("textWysiwyg", () => {
it("should bind text correctly when container duplicated with alt-drag", async () => { it("should bind text correctly when container duplicated with alt-drag", async () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello"); updateTextEditor(editor, "Hello");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
expect(h.elements.length).toBe(2); expect(h.elements.length).toBe(2);
@ -1159,7 +1157,7 @@ describe("textWysiwyg", () => {
it("undo should work", async () => { it("undo should work", async () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello"); updateTextEditor(editor, "Hello");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
expect(rectangle.boundElements).toStrictEqual([ expect(rectangle.boundElements).toStrictEqual([
@ -1195,7 +1193,7 @@ describe("textWysiwyg", () => {
it("should not allow bound text with only whitespaces", async () => { it("should not allow bound text with only whitespaces", async () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, " "); updateTextEditor(editor, " ");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -1249,7 +1247,7 @@ describe("textWysiwyg", () => {
it("should reset the container height cache when resizing", async () => { it("should reset the container height cache when resizing", async () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75); expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
let editor = await getTextEditor(textEditorSelector, true); let editor = await getTextEditor();
updateTextEditor(editor, "Hello"); updateTextEditor(editor, "Hello");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -1260,7 +1258,7 @@ describe("textWysiwyg", () => {
mouse.select(rectangle); mouse.select(rectangle);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
expect(rectangle.height).toBeCloseTo(155, 8); expect(rectangle.height).toBeCloseTo(155, 8);
@ -1275,7 +1273,7 @@ describe("textWysiwyg", () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75); expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -1300,7 +1298,7 @@ describe("textWysiwyg", () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75); expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
expect( expect(
@ -1332,12 +1330,12 @@ describe("textWysiwyg", () => {
beforeEach(async () => { beforeEach(async () => {
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
updateTextEditor(editor, "Hello"); updateTextEditor(editor, "Hello");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
mouse.select(rectangle); mouse.select(rectangle);
Keyboard.keyPress(KEYS.ENTER); Keyboard.keyPress(KEYS.ENTER);
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
editor.select(); editor.select();
}); });
@ -1448,7 +1446,7 @@ describe("textWysiwyg", () => {
it("should wrap text in a container when wrap text in container triggered from context menu", async () => { it("should wrap text in a container when wrap text in container triggered from context menu", async () => {
UI.clickTool("text"); UI.clickTool("text");
mouse.clickAt(20, 30); mouse.clickAt(20, 30);
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor( updateTextEditor(
editor, editor,
@ -1532,7 +1530,7 @@ describe("textWysiwyg", () => {
// Bind first text // Bind first text
let text = h.elements[1] as ExcalidrawTextElementWithContainer; let text = h.elements[1] as ExcalidrawTextElementWithContainer;
expect(text.containerId).toBe(rectangle.id); expect(text.containerId).toBe(rectangle.id);
let editor = await getTextEditor(textEditorSelector, true); let editor = await getTextEditor();
updateTextEditor(editor, "Hello!"); updateTextEditor(editor, "Hello!");
expect( expect(
(h.elements[1] as ExcalidrawTextElementWithContainer).verticalAlign, (h.elements[1] as ExcalidrawTextElementWithContainer).verticalAlign,
@ -1555,7 +1553,7 @@ describe("textWysiwyg", () => {
rectangle.x + rectangle.width / 2, rectangle.x + rectangle.width / 2,
rectangle.y + rectangle.height / 2, rectangle.y + rectangle.height / 2,
); );
editor = await getTextEditor(textEditorSelector, true); editor = await getTextEditor();
updateTextEditor(editor, "Excalidraw"); updateTextEditor(editor, "Excalidraw");
Keyboard.exitTextEditor(editor); Keyboard.exitTextEditor(editor);
@ -1630,7 +1628,7 @@ describe("textWysiwyg", () => {
arrow.y + arrow.height / 2, arrow.y + arrow.height / 2,
); );
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");
@ -1655,7 +1653,7 @@ describe("textWysiwyg", () => {
rectangle.y + rectangle.height / 2, rectangle.y + rectangle.height / 2,
); );
const editor = await getTextEditor(textEditorSelector, true); const editor = await getTextEditor();
updateTextEditor(editor, "Hello World!"); updateTextEditor(editor, "Hello World!");