2020-02-12 02:19:43 +04:00
|
|
|
import React from "react";
|
|
|
|
import ReactDOM from "react-dom";
|
2021-04-04 15:05:16 +05:30
|
|
|
import {
|
|
|
|
render,
|
|
|
|
fireEvent,
|
|
|
|
mockBoundingClientRect,
|
|
|
|
restoreOriginalGetBoundingClientRect,
|
|
|
|
} from "./test-utils";
|
2020-12-05 20:00:53 +05:30
|
|
|
import ExcalidrawApp from "../excalidraw-app";
|
2020-02-12 02:19:43 +04:00
|
|
|
import * as Renderer from "../renderer/renderScene";
|
|
|
|
import { KEYS } from "../keys";
|
2020-03-23 16:38:41 -07:00
|
|
|
import { reseed } from "../random";
|
2020-02-12 02:19:43 +04:00
|
|
|
|
|
|
|
// Unmount ReactDOM from root
|
|
|
|
ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
|
|
|
|
|
|
|
|
const renderScene = jest.spyOn(Renderer, "renderScene");
|
|
|
|
beforeEach(() => {
|
|
|
|
localStorage.clear();
|
|
|
|
renderScene.mockClear();
|
2020-03-23 16:38:41 -07:00
|
|
|
reseed(7);
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
|
2020-03-18 20:44:05 +01:00
|
|
|
const { h } = window;
|
2020-03-07 10:20:38 -05:00
|
|
|
|
|
|
|
describe("selection element", () => {
|
2020-12-05 20:00:53 +05:30
|
|
|
it("create selection element on pointer down", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
// select tool
|
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
|
|
|
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 });
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(4);
|
2020-03-18 20:44:05 +01:00
|
|
|
const selectionElement = h.state.selectionElement!;
|
2020-02-12 02:19:43 +04:00
|
|
|
expect(selectionElement).not.toBeNull();
|
|
|
|
expect(selectionElement.type).toEqual("selection");
|
|
|
|
expect([selectionElement.x, selectionElement.y]).toEqual([60, 100]);
|
|
|
|
expect([selectionElement.width, selectionElement.height]).toEqual([0, 0]);
|
|
|
|
|
2020-02-21 08:17:20 -05:00
|
|
|
// TODO: There is a memory leak if pointer up is not triggered
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
|
2020-12-05 20:00:53 +05:30
|
|
|
it("resize selection element on pointer move", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
// select tool
|
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
|
|
|
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 });
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(5);
|
2020-03-18 20:44:05 +01:00
|
|
|
const selectionElement = h.state.selectionElement!;
|
2020-02-12 02:19:43 +04:00
|
|
|
expect(selectionElement).not.toBeNull();
|
|
|
|
expect(selectionElement.type).toEqual("selection");
|
|
|
|
expect([selectionElement.x, selectionElement.y]).toEqual([60, 30]);
|
|
|
|
expect([selectionElement.width, selectionElement.height]).toEqual([90, 70]);
|
|
|
|
|
2020-02-21 08:17:20 -05:00
|
|
|
// TODO: There is a memory leak if pointer up is not triggered
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
|
2020-12-05 20:00:53 +05:30
|
|
|
it("remove selection element on pointer up", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
// select tool
|
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
|
|
|
|
|
|
|
const canvas = container.querySelector("canvas")!;
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 60, clientY: 100 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 150, clientY: 30 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(6);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectionElement).toBeNull();
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-03-07 10:20:38 -05:00
|
|
|
describe("select single element on the scene", () => {
|
2021-04-04 15:05:16 +05:30
|
|
|
beforeAll(() => {
|
|
|
|
mockBoundingClientRect();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterAll(() => {
|
|
|
|
restoreOriginalGetBoundingClientRect();
|
|
|
|
});
|
|
|
|
|
2020-12-05 20:00:53 +05:30
|
|
|
it("rectangle", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
{
|
|
|
|
// create element
|
|
|
|
const tool = getByToolName("rectangle");
|
|
|
|
fireEvent.click(tool);
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
|
|
|
|
}
|
|
|
|
|
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
|
|
|
// click on a line on the rectangle
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 45, clientY: 20 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(10);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectionElement).toBeNull();
|
2020-03-07 10:20:38 -05:00
|
|
|
expect(h.elements.length).toEqual(1);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
2020-03-23 16:38:41 -07:00
|
|
|
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
|
2020-12-05 20:00:53 +05:30
|
|
|
it("diamond", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
{
|
|
|
|
// create element
|
|
|
|
const tool = getByToolName("diamond");
|
|
|
|
fireEvent.click(tool);
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
|
|
|
|
}
|
|
|
|
|
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
|
|
|
// click on a line on the rectangle
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 45, clientY: 20 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(10);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectionElement).toBeNull();
|
2020-03-07 10:20:38 -05:00
|
|
|
expect(h.elements.length).toEqual(1);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
2020-03-23 16:38:41 -07:00
|
|
|
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
|
2020-12-05 20:00:53 +05:30
|
|
|
it("ellipse", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
{
|
|
|
|
// create element
|
|
|
|
const tool = getByToolName("ellipse");
|
|
|
|
fireEvent.click(tool);
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
|
|
|
|
}
|
|
|
|
|
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
|
|
|
// click on a line on the rectangle
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 45, clientY: 20 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(10);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectionElement).toBeNull();
|
2020-03-07 10:20:38 -05:00
|
|
|
expect(h.elements.length).toEqual(1);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
2020-03-23 16:38:41 -07:00
|
|
|
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
|
2020-12-05 20:00:53 +05:30
|
|
|
it("arrow", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
{
|
|
|
|
// create element
|
|
|
|
const tool = getByToolName("arrow");
|
|
|
|
fireEvent.click(tool);
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
|
|
|
|
}
|
|
|
|
|
2020-03-15 13:42:18 -07:00
|
|
|
/*
|
|
|
|
1 2 3 4 5 6 7 8 9
|
|
|
|
1
|
|
|
|
2 x
|
|
|
|
3
|
|
|
|
4 .
|
|
|
|
5
|
|
|
|
6
|
|
|
|
7 x
|
|
|
|
8
|
|
|
|
9
|
|
|
|
*/
|
|
|
|
|
2020-02-12 02:19:43 +04:00
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
2020-03-15 13:42:18 -07:00
|
|
|
// click on a line on the arrow
|
|
|
|
fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 });
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(10);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectionElement).toBeNull();
|
2020-03-07 10:20:38 -05:00
|
|
|
expect(h.elements.length).toEqual(1);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
2020-03-23 16:38:41 -07:00
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
|
2020-12-05 20:00:53 +05:30
|
|
|
it("arrow escape", async () => {
|
|
|
|
const { getByToolName, container } = await render(<ExcalidrawApp />);
|
2020-02-12 02:19:43 +04:00
|
|
|
const canvas = container.querySelector("canvas")!;
|
|
|
|
{
|
|
|
|
// create element
|
|
|
|
const tool = getByToolName("line");
|
|
|
|
fireEvent.click(tool);
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 60, clientY: 70 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
fireEvent.keyDown(document, { key: KEYS.ESCAPE });
|
|
|
|
}
|
|
|
|
|
2020-03-15 13:42:18 -07:00
|
|
|
/*
|
|
|
|
1 2 3 4 5 6 7 8 9
|
|
|
|
1
|
|
|
|
2 x
|
|
|
|
3
|
|
|
|
4 .
|
|
|
|
5
|
|
|
|
6
|
|
|
|
7 x
|
|
|
|
8
|
|
|
|
9
|
|
|
|
*/
|
|
|
|
|
2020-02-12 02:19:43 +04:00
|
|
|
const tool = getByToolName("selection");
|
|
|
|
fireEvent.click(tool);
|
2020-03-15 13:42:18 -07:00
|
|
|
// click on a line on the arrow
|
|
|
|
fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 });
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
2021-01-25 10:47:35 +01:00
|
|
|
expect(renderScene).toHaveBeenCalledTimes(10);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectionElement).toBeNull();
|
2020-03-07 10:20:38 -05:00
|
|
|
expect(h.elements.length).toEqual(1);
|
2020-03-18 20:44:05 +01:00
|
|
|
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
2020-03-23 16:38:41 -07:00
|
|
|
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
});
|