Write integration tests (#719)

* Scaffold a simple test case for debugging

* Set up Jest environment that works with React

- Install and set up react-testing-library
- "Unignore" roughjs and browser-nativejs transformations
- Separate App component from ReactDOM

* Write first passing test

- Mock canvas
- Remove App file and mount/unmount ReactDOM on import

* Add tests for drag create behavior

* Fix comments in dragCreate

* Pin jest-mock-canvas dependency

* Remove dependency range for testing library

* Add tests for multi point mode and selection element

* Fix all tests due to decrease in updates to canvas when changing tools

* Disable state updates if component is unmounted

- Remove all event listeners
- Disable storing scene in state if component is unmounted

* Add tests for move and element selection

* Merge branch 'master' into add-integration-tests

* Add tests for resizing rectangle

* move unmounted check to syncActionResult method

* Use a custom test renderer instead of default testing-library functions

* Add custom query for selecting tools

* move files around

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/tests/multiPointCreate.test.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { render, fireEvent } from "./test-utils";
+import { App } from "../index";
+import * as Renderer from "../renderer/renderScene";
+import { KEYS } from "../keys";
+
+// Unmount ReactDOM from root
+ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+
+const renderScene = jest.spyOn(Renderer, "renderScene");
+beforeEach(() => {
+  localStorage.clear();
+  renderScene.mockClear();
+});
+
+describe("remove shape in non linear elements", () => {
+  it("rectangle", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("rectangle");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+    fireEvent.mouseUp(canvas, { clientX: 30, clientY: 30 });
+
+    expect(renderScene).toHaveBeenCalledTimes(3);
+    const elements = renderScene.mock.calls[2][0];
+    expect(elements.length).toEqual(0);
+  });
+
+  it("ellipse", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("ellipse");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+    fireEvent.mouseUp(canvas, { clientX: 30, clientY: 30 });
+
+    expect(renderScene).toHaveBeenCalledTimes(3);
+    const elements = renderScene.mock.calls[2][0];
+    expect(elements.length).toEqual(0);
+  });
+
+  it("diamond", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("diamond");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+    fireEvent.mouseUp(canvas, { clientX: 30, clientY: 30 });
+
+    expect(renderScene).toHaveBeenCalledTimes(3);
+    const elements = renderScene.mock.calls[2][0];
+    expect(elements.length).toEqual(0);
+  });
+});
+
+describe("multi point mode in linear elements", () => {
+  it("arrow", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("arrow");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+    // first point is added on mouse down
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 30 });
+
+    // second point, enable multi point
+    fireEvent.mouseUp(canvas, { clientX: 30, clientY: 30 });
+    fireEvent.mouseMove(canvas, { clientX: 50, clientY: 60 });
+
+    // third point
+    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 60 });
+    fireEvent.mouseUp(canvas);
+    fireEvent.mouseMove(canvas, { clientX: 100, clientY: 140 });
+
+    // done
+    fireEvent.mouseDown(canvas);
+    fireEvent.mouseUp(canvas);
+    fireEvent.keyDown(document, { key: KEYS.ENTER });
+
+    expect(renderScene).toHaveBeenCalledTimes(8);
+    const elements = renderScene.mock.calls[7][0];
+    expect(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([
+      [0, 0],
+      [20, 30],
+      [70, 110],
+    ]);
+  });
+
+  it("line", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("line");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+    // first point is added on mouse down
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 30 });
+
+    // second point, enable multi point
+    fireEvent.mouseUp(canvas, { clientX: 30, clientY: 30 });
+    fireEvent.mouseMove(canvas, { clientX: 50, clientY: 60 });
+
+    // third point
+    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 60 });
+    fireEvent.mouseUp(canvas);
+    fireEvent.mouseMove(canvas, { clientX: 100, clientY: 140 });
+
+    // done
+    fireEvent.mouseDown(canvas);
+    fireEvent.mouseUp(canvas);
+    fireEvent.keyDown(document, { key: KEYS.ENTER });
+
+    expect(renderScene).toHaveBeenCalledTimes(8);
+    const elements = renderScene.mock.calls[7][0];
+    expect(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([
+      [0, 0],
+      [20, 30],
+      [70, 110],
+    ]);
+  });
+});