mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Refactor tests
This commit is contained in:
Mark Tolmacs
parent
dc4bc0329b
commit
3943c9121c
2 changed files with 222 additions and 212 deletions
|
|
@ -1,17 +1,27 @@
|
||||||
|
import React from "react";
|
||||||
import { pointFrom } from "@excalidraw/math";
|
import { pointFrom } from "@excalidraw/math";
|
||||||
|
|
||||||
import type { LocalPoint } from "@excalidraw/math";
|
import type { LocalPoint } from "@excalidraw/math";
|
||||||
|
|
||||||
import { FONT_FAMILY, ROUNDNESS } from "../constants";
|
import { FONT_FAMILY, ORIG_ID, ROUNDNESS } from "../constants";
|
||||||
import { API } from "../tests/helpers/api";
|
import { API } from "../tests/helpers/api";
|
||||||
import { isPrimitive } from "../utils";
|
import { isPrimitive } from "../utils";
|
||||||
|
|
||||||
|
import { act, assertElements, render } from "../tests/test-utils";
|
||||||
|
import { Excalidraw } from "..";
|
||||||
|
import { actionDuplicateSelection } from "../actions";
|
||||||
|
|
||||||
|
import { Keyboard, Pointer } from "../tests/helpers/ui";
|
||||||
|
|
||||||
import { mutateElement } from "./mutateElement";
|
import { mutateElement } from "./mutateElement";
|
||||||
|
|
||||||
import { duplicateElement, duplicateElements } from "./duplicate";
|
import { duplicateElement, duplicateElements } from "./duplicate";
|
||||||
|
|
||||||
import type { ExcalidrawLinearElement } from "./types";
|
import type { ExcalidrawLinearElement } from "./types";
|
||||||
|
|
||||||
|
const { h } = window;
|
||||||
|
const mouse = new Pointer("mouse");
|
||||||
|
|
||||||
const assertCloneObjects = (source: any, clone: any) => {
|
const assertCloneObjects = (source: any, clone: any) => {
|
||||||
for (const key in clone) {
|
for (const key in clone) {
|
||||||
if (clone.hasOwnProperty(key) && !isPrimitive(clone[key])) {
|
if (clone.hasOwnProperty(key) && !isPrimitive(clone[key])) {
|
||||||
|
|
@ -381,3 +391,210 @@ describe("duplicating multiple elements", () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("duplication z-order", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await render(<Excalidraw />);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("duplication z order with Cmd+D for the lowest z-ordered element should be +1 for the clone", () => {
|
||||||
|
const rectangle1 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
});
|
||||||
|
const rectangle2 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
});
|
||||||
|
const rectangle3 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 20,
|
||||||
|
y: 20,
|
||||||
|
});
|
||||||
|
|
||||||
|
API.setElements([rectangle1, rectangle2, rectangle3]);
|
||||||
|
API.setSelectedElements([rectangle1]);
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
h.app.actionManager.executeAction(actionDuplicateSelection);
|
||||||
|
});
|
||||||
|
|
||||||
|
assertElements(h.elements, [
|
||||||
|
{ id: rectangle1.id },
|
||||||
|
{ [ORIG_ID]: rectangle1.id, selected: true },
|
||||||
|
{ id: rectangle2.id },
|
||||||
|
{ id: rectangle3.id },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("duplication z order with Cmd+D for the highest z-ordered element should be +1 for the clone", () => {
|
||||||
|
const rectangle1 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
});
|
||||||
|
const rectangle2 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
});
|
||||||
|
const rectangle3 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 20,
|
||||||
|
y: 20,
|
||||||
|
});
|
||||||
|
|
||||||
|
API.setElements([rectangle1, rectangle2, rectangle3]);
|
||||||
|
API.setSelectedElements([rectangle3]);
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
h.app.actionManager.executeAction(actionDuplicateSelection);
|
||||||
|
});
|
||||||
|
|
||||||
|
assertElements(h.elements, [
|
||||||
|
{ id: rectangle1.id },
|
||||||
|
{ id: rectangle2.id },
|
||||||
|
{ id: rectangle3.id },
|
||||||
|
{ [ORIG_ID]: rectangle3.id, selected: true },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
|
||||||
|
const rectangle1 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
});
|
||||||
|
const rectangle2 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
});
|
||||||
|
const rectangle3 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 20,
|
||||||
|
y: 20,
|
||||||
|
});
|
||||||
|
|
||||||
|
API.setElements([rectangle1, rectangle2, rectangle3]);
|
||||||
|
|
||||||
|
mouse.select(rectangle1);
|
||||||
|
Keyboard.withModifierKeys({ alt: true }, () => {
|
||||||
|
mouse.down(rectangle1.x + 5, rectangle1.y + 5);
|
||||||
|
mouse.up(rectangle1.x + 5, rectangle1.y + 5);
|
||||||
|
});
|
||||||
|
|
||||||
|
assertElements(h.elements, [
|
||||||
|
{ [ORIG_ID]: rectangle1.id },
|
||||||
|
{ id: rectangle1.id, selected: true },
|
||||||
|
{ id: rectangle2.id },
|
||||||
|
{ id: rectangle3.id },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("duplication z order with alt+drag for the highest z-ordered element should be +1 for the clone", () => {
|
||||||
|
const rectangle1 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
});
|
||||||
|
const rectangle2 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
});
|
||||||
|
const rectangle3 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 20,
|
||||||
|
y: 20,
|
||||||
|
});
|
||||||
|
|
||||||
|
API.setElements([rectangle1, rectangle2, rectangle3]);
|
||||||
|
|
||||||
|
mouse.select(rectangle3);
|
||||||
|
Keyboard.withModifierKeys({ alt: true }, () => {
|
||||||
|
mouse.down(rectangle3.x + 5, rectangle3.y + 5);
|
||||||
|
mouse.up(rectangle3.x + 5, rectangle3.y + 5);
|
||||||
|
});
|
||||||
|
|
||||||
|
assertElements(h.elements, [
|
||||||
|
{ id: rectangle1.id },
|
||||||
|
{ id: rectangle2.id },
|
||||||
|
{ [ORIG_ID]: rectangle3.id },
|
||||||
|
{ id: rectangle3.id, selected: true },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
|
||||||
|
const rectangle1 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
});
|
||||||
|
const rectangle2 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
});
|
||||||
|
const rectangle3 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 20,
|
||||||
|
y: 20,
|
||||||
|
});
|
||||||
|
|
||||||
|
API.setElements([rectangle1, rectangle2, rectangle3]);
|
||||||
|
|
||||||
|
mouse.select(rectangle1);
|
||||||
|
Keyboard.withModifierKeys({ alt: true }, () => {
|
||||||
|
mouse.down(rectangle1.x + 5, rectangle1.y + 5);
|
||||||
|
mouse.up(rectangle1.x + 5, rectangle1.y + 5);
|
||||||
|
});
|
||||||
|
|
||||||
|
assertElements(h.elements, [
|
||||||
|
{ [ORIG_ID]: rectangle1.id },
|
||||||
|
{ id: rectangle1.id, selected: true },
|
||||||
|
{ id: rectangle2.id },
|
||||||
|
{ id: rectangle3.id },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("duplication z order with alt+drag with grouped elements should consider the group together when determining z-index", () => {
|
||||||
|
const rectangle1 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
groupIds: ["group1"],
|
||||||
|
});
|
||||||
|
const rectangle2 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
groupIds: ["group1"],
|
||||||
|
});
|
||||||
|
const rectangle3 = API.createElement({
|
||||||
|
type: "rectangle",
|
||||||
|
x: 20,
|
||||||
|
y: 20,
|
||||||
|
groupIds: ["group1"],
|
||||||
|
});
|
||||||
|
|
||||||
|
API.setElements([rectangle1, rectangle2, rectangle3]);
|
||||||
|
|
||||||
|
mouse.select(rectangle1);
|
||||||
|
Keyboard.withModifierKeys({ alt: true }, () => {
|
||||||
|
mouse.down(rectangle1.x + 5, rectangle1.y + 5);
|
||||||
|
mouse.up(rectangle1.x + 15, rectangle1.y + 15);
|
||||||
|
});
|
||||||
|
|
||||||
|
assertElements(h.elements, [
|
||||||
|
{ [ORIG_ID]: rectangle1.id },
|
||||||
|
{ [ORIG_ID]: rectangle2.id },
|
||||||
|
{ [ORIG_ID]: rectangle3.id },
|
||||||
|
{ id: rectangle1.id, selected: true },
|
||||||
|
{ id: rectangle2.id, selected: true },
|
||||||
|
{ id: rectangle3.id, selected: true },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,20 +1,16 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { vi } from "vitest";
|
import { vi } from "vitest";
|
||||||
|
|
||||||
import { FONT_FAMILY, ORIG_ID } from "../constants";
|
import { FONT_FAMILY } from "../constants";
|
||||||
import { Excalidraw } from "../index";
|
import { Excalidraw } from "../index";
|
||||||
import { CODES, KEYS } from "../keys";
|
import { CODES, KEYS } from "../keys";
|
||||||
import { reseed } from "../random";
|
import { reseed } from "../random";
|
||||||
import * as StaticScene from "../renderer/staticScene";
|
import * as StaticScene from "../renderer/staticScene";
|
||||||
import { setDateTimeForTests } from "../utils";
|
import { setDateTimeForTests } from "../utils";
|
||||||
|
|
||||||
import { actionDuplicateSelection } from "../actions";
|
|
||||||
|
|
||||||
import { API } from "./helpers/api";
|
import { API } from "./helpers/api";
|
||||||
import { Keyboard, Pointer, UI } from "./helpers/ui";
|
import { Keyboard, Pointer, UI } from "./helpers/ui";
|
||||||
import {
|
import {
|
||||||
act,
|
|
||||||
assertElements,
|
|
||||||
assertSelectedElements,
|
assertSelectedElements,
|
||||||
fireEvent,
|
fireEvent,
|
||||||
render,
|
render,
|
||||||
|
|
@ -1189,209 +1185,6 @@ it(
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
describe("duplication z-order", () => {
|
//
|
||||||
beforeEach(async () => {
|
// DEPRECATED: DO NOT ADD TESTS HERE
|
||||||
await render(<Excalidraw />);
|
//
|
||||||
});
|
|
||||||
|
|
||||||
it("duplication z order with Cmd+D for the lowest z-ordered element should be +1 for the clone", () => {
|
|
||||||
const rectangle1 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
});
|
|
||||||
const rectangle2 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 10,
|
|
||||||
y: 10,
|
|
||||||
});
|
|
||||||
const rectangle3 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 20,
|
|
||||||
y: 20,
|
|
||||||
});
|
|
||||||
|
|
||||||
API.setElements([rectangle1, rectangle2, rectangle3]);
|
|
||||||
API.setSelectedElements([rectangle1]);
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
h.app.actionManager.executeAction(actionDuplicateSelection);
|
|
||||||
});
|
|
||||||
|
|
||||||
assertElements(h.elements, [
|
|
||||||
{ id: rectangle1.id },
|
|
||||||
{ [ORIG_ID]: rectangle1.id, selected: true },
|
|
||||||
{ id: rectangle2.id },
|
|
||||||
{ id: rectangle3.id },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("duplication z order with Cmd+D for the highest z-ordered element should be +1 for the clone", () => {
|
|
||||||
const rectangle1 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
});
|
|
||||||
const rectangle2 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 10,
|
|
||||||
y: 10,
|
|
||||||
});
|
|
||||||
const rectangle3 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 20,
|
|
||||||
y: 20,
|
|
||||||
});
|
|
||||||
|
|
||||||
API.setElements([rectangle1, rectangle2, rectangle3]);
|
|
||||||
API.setSelectedElements([rectangle3]);
|
|
||||||
|
|
||||||
act(() => {
|
|
||||||
h.app.actionManager.executeAction(actionDuplicateSelection);
|
|
||||||
});
|
|
||||||
|
|
||||||
assertElements(h.elements, [
|
|
||||||
{ id: rectangle1.id },
|
|
||||||
{ id: rectangle2.id },
|
|
||||||
{ id: rectangle3.id },
|
|
||||||
{ [ORIG_ID]: rectangle3.id, selected: true },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
|
|
||||||
const rectangle1 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
});
|
|
||||||
const rectangle2 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 10,
|
|
||||||
y: 10,
|
|
||||||
});
|
|
||||||
const rectangle3 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 20,
|
|
||||||
y: 20,
|
|
||||||
});
|
|
||||||
|
|
||||||
API.setElements([rectangle1, rectangle2, rectangle3]);
|
|
||||||
|
|
||||||
mouse.select(rectangle1);
|
|
||||||
Keyboard.withModifierKeys({ alt: true }, () => {
|
|
||||||
mouse.down(rectangle1.x + 5, rectangle1.y + 5);
|
|
||||||
mouse.up(rectangle1.x + 5, rectangle1.y + 5);
|
|
||||||
});
|
|
||||||
|
|
||||||
assertElements(h.elements, [
|
|
||||||
{ [ORIG_ID]: rectangle1.id },
|
|
||||||
{ id: rectangle1.id, selected: true },
|
|
||||||
{ id: rectangle2.id },
|
|
||||||
{ id: rectangle3.id },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("duplication z order with alt+drag for the highest z-ordered element should be +1 for the clone", () => {
|
|
||||||
const rectangle1 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
});
|
|
||||||
const rectangle2 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 10,
|
|
||||||
y: 10,
|
|
||||||
});
|
|
||||||
const rectangle3 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 20,
|
|
||||||
y: 20,
|
|
||||||
});
|
|
||||||
|
|
||||||
API.setElements([rectangle1, rectangle2, rectangle3]);
|
|
||||||
|
|
||||||
mouse.select(rectangle3);
|
|
||||||
Keyboard.withModifierKeys({ alt: true }, () => {
|
|
||||||
mouse.down(rectangle3.x + 5, rectangle3.y + 5);
|
|
||||||
mouse.up(rectangle3.x + 5, rectangle3.y + 5);
|
|
||||||
});
|
|
||||||
|
|
||||||
assertElements(h.elements, [
|
|
||||||
{ id: rectangle1.id },
|
|
||||||
{ id: rectangle2.id },
|
|
||||||
{ [ORIG_ID]: rectangle3.id },
|
|
||||||
{ id: rectangle3.id, selected: true },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
|
|
||||||
const rectangle1 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
});
|
|
||||||
const rectangle2 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 10,
|
|
||||||
y: 10,
|
|
||||||
});
|
|
||||||
const rectangle3 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 20,
|
|
||||||
y: 20,
|
|
||||||
});
|
|
||||||
|
|
||||||
API.setElements([rectangle1, rectangle2, rectangle3]);
|
|
||||||
|
|
||||||
mouse.select(rectangle1);
|
|
||||||
Keyboard.withModifierKeys({ alt: true }, () => {
|
|
||||||
mouse.down(rectangle1.x + 5, rectangle1.y + 5);
|
|
||||||
mouse.up(rectangle1.x + 5, rectangle1.y + 5);
|
|
||||||
});
|
|
||||||
|
|
||||||
assertElements(h.elements, [
|
|
||||||
{ [ORIG_ID]: rectangle1.id },
|
|
||||||
{ id: rectangle1.id, selected: true },
|
|
||||||
{ id: rectangle2.id },
|
|
||||||
{ id: rectangle3.id },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("duplication z order with alt+drag with grouped elements should consider the group together when determining z-index", () => {
|
|
||||||
const rectangle1 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
groupIds: ["group1"],
|
|
||||||
});
|
|
||||||
const rectangle2 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 10,
|
|
||||||
y: 10,
|
|
||||||
groupIds: ["group1"],
|
|
||||||
});
|
|
||||||
const rectangle3 = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
x: 20,
|
|
||||||
y: 20,
|
|
||||||
groupIds: ["group1"],
|
|
||||||
});
|
|
||||||
|
|
||||||
API.setElements([rectangle1, rectangle2, rectangle3]);
|
|
||||||
|
|
||||||
mouse.select(rectangle1);
|
|
||||||
Keyboard.withModifierKeys({ alt: true }, () => {
|
|
||||||
mouse.down(rectangle1.x + 5, rectangle1.y + 5);
|
|
||||||
mouse.up(rectangle1.x + 15, rectangle1.y + 15);
|
|
||||||
});
|
|
||||||
|
|
||||||
assertElements(h.elements, [
|
|
||||||
{ [ORIG_ID]: rectangle1.id },
|
|
||||||
{ [ORIG_ID]: rectangle2.id },
|
|
||||||
{ [ORIG_ID]: rectangle3.id },
|
|
||||||
{ id: rectangle1.id, selected: true },
|
|
||||||
{ id: rectangle2.id, selected: true },
|
|
||||||
{ id: rectangle3.id, selected: true },
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue