Tests for groups, more test utils (#1669)
This commit is contained in:
parent
4f3bf79708
commit
56f8bc092d
@ -1,6 +1,5 @@
|
|||||||
import { KEYS } from "../keys";
|
import { KEYS } from "../keys";
|
||||||
import { register } from "./register";
|
import { register } from "./register";
|
||||||
import nanoid from "nanoid";
|
|
||||||
import { newElementWith } from "../element/mutateElement";
|
import { newElementWith } from "../element/mutateElement";
|
||||||
import { getSelectedElements } from "../scene";
|
import { getSelectedElements } from "../scene";
|
||||||
import {
|
import {
|
||||||
@ -13,6 +12,7 @@ import {
|
|||||||
isElementInGroup,
|
isElementInGroup,
|
||||||
} from "../groups";
|
} from "../groups";
|
||||||
import { getNonDeletedElements } from "../element";
|
import { getNonDeletedElements } from "../element";
|
||||||
|
import { randomId } from "../random";
|
||||||
|
|
||||||
export const actionGroup = register({
|
export const actionGroup = register({
|
||||||
name: "group",
|
name: "group",
|
||||||
@ -46,7 +46,7 @@ export const actionGroup = register({
|
|||||||
return { appState, elements, commitToHistory: false };
|
return { appState, elements, commitToHistory: false };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const newGroupId = nanoid();
|
const newGroupId = randomId();
|
||||||
const updatedElements = elements.map((element) => {
|
const updatedElements = elements.map((element) => {
|
||||||
if (!appState.selectedElementIds[element.id]) {
|
if (!appState.selectedElementIds[element.id]) {
|
||||||
return element;
|
return element;
|
||||||
|
@ -11,7 +11,6 @@ import {
|
|||||||
import { measureText, getFontString } from "../utils";
|
import { measureText, getFontString } from "../utils";
|
||||||
import { randomInteger, randomId } from "../random";
|
import { randomInteger, randomId } from "../random";
|
||||||
import { newElementWith } from "./mutateElement";
|
import { newElementWith } from "./mutateElement";
|
||||||
import nanoid from "nanoid";
|
|
||||||
import { getNewGroupIdsForDuplication } from "../groups";
|
import { getNewGroupIdsForDuplication } from "../groups";
|
||||||
|
|
||||||
type ElementConstructorOpts = {
|
type ElementConstructorOpts = {
|
||||||
@ -183,7 +182,7 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
|
|||||||
editingGroupId,
|
editingGroupId,
|
||||||
(groupId) => {
|
(groupId) => {
|
||||||
if (!groupIdMapForOperation.has(groupId)) {
|
if (!groupIdMapForOperation.has(groupId)) {
|
||||||
groupIdMapForOperation.set(groupId, nanoid());
|
groupIdMapForOperation.set(groupId, randomId());
|
||||||
}
|
}
|
||||||
return groupIdMapForOperation.get(groupId)!;
|
return groupIdMapForOperation.get(groupId)!;
|
||||||
},
|
},
|
||||||
|
File diff suppressed because it is too large
Load Diff
@ -20,111 +20,66 @@ const clickTool = (toolName: ToolName) => {
|
|||||||
fireEvent.click(getByToolName(toolName));
|
fireEvent.click(getByToolName(toolName));
|
||||||
};
|
};
|
||||||
|
|
||||||
let lastClientX = 0;
|
let altKey = false;
|
||||||
let lastClientY = 0;
|
let shiftKey = false;
|
||||||
let pointerType: "mouse" | "pen" | "touch" = "mouse";
|
let ctrlKey = false;
|
||||||
|
|
||||||
const pointerDown = (
|
function withModifierKeys(
|
||||||
clientX: number = lastClientX,
|
modifiers: { alt?: boolean; shift?: boolean; ctrl?: boolean },
|
||||||
clientY: number = lastClientY,
|
cb: () => void,
|
||||||
altKey: boolean = false,
|
) {
|
||||||
shiftKey: boolean = false,
|
const prevAltKey = altKey;
|
||||||
) => {
|
const prevShiftKey = shiftKey;
|
||||||
lastClientX = clientX;
|
const prevCtrlKey = ctrlKey;
|
||||||
lastClientY = clientY;
|
|
||||||
fireEvent.pointerDown(canvas, {
|
altKey = !!modifiers.alt;
|
||||||
clientX,
|
shiftKey = !!modifiers.shift;
|
||||||
clientY,
|
ctrlKey = !!modifiers.ctrl;
|
||||||
altKey,
|
|
||||||
|
try {
|
||||||
|
cb();
|
||||||
|
} finally {
|
||||||
|
altKey = prevAltKey;
|
||||||
|
shiftKey = prevShiftKey;
|
||||||
|
ctrlKey = prevCtrlKey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const hotkeyDown = (hotkey: Key) => {
|
||||||
|
const key = KEYS[hotkey];
|
||||||
|
if (typeof key !== "string") {
|
||||||
|
throw new Error("must provide a hotkey, not a key code");
|
||||||
|
}
|
||||||
|
keyDown(key);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hotkeyUp = (hotkey: Key) => {
|
||||||
|
const key = KEYS[hotkey];
|
||||||
|
if (typeof key !== "string") {
|
||||||
|
throw new Error("must provide a hotkey, not a key code");
|
||||||
|
}
|
||||||
|
keyUp(key);
|
||||||
|
};
|
||||||
|
|
||||||
|
const keyDown = (key: string) => {
|
||||||
|
fireEvent.keyDown(document, {
|
||||||
|
key,
|
||||||
|
ctrlKey,
|
||||||
shiftKey,
|
shiftKey,
|
||||||
pointerId: 1,
|
|
||||||
pointerType,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const pointer2Down = (clientX: number, clientY: number) => {
|
|
||||||
fireEvent.pointerDown(canvas, {
|
|
||||||
clientX,
|
|
||||||
clientY,
|
|
||||||
pointerId: 2,
|
|
||||||
pointerType,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const pointer2Move = (clientX: number, clientY: number) => {
|
|
||||||
fireEvent.pointerMove(canvas, {
|
|
||||||
clientX,
|
|
||||||
clientY,
|
|
||||||
pointerId: 2,
|
|
||||||
pointerType,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const pointer2Up = (clientX: number, clientY: number) => {
|
|
||||||
fireEvent.pointerUp(canvas, {
|
|
||||||
clientX,
|
|
||||||
clientY,
|
|
||||||
pointerId: 2,
|
|
||||||
pointerType,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const pointerMove = (
|
|
||||||
clientX: number = lastClientX,
|
|
||||||
clientY: number = lastClientY,
|
|
||||||
altKey: boolean = false,
|
|
||||||
shiftKey: boolean = false,
|
|
||||||
) => {
|
|
||||||
lastClientX = clientX;
|
|
||||||
lastClientY = clientY;
|
|
||||||
fireEvent.pointerMove(canvas, {
|
|
||||||
clientX,
|
|
||||||
clientY,
|
|
||||||
altKey,
|
altKey,
|
||||||
shiftKey,
|
keyCode: key.toUpperCase().charCodeAt(0),
|
||||||
pointerId: 1,
|
which: key.toUpperCase().charCodeAt(0),
|
||||||
pointerType,
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const pointerUp = (
|
const keyUp = (key: string) => {
|
||||||
clientX: number = lastClientX,
|
|
||||||
clientY: number = lastClientY,
|
|
||||||
altKey: boolean = false,
|
|
||||||
shiftKey: boolean = false,
|
|
||||||
) => {
|
|
||||||
lastClientX = clientX;
|
|
||||||
lastClientY = clientY;
|
|
||||||
fireEvent.pointerUp(canvas, { pointerId: 1, pointerType, shiftKey, altKey });
|
|
||||||
};
|
|
||||||
|
|
||||||
const hotkeyDown = (key: Key) => {
|
|
||||||
fireEvent.keyDown(document, { key: KEYS[key] });
|
|
||||||
};
|
|
||||||
|
|
||||||
const hotkeyUp = (key: Key) => {
|
|
||||||
fireEvent.keyUp(document, {
|
|
||||||
key: KEYS[key],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const keyDown = (
|
|
||||||
key: string,
|
|
||||||
ctrlKey: boolean = false,
|
|
||||||
shiftKey: boolean = false,
|
|
||||||
) => {
|
|
||||||
fireEvent.keyDown(document, { key, ctrlKey, shiftKey });
|
|
||||||
};
|
|
||||||
|
|
||||||
const keyUp = (
|
|
||||||
key: string,
|
|
||||||
ctrlKey: boolean = false,
|
|
||||||
shiftKey: boolean = false,
|
|
||||||
) => {
|
|
||||||
fireEvent.keyUp(document, {
|
fireEvent.keyUp(document, {
|
||||||
key,
|
key,
|
||||||
ctrlKey,
|
ctrlKey,
|
||||||
shiftKey,
|
shiftKey,
|
||||||
|
altKey,
|
||||||
|
keyCode: key.toUpperCase().charCodeAt(0),
|
||||||
|
which: key.toUpperCase().charCodeAt(0),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -133,15 +88,80 @@ const hotkeyPress = (key: Key) => {
|
|||||||
hotkeyUp(key);
|
hotkeyUp(key);
|
||||||
};
|
};
|
||||||
|
|
||||||
const keyPress = (
|
const keyPress = (key: string) => {
|
||||||
key: string,
|
keyDown(key);
|
||||||
ctrlKey: boolean = false,
|
keyUp(key);
|
||||||
shiftKey: boolean = false,
|
|
||||||
) => {
|
|
||||||
keyDown(key, ctrlKey, shiftKey);
|
|
||||||
keyUp(key, ctrlKey, shiftKey);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
class Pointer {
|
||||||
|
private clientX = 0;
|
||||||
|
private clientY = 0;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private readonly pointerType: "mouse" | "touch" | "pen",
|
||||||
|
private readonly pointerId = 1,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.clientX = 0;
|
||||||
|
this.clientY = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
getPosition() {
|
||||||
|
return [this.clientX, this.clientY];
|
||||||
|
}
|
||||||
|
|
||||||
|
restorePosition(x = 0, y = 0) {
|
||||||
|
this.clientX = x;
|
||||||
|
this.clientY = y;
|
||||||
|
fireEvent.pointerMove(canvas, this.getEvent());
|
||||||
|
}
|
||||||
|
|
||||||
|
private getEvent() {
|
||||||
|
return {
|
||||||
|
clientX: this.clientX,
|
||||||
|
clientY: this.clientY,
|
||||||
|
pointerType: this.pointerType,
|
||||||
|
pointerId: this.pointerId,
|
||||||
|
altKey,
|
||||||
|
shiftKey,
|
||||||
|
ctrlKey,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
move(dx: number, dy: number) {
|
||||||
|
if (dx !== 0 || dy !== 0) {
|
||||||
|
this.clientX += dx;
|
||||||
|
this.clientY += dy;
|
||||||
|
fireEvent.pointerMove(canvas, this.getEvent());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
down(dx = 0, dy = 0) {
|
||||||
|
this.move(dx, dy);
|
||||||
|
fireEvent.pointerDown(canvas, this.getEvent());
|
||||||
|
}
|
||||||
|
|
||||||
|
up(dx = 0, dy = 0) {
|
||||||
|
this.move(dx, dy);
|
||||||
|
fireEvent.pointerUp(canvas, this.getEvent());
|
||||||
|
}
|
||||||
|
|
||||||
|
click(dx = 0, dy = 0) {
|
||||||
|
this.down(dx, dy);
|
||||||
|
this.up();
|
||||||
|
}
|
||||||
|
|
||||||
|
doubleClick(dx = 0, dy = 0) {
|
||||||
|
this.move(dx, dy);
|
||||||
|
fireEvent.doubleClick(canvas, this.getEvent());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const mouse = new Pointer("mouse");
|
||||||
|
const finger1 = new Pointer("touch", 1);
|
||||||
|
const finger2 = new Pointer("touch", 2);
|
||||||
|
|
||||||
const clickLabeledElement = (label: string) => {
|
const clickLabeledElement = (label: string) => {
|
||||||
const element = document.querySelector(`[aria-label='${label}']`);
|
const element = document.querySelector(`[aria-label='${label}']`);
|
||||||
if (!element) {
|
if (!element) {
|
||||||
@ -150,10 +170,12 @@ const clickLabeledElement = (label: string) => {
|
|||||||
fireEvent.click(element);
|
fireEvent.click(element);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getSelectedElements = (): ExcalidrawElement[] => {
|
||||||
|
return h.elements.filter((element) => h.state.selectedElementIds[element.id]);
|
||||||
|
};
|
||||||
|
|
||||||
const getSelectedElement = (): ExcalidrawElement => {
|
const getSelectedElement = (): ExcalidrawElement => {
|
||||||
const selectedElements = h.elements.filter(
|
const selectedElements = getSelectedElements();
|
||||||
(element) => h.state.selectedElementIds[element.id],
|
|
||||||
);
|
|
||||||
if (selectedElements.length !== 1) {
|
if (selectedElements.length !== 1) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`expected 1 selected element; got ${selectedElements.length}`,
|
`expected 1 selected element; got ${selectedElements.length}`,
|
||||||
@ -168,7 +190,7 @@ function getStateHistory() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
|
type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
|
||||||
const getResizeHandles = () => {
|
const getResizeHandles = (pointerType: "mouse" | "touch" | "pen") => {
|
||||||
const rects = handlerRectangles(
|
const rects = handlerRectangles(
|
||||||
getSelectedElement(),
|
getSelectedElement(),
|
||||||
h.state.zoom,
|
h.state.zoom,
|
||||||
@ -214,7 +236,11 @@ beforeEach(() => {
|
|||||||
h.history.clear();
|
h.history.clear();
|
||||||
reseed(7);
|
reseed(7);
|
||||||
setDateTimeForTests("201933152653");
|
setDateTimeForTests("201933152653");
|
||||||
pointerType = "mouse";
|
|
||||||
|
mouse.reset();
|
||||||
|
finger1.reset();
|
||||||
|
finger2.reset();
|
||||||
|
altKey = ctrlKey = shiftKey = false;
|
||||||
|
|
||||||
const renderResult = render(<App />);
|
const renderResult = render(<App />);
|
||||||
|
|
||||||
@ -229,68 +255,68 @@ afterEach(() => {
|
|||||||
describe("regression tests", () => {
|
describe("regression tests", () => {
|
||||||
it("draw every type of shape", () => {
|
it("draw every type of shape", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("diamond");
|
clickTool("diamond");
|
||||||
pointerDown(30, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(40, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("ellipse");
|
clickTool("ellipse");
|
||||||
pointerDown(50, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(60, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("arrow");
|
clickTool("arrow");
|
||||||
pointerDown(70, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(80, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("line");
|
clickTool("line");
|
||||||
pointerDown(90, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(100, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("arrow");
|
clickTool("arrow");
|
||||||
pointerDown(10, 30);
|
mouse.click(10, -10);
|
||||||
pointerUp();
|
mouse.click(10, 10);
|
||||||
pointerMove(20, 40);
|
mouse.click(-10, 10);
|
||||||
pointerUp();
|
|
||||||
pointerMove(10, 50);
|
|
||||||
pointerUp();
|
|
||||||
hotkeyPress("ENTER");
|
hotkeyPress("ENTER");
|
||||||
|
|
||||||
clickTool("line");
|
clickTool("line");
|
||||||
pointerDown(30, 30);
|
mouse.click(10, -20);
|
||||||
pointerUp();
|
mouse.click(10, 10);
|
||||||
pointerMove(40, 40);
|
mouse.click(-10, 10);
|
||||||
pointerUp();
|
|
||||||
pointerMove(30, 50);
|
|
||||||
pointerUp();
|
|
||||||
hotkeyPress("ENTER");
|
hotkeyPress("ENTER");
|
||||||
|
|
||||||
clickTool("draw");
|
clickTool("draw");
|
||||||
pointerDown(30, 10);
|
mouse.down(10, -20);
|
||||||
pointerMove(40, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
expect(h.elements.map((element) => element.type)).toEqual([
|
||||||
|
"rectangle",
|
||||||
|
"diamond",
|
||||||
|
"ellipse",
|
||||||
|
"arrow",
|
||||||
|
"line",
|
||||||
|
"arrow",
|
||||||
|
"line",
|
||||||
|
"draw",
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("click to select a shape", () => {
|
it("click to select a shape", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
const firstRectPos = mouse.getPosition();
|
||||||
|
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(30, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(40, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
const prevSelectedId = getSelectedElement().id;
|
const prevSelectedId = getSelectedElement().id;
|
||||||
pointerDown(10, 10);
|
mouse.restorePosition(...firstRectPos);
|
||||||
pointerUp();
|
mouse.click();
|
||||||
|
|
||||||
expect(getSelectedElement().id).not.toEqual(prevSelectedId);
|
expect(getSelectedElement().id).not.toEqual(prevSelectedId);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -306,9 +332,8 @@ describe("regression tests", () => {
|
|||||||
it(`hotkey ${key} selects ${shape} tool`, () => {
|
it(`hotkey ${key} selects ${shape} tool`, () => {
|
||||||
keyPress(key);
|
keyPress(key);
|
||||||
|
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
expect(getSelectedElement().type).toBe(shape);
|
expect(getSelectedElement().type).toBe(shape);
|
||||||
});
|
});
|
||||||
@ -317,9 +342,8 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
it("change the properties of a shape", () => {
|
it("change the properties of a shape", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickLabeledElement("Background");
|
clickLabeledElement("Background");
|
||||||
clickLabeledElement("#fa5252");
|
clickLabeledElement("#fa5252");
|
||||||
@ -331,18 +355,18 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
it("resize an element, trying every resize handle", () => {
|
it("resize an element, trying every resize handle", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
const resizeHandles = getResizeHandles();
|
const resizeHandles = getResizeHandles("mouse");
|
||||||
delete resizeHandles.rotation; // exclude rotation handle
|
delete resizeHandles.rotation; // exclude rotation handle
|
||||||
for (const handlePos in resizeHandles) {
|
for (const handlePos in resizeHandles) {
|
||||||
const [x, y] = resizeHandles[handlePos as keyof typeof resizeHandles];
|
const [x, y] = resizeHandles[handlePos as keyof typeof resizeHandles];
|
||||||
const { width: prevWidth, height: prevHeight } = getSelectedElement();
|
const { width: prevWidth, height: prevHeight } = getSelectedElement();
|
||||||
pointerDown(x, y);
|
mouse.restorePosition(x, y);
|
||||||
pointerMove(x - 5, y - 5);
|
mouse.down();
|
||||||
pointerUp();
|
mouse.up(-5, -5);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
width: nextWidthNegative,
|
width: nextWidthNegative,
|
||||||
height: nextHeightNegative,
|
height: nextHeightNegative,
|
||||||
@ -352,17 +376,18 @@ describe("regression tests", () => {
|
|||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
checkpoint(`resize handle ${handlePos} (-5, -5)`);
|
checkpoint(`resize handle ${handlePos} (-5, -5)`);
|
||||||
|
|
||||||
pointerDown();
|
mouse.down();
|
||||||
pointerMove(x, y);
|
mouse.up(5, 5);
|
||||||
pointerUp();
|
|
||||||
const { width, height } = getSelectedElement();
|
const { width, height } = getSelectedElement();
|
||||||
expect(width).toBe(prevWidth);
|
expect(width).toBe(prevWidth);
|
||||||
expect(height).toBe(prevHeight);
|
expect(height).toBe(prevHeight);
|
||||||
checkpoint(`unresize handle ${handlePos} (-5, -5)`);
|
checkpoint(`unresize handle ${handlePos} (-5, -5)`);
|
||||||
|
|
||||||
pointerDown(x, y);
|
mouse.restorePosition(x, y);
|
||||||
pointerMove(x + 5, y + 5);
|
mouse.down();
|
||||||
pointerUp();
|
mouse.up(5, 5);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
width: nextWidthPositive,
|
width: nextWidthPositive,
|
||||||
height: nextHeightPositive,
|
height: nextHeightPositive,
|
||||||
@ -372,9 +397,9 @@ describe("regression tests", () => {
|
|||||||
).toBeTruthy();
|
).toBeTruthy();
|
||||||
checkpoint(`resize handle ${handlePos} (+5, +5)`);
|
checkpoint(`resize handle ${handlePos} (+5, +5)`);
|
||||||
|
|
||||||
pointerDown();
|
mouse.down();
|
||||||
pointerMove(x, y);
|
mouse.up(-5, -5);
|
||||||
pointerUp();
|
|
||||||
const { width: finalWidth, height: finalHeight } = getSelectedElement();
|
const { width: finalWidth, height: finalHeight } = getSelectedElement();
|
||||||
expect(finalWidth).toBe(prevWidth);
|
expect(finalWidth).toBe(prevWidth);
|
||||||
expect(finalHeight).toBe(prevHeight);
|
expect(finalHeight).toBe(prevHeight);
|
||||||
@ -385,14 +410,12 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
it("click on an element and drag it", () => {
|
it("click on an element and drag it", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
const { x: prevX, y: prevY } = getSelectedElement();
|
const { x: prevX, y: prevY } = getSelectedElement();
|
||||||
pointerDown(10, 10);
|
mouse.down(-10, -10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
const { x: nextX, y: nextY } = getSelectedElement();
|
const { x: nextX, y: nextY } = getSelectedElement();
|
||||||
expect(nextX).toBeGreaterThan(prevX);
|
expect(nextX).toBeGreaterThan(prevX);
|
||||||
@ -400,9 +423,8 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
checkpoint("dragged");
|
checkpoint("dragged");
|
||||||
|
|
||||||
pointerDown();
|
mouse.down();
|
||||||
pointerMove(10, 10);
|
mouse.up(-10, -10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
const { x, y } = getSelectedElement();
|
const { x, y } = getSelectedElement();
|
||||||
expect(x).toBe(prevX);
|
expect(x).toBe(prevX);
|
||||||
@ -411,16 +433,18 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
it("alt-drag duplicates an element", () => {
|
it("alt-drag duplicates an element", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
h.elements.filter((element) => element.type === "rectangle").length,
|
h.elements.filter((element) => element.type === "rectangle").length,
|
||||||
).toBe(1);
|
).toBe(1);
|
||||||
pointerDown(10, 10, true);
|
|
||||||
pointerMove(20, 20, true);
|
withModifierKeys({ alt: true }, () => {
|
||||||
pointerUp(20, 20, true);
|
mouse.down(-10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
});
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
h.elements.filter((element) => element.type === "rectangle").length,
|
h.elements.filter((element) => element.type === "rectangle").length,
|
||||||
).toBe(2);
|
).toBe(2);
|
||||||
@ -428,23 +452,23 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
it("click-drag to select a group", () => {
|
it("click-drag to select a group", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(30, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(40, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
const finalPosition = mouse.getPosition();
|
||||||
|
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(50, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(60, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
pointerDown(0, 0);
|
mouse.restorePosition(0, 0);
|
||||||
pointerMove(45, 25);
|
mouse.down();
|
||||||
pointerUp();
|
mouse.restorePosition(...finalPosition);
|
||||||
|
mouse.up(5, 5);
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
h.elements.filter((element) => h.state.selectedElementIds[element.id])
|
h.elements.filter((element) => h.state.selectedElementIds[element.id])
|
||||||
@ -452,27 +476,28 @@ describe("regression tests", () => {
|
|||||||
).toBe(2);
|
).toBe(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shift-click to select a group, then drag", () => {
|
it("shift-click to multiselect, then drag", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(30, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(40, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
const prevRectsXY = h.elements
|
const prevRectsXY = h.elements
|
||||||
.filter((element) => element.type === "rectangle")
|
.filter((element) => element.type === "rectangle")
|
||||||
.map((element) => ({ x: element.x, y: element.y }));
|
.map((element) => ({ x: element.x, y: element.y }));
|
||||||
pointerDown(10, 10);
|
|
||||||
pointerUp();
|
mouse.reset();
|
||||||
pointerDown(30, 10, false, true);
|
mouse.click(10, 10);
|
||||||
pointerUp();
|
withModifierKeys({ shift: true }, () => {
|
||||||
pointerDown(30, 10);
|
mouse.click(20, 0);
|
||||||
pointerMove(40, 20);
|
});
|
||||||
pointerUp();
|
|
||||||
|
mouse.down();
|
||||||
|
mouse.up(10, 10);
|
||||||
|
|
||||||
h.elements
|
h.elements
|
||||||
.filter((element) => element.type === "rectangle")
|
.filter((element) => element.type === "rectangle")
|
||||||
.forEach((element, i) => {
|
.forEach((element, i) => {
|
||||||
@ -483,46 +508,41 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
it("pinch-to-zoom works", () => {
|
it("pinch-to-zoom works", () => {
|
||||||
expect(h.state.zoom).toBe(1);
|
expect(h.state.zoom).toBe(1);
|
||||||
pointerType = "touch";
|
finger1.down(50, 50);
|
||||||
pointerDown(50, 50);
|
finger2.down(60, 50);
|
||||||
pointer2Down(60, 50);
|
finger1.move(-10, 0);
|
||||||
pointerMove(40, 50);
|
|
||||||
pointer2Move(60, 50);
|
|
||||||
expect(h.state.zoom).toBeGreaterThan(1);
|
expect(h.state.zoom).toBeGreaterThan(1);
|
||||||
const zoomed = h.state.zoom;
|
const zoomed = h.state.zoom;
|
||||||
pointerMove(45, 50);
|
finger1.move(5, 0);
|
||||||
pointer2Move(55, 50);
|
finger2.move(-5, 0);
|
||||||
expect(h.state.zoom).toBeLessThan(zoomed);
|
expect(h.state.zoom).toBeLessThan(zoomed);
|
||||||
pointerUp(45, 50);
|
|
||||||
pointer2Up(55, 50);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it("two-finger scroll works", () => {
|
it("two-finger scroll works", () => {
|
||||||
const startScrollY = h.state.scrollY;
|
const startScrollY = h.state.scrollY;
|
||||||
pointerDown(50, 50);
|
finger1.down(50, 50);
|
||||||
pointer2Down(60, 50);
|
finger2.down(60, 50);
|
||||||
pointerMove(50, 40);
|
|
||||||
pointer2Move(60, 40);
|
finger1.up(0, -10);
|
||||||
pointerUp(50, 40);
|
finger2.up(0, -10);
|
||||||
pointer2Up(60, 40);
|
|
||||||
expect(h.state.scrollY).toBeLessThan(startScrollY);
|
expect(h.state.scrollY).toBeLessThan(startScrollY);
|
||||||
|
|
||||||
const startScrollX = h.state.scrollX;
|
const startScrollX = h.state.scrollX;
|
||||||
pointerDown(50, 50);
|
|
||||||
pointer2Down(50, 60);
|
finger1.restorePosition(50, 50);
|
||||||
pointerMove(60, 50);
|
finger2.restorePosition(50, 60);
|
||||||
pointer2Move(60, 60);
|
finger1.down();
|
||||||
pointerUp(60, 50);
|
finger2.down();
|
||||||
pointer2Up(60, 60);
|
finger1.up(10, 0);
|
||||||
|
finger2.up(10, 0);
|
||||||
expect(h.state.scrollX).toBeGreaterThan(startScrollX);
|
expect(h.state.scrollX).toBeGreaterThan(startScrollX);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("spacebar + drag scrolls the canvas", () => {
|
it("spacebar + drag scrolls the canvas", () => {
|
||||||
const { scrollX: startScrollX, scrollY: startScrollY } = h.state;
|
const { scrollX: startScrollX, scrollY: startScrollY } = h.state;
|
||||||
hotkeyDown("SPACE");
|
hotkeyDown("SPACE");
|
||||||
pointerDown(50, 50);
|
mouse.down(50, 50);
|
||||||
pointerMove(60, 60);
|
mouse.up(60, 60);
|
||||||
pointerUp();
|
|
||||||
hotkeyUp("SPACE");
|
hotkeyUp("SPACE");
|
||||||
const { scrollX, scrollY } = h.state;
|
const { scrollX, scrollY } = h.state;
|
||||||
expect(scrollX).not.toEqual(startScrollX);
|
expect(scrollX).not.toEqual(startScrollX);
|
||||||
@ -531,46 +551,46 @@ describe("regression tests", () => {
|
|||||||
|
|
||||||
it("arrow keys", () => {
|
it("arrow keys", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
hotkeyPress("ARROW_LEFT");
|
hotkeyPress("ARROW_LEFT");
|
||||||
hotkeyPress("ARROW_LEFT");
|
hotkeyPress("ARROW_LEFT");
|
||||||
hotkeyPress("ARROW_RIGHT");
|
hotkeyPress("ARROW_RIGHT");
|
||||||
hotkeyPress("ARROW_UP");
|
hotkeyPress("ARROW_UP");
|
||||||
hotkeyPress("ARROW_UP");
|
hotkeyPress("ARROW_UP");
|
||||||
hotkeyPress("ARROW_DOWN");
|
hotkeyPress("ARROW_DOWN");
|
||||||
|
expect(h.elements[0].x).toBe(9);
|
||||||
|
expect(h.elements[0].y).toBe(9);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("undo/redo drawing an element", () => {
|
it("undo/redo drawing an element", () => {
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(30, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(40, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
|
||||||
clickTool("arrow");
|
clickTool("arrow");
|
||||||
pointerDown(10, 30);
|
mouse.click(10, -10);
|
||||||
pointerUp();
|
mouse.click(10, 10);
|
||||||
pointerMove(20, 40);
|
mouse.click(-10, 10);
|
||||||
pointerDown(20, 40);
|
|
||||||
pointerUp();
|
|
||||||
pointerMove(10, 50);
|
|
||||||
pointerDown(10, 50);
|
|
||||||
pointerUp();
|
|
||||||
hotkeyPress("ENTER");
|
hotkeyPress("ENTER");
|
||||||
|
|
||||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(3);
|
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(3);
|
||||||
keyPress("z", true); // press twice for multi arrow
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
keyPress("z", true);
|
keyPress("z");
|
||||||
|
keyPress("z");
|
||||||
|
});
|
||||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
|
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
|
||||||
keyPress("z", true);
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
|
keyPress("z");
|
||||||
|
});
|
||||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(1);
|
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(1);
|
||||||
keyPress("z", true, true);
|
withModifierKeys({ ctrl: true, shift: true }, () => {
|
||||||
|
keyPress("z");
|
||||||
|
});
|
||||||
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
|
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -581,37 +601,48 @@ describe("regression tests", () => {
|
|||||||
expect(getStateHistory().length).toBe(0);
|
expect(getStateHistory().length).toBe(0);
|
||||||
|
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(10, 10);
|
mouse.down(10, 10);
|
||||||
pointerMove(20, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
const firstElementEndPoint = mouse.getPosition();
|
||||||
|
|
||||||
clickTool("rectangle");
|
clickTool("rectangle");
|
||||||
pointerDown(30, 10);
|
mouse.down(10, -10);
|
||||||
pointerMove(40, 20);
|
mouse.up(10, 10);
|
||||||
pointerUp();
|
|
||||||
|
const secondElementEndPoint = mouse.getPosition();
|
||||||
|
|
||||||
expect(getStateHistory().length).toBe(2);
|
expect(getStateHistory().length).toBe(2);
|
||||||
|
|
||||||
keyPress("z", true);
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
|
keyPress("z");
|
||||||
|
});
|
||||||
|
|
||||||
expect(getStateHistory().length).toBe(1);
|
expect(getStateHistory().length).toBe(1);
|
||||||
|
|
||||||
// clicking an element shouldn't addu to history
|
// clicking an element shouldn't add to history
|
||||||
pointerDown(10, 10);
|
mouse.restorePosition(...firstElementEndPoint);
|
||||||
pointerUp();
|
mouse.click();
|
||||||
expect(getStateHistory().length).toBe(1);
|
expect(getStateHistory().length).toBe(1);
|
||||||
|
|
||||||
keyPress("z", true, true);
|
withModifierKeys({ shift: true, ctrl: true }, () => {
|
||||||
|
keyPress("z");
|
||||||
|
});
|
||||||
|
|
||||||
expect(getStateHistory().length).toBe(2);
|
expect(getStateHistory().length).toBe(2);
|
||||||
|
|
||||||
// clicking an element shouldn't addu to history
|
// clicking an element shouldn't add to history
|
||||||
pointerDown(10, 10);
|
mouse.click();
|
||||||
pointerUp();
|
|
||||||
expect(getStateHistory().length).toBe(2);
|
expect(getStateHistory().length).toBe(2);
|
||||||
|
|
||||||
|
const firstSelectedElementId = getSelectedElement().id;
|
||||||
|
|
||||||
// same for clicking the element just redo-ed
|
// same for clicking the element just redo-ed
|
||||||
pointerDown(30, 10);
|
mouse.restorePosition(...secondElementEndPoint);
|
||||||
pointerUp();
|
mouse.click();
|
||||||
expect(getStateHistory().length).toBe(2);
|
expect(getStateHistory().length).toBe(2);
|
||||||
|
|
||||||
|
expect(getSelectedElement().id).not.toEqual(firstSelectedElementId);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("zoom hotkeys", () => {
|
it("zoom hotkeys", () => {
|
||||||
@ -635,4 +666,178 @@ describe("regression tests", () => {
|
|||||||
// switching to german, `hachure` label should no longer exist
|
// switching to german, `hachure` label should no longer exist
|
||||||
expect(screen.queryByText(/hachure/i)).toBeNull();
|
expect(screen.queryByText(/hachure/i)).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("make a group and duplicate it", () => {
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, 10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
const end = mouse.getPosition();
|
||||||
|
|
||||||
|
mouse.reset();
|
||||||
|
mouse.down();
|
||||||
|
mouse.restorePosition(...end);
|
||||||
|
mouse.up();
|
||||||
|
|
||||||
|
expect(h.elements.length).toBe(3);
|
||||||
|
for (const element of h.elements) {
|
||||||
|
expect(element.groupIds.length).toBe(0);
|
||||||
|
expect(h.state.selectedElementIds[element.id]).toBe(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
|
keyPress("g");
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const element of h.elements) {
|
||||||
|
expect(element.groupIds.length).toBe(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
withModifierKeys({ alt: true }, () => {
|
||||||
|
mouse.restorePosition(...end);
|
||||||
|
mouse.down();
|
||||||
|
mouse.up(10, 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(h.elements.length).toBe(6);
|
||||||
|
const groups = new Set();
|
||||||
|
for (const element of h.elements) {
|
||||||
|
for (const groupId of element.groupIds) {
|
||||||
|
groups.add(groupId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(groups.size).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("double click to edit a group", () => {
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, 10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
|
||||||
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
|
keyPress("a");
|
||||||
|
keyPress("g");
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(getSelectedElements().length).toBe(3);
|
||||||
|
expect(h.state.editingGroupId).toBe(null);
|
||||||
|
mouse.doubleClick();
|
||||||
|
expect(getSelectedElements().length).toBe(1);
|
||||||
|
expect(h.state.editingGroupId).not.toBe(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("adjusts z order when grouping", () => {
|
||||||
|
const positions = [];
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, 10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
positions.push(mouse.getPosition());
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
positions.push(mouse.getPosition());
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
positions.push(mouse.getPosition());
|
||||||
|
|
||||||
|
const ids = h.elements.map((element) => element.id);
|
||||||
|
|
||||||
|
mouse.restorePosition(...positions[0]);
|
||||||
|
mouse.click();
|
||||||
|
mouse.restorePosition(...positions[2]);
|
||||||
|
withModifierKeys({ shift: true }, () => {
|
||||||
|
mouse.click();
|
||||||
|
});
|
||||||
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
|
keyPress("g");
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(h.elements.map((element) => element.id)).toEqual([
|
||||||
|
ids[1],
|
||||||
|
ids[0],
|
||||||
|
ids[2],
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("supports nested groups", () => {
|
||||||
|
const positions: number[][] = [];
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, 10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
positions.push(mouse.getPosition());
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
positions.push(mouse.getPosition());
|
||||||
|
|
||||||
|
clickTool("rectangle");
|
||||||
|
mouse.down(10, -10);
|
||||||
|
mouse.up(10, 10);
|
||||||
|
positions.push(mouse.getPosition());
|
||||||
|
|
||||||
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
|
keyPress("a");
|
||||||
|
keyPress("g");
|
||||||
|
});
|
||||||
|
|
||||||
|
mouse.doubleClick();
|
||||||
|
withModifierKeys({ shift: true }, () => {
|
||||||
|
mouse.restorePosition(...positions[0]);
|
||||||
|
mouse.click();
|
||||||
|
});
|
||||||
|
withModifierKeys({ ctrl: true }, () => {
|
||||||
|
keyPress("g");
|
||||||
|
});
|
||||||
|
|
||||||
|
const groupIds = h.elements[2].groupIds;
|
||||||
|
expect(groupIds.length).toBe(2);
|
||||||
|
expect(h.elements[1].groupIds).toEqual(groupIds);
|
||||||
|
expect(h.elements[0].groupIds).toEqual(groupIds.slice(1));
|
||||||
|
|
||||||
|
mouse.click(50, 50);
|
||||||
|
expect(getSelectedElements().length).toBe(0);
|
||||||
|
mouse.restorePosition(...positions[0]);
|
||||||
|
mouse.click();
|
||||||
|
expect(getSelectedElements().length).toBe(3);
|
||||||
|
expect(h.state.editingGroupId).toBe(null);
|
||||||
|
|
||||||
|
mouse.doubleClick();
|
||||||
|
expect(getSelectedElements().length).toBe(2);
|
||||||
|
expect(h.state.editingGroupId).toBe(groupIds[1]);
|
||||||
|
|
||||||
|
mouse.doubleClick();
|
||||||
|
expect(getSelectedElements().length).toBe(1);
|
||||||
|
expect(h.state.editingGroupId).toBe(groupIds[0]);
|
||||||
|
|
||||||
|
// click out of the group
|
||||||
|
mouse.restorePosition(...positions[1]);
|
||||||
|
mouse.click();
|
||||||
|
expect(getSelectedElements().length).toBe(0);
|
||||||
|
mouse.click();
|
||||||
|
expect(getSelectedElements().length).toBe(3);
|
||||||
|
mouse.doubleClick();
|
||||||
|
expect(getSelectedElements().length).toBe(1);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user