Skip to content

Commit 2fb6928

Browse files
prc5prc5
committed
test: 💍 Added trackpad panning utils
1 parent 1c3de4a commit 2fb6928

5 files changed

Lines changed: 166 additions & 43 deletions

File tree

‎__tests__/features/pan-touch/pan-touch.base.spec.tsx‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -81,44 +81,4 @@ describe("Pan Touch [Base]", () => {
8181
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
8282
});
8383
});
84-
// describe("When max position is set", () => {
85-
// it("should not exceed max position", async () => {
86-
// const { content, touchPan } = renderApp({
87-
// maxPositionX: 20,
88-
// maxPositionY: 20,
89-
// doubleClick: {
90-
// disabled: true,
91-
// },
92-
// });
93-
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
94-
// touchPan({ x: 200, y: 200 });
95-
// expect(content.style.transform).toBe("translate(20px, 20px) scale(1)");
96-
// touchPan({ x: -20, y: -20 });
97-
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
98-
// });
99-
// it("should not exceed min position", async () => {
100-
// const { content, touchPan, zoom, ref } = renderApp({
101-
// minPositionX: 30,
102-
// minPositionY: 30,
103-
// onTransform: (ctx) => {
104-
// console.log(ctx.instance.state);
105-
// },
106-
// });
107-
// zoom({ value: 1.5 });
108-
// expect(content.style.transform).toBe("translate(30px, 30px) scale(1.5)");
109-
// touchPan({ x: -20, y: -20 });
110-
// await waitFor(() => {
111-
// expect(content.style.transform).toBe(
112-
// "translate(30px, 30px) scale(1.5)",
113-
// );
114-
// });
115-
// await sleep(10);
116-
// touchPan({ x: 50, y: 50 });
117-
// await waitFor(() => {
118-
// expect(content.style.transform).toBe(
119-
// "translate(80px, 80px) scale(1.5)",
120-
// );
121-
// });
122-
// });
123-
// });
12484
});

‎__tests__/features/pan-track-pad/pan-track-pad.base.spec.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { waitFor } from "@testing-library/react";
2+
3+
import { renderApp, sleep } from "../../utils";
4+
5+
describe("Pan TrackPad [Base]", () => {
6+
describe("When panning to coords", () => {
7+
it("should not change translate with disabled padding", async () => {
8+
const { content, trackPadPan } = renderApp({
9+
wheel: {
10+
disabled: true,
11+
},
12+
trackPadPanning: {
13+
disabled: false,
14+
},
15+
disablePadding: true,
16+
});
17+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
18+
trackPadPan({ x: -100, y: -100 });
19+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
20+
});
21+
it("should return to position with padding enabled", async () => {
22+
const { content, trackPadPan } = renderApp({
23+
wheel: {
24+
disabled: true,
25+
},
26+
trackPadPanning: {
27+
disabled: false,
28+
},
29+
autoAlignment: {
30+
disabled: false,
31+
},
32+
});
33+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
34+
trackPadPan({ x: -100, y: -100 });
35+
expect(content.style.transform).toBe(
36+
"translate(-100px, -100px) scale(1)",
37+
);
38+
await waitFor(() => {
39+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
40+
});
41+
});
42+
});
43+
describe("When locked axis", () => {
44+
it("should not change x axis transform", async () => {
45+
const { content, trackPadPan } = renderApp({
46+
wheel: {
47+
disabled: true,
48+
},
49+
trackPadPanning: {
50+
disabled: false,
51+
lockAxisX: true,
52+
},
53+
});
54+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
55+
trackPadPan({ x: -100, y: -100 });
56+
expect(content.style.transform).toBe("translate(0px, -100px) scale(1)");
57+
});
58+
it("should not change y axis transform", async () => {
59+
const { content, trackPadPan } = renderApp({
60+
wheel: {
61+
disabled: true,
62+
},
63+
trackPadPanning: {
64+
disabled: false,
65+
lockAxisY: true,
66+
},
67+
});
68+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
69+
trackPadPan({ x: -100, y: -100 });
70+
expect(content.style.transform).toBe("translate(-100px, 0px) scale(1)");
71+
});
72+
});
73+
describe("When disabled", () => {
74+
it("should not change transform", async () => {
75+
const { content, trackPadPan } = renderApp({
76+
disabled: true,
77+
});
78+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
79+
trackPadPan({ x: -100, y: -100 });
80+
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
81+
});
82+
});
83+
});

‎__tests__/utils/render-app.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface RenderApp {
2020
wrapper: HTMLElement;
2121
pan: (options: { x: number; y: number; steps?: number }) => void;
2222
touchPan: (options: { x: number; y: number; steps?: number }) => void;
23+
trackPadPan: (options: { x: number; y: number; steps?: number }) => void;
2324
zoom: (options: { value: number; center?: [number, number] }) => void;
2425
pinch: (options: {
2526
value: number;
@@ -283,6 +284,48 @@ export const renderApp = ({
283284
});
284285
};
285286

287+
const trackPadPan: RenderApp["trackPadPan"] = (options) => {
288+
const { x, y, steps = 1 } = options;
289+
if (!ref.current) throw new Error("ref.current is null");
290+
291+
waitForPreviousActionToEnd();
292+
293+
const xStep = x / steps;
294+
const yStep = y / steps;
295+
296+
userEvent.hover(content);
297+
298+
fireEvent(
299+
content,
300+
new WheelEvent("wheel", {
301+
bubbles: true,
302+
deltaX: 0,
303+
deltaY: 0,
304+
}),
305+
);
306+
[...Array(steps)].forEach((_, index) => {
307+
if (index !== steps - 1) {
308+
fireEvent(
309+
content,
310+
new WheelEvent("wheel", {
311+
bubbles: true,
312+
deltaX: -xStep * index,
313+
deltaY: -yStep * index,
314+
}),
315+
);
316+
} else {
317+
fireEvent(
318+
content,
319+
new WheelEvent("wheel", {
320+
bubbles: true,
321+
deltaX: -x,
322+
deltaY: -y,
323+
}),
324+
);
325+
}
326+
});
327+
};
328+
286329
return {
287330
...view,
288331
ref,
@@ -297,5 +340,6 @@ export const renderApp = ({
297340
pan,
298341
pinch,
299342
touchPan,
343+
trackPadPan,
300344
};
301345
};

‎src/models/context.model.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,12 +93,12 @@ export type ReactZoomPanPinchProps = {
9393
allowPanning?: boolean;
9494
excluded?: string[];
9595
};
96-
trackPadPanning: {
97-
disabled: boolean;
96+
trackPadPanning?: {
97+
disabled?: boolean;
9898
velocityDisabled?: boolean;
9999
lockAxisX?: boolean;
100100
lockAxisY?: boolean;
101-
activationKeys: string[] | ((keys: string[]) => boolean);
101+
activationKeys?: string[] | ((keys: string[]) => boolean);
102102
excluded?: string[];
103103
};
104104
doubleClick?: {

‎src/stories/docs/props.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,42 @@ export const wrapperPropsTable: ComponentProps = {
294294
"List of the class names or tags that should not activate this feature. (E.g. ['my-custom-class-name', 'div', 'a'])",
295295
},
296296
},
297+
trackPadPanning: {
298+
trackPadPanning: {
299+
type: [""],
300+
defaultValue: "",
301+
description: "",
302+
},
303+
disabled: {
304+
type: ["boolean"],
305+
defaultValue: String(initialSetup.panning.disabled),
306+
description: "Disable the panning feature.",
307+
},
308+
lockAxisX: {
309+
type: ["boolean"],
310+
defaultValue: String(initialSetup.panning.lockAxisX),
311+
description:
312+
"Disable the panning feature for the X axis (prevents horizontal panning).",
313+
},
314+
lockAxisY: {
315+
type: ["boolean"],
316+
defaultValue: String(initialSetup.panning.lockAxisY),
317+
description:
318+
"Disable the panning feature for the Y axis (prevents vertical panning).",
319+
},
320+
activationKeys: {
321+
type: ["string[]"],
322+
defaultValue: String(initialSetup.panning.activationKeys),
323+
description:
324+
"List of keys which, when held down, should activate this feature.",
325+
},
326+
excluded: {
327+
type: ["string[]"],
328+
defaultValue: String(initialSetup.panning.excluded),
329+
description:
330+
"List of the class names or tags that should not activate this feature. (E.g. ['my-custom-class-name', 'div', 'a'])",
331+
},
332+
},
297333
doubleClick: {
298334
doubleClick: {
299335
type: [""],

0 commit comments

Comments
 (0)