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

@@ -0,0 +1,277 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { App } from "../index";
+import * as Renderer from "../renderer/renderScene";
+import { KEYS } from "../keys";
+import { render, fireEvent } from "./test-utils";
+
+// Unmount ReactDOM from root
+ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+
+const renderScene = jest.spyOn(Renderer, "renderScene");
+beforeEach(() => {
+  localStorage.clear();
+  renderScene.mockClear();
+});
+
+describe("add element to the scene when mouse dragging long enough", () => {
+  it("rectangle", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("rectangle");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // move to (60,70)
+    fireEvent.mouseMove(canvas, { clientX: 60, clientY: 70 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(4);
+    expect(renderScene.mock.calls[3][1]).toBeNull();
+    const elements = renderScene.mock.calls[3][0];
+
+    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
+  });
+
+  it("ellipse", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("ellipse");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // move to (60,70)
+    fireEvent.mouseMove(canvas, { clientX: 60, clientY: 70 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(4);
+    expect(renderScene.mock.calls[3][1]).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
+  });
+
+  it("diamond", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("diamond");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // move to (60,70)
+    fireEvent.mouseMove(canvas, { clientX: 60, clientY: 70 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(4);
+    expect(renderScene.mock.calls[3][1]).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
+  });
+
+  it("arrow", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("arrow");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // move to (60,70)
+    fireEvent.mouseMove(canvas, { clientX: 60, clientY: 70 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(4);
+    expect(renderScene.mock.calls[3][1]).toBeNull();
+    const elements = renderScene.mock.calls[3][0];
+
+    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)
+  });
+
+  it("line", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("line");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // move to (60,70)
+    fireEvent.mouseMove(canvas, { clientX: 60, clientY: 70 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(4);
+    expect(renderScene.mock.calls[3][1]).toBeNull();
+    const elements = renderScene.mock.calls[3][0];
+
+    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)
+  });
+});
+
+describe("do not add element to the scene if size is too small", () => {
+  it("rectangle", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("rectangle");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(3);
+    expect(renderScene.mock.calls[2][1]).toBeNull();
+    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")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(3);
+    expect(renderScene.mock.calls[2][1]).toBeNull();
+    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")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    expect(renderScene).toHaveBeenCalledTimes(3);
+    expect(renderScene.mock.calls[2][1]).toBeNull();
+    const elements = renderScene.mock.calls[2][0];
+
+    expect(elements.length).toEqual(0);
+  });
+
+  it("arrow", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("arrow");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    // we need to finalize it because arrows and lines enter multi-mode
+    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);
+  });
+
+  it("line", () => {
+    const { getByToolName, container } = render(<App />);
+    // select tool
+    const tool = getByToolName("line");
+    fireEvent.click(tool);
+
+    const canvas = container.querySelector("canvas")!;
+
+    // start from (30, 20)
+    fireEvent.mouseDown(canvas, { clientX: 30, clientY: 20 });
+
+    // finish (position does not matter)
+    fireEvent.mouseUp(canvas);
+
+    // we need to finalize it because arrows and lines enter multi-mode
+    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);
+  });
+});