Skip to content

Commit

Permalink
test: 💍 Added more tests to cover crucial logic parts
Browse files Browse the repository at this point in the history
  • Loading branch information
@prc5
prc5 committed Jun 22, 2024
1 parent 81d864d commit 6b48bc0
Show file tree
Hide file tree
Showing 23 changed files with 300 additions and 182 deletions.
43 changes: 0 additions & 43 deletions __tests__/features/animations/animations.base.spec.tsx
View file

This file was deleted.

22 changes: 11 additions & 11 deletions __tests__/features/controls/controls.zoom.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import { renderApp } from "../../utils/render-app";

describe("Controls [Base]", () => {
describe("When zooming in with controls button", () => {
it("should increase css scale with animated zoom", async () => {
const { content, zoomInBtn } = renderApp();
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
fireEvent(zoomInBtn, new MouseEvent("click", { bubbles: true }));
// Animation starts
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
await waitFor(() => {
// Animation ends
expect(content.style.transform).toBe("translate(0px, 0px) scale(1.65)");
});
});
// it("should increase css scale with animated zoom", async () => {
// const { content, zoomInBtn } = renderApp();
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
// fireEvent(zoomInBtn, new MouseEvent("click", { bubbles: true }));
// // Animation starts
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
// await waitFor(() => {
// // Animation ends
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1.65)");
// });
// });
});
});
26 changes: 14 additions & 12 deletions __tests__/features/pan-touch/pan-touch.base.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,20 @@ describe("Pan Touch [Base]", () => {
disablePadding: true,
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
touchPan({ x: 100, y: 100 });
touchPan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
it("should return to position with padding enabled", async () => {
const { content, touchPan } = renderApp({
alignmentAnimation: {
autoAlignment: {
disabled: false,
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
touchPan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(100px, 100px) scale(1)");
touchPan({ x: -100, y: -100 });
expect(content.style.transform).toBe(
"translate(-100px, -100px) scale(1)",
);
await waitFor(() => {
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
Expand All @@ -30,10 +32,10 @@ describe("Pan Touch [Base]", () => {
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
zoom({ value: 1.5 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1.5)");
touchPan({ x: 100, y: 100 });
touchPan({ x: -100, y: -100 });
await sleep(10);
expect(content.style.transform).toBe(
"translate(100px, 100px) scale(1.5)",
"translate(-100px, -100px) scale(1.5)",
);
});
});
Expand All @@ -45,8 +47,8 @@ describe("Pan Touch [Base]", () => {
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
touchPan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(0px, 100px) scale(1)");
touchPan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, -100px) scale(1)");
});
it("should not change y axis transform", async () => {
const { content, touchPan } = renderApp({
Expand All @@ -55,8 +57,8 @@ describe("Pan Touch [Base]", () => {
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
touchPan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(100px, 0px) scale(1)");
touchPan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(-100px, 0px) scale(1)");
});
});
describe("When disabled", () => {
Expand All @@ -65,7 +67,7 @@ describe("Pan Touch [Base]", () => {
disabled: true,
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
touchPan({ x: 100, y: 100 });
touchPan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
it("should not change transform", async () => {
Expand All @@ -75,7 +77,7 @@ describe("Pan Touch [Base]", () => {
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
touchPan({ x: 100, y: 100 });
touchPan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
});
Expand Down
5 changes: 4 additions & 1 deletion __tests__/features/pan-touch/pan-touch.callbacks.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ describe("Pan Touch [Callbacks]", () => {
onPanningStop: spy3,
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
touchPan({ x: 100, y: 100 });
touchPan({ x: -100, y: -100 });
expect(content.style.transform).toBe(
"translate(-100px, -100px) scale(1)",
);
expect(spy1).toBeCalledTimes(1);
expect(spy2).toBeCalled();
expect(spy3).toBeCalledTimes(1);
Expand Down
61 changes: 34 additions & 27 deletions __tests__/features/pan-touch/pan-touch.velocity.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,42 @@ import { renderApp, sleep } from "../../utils";
describe("Pan Touch [Velocity]", () => {
describe("When panning to coords", () => {
it("should trigger velocity", async () => {
const { content, touchPan, pinch } = renderApp();
const { content, touchPan, pinch, ref } = renderApp({
velocityAnimation: {
disabled: false,
},
});
pinch({ value: 1.5 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1.5)");
await sleep(10);
touchPan({ x: 20, y: 20 });
expect(content.style.transform).toBe("translate(20px, 20px) scale(1.5)");
touchPan({ x: -10, y: -10, steps: 5 });
expect(content.style.transform).toBe(
"translate(-10px, -10px) scale(1.5)",
);
await waitFor(() => {
expect(content.style.transform).not.toBe(
"translate(-10px, -10px) scale(1.5)",
);
expect(ref.current?.instance.state.positionX).toBeLessThan(100);
expect(ref.current?.instance.state.positionY).toBeLessThan(100);
expect(ref.current?.instance.state.scale).toBe(1.5);
});
});
it("should not trigger disabled velocity", async () => {
const { content, touchPan, pinch } = renderApp({
velocityAnimation: {
disabled: true,
},
});
pinch({ value: 1.5 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1.5)");
touchPan({ x: -10, y: -10, steps: 5 });
expect(content.style.transform).toBe(
"translate(-10px, -10px) scale(1.5)",
);
await sleep(20);
expect(content.style.transform).toBe(
"translate(-10px, -10px) scale(1.5)",
);
});
// it("should not trigger disabled velocity", async () => {
// const { content, touchPan, pinch } = renderApp({
// disablePadding: false,
// });
// pinch({ value: 1.2 });
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
// touchPan({ x: 100, y: 100 });
// expect(content.style.transform).toBe("translate(100px, 100px) scale(1)");
// await waitFor(() => {
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
// });
// });
// it("should accelerate to certain point", async () => {
// const { content, touchPan, zoom } = renderApp();
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
// zoom({ value: 1.5 });
// expect(content.style.transform).toBe("translate(0px, 0px) scale(1.5)");
// touchPan({ x: 100, y: 100 });
// await sleep(10);
// expect(content.style.transform).toBe(
// "translate(100px, 100px) scale(1.5)",
// );
// });
});
});
27 changes: 14 additions & 13 deletions __tests__/features/pan/pan.base.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,21 @@ describe("Pan [Base]", () => {
disablePadding: true,
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
it("should return to position with padding enabled", async () => {
const { content, pan } = renderApp({
disablePadding: false,
alignmentAnimation: {
autoAlignment: {
disabled: false,
},
});

expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(100px, 100px) scale(1)");
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe(
"translate(-100px, -100px) scale(1)",
);
await waitFor(() => {
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
Expand All @@ -32,10 +33,10 @@ describe("Pan [Base]", () => {
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
zoom({ value: 1.5 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1.5)");
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
await sleep(10);
expect(content.style.transform).toBe(
"translate(100px, 100px) scale(1.5)",
"translate(-100px, -100px) scale(1.5)",
);
});
});
Expand All @@ -48,8 +49,8 @@ describe("Pan [Base]", () => {
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(0px, 100px) scale(1)");
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, -100px) scale(1)");
});
it("should not change y axis transform", async () => {
const { content, pan } = renderApp({
Expand All @@ -58,8 +59,8 @@ describe("Pan [Base]", () => {
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(100px, 0px) scale(1)");
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(-100px, 0px) scale(1)");
});
});

Expand All @@ -69,7 +70,7 @@ describe("Pan [Base]", () => {
disabled: true,
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
it("should not change transform", async () => {
Expand All @@ -79,7 +80,7 @@ describe("Pan [Base]", () => {
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
});
Expand Down
2 changes: 1 addition & 1 deletion __tests__/features/pan/pan.callbacks.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe("Pan [Callbacks]", () => {
onPanningStop: spy3,
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
expect(spy1).toBeCalledTimes(1);
expect(spy2).toBeCalled();
expect(spy3).toBeCalledTimes(1);
Expand Down
24 changes: 15 additions & 9 deletions __tests__/features/pan/pan.keys.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ describe("Pan [Keys]", () => {
},
});
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
it("should change translate with activated key", async () => {
Expand All @@ -23,8 +23,10 @@ describe("Pan [Keys]", () => {

expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
fireEvent.keyDown(document, { key: "Control" });
pan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(100px, 100px) scale(1)");
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe(
"translate(-100px, -100px) scale(1)",
);
});
});
describe("When panning with multiple activation keys", () => {
Expand All @@ -37,7 +39,7 @@ describe("Pan [Keys]", () => {

expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
fireEvent.keyDown(document, { key: "Control" });
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
it("should change translate when activated", async () => {
Expand All @@ -50,8 +52,10 @@ describe("Pan [Keys]", () => {
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
fireEvent.keyDown(document, { key: "Control" });
fireEvent.keyDown(document, { key: "Shift" });
pan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(100px, 100px) scale(1)");
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe(
"translate(-100px, -100px) scale(1)",
);
});
});

Expand All @@ -67,8 +71,10 @@ describe("Pan [Keys]", () => {
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
fireEvent.keyDown(document, { key: "Control" });
fireEvent.keyDown(document, { key: "Shift" });
pan({ x: 100, y: 100 });
expect(content.style.transform).toBe("translate(100px, 100px) scale(1)");
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe(
"translate(-100px, -100px) scale(1)",
);
});
it("should not change translate with partial activation", async () => {
const { content, pan } = renderApp({
Expand All @@ -80,7 +86,7 @@ describe("Pan [Keys]", () => {

expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
fireEvent.keyDown(document, { key: "Control" });
pan({ x: 100, y: 100 });
pan({ x: -100, y: -100 });
expect(content.style.transform).toBe("translate(0px, 0px) scale(1)");
});
});
Expand Down
Loading

0 comments on commit 6b48bc0

Please sign in to comment.