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/resize.test.tsx

@@ -0,0 +1,98 @@
+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";
+
+// Unmount ReactDOM from root
+ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+
+const renderScene = jest.spyOn(Renderer, "renderScene");
+beforeEach(() => {
+  localStorage.clear();
+  renderScene.mockClear();
+});
+
+describe("resize element", () => {
+  it("rectangle", () => {
+    const { getByToolName, container } = render(<App />);
+    const canvas = container.querySelector("canvas")!;
+
+    {
+      // create element
+      const tool = getByToolName("rectangle");
+      fireEvent.click(tool);
+      fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+      fireEvent.mouseMove(canvas, { clientX: 60, clientY: 70 });
+      fireEvent.mouseUp(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]);
+
+      renderScene.mockClear();
+    }
+
+    // select the element first
+    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 20 });
+    fireEvent.mouseUp(canvas);
+
+    // select a handler rectangle (top-left)
+    fireEvent.mouseDown(canvas, { clientX: 21, clientY: 13 });
+    fireEvent.mouseMove(canvas, { clientX: 20, clientY: 40 });
+    fireEvent.mouseUp(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]);
+  });
+});
+
+describe("resize element with aspect ratio when SHIFT is clicked", () => {
+  it("rectangle", () => {
+    const { getByToolName, container } = render(<App />);
+    const canvas = container.querySelector("canvas")!;
+
+    {
+      // create element
+      const tool = getByToolName("rectangle");
+      fireEvent.click(tool);
+      fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+      fireEvent.mouseMove(canvas, { clientX: 60, clientY: 70 });
+      fireEvent.mouseUp(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]);
+
+      renderScene.mockClear();
+    }
+
+    // select the element first
+    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 20 });
+    fireEvent.mouseUp(canvas);
+
+    // select a handler rectangle (top-left)
+    fireEvent.mouseDown(canvas, { clientX: 21, clientY: 13 });
+    fireEvent.mouseMove(canvas, { clientX: 20, clientY: 40, shiftKey: true });
+    fireEvent.mouseUp(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]);
+  });
+});