diff --git a/src/components/App.tsx b/src/components/App.tsx index 35519e193b..d30f6df1ef 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -451,6 +451,7 @@ class App extends React.Component { })} ref={this.excalidrawContainerRef} onDrop={this.handleAppOnDrop} + tabIndex={0} > { this.onScroll, ); - document.removeEventListener(EVENT.KEYDOWN, this.onKeyDown, false); + this.excalidrawContainerRef.current!.removeEventListener( + EVENT.KEYDOWN, + this.onKeyDown, + false, + ); document.removeEventListener( EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition, @@ -883,7 +888,11 @@ class App extends React.Component { private addEventListeners() { this.removeEventListeners(); document.addEventListener(EVENT.COPY, this.onCopy); - document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false); + this.excalidrawContainerRef.current!.addEventListener( + EVENT.KEYDOWN, + this.onKeyDown, + false, + ); document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true }); document.addEventListener( EVENT.MOUSE_MOVE, diff --git a/src/tests/__snapshots__/dragCreate.test.tsx.snap b/src/tests/__snapshots__/dragCreate.test.tsx.snap index d2721d30ab..2f7cb64301 100644 --- a/src/tests/__snapshots__/dragCreate.test.tsx.snap +++ b/src/tests/__snapshots__/dragCreate.test.tsx.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`add element to the scene when pointer dragging long enough arrow 1`] = `1`; +exports[`Test dragCreate add element to the scene when pointer dragging long enough arrow 1`] = `1`; -exports[`add element to the scene when pointer dragging long enough arrow 2`] = ` +exports[`Test dragCreate add element to the scene when pointer dragging long enough arrow 2`] = ` Object { "angle": 0, "backgroundColor": "transparent", @@ -43,9 +43,9 @@ Object { } `; -exports[`add element to the scene when pointer dragging long enough diamond 1`] = `1`; +exports[`Test dragCreate add element to the scene when pointer dragging long enough diamond 1`] = `1`; -exports[`add element to the scene when pointer dragging long enough diamond 2`] = ` +exports[`Test dragCreate add element to the scene when pointer dragging long enough diamond 2`] = ` Object { "angle": 0, "backgroundColor": "transparent", @@ -71,9 +71,9 @@ Object { } `; -exports[`add element to the scene when pointer dragging long enough ellipse 1`] = `1`; +exports[`Test dragCreate add element to the scene when pointer dragging long enough ellipse 1`] = `1`; -exports[`add element to the scene when pointer dragging long enough ellipse 2`] = ` +exports[`Test dragCreate add element to the scene when pointer dragging long enough ellipse 2`] = ` Object { "angle": 0, "backgroundColor": "transparent", @@ -99,7 +99,7 @@ Object { } `; -exports[`add element to the scene when pointer dragging long enough line 1`] = ` +exports[`Test dragCreate add element to the scene when pointer dragging long enough line 1`] = ` Object { "angle": 0, "backgroundColor": "transparent", @@ -140,9 +140,9 @@ Object { } `; -exports[`add element to the scene when pointer dragging long enough rectangle 1`] = `1`; +exports[`Test dragCreate add element to the scene when pointer dragging long enough rectangle 1`] = `1`; -exports[`add element to the scene when pointer dragging long enough rectangle 2`] = ` +exports[`Test dragCreate add element to the scene when pointer dragging long enough rectangle 2`] = ` Object { "angle": 0, "backgroundColor": "transparent", diff --git a/src/tests/dragCreate.test.tsx b/src/tests/dragCreate.test.tsx index 895f882d3b..f389718a2b 100644 --- a/src/tests/dragCreate.test.tsx +++ b/src/tests/dragCreate.test.tsx @@ -24,276 +24,282 @@ beforeEach(() => { const { h } = window; -describe("add element to the scene when pointer dragging long enough", () => { - it("rectangle", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("rectangle"); - fireEvent.click(tool); +describe("Test dragCreate", () => { + describe("add element to the scene when pointer dragging long enough", () => { + it("rectangle", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("rectangle"); + fireEvent.click(tool); - const canvas = container.querySelector("canvas")!; + const canvas = container.querySelector("canvas")!; - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - // move to (60,70) - fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + // move to (60,70) + fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); - // finish (position does not matter) - fireEvent.pointerUp(canvas); + // finish (position does not matter) + fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); - expect(h.state.selectionElement).toBeNull(); + expect(renderScene).toHaveBeenCalledTimes(8); + expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(1); - expect(h.elements[0].type).toEqual("rectangle"); - expect(h.elements[0].x).toEqual(30); - expect(h.elements[0].y).toEqual(20); - expect(h.elements[0].width).toEqual(30); // 60 - 30 - expect(h.elements[0].height).toEqual(50); // 70 - 20 + expect(h.elements.length).toEqual(1); + expect(h.elements[0].type).toEqual("rectangle"); + expect(h.elements[0].x).toEqual(30); + expect(h.elements[0].y).toEqual(20); + expect(h.elements[0].width).toEqual(30); // 60 - 30 + expect(h.elements[0].height).toEqual(50); // 70 - 20 - expect(h.elements.length).toMatchSnapshot(); - h.elements.forEach((element) => expect(element).toMatchSnapshot()); + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); + }); + + it("ellipse", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("ellipse"); + fireEvent.click(tool); + + const canvas = container.querySelector("canvas")!; + + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + + // move to (60,70) + fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + + // finish (position does not matter) + fireEvent.pointerUp(canvas); + + expect(renderScene).toHaveBeenCalledTimes(8); + expect(h.state.selectionElement).toBeNull(); + + expect(h.elements.length).toEqual(1); + expect(h.elements[0].type).toEqual("ellipse"); + expect(h.elements[0].x).toEqual(30); + expect(h.elements[0].y).toEqual(20); + expect(h.elements[0].width).toEqual(30); // 60 - 30 + expect(h.elements[0].height).toEqual(50); // 70 - 20 + + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); + }); + + it("diamond", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("diamond"); + fireEvent.click(tool); + + const canvas = container.querySelector("canvas")!; + + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + + // move to (60,70) + fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + + // finish (position does not matter) + fireEvent.pointerUp(canvas); + + expect(renderScene).toHaveBeenCalledTimes(8); + expect(h.state.selectionElement).toBeNull(); + + expect(h.elements.length).toEqual(1); + expect(h.elements[0].type).toEqual("diamond"); + expect(h.elements[0].x).toEqual(30); + expect(h.elements[0].y).toEqual(20); + expect(h.elements[0].width).toEqual(30); // 60 - 30 + expect(h.elements[0].height).toEqual(50); // 70 - 20 + + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); + }); + + it("arrow", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("arrow"); + fireEvent.click(tool); + + const canvas = container.querySelector("canvas")!; + + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + + // move to (60,70) + fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + + // finish (position does not matter) + fireEvent.pointerUp(canvas); + + expect(renderScene).toHaveBeenCalledTimes(8); + expect(h.state.selectionElement).toBeNull(); + + expect(h.elements.length).toEqual(1); + + const element = h.elements[0] as ExcalidrawLinearElement; + + expect(element.type).toEqual("arrow"); + expect(element.x).toEqual(30); + expect(element.y).toEqual(20); + expect(element.points.length).toEqual(2); + expect(element.points[0]).toEqual([0, 0]); + expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20) + + expect(h.elements.length).toMatchSnapshot(); + h.elements.forEach((element) => expect(element).toMatchSnapshot()); + }); + + it("line", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("line"); + fireEvent.click(tool); + + const canvas = container.querySelector("canvas")!; + + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + + // move to (60,70) + fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + + // finish (position does not matter) + fireEvent.pointerUp(canvas); + + expect(renderScene).toHaveBeenCalledTimes(8); + expect(h.state.selectionElement).toBeNull(); + + expect(h.elements.length).toEqual(1); + + const element = h.elements[0] as ExcalidrawLinearElement; + + expect(element.type).toEqual("line"); + expect(element.x).toEqual(30); + expect(element.y).toEqual(20); + expect(element.points.length).toEqual(2); + expect(element.points[0]).toEqual([0, 0]); + expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20) + + h.elements.forEach((element) => expect(element).toMatchSnapshot()); + }); }); - it("ellipse", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("ellipse"); - fireEvent.click(tool); + describe("do not add element to the scene if size is too small", () => { + beforeAll(() => { + mockBoundingClientRect(); + }); + afterAll(() => { + restoreOriginalGetBoundingClientRect(); + }); - const canvas = container.querySelector("canvas")!; + it("rectangle", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("rectangle"); + fireEvent.click(tool); - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + const canvas = container.querySelector("canvas")!; - // move to (60,70) - fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - // finish (position does not matter) - fireEvent.pointerUp(canvas); + // finish (position does not matter) + fireEvent.pointerUp(canvas); - expect(renderScene).toHaveBeenCalledTimes(8); - expect(h.state.selectionElement).toBeNull(); + expect(renderScene).toHaveBeenCalledTimes(6); + expect(h.state.selectionElement).toBeNull(); + expect(h.elements.length).toEqual(0); + }); - expect(h.elements.length).toEqual(1); - expect(h.elements[0].type).toEqual("ellipse"); - expect(h.elements[0].x).toEqual(30); - expect(h.elements[0].y).toEqual(20); - expect(h.elements[0].width).toEqual(30); // 60 - 30 - expect(h.elements[0].height).toEqual(50); // 70 - 20 + it("ellipse", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("ellipse"); + fireEvent.click(tool); - expect(h.elements.length).toMatchSnapshot(); - h.elements.forEach((element) => expect(element).toMatchSnapshot()); - }); + const canvas = container.querySelector("canvas")!; - it("diamond", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("diamond"); - fireEvent.click(tool); + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - const canvas = container.querySelector("canvas")!; + // finish (position does not matter) + fireEvent.pointerUp(canvas); - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + expect(renderScene).toHaveBeenCalledTimes(6); + expect(h.state.selectionElement).toBeNull(); + expect(h.elements.length).toEqual(0); + }); - // move to (60,70) - fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + it("diamond", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("diamond"); + fireEvent.click(tool); - // finish (position does not matter) - fireEvent.pointerUp(canvas); + const canvas = container.querySelector("canvas")!; - expect(renderScene).toHaveBeenCalledTimes(8); - expect(h.state.selectionElement).toBeNull(); + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - expect(h.elements.length).toEqual(1); - expect(h.elements[0].type).toEqual("diamond"); - expect(h.elements[0].x).toEqual(30); - expect(h.elements[0].y).toEqual(20); - expect(h.elements[0].width).toEqual(30); // 60 - 30 - expect(h.elements[0].height).toEqual(50); // 70 - 20 + // finish (position does not matter) + fireEvent.pointerUp(canvas); - expect(h.elements.length).toMatchSnapshot(); - h.elements.forEach((element) => expect(element).toMatchSnapshot()); - }); + expect(renderScene).toHaveBeenCalledTimes(6); + expect(h.state.selectionElement).toBeNull(); + expect(h.elements.length).toEqual(0); + }); - it("arrow", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("arrow"); - fireEvent.click(tool); + it("arrow", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("arrow"); + fireEvent.click(tool); - const canvas = container.querySelector("canvas")!; + const canvas = container.querySelector("canvas")!; - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - // move to (60,70) - fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); + // finish (position does not matter) + fireEvent.pointerUp(canvas); - // finish (position does not matter) - fireEvent.pointerUp(canvas); + // we need to finalize it because arrows and lines enter multi-mode + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ENTER, + }); - expect(renderScene).toHaveBeenCalledTimes(8); - expect(h.state.selectionElement).toBeNull(); + expect(renderScene).toHaveBeenCalledTimes(7); + expect(h.state.selectionElement).toBeNull(); + expect(h.elements.length).toEqual(0); + }); - expect(h.elements.length).toEqual(1); + it("line", async () => { + const { getByToolName, container } = await render(); + // select tool + const tool = getByToolName("line"); + fireEvent.click(tool); - const element = h.elements[0] as ExcalidrawLinearElement; + const canvas = container.querySelector("canvas")!; - expect(element.type).toEqual("arrow"); - expect(element.x).toEqual(30); - expect(element.y).toEqual(20); - expect(element.points.length).toEqual(2); - expect(element.points[0]).toEqual([0, 0]); - expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20) + // start from (30, 20) + fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - expect(h.elements.length).toMatchSnapshot(); - h.elements.forEach((element) => expect(element).toMatchSnapshot()); - }); + // finish (position does not matter) + fireEvent.pointerUp(canvas); - it("line", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("line"); - fireEvent.click(tool); + // we need to finalize it because arrows and lines enter multi-mode + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ENTER, + }); - const canvas = container.querySelector("canvas")!; - - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - - // move to (60,70) - fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); - - // finish (position does not matter) - fireEvent.pointerUp(canvas); - - expect(renderScene).toHaveBeenCalledTimes(8); - expect(h.state.selectionElement).toBeNull(); - - expect(h.elements.length).toEqual(1); - - const element = h.elements[0] as ExcalidrawLinearElement; - - expect(element.type).toEqual("line"); - expect(element.x).toEqual(30); - expect(element.y).toEqual(20); - expect(element.points.length).toEqual(2); - expect(element.points[0]).toEqual([0, 0]); - expect(element.points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20) - - h.elements.forEach((element) => expect(element).toMatchSnapshot()); - }); -}); - -describe("do not add element to the scene if size is too small", () => { - beforeAll(() => { - mockBoundingClientRect(); - }); - afterAll(() => { - restoreOriginalGetBoundingClientRect(); - }); - - it("rectangle", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("rectangle"); - fireEvent.click(tool); - - const canvas = container.querySelector("canvas")!; - - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - - // finish (position does not matter) - fireEvent.pointerUp(canvas); - - expect(renderScene).toHaveBeenCalledTimes(6); - expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(0); - }); - - it("ellipse", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("ellipse"); - fireEvent.click(tool); - - const canvas = container.querySelector("canvas")!; - - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - - // finish (position does not matter) - fireEvent.pointerUp(canvas); - - expect(renderScene).toHaveBeenCalledTimes(6); - expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(0); - }); - - it("diamond", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("diamond"); - fireEvent.click(tool); - - const canvas = container.querySelector("canvas")!; - - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - - // finish (position does not matter) - fireEvent.pointerUp(canvas); - - expect(renderScene).toHaveBeenCalledTimes(6); - expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(0); - }); - - it("arrow", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("arrow"); - fireEvent.click(tool); - - const canvas = container.querySelector("canvas")!; - - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - - // finish (position does not matter) - fireEvent.pointerUp(canvas); - - // we need to finalize it because arrows and lines enter multi-mode - fireEvent.keyDown(document, { key: KEYS.ENTER }); - - expect(renderScene).toHaveBeenCalledTimes(7); - expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(0); - }); - - it("line", async () => { - const { getByToolName, container } = await render(); - // select tool - const tool = getByToolName("line"); - fireEvent.click(tool); - - const canvas = container.querySelector("canvas")!; - - // start from (30, 20) - fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); - - // finish (position does not matter) - fireEvent.pointerUp(canvas); - - // we need to finalize it because arrows and lines enter multi-mode - fireEvent.keyDown(document, { key: KEYS.ENTER }); - - expect(renderScene).toHaveBeenCalledTimes(7); - expect(h.state.selectionElement).toBeNull(); - expect(h.elements.length).toEqual(0); + expect(renderScene).toHaveBeenCalledTimes(7); + expect(h.state.selectionElement).toBeNull(); + expect(h.elements.length).toEqual(0); + }); }); }); diff --git a/src/tests/helpers/ui.ts b/src/tests/helpers/ui.ts index 5bcb3dddc4..4d8d196334 100644 --- a/src/tests/helpers/ui.ts +++ b/src/tests/helpers/ui.ts @@ -40,7 +40,7 @@ export class Keyboard { }; static keyDown = (key: string) => { - fireEvent.keyDown(document, { + fireEvent.keyDown(document.querySelector(".excalidraw")!, { key, ctrlKey, shiftKey, @@ -49,7 +49,7 @@ export class Keyboard { }; static keyUp = (key: string) => { - fireEvent.keyUp(document, { + fireEvent.keyUp(document.querySelector(".excalidraw")!, { key, ctrlKey, shiftKey, @@ -63,7 +63,7 @@ export class Keyboard { }; static codeDown = (code: string) => { - fireEvent.keyDown(document, { + fireEvent.keyDown(document.querySelector(".excalidraw")!, { code, ctrlKey, shiftKey, @@ -72,7 +72,7 @@ export class Keyboard { }; static codeUp = (code: string) => { - fireEvent.keyUp(document, { + fireEvent.keyUp(document.querySelector(".excalidraw")!, { code, ctrlKey, shiftKey, diff --git a/src/tests/multiPointCreate.test.tsx b/src/tests/multiPointCreate.test.tsx index 748f8807bb..01d8cbc73e 100644 --- a/src/tests/multiPointCreate.test.tsx +++ b/src/tests/multiPointCreate.test.tsx @@ -99,7 +99,9 @@ describe("multi point mode in linear elements", () => { // done fireEvent.pointerDown(canvas); fireEvent.pointerUp(canvas); - fireEvent.keyDown(document, { key: KEYS.ENTER }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ENTER, + }); expect(renderScene).toHaveBeenCalledTimes(14); expect(h.elements.length).toEqual(1); @@ -140,7 +142,9 @@ describe("multi point mode in linear elements", () => { // done fireEvent.pointerDown(canvas); fireEvent.pointerUp(canvas); - fireEvent.keyDown(document, { key: KEYS.ENTER }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ENTER, + }); expect(renderScene).toHaveBeenCalledTimes(14); expect(h.elements.length).toEqual(1); diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index 9c44a497a7..2c70876e4d 100644 --- a/src/tests/regressionTests.test.tsx +++ b/src/tests/regressionTests.test.tsx @@ -413,11 +413,23 @@ describe("regression tests", () => { it("zoom hotkeys", () => { expect(h.state.zoom.value).toBe(1); - fireEvent.keyDown(document, { code: CODES.EQUAL, ctrlKey: true }); - fireEvent.keyUp(document, { code: CODES.EQUAL, ctrlKey: true }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + code: CODES.EQUAL, + ctrlKey: true, + }); + fireEvent.keyUp(document.querySelector(".excalidraw")!, { + code: CODES.EQUAL, + ctrlKey: true, + }); expect(h.state.zoom.value).toBeGreaterThan(1); - fireEvent.keyDown(document, { code: CODES.MINUS, ctrlKey: true }); - fireEvent.keyUp(document, { code: CODES.MINUS, ctrlKey: true }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + code: CODES.MINUS, + ctrlKey: true, + }); + fireEvent.keyUp(document.querySelector(".excalidraw")!, { + code: CODES.MINUS, + ctrlKey: true, + }); expect(h.state.zoom.value).toBe(1); }); diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx index b882713adb..3e90e2bf2b 100644 --- a/src/tests/selection.test.tsx +++ b/src/tests/selection.test.tsx @@ -100,7 +100,9 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerUp(canvas); - fireEvent.keyDown(document, { key: KEYS.ESCAPE }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ESCAPE, + }); } const tool = getByToolName("selection"); @@ -127,7 +129,9 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerUp(canvas); - fireEvent.keyDown(document, { key: KEYS.ESCAPE }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ESCAPE, + }); } const tool = getByToolName("selection"); @@ -154,7 +158,9 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerUp(canvas); - fireEvent.keyDown(document, { key: KEYS.ESCAPE }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ESCAPE, + }); } const tool = getByToolName("selection"); @@ -181,7 +187,9 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerUp(canvas); - fireEvent.keyDown(document, { key: KEYS.ESCAPE }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ESCAPE, + }); } /* @@ -220,7 +228,9 @@ describe("select single element on the scene", () => { fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 }); fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 }); fireEvent.pointerUp(canvas); - fireEvent.keyDown(document, { key: KEYS.ESCAPE }); + fireEvent.keyDown(document.querySelector(".excalidraw")!, { + key: KEYS.ESCAPE, + }); } /*