smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor (#862)

Browse source 
* Initial factoring out of parts of the LayerUI component

2360 → 2224 LOC

* Create a Section component

* Break up src/index.tsx

* Refactor actions to reduce duplication, fix CSS

Also consolidate icons

* Move scene/data.ts to its own directory

* Fix accidental reverts, banish further single-character variables

* ACTIVE_ELEM_COLOR → ACTIVE_ELEMENT_COLOR

* Further refactoring the icons file

* Log all errors

* Pointer Event polyfill to make the tests work

* add test hooks & fix tests

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Jed Fox 2020-03-07 10:20:38 -05:00 • committed by GitHub
parent 1a6431a04a
commit c6a0cfc2b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 3498 additions and 3372 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/tests/dragCreate.test.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from "react-dom";
import { App } from "../index";
import { App } from "../components/App";
import * as Renderer from "../renderer/renderScene";
import { KEYS } from "../keys";
import { render, fireEvent } from "./test-utils";
@ -14,7 +14,9 @@ beforeEach(() => {
renderScene.mockClear();
});
describe.skip("add element to the scene when pointer dragging long enough", () => {
const { __TEST__: h } = window;
describe("add element to the scene when pointer dragging long enough", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
// select tool
@ -33,15 +35,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(h.appState.selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("rectangle");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].width).toEqual(30); // 60 - 30
expect(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
});
it("ellipse", () => {
@ -62,15 +63,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
expect(h.appState.selectionElement).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("ellipse");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].width).toEqual(30); // 60 - 30
expect(elements[0].height).toEqual(50); // 70 - 20
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("diamond", () => {
@ -91,15 +91,14 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
expect(h.appState.selectionElement).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("diamond");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].width).toEqual(30); // 60 - 30
expect(elements[0].height).toEqual(50); // 70 - 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
});
it("arrow", () => {
@ -120,16 +119,15 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(h.appState.selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("arrow");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].points.length).toEqual(2);
expect(elements[0].points[0]).toEqual([0, 0]);
expect(elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("arrow");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(20);
expect(h.elements[0].points.length).toEqual(2);
expect(h.elements[0].points[0]).toEqual([0, 0]);
expect(h.elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
});
it("line", () => {
@ -150,20 +148,19 @@ describe.skip("add element to the scene when pointer dragging long enough", () =
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(h.appState.selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].type).toEqual("line");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(20);
expect(elements[0].points.length).toEqual(2);
expect(elements[0].points[0]).toEqual([0, 0]);
expect(elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
expect(h.elements.length).toEqual(1);
expect(h.elements[0].type).toEqual("line");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(20);
expect(h.elements[0].points.length).toEqual(2);
expect(h.elements[0].points[0]).toEqual([0, 0]);
expect(h.elements[0].points[1]).toEqual([30, 50]); // (60 - 30, 70 - 20)
});
});
describe.skip("do not add element to the scene if size is too small", () => {
describe("do not add element to the scene if size is too small", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
// select tool
@ -179,10 +176,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(renderScene.mock.calls[2][1]).toBeNull();
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("ellipse", () => {
@ -200,10 +195,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(renderScene.mock.calls[2][1]).toBeNull();
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("diamond", () => {
@ -221,10 +214,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
expect(renderScene.mock.calls[2][1]).toBeNull();
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("arrow", () => {
@ -245,10 +236,8 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
it("line", () => {
@ -269,9 +258,7 @@ describe.skip("do not add element to the scene if size is too small", () => {
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(4);
expect(renderScene.mock.calls[3][1]).toBeNull();
const elements = renderScene.mock.calls[3][0];
expect(elements.length).toEqual(0);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(0);
});
});

44
src/tests/move.test.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { render, fireEvent } from "./test-utils";
import { App } from "../index";
import { App } from "../components/App";
import * as Renderer from "../renderer/renderScene";
// Unmount ReactDOM from root
@ -13,7 +13,9 @@ beforeEach(() => {
renderScene.mockClear();
});
describe.skip("move element", () => {
const { __TEST__: h } = window;
describe("move element", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
const canvas = container.querySelector("canvas")!;
@ -27,12 +29,10 @@ describe.skip("move element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
const elements = renderScene.mock.calls[3][0];
const selectionElement = renderScene.mock.calls[3][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
renderScene.mockClear();
}
@ -42,14 +42,13 @@ describe.skip("move element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
const elements = renderScene.mock.calls[2][0];
expect(renderScene.mock.calls[2][1]).toBeNull();
expect(elements.length).toEqual(1);
expect([elements[0].x, elements[0].y]).toEqual([0, 40]);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([0, 40]);
});
});
describe.skip("duplicate element on move when ALT is clicked", () => {
describe("duplicate element on move when ALT is clicked", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
const canvas = container.querySelector("canvas")!;
@ -63,12 +62,10 @@ describe.skip("duplicate element on move when ALT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
const elements = renderScene.mock.calls[3][0];
const selectionElement = renderScene.mock.calls[3][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
renderScene.mockClear();
}
@ -78,11 +75,10 @@ describe.skip("duplicate element on move when ALT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
const elements = renderScene.mock.calls[2][0];
expect(renderScene.mock.calls[2][1]).toBeNull();
expect(elements.length).toEqual(2);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(2);
// previous element should stay intact
expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
expect([elements[1].x, elements[1].y]).toEqual([0, 40]);
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[1].x, h.elements[1].y]).toEqual([0, 40]);
});
});

43
src/tests/multiPointCreate.test.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { render, fireEvent } from "./test-utils";
import { App } from "../index";
import { App } from "../components/App";
import * as Renderer from "../renderer/renderScene";
import { KEYS } from "../keys";
@ -14,7 +14,9 @@ beforeEach(() => {
renderScene.mockClear();
});
describe.skip("remove shape in non linear elements", () => {
const { __TEST__: h } = window;
describe("remove shape in non linear elements", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
// select tool
@ -26,8 +28,7 @@ describe.skip("remove shape in non linear elements", () => {
fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });
expect(renderScene).toHaveBeenCalledTimes(3);
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.elements.length).toEqual(0);
});
it("ellipse", () => {
@ -41,8 +42,7 @@ describe.skip("remove shape in non linear elements", () => {
fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });
expect(renderScene).toHaveBeenCalledTimes(3);
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.elements.length).toEqual(0);
});
it("diamond", () => {
@ -56,12 +56,11 @@ describe.skip("remove shape in non linear elements", () => {
fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });
expect(renderScene).toHaveBeenCalledTimes(3);
const elements = renderScene.mock.calls[2][0];
expect(elements.length).toEqual(0);
expect(h.elements.length).toEqual(0);
});
});
describe.skip("multi point mode in linear elements", () => {
describe("multi point mode in linear elements", () => {
it("arrow", () => {
const { getByToolName, container } = render(<App />);
// select tool
@ -86,14 +85,13 @@ describe.skip("multi point mode in linear elements", () => {
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(8);
const elements = renderScene.mock.calls[7][0];
expect(elements.length).toEqual(1);
expect(renderScene).toHaveBeenCalledTimes(10);
expect(h.elements.length).toEqual(1);
expect(elements[0].type).toEqual("arrow");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(30);
expect(elements[0].points).toEqual([
expect(h.elements[0].type).toEqual("arrow");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(30);
expect(h.elements[0].points).toEqual([
[0, 0],
[20, 30],
[70, 110],
@ -124,14 +122,13 @@ describe.skip("multi point mode in linear elements", () => {
fireEvent.pointerUp(canvas);
fireEvent.keyDown(document, { key: KEYS.ENTER });
expect(renderScene).toHaveBeenCalledTimes(8);
const elements = renderScene.mock.calls[7][0];
expect(elements.length).toEqual(1);
expect(renderScene).toHaveBeenCalledTimes(10);
expect(h.elements.length).toEqual(1);
expect(elements[0].type).toEqual("line");
expect(elements[0].x).toEqual(30);
expect(elements[0].y).toEqual(30);
expect(elements[0].points).toEqual([
expect(h.elements[0].type).toEqual("line");
expect(h.elements[0].x).toEqual(30);
expect(h.elements[0].y).toEqual(30);
expect(h.elements[0].points).toEqual([
[0, 0],
[20, 30],
[70, 110],

4
src/tests/queries/toolQueries.ts
View file

@ -14,9 +14,9 @@ const _getAllByToolName = (container: HTMLElement, tool: string) => {
return queries.getAllByTitle(container, toolTitle);
};
const getMultipleError = (c: any, tool: any) =>
const getMultipleError = (_container: any, tool: any) =>
`Found multiple elements with tool name: ${tool}`;
const getMissingError = (c: any, tool: any) =>
const getMissingError = (_container: any, tool: any) =>
`Unable to find an element with tool name: ${tool}`;
export const [

50
src/tests/resize.test.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { render, fireEvent } from "./test-utils";
import { App } from "../index";
import { App } from "../components/App";
import * as Renderer from "../renderer/renderScene";
// Unmount ReactDOM from root
@ -13,7 +13,9 @@ beforeEach(() => {
renderScene.mockClear();
});
describe.skip("resize element", () => {
const { __TEST__: h } = window;
describe("resize element", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
const canvas = container.querySelector("canvas")!;
@ -27,12 +29,12 @@ describe.skip("resize element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
const elements = renderScene.mock.calls[3][0];
const selectionElement = renderScene.mock.calls[3][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
renderScene.mockClear();
}
@ -47,15 +49,14 @@ describe.skip("resize element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(5);
const elements = renderScene.mock.calls[4][0];
expect(renderScene.mock.calls[4][1]).toBeNull();
expect(elements.length).toEqual(1);
expect([elements[0].x, elements[0].y]).toEqual([29, 47]);
expect([elements[0].width, elements[0].height]).toEqual([31, 23]);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
});
});
describe.skip("resize element with aspect ratio when SHIFT is clicked", () => {
describe("resize element with aspect ratio when SHIFT is clicked", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
const canvas = container.querySelector("canvas")!;
@ -69,12 +70,12 @@ describe.skip("resize element with aspect ratio when SHIFT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(4);
const elements = renderScene.mock.calls[3][0];
const selectionElement = renderScene.mock.calls[3][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect([elements[0].x, elements[0].y]).toEqual([30, 20]);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
renderScene.mockClear();
}
@ -89,10 +90,9 @@ describe.skip("resize element with aspect ratio when SHIFT is clicked", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(5);
const elements = renderScene.mock.calls[4][0];
expect(renderScene.mock.calls[4][1]).toBeNull();
expect(elements.length).toEqual(1);
expect([elements[0].x, elements[0].y]).toEqual([29, 39]);
expect([elements[0].width, elements[0].height]).toEqual([31, 31]);
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
});
});

55
src/tests/selection.test.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { render, fireEvent } from "./test-utils";
import { App } from "../index";
import { App } from "../components/App";
import * as Renderer from "../renderer/renderScene";
import { KEYS } from "../keys";
@ -14,7 +14,9 @@ beforeEach(() => {
renderScene.mockClear();
});
describe.skip("selection element", () => {
const { __TEST__: h } = window;
describe("selection element", () => {
it("create selection element on pointer down", () => {
const { getByToolName, container } = render(<App />);
// select tool
@ -25,7 +27,7 @@ describe.skip("selection element", () => {
fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 });
expect(renderScene).toHaveBeenCalledTimes(1);
const selectionElement = renderScene.mock.calls[0][1]!;
const selectionElement = h.appState.selectionElement!;
expect(selectionElement).not.toBeNull();
expect(selectionElement.type).toEqual("selection");
expect([selectionElement.x, selectionElement.y]).toEqual([60, 100]);
@ -46,7 +48,7 @@ describe.skip("selection element", () => {
fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 });
expect(renderScene).toHaveBeenCalledTimes(2);
const selectionElement = renderScene.mock.calls[1][1]!;
const selectionElement = h.appState.selectionElement!;
expect(selectionElement).not.toBeNull();
expect(selectionElement.type).toEqual("selection");
expect([selectionElement.x, selectionElement.y]).toEqual([60, 30]);
@ -68,12 +70,11 @@ describe.skip("selection element", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(3);
const selectionElement = renderScene.mock.calls[2][1];
expect(selectionElement).toBeNull();
expect(h.appState.selectionElement).toBeNull();
});
});
describe.skip("select single element on the scene", () => {
describe("select single element on the scene", () => {
it("rectangle", () => {
const { getByToolName, container } = render(<App />);
const canvas = container.querySelector("canvas")!;
@ -94,11 +95,9 @@ describe.skip("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
const elements = renderScene.mock.calls[6][0];
const selectionElement = renderScene.mock.calls[6][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
});
it("diamond", () => {
@ -121,11 +120,9 @@ describe.skip("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
const elements = renderScene.mock.calls[6][0];
const selectionElement = renderScene.mock.calls[6][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
});
it("ellipse", () => {
@ -148,11 +145,9 @@ describe.skip("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
const elements = renderScene.mock.calls[6][0];
const selectionElement = renderScene.mock.calls[6][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
});
it("arrow", () => {
@ -175,11 +170,9 @@ describe.skip("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
const elements = renderScene.mock.calls[6][0];
const selectionElement = renderScene.mock.calls[6][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
});
it("arrow", () => {
@ -202,10 +195,8 @@ describe.skip("select single element on the scene", () => {
fireEvent.pointerUp(canvas);
expect(renderScene).toHaveBeenCalledTimes(7);
const elements = renderScene.mock.calls[6][0];
const selectionElement = renderScene.mock.calls[6][1];
expect(selectionElement).toBeNull();
expect(elements.length).toEqual(1);
expect(elements[0].isSelected).toBeTruthy();
expect(h.appState.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
expect(h.elements[0].isSelected).toBeTruthy();
});
});

2
src/tests/test-utils.ts
View file

@ -1,3 +1,5 @@
import "pepjs";
import {
render,
queries,