From b1d923db3a023e806fa7087181a7acf4059074b2 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Fri, 22 Sep 2023 18:59:22 +0530 Subject: [PATCH] use common utils to update and get text editor --- src/element/textWysiwyg.test.tsx | 97 ++++++++++++++++---------------- 1 file changed, 47 insertions(+), 50 deletions(-) diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx index fc1e8cf2e4..ce5badc6cc 100644 --- a/src/element/textWysiwyg.test.tsx +++ b/src/element/textWysiwyg.test.tsx @@ -1,6 +1,12 @@ import ReactDOM from "react-dom"; import { Excalidraw } from "../packages/excalidraw/index"; -import { GlobalTestState, render, screen } from "../tests/test-utils"; +import { + GlobalTestState, + getTextEditor, + render, + screen, + updateTextEditor, +} from "../tests/test-utils"; import { Keyboard, Pointer, UI } from "../tests/helpers/ui"; import { CODES, KEYS } from "../keys"; import { @@ -26,16 +32,7 @@ ReactDOM.unmountComponentAtNode(document.getElementById("root")!); const tab = " "; const mouse = new Pointer("mouse"); -const getTextEditor = () => { - return document.querySelector( - ".excalidraw-textEditorContainer > textarea", - ) as HTMLTextAreaElement; -}; - -const updateTextEditor = (editor: HTMLTextAreaElement, value: string) => { - fireEvent.change(editor, { target: { value } }); - editor.dispatchEvent(new Event("input")); -}; +const textEditorSelector = ".excalidraw-textEditorContainer > textarea"; describe("textWysiwyg", () => { describe("start text editing", () => { @@ -201,7 +198,7 @@ describe("textWysiwyg", () => { mouse.clickAt(text.x + 50, text.y + 50); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); expect(editor).not.toBe(null); expect(h.state.editingElement?.id).toBe(text.id); @@ -223,7 +220,7 @@ describe("textWysiwyg", () => { mouse.doubleClickAt(text.x + 50, text.y + 50); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); expect(editor).not.toBe(null); expect(h.state.editingElement?.id).toBe(text.id); @@ -250,7 +247,7 @@ describe("textWysiwyg", () => { textElement = UI.createElement("text"); mouse.clickOn(textElement); - textarea = getTextEditor(); + textarea = getTextEditor(textEditorSelector); }); afterAll(() => { @@ -460,7 +457,7 @@ describe("textWysiwyg", () => { UI.clickTool("text"); mouse.clickAt(750, 300); - textarea = getTextEditor(); + textarea = getTextEditor(textEditorSelector); updateTextEditor( textarea, "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!", @@ -512,7 +509,7 @@ describe("textWysiwyg", () => { { id: text.id, type: "text" }, ]); mouse.down(); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); @@ -540,7 +537,7 @@ describe("textWysiwyg", () => { ]); expect(text.angle).toBe(rectangle.angle); mouse.down(); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); @@ -567,7 +564,7 @@ describe("textWysiwyg", () => { API.setSelectedElements([diamond]); Keyboard.keyPress(KEYS.ENTER); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); const value = new Array(1000).fill("1").join("\n"); @@ -602,7 +599,7 @@ describe("textWysiwyg", () => { expect(text.type).toBe("text"); expect(text.containerId).toBe(null); mouse.down(); - let editor = getTextEditor(); + let editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); editor.blur(); @@ -617,7 +614,7 @@ describe("textWysiwyg", () => { expect(text.containerId).toBe(rectangle.id); mouse.down(); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); await new Promise((r) => setTimeout(r, 0)); @@ -639,7 +636,7 @@ describe("textWysiwyg", () => { const text = h.elements[1] as ExcalidrawTextElementWithContainer; expect(text.type).toBe("text"); expect(text.containerId).toBe(rectangle.id); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); @@ -674,7 +671,7 @@ describe("textWysiwyg", () => { { id: text.id, type: "text" }, ]); mouse.down(); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); await new Promise((r) => setTimeout(r, 0)); @@ -699,7 +696,7 @@ describe("textWysiwyg", () => { freedraw.y + freedraw.height / 2, ); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); fireEvent.keyDown(editor, { key: KEYS.ESCAPE }); @@ -733,7 +730,7 @@ describe("textWysiwyg", () => { expect(text.type).toBe("text"); expect(text.containerId).toBe(null); mouse.down(); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); @@ -748,7 +745,7 @@ describe("textWysiwyg", () => { UI.clickTool("text"); mouse.clickAt(20, 30); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor( editor, @@ -793,7 +790,7 @@ describe("textWysiwyg", () => { mouse.down(); const text = h.elements[1] as ExcalidrawTextElementWithContainer; - let editor = getTextEditor(); + let editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello World!"); @@ -806,7 +803,7 @@ describe("textWysiwyg", () => { rectangle.y + rectangle.height / 2, ); mouse.down(); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); editor.select(); fireEvent.click(screen.getByTitle(/code/i)); @@ -839,7 +836,7 @@ describe("textWysiwyg", () => { Keyboard.keyDown(KEYS.ENTER); let text = h.elements[1] as ExcalidrawTextElementWithContainer; - let editor = getTextEditor(); + let editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); @@ -860,7 +857,7 @@ describe("textWysiwyg", () => { mouse.select(rectangle); Keyboard.keyPress(KEYS.ENTER); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello"); await new Promise((r) => setTimeout(r, 0)); @@ -889,7 +886,7 @@ describe("textWysiwyg", () => { const text = h.elements[1] as ExcalidrawTextElementWithContainer; expect(text.containerId).toBe(rectangle.id); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); @@ -926,7 +923,7 @@ describe("textWysiwyg", () => { // Bind first text const text = h.elements[1] as ExcalidrawTextElementWithContainer; expect(text.containerId).toBe(rectangle.id); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello World!"); editor.blur(); @@ -947,7 +944,7 @@ describe("textWysiwyg", () => { it("should respect text alignment when resizing", async () => { Keyboard.keyPress(KEYS.ENTER); - let editor = getTextEditor(); + let editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello"); editor.blur(); @@ -964,7 +961,7 @@ describe("textWysiwyg", () => { mouse.select(rectangle); Keyboard.keyPress(KEYS.ENTER); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); editor.select(); @@ -987,7 +984,7 @@ describe("textWysiwyg", () => { mouse.select(rectangle); Keyboard.keyPress(KEYS.ENTER); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); editor.select(); @@ -1025,7 +1022,7 @@ describe("textWysiwyg", () => { expect(text.type).toBe("text"); expect(text.containerId).toBe(rectangle.id); mouse.down(); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); @@ -1040,7 +1037,7 @@ describe("textWysiwyg", () => { it("should scale font size correctly when resizing using shift", async () => { Keyboard.keyPress(KEYS.ENTER); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello"); editor.blur(); @@ -1060,7 +1057,7 @@ describe("textWysiwyg", () => { it("should bind text correctly when container duplicated with alt-drag", async () => { Keyboard.keyPress(KEYS.ENTER); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello"); editor.blur(); @@ -1092,7 +1089,7 @@ describe("textWysiwyg", () => { it("undo should work", async () => { Keyboard.keyPress(KEYS.ENTER); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello"); editor.blur(); @@ -1129,7 +1126,7 @@ describe("textWysiwyg", () => { it("should not allow bound text with only whitespaces", async () => { Keyboard.keyPress(KEYS.ENTER); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, " "); @@ -1184,7 +1181,7 @@ describe("textWysiwyg", () => { it("should reset the container height cache when resizing", async () => { Keyboard.keyPress(KEYS.ENTER); expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75); - let editor = getTextEditor(); + let editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello"); editor.blur(); @@ -1196,7 +1193,7 @@ describe("textWysiwyg", () => { mouse.select(rectangle); Keyboard.keyPress(KEYS.ENTER); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); editor.blur(); @@ -1209,7 +1206,7 @@ describe("textWysiwyg", () => { Keyboard.keyPress(KEYS.ENTER); expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); editor.blur(); @@ -1234,7 +1231,7 @@ describe("textWysiwyg", () => { Keyboard.keyPress(KEYS.ENTER); expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello World!"); editor.blur(); expect( @@ -1266,12 +1263,12 @@ describe("textWysiwyg", () => { beforeEach(async () => { Keyboard.keyPress(KEYS.ENTER); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); updateTextEditor(editor, "Hello"); editor.blur(); mouse.select(rectangle); Keyboard.keyPress(KEYS.ENTER); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); editor.select(); }); @@ -1382,7 +1379,7 @@ describe("textWysiwyg", () => { it("should wrap text in a container when wrap text in container triggered from context menu", async () => { UI.clickTool("text"); mouse.clickAt(20, 30); - const editor = getTextEditor(); + const editor = getTextEditor(textEditorSelector); updateTextEditor( editor, @@ -1470,7 +1467,7 @@ describe("textWysiwyg", () => { // Bind first text let text = h.elements[1] as ExcalidrawTextElementWithContainer; expect(text.containerId).toBe(rectangle.id); - let editor = getTextEditor(); + let editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello!"); expect( @@ -1495,7 +1492,7 @@ describe("textWysiwyg", () => { rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2, ); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Excalidraw"); editor.blur(); @@ -1519,7 +1516,7 @@ describe("textWysiwyg", () => { mouse.select(arrow); Keyboard.keyPress(KEYS.ENTER); - let editor = getTextEditor(); + let editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello"); editor.blur(); @@ -1528,7 +1525,7 @@ describe("textWysiwyg", () => { mouse.select(arrow); Keyboard.keyPress(KEYS.ENTER); - editor = getTextEditor(); + editor = getTextEditor(textEditorSelector); await new Promise((r) => setTimeout(r, 0)); updateTextEditor(editor, "Hello\nworld!"); editor.blur();