marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-12-03 19:18:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix tests

Browse Source
This commit is contained in:
Mark Tolmacs
2025-03-28 18:17:39 +01:00
parent ea5ad1412c
commit e90350b7d1
9 changed files with 432 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/excalidraw/actions/actionFlip.test.tsx
View File

@@ -87,6 +87,16 @@ describe("flipping arrowheads", () => {
await render(<Excalidraw />);
});
// UX RATIONALE: If we flip bound arrows by the center axes then there could
// be a case where the bindable objects are offset and the arrow would lay
// outside both bindable objects binding range, yet remain bound to then,
// resulting in a jump on movement.
//
// We are aware that 2+ point simple arrows behave incorrectly when flipped
// this way but it was decided that there is no known use case for this so
// left as it is.
//
// Demo: https://excalidraw.com/#json=isE-S8LqNlD1u-LsS8Ezz,iZZ09PPasp6OWbGtJwOUGQ
it("flipping bound arrow should flip arrowheads only", () => {
const rect = API.createElement({
type: "rectangle",
@@ -123,6 +133,7 @@ describe("flipping arrowheads", () => {
expect(API.getElement(arrow).endArrowhead).toBe("arrow");
});
// UX RATIONALE: See above for the reasoning.
it("flipping bound arrow should flip arrowheads only 2", () => {
const rect = API.createElement({
type: "rectangle",
@@ -164,7 +175,9 @@ describe("flipping arrowheads", () => {
expect(API.getElement(arrow).endArrowhead).toBe("circle");
});
it("flipping unbound arrow shouldn't flip arrowheads", () => {
// UX RATIONALE: Unbound arrows are not constrained by other elements and
// should behave like any other element when flipped for consisency.
it("flipping unbound arrow should mirror on horizontal or vertical axis", () => {
const arrow = API.createElement({
type: "arrow",
id: "arrow1",

130
packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
View File

@@ -198,7 +198,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "99.58947",
"height": "99.23572",
"id": "id172",
"index": "a2",
"isDeleted": false,
@@ -212,8 +212,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"99.58947",
"99.58947",
"96.42891",
"99.23572",
],
],
"roughness": 1,
@@ -228,8 +228,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 40,
"width": "99.58947",
"x": 0,
"width": "96.42891",
"x": "3.53553",
"y": 0,
}
`;
@@ -295,10 +295,10 @@ History {
"deleted": {
"endBinding": {
"elementId": "id171",
"focus": "0.01099",
"focus": "0.01140",
"gap": 5,
},
"height": "0.96335",
"height": "1.00000",
"points": [
[
0,
@@ -306,22 +306,22 @@ History {
],
[
"92.92893",
"-0.96335",
"-1.00000",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.03005",
"focus": "0.03119",
"gap": 5,
},
},
"inserted": {
"endBinding": {
"elementId": "id171",
"focus": "-0.02041",
"focus": "-0.02000",
"gap": 5,
},
"height": "0.03665",
"height": 0,
"points": [
[
0,
@@ -329,12 +329,12 @@ History {
],
[
"92.92893",
"0.03665",
0,
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.01884",
"focus": "0.02000",
"gap": 5,
},
},
@@ -390,29 +390,27 @@ History {
"focus": 0,
"gap": 1,
},
"height": "99.58947",
"height": "99.23572",
"points": [
[
0,
0,
],
[
"99.58947",
"99.58947",
"96.42891",
"99.23572",
],
],
"startBinding": null,
"width": "99.58947",
"x": 0,
"y": 0,
},
"inserted": {
"endBinding": {
"elementId": "id171",
"focus": "0.01099",
"focus": "0.01140",
"gap": 5,
},
"height": "0.96335",
"height": "1.00000",
"points": [
[
0,
@@ -420,17 +418,15 @@ History {
],
[
"92.92893",
"-0.96335",
"-1.00000",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.03005",
"focus": "0.03119",
"gap": 5,
},
"width": "92.92893",
"x": "3.53553",
"y": "0.96335",
"y": "1.00000",
},
},
"id175" => Delta {
@@ -570,7 +566,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -584,8 +580,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -808,7 +804,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -824,8 +820,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 30,
"width": "96.46447",
"x": 150,
"width": "0.00000",
"x": "146.46447",
"y": 0,
}
`;
@@ -925,13 +921,11 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
"startBinding": null,
"width": "96.46447",
"x": 150,
},
"inserted": {
"endBinding": {
@@ -954,8 +948,6 @@ History {
"focus": 0,
"gap": 5,
},
"width": "0.00000",
"x": "146.46447",
},
},
},
@@ -1082,7 +1074,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -1096,8 +1088,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -2334,7 +2326,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "369.21589",
"height": "369.23631",
"id": "id186",
"index": "a2",
"isDeleted": false,
@@ -2348,8 +2340,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"496.84035",
"-369.21589",
"496.83418",
"-369.23631",
],
],
"roughness": 1,
@@ -2368,9 +2360,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 10,
"width": "496.84035",
"x": "2.18463",
"y": "-38.80748",
"width": "496.83418",
"x": "2.19080",
"y": "-38.78706",
}
`;
@@ -2507,7 +2499,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -2525,8 +2517,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -15250,7 +15242,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -15263,7 +15255,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -15558,7 +15550,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -15576,8 +15568,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -16178,7 +16170,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -16196,8 +16188,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -16798,7 +16790,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -16816,8 +16808,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -17201,7 +17193,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -17218,7 +17210,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -17486,7 +17478,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -17504,8 +17496,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -17929,7 +17921,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -17947,7 +17939,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -18215,7 +18207,7 @@ History {
0,
],
[
"96.46447",
"92.92893",
0,
],
],
@@ -18233,8 +18225,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "96.46447",
"x": 0,
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {

136
packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
View File

@@ -101,3 +101,139 @@ exports[`move element > rectangle 5`] = `
"y": 40,
}
`;
exports[`move element > rectangles with binding arrow 5`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id2",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 100,
"id": "id0",
"index": "a0",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": {
"type": 3,
},
"seed": 1278240551,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 4,
"versionNonce": 1723083209,
"width": 100,
"x": 0,
"y": 0,
}
`;
exports[`move element > rectangles with binding arrow 6`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id2",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 300,
"id": "id1",
"index": "a1",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": {
"type": 3,
},
"seed": 1150084233,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 7,
"versionNonce": 745419401,
"width": 300,
"x": 201,
"y": 2,
}
`;
exports[`move element > rectangles with binding arrow 7`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": null,
"customData": undefined,
"elbowed": false,
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id1",
"focus": "-0.40764",
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "82.18136",
"id": "id2",
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
"points": [
[
0,
0,
],
[
"93.92893",
"82.18136",
],
],
"roughness": 1,
"roundness": {
"type": 2,
},
"seed": 1604849351,
"startArrowhead": null,
"startBinding": {
"elementId": "id0",
"focus": "-0.49801",
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 11,
"versionNonce": 1051383431,
"width": "93.92893",
"x": "103.53553",
"y": "50.01536",
}
`;

13
packages/excalidraw/tests/move.test.tsx
View File

@@ -109,8 +109,10 @@ describe("move element", () => {
expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
expect([rectA.x, rectA.y]).toEqual([0, 0]);
expect([rectB.x, rectB.y]).toEqual([200, 0]);
expect([arrow.x, arrow.y]).toEqual([110, 50]);
expect([arrow.width, arrow.height]).toEqual([80, 80]);
expect([Math.round(arrow.x), Math.round(arrow.y)]).toEqual([104, 50]);
expect([Math.round(arrow.width), Math.round(arrow.height)]).toEqual([
93, 81,
]);
renderInteractiveScene.mockClear();
renderStaticScene.mockClear();
@@ -128,8 +130,11 @@ describe("move element", () => {
expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
expect([rectA.x, rectA.y]).toEqual([0, 0]);
expect([rectB.x, rectB.y]).toEqual([201, 2]);
expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[107.07, 47.07]]);
expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[86.86, 87.3]]);
expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[103.53, 50.01]]);
expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([
[93.9289, 82.1813],
]);
h.elements.forEach((element) => expect(element).toMatchSnapshot());
});

14
packages/excalidraw/tests/rotate.test.tsx
View File

@@ -3,6 +3,8 @@ import { expect } from "vitest";
import { reseed } from "@excalidraw/common";
import "@excalidraw/utils/test-utils";
import { Excalidraw } from "../index";
import { UI } from "./helpers/ui";
@@ -71,14 +73,16 @@ test("unselected bound arrows update when rotating their target elements", async
expect(ellipseArrow.endBinding?.elementId).toEqual(ellipse.id);
expect(ellipseArrow.x).toEqual(0);
expect(ellipseArrow.y).toEqual(0);
expect(ellipseArrow.points[0]).toEqual([0, 0]);
expect(ellipseArrow.points[1][0]).toBeCloseTo(48.98, 1);
expect(ellipseArrow.points[1][1]).toBeCloseTo(125.79, 1);
expect(ellipseArrow.points).toCloselyEqualPoints([
[0, 0],
[90.1827, 98.5896],
]);
expect(textArrow.endBinding?.elementId).toEqual(text.id);
expect(textArrow.x).toEqual(360);
expect(textArrow.y).toEqual(300);
expect(textArrow.points[0]).toEqual([0, 0]);
expect(textArrow.points[1][0]).toBeCloseTo(-94, 0);
expect(textArrow.points[1][1]).toBeCloseTo(-116.1, 0);
expect(textArrow.points[1][0]).toBeCloseTo(-95, 0);
expect(textArrow.points[1][1]).toBeCloseTo(-129.1, 0);
});