2020-02-12 02:19:43 +04:00
|
|
|
import React from "react";
|
|
|
|
import ReactDOM from "react-dom";
|
|
|
|
import { render, fireEvent } from "./test-utils";
|
2020-04-12 16:24:52 +05:30
|
|
|
import App from "../components/App";
|
2020-02-12 02:19:43 +04:00
|
|
|
import * as Renderer from "../renderer/renderScene";
|
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("resize element", () => {
|
2020-02-12 02:19:43 +04:00
|
|
|
it("rectangle", () => {
|
|
|
|
const { getByToolName, container } = render(<App />);
|
|
|
|
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
|
|
|
|
2020-07-27 17:18:49 +05:30
|
|
|
expect(renderScene).toHaveBeenCalledTimes(5);
|
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-07 10:20:38 -05:00
|
|
|
expect([h.elements[0].x, h.elements[0].y]).toEqual([30, 20]);
|
|
|
|
|
|
|
|
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
|
|
|
renderScene.mockClear();
|
|
|
|
}
|
|
|
|
|
|
|
|
// select the element first
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 50, clientY: 20 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
|
|
|
// select a handler rectangle (top-left)
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 21, clientY: 13 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 20, clientY: 40 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(5);
|
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);
|
|
|
|
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
|
|
|
|
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
|
2020-03-23 16:38:41 -07:00
|
|
|
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-03-07 10:20:38 -05:00
|
|
|
describe("resize element with aspect ratio when SHIFT is clicked", () => {
|
2020-02-12 02:19:43 +04:00
|
|
|
it("rectangle", () => {
|
|
|
|
const { getByToolName, container } = render(<App />);
|
|
|
|
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
|
|
|
|
2020-07-27 17:18:49 +05:30
|
|
|
expect(renderScene).toHaveBeenCalledTimes(5);
|
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-07 10:20:38 -05:00
|
|
|
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]);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
|
|
|
renderScene.mockClear();
|
|
|
|
}
|
|
|
|
|
|
|
|
// select the element first
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 50, clientY: 20 });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
|
|
|
// select a handler rectangle (top-left)
|
2020-02-21 08:17:20 -05:00
|
|
|
fireEvent.pointerDown(canvas, { clientX: 21, clientY: 13 });
|
|
|
|
fireEvent.pointerMove(canvas, { clientX: 20, clientY: 40, shiftKey: true });
|
|
|
|
fireEvent.pointerUp(canvas);
|
2020-02-12 02:19:43 +04:00
|
|
|
|
|
|
|
expect(renderScene).toHaveBeenCalledTimes(5);
|
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);
|
|
|
|
expect([h.elements[0].x, h.elements[0].y]).toEqual([29, 47]);
|
|
|
|
expect([h.elements[0].width, h.elements[0].height]).toEqual([30, 50]);
|
2020-03-23 16:38:41 -07:00
|
|
|
|
|
|
|
h.elements.forEach((element) => expect(element).toMatchSnapshot());
|
2020-02-12 02:19:43 +04:00
|
|
|
});
|
|
|
|
});
|