fix: full event in callback props

mkosir · Nov 30, 2024 · f70a7df · f70a7df
1 parent a5bff38
commit f70a7df
Show file tree

Hide file tree

Showing 21 changed files with 173 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -145,13 +145,13 @@ Track mouse and touch events on the whole window.
 **gyroscope**: _boolean_ ▶︎ `false`  
 Boolean to enable/disable device orientation detection.
 
-**onMove**: ({ **tiltAngleX**: _number_, **tiltAngleY**: _number_, **tiltAngleXPercentage**: _number_, **tiltAngleYPercentage**: _number_, **glareAngle**: _number_, **glareOpacity**: _number_, **eventType**: _string_ }) => _void_  
+**onMove**: ({ **tiltAngleX**: _number_, **tiltAngleY**: _number_, **tiltAngleXPercentage**: _number_, **tiltAngleYPercentage**: _number_, **glareAngle**: _number_, **glareOpacity**: _number_, **event**: _Event_ }) => _void_  
 Gets triggered when user moves on the component.
 
-**onEnter**: (**eventType**: _string_) => _void_  
+**onEnter**: (**event**: _Event_) => _void_  
 Gets triggered when user enters the component.
 
-**onLeave**: (**eventType**: _string_) => _void_  
+**onLeave**: (**event**: _Event_) => _void_  
 Gets triggered when user leaves the component.
 
 ## Gyroscope - Device Orientation

diff --git a/e2e/on-move-params.spec.ts b/e2e/on-move-params.spec.ts
@@ -47,7 +47,7 @@ test('should get move params max values calculated within tolerance (to avoid te
   expect(topRightParams.tiltAngleY).toBeLessThanOrEqual(-19);
   expect(topRightParams.tiltAngleXPercentage).toBeLessThanOrEqual(-95);
   expect(topRightParams.tiltAngleYPercentage).toBeLessThanOrEqual(-95);
-  expect(topRightParams.glareAngle).toBeGreaterThanOrEqual(44);
+  expect(topRightParams.glareAngle).toBeGreaterThanOrEqual(40);
   expect(topRightParams.glareOpacity).toBe(0);
 
   await content.getByTestId('bottomRight').hover({ position: { x: 25, y: 20 } });

diff --git a/src/features/glare/test/glare.test.tsx b/src/features/glare/test/glare.test.tsx
@@ -2,12 +2,12 @@ import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { OnMoveParams } from 'index';
+import { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Glare', () => {
   it('should calculate glare with top position when top position prop value is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -31,12 +31,15 @@ describe('Glare', () => {
       tiltAngleYPercentage: 100,
       glareAngle: 45,
       glareOpacity: 1,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate glare with right position when right position prop value is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -60,12 +63,15 @@ describe('Glare', () => {
       tiltAngleYPercentage: 100,
       glareAngle: 0,
       glareOpacity: 1,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate glare with bottom position when bottom position prop value is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -89,12 +95,15 @@ describe('Glare', () => {
       tiltAngleYPercentage: 100,
       glareAngle: 135,
       glareOpacity: 0.5,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate glare with left position when left position prop value is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -119,12 +128,15 @@ describe('Glare', () => {
       tiltAngleYPercentage: 100,
       glareAngle: -135,
       glareOpacity: 1,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate glare with all positions when all position prop value is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -148,12 +160,15 @@ describe('Glare', () => {
       tiltAngleYPercentage: -100,
       glareAngle: -45,
       glareOpacity: 1,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate glare with default position when glare position prop is not provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -176,12 +191,15 @@ describe('Glare', () => {
       tiltAngleYPercentage: 100,
       glareAngle: 45,
       glareOpacity: 0,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate flipped glare when flip vertically/horizontally props are enabled', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -207,7 +225,10 @@ describe('Glare', () => {
       tiltAngleYPercentage: 200,
       glareAngle: 45,
       glareOpacity: 0,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 });
diff --git a/src/features/glare/test/glareStyle.test.tsx b/src/features/glare/test/glareStyle.test.tsx
@@ -1,13 +1,14 @@
 import { screen, render, fireEvent } from '@testing-library/react';
 import React from 'react';
 
+import { OnMove } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Glare - Style', () => {
   it('should update glare style when hover on element', () => {
     vi.useFakeTimers();
 
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     const { container } = render(<TiltTest onMove={onMove} glareEnable={true} tiltEnable={false} />);
 

diff --git a/src/features/tilt/test/tiltAxis.test.tsx b/src/features/tilt/test/tiltAxis.test.tsx
@@ -2,12 +2,12 @@ import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { OnMoveParams } from 'index';
+import { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Tilt - Axis', () => {
   it('should disable y axis when only x tilt axis prop is enabled', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -29,12 +29,15 @@ describe('Tilt - Axis', () => {
       tiltAngleYPercentage: 0,
       glareAngle: 0,
       glareOpacity: 0,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should disable x axis when only y tilt axis prop is enabled', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -56,7 +59,10 @@ describe('Tilt - Axis', () => {
       tiltAngleYPercentage: 75,
       glareAngle: 0,
       glareOpacity: 0,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 });
diff --git a/src/features/tilt/test/tiltDisable.test.tsx b/src/features/tilt/test/tiltDisable.test.tsx
@@ -1,12 +1,12 @@
 import { screen, render, fireEvent } from '@testing-library/react';
 import React from 'react';
 
-import { OnMoveParams } from 'index';
+import { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Tilt - Disable', () => {
   it('should not calculate tilt when disabled', () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(<TiltTest tiltEnable={false} onMove={onMove} />);
 
@@ -19,7 +19,10 @@ describe('Tilt - Disable', () => {
       tiltAngleYPercentage: 0,
       glareAngle: 0,
       glareOpacity: 0,
-      eventType: 'touchmove',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'touchmove',
+      }),
     });
   });
 });
diff --git a/src/features/tilt/test/tiltManualAngle.test.tsx b/src/features/tilt/test/tiltManualAngle.test.tsx
@@ -2,12 +2,12 @@ import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { OnMoveParams } from 'index';
+import { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Tilt - Manual Angle', () => {
   it('should calculate tilt when manual input is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest tiltMaxAngleX={60} tiltMaxAngleY={60} tiltAngleXManual={60} tiltAngleYManual={45} onMove={onMove} />,
@@ -22,12 +22,15 @@ describe('Tilt - Manual Angle', () => {
       tiltAngleYPercentage: 75,
       glareAngle: 0,
       glareOpacity: 0,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate tilt when only X manual input is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -50,12 +53,15 @@ describe('Tilt - Manual Angle', () => {
       tiltAngleYPercentage: 0,
       glareAngle: 180,
       glareOpacity: 1,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 
   it('should calculate tilt when only Y manual input is provided', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(<TiltTest tiltMaxAngleX={60} tiltMaxAngleY={60} tiltAngleYManual={45} onMove={onMove} />);
 
@@ -68,7 +74,10 @@ describe('Tilt - Manual Angle', () => {
       tiltAngleYPercentage: 75,
       glareAngle: 0,
       glareOpacity: 0,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 });
diff --git a/src/features/tilt/test/tiltMaxAngle.test.tsx b/src/features/tilt/test/tiltMaxAngle.test.tsx
@@ -2,12 +2,12 @@ import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { OnMoveParams } from 'index';
+import { OnMove, OnMoveParams } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Tilt - Max Angle', () => {
   it('should constrain tilt angles to default constant when hover on element', async () => {
-    const onMove = vi.fn();
+    const onMove = vi.fn<OnMove>();
 
     render(
       <TiltTest
@@ -28,7 +28,10 @@ describe('Tilt - Max Angle', () => {
       tiltAngleYPercentage: 30,
       glareAngle: 0,
       glareOpacity: 0,
-      eventType: 'initial',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      event: expect.objectContaining({
+        type: 'initial',
+      }),
     });
   });
 });
diff --git a/src/features/tilt/test/tiltOnEnter.test.tsx b/src/features/tilt/test/tiltOnEnter.test.tsx
@@ -1,16 +1,18 @@
 import { screen, render, fireEvent } from '@testing-library/react';
 import React from 'react';
 
+import { OnEnter } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Tilt - onEnter', () => {
   it('should trigger onEnter event when mouse enters an element', () => {
-    const onEnter = vi.fn();
+    const onEnter = vi.fn<OnEnter>();
 
     render(<TiltTest onEnter={onEnter} />);
 
     fireEvent.mouseEnter(screen.getByText('test'));
 
-    expect(onEnter).toHaveBeenCalledWith('mouseenter');
+    const onEnterParams = onEnter.mock.calls[0][0];
+    expect(onEnterParams.event.type).toBe('mouseenter');
   });
 });
diff --git a/src/features/tilt/test/tiltOnLeave.test.tsx b/src/features/tilt/test/tiltOnLeave.test.tsx
@@ -1,16 +1,18 @@
 import { screen, render, fireEvent } from '@testing-library/react';
 import React from 'react';
 
+import { OnLeave } from 'index';
 import { TiltTest } from 'utils/TiltTest';
 
 describe('Tilt - onLeave', () => {
   it('should trigger onLeave event when mouse leaves an element', () => {
-    const onLeave = vi.fn();
+    const onLeave = vi.fn<OnLeave>();
 
     render(<TiltTest onLeave={onLeave} />);
 
     fireEvent.mouseLeave(screen.getByText('test'));
 
-    expect(onLeave).toHaveBeenCalledWith('mouseleave');
+    const onLeaveParams = onLeave.mock.calls[0][0];
+    expect(onLeaveParams.event.type).toBe('mouseleave');
   });
 });