fix e2e

Author: nasdan

packages/react-image-focal-point/e2e/basic.spec.ts

@@ -63,20 +63,21 @@ test.describe('basic with scroll', () => {
     await expect(focalPointButton).toHaveAttribute('style', 'left: 50%; top: 50%; cursor: grab;');
   });
 
+  const REAL_FIREROX_SCROLL_Y = 686; // Weird firefox scroll Y
+
   test('should place the focal point button on X=60% and Y=40% when it moves X=1180px and Y=1120px because page has 1000px of margin', async ({
     page,
+    browserName,
   }) => {
     const focalPointButton = page.getByRole('button', { name: 'Focal Point' });
-    const x = 1180;
-    const y = 1120;
-    const rect = await focalPointButton.boundingBox();
+    const scrollY = 800;
+    await page.mouse.wheel(0, scrollY);
 
-    await page.mouse.wheel(0, rect?.y! - 300);
-    // await focalPointButton.focus();
     await focalPointButton.dispatchEvent('mousedown');
     await expect(focalPointButton).toHaveAttribute('style', 'left: 50%; top: 50%; cursor: grabbing;');
-    // const x2 = rect?.x! + 180;
-    // const y2 = rect?.y! + 180;
+
+    const x = 1180;
+    const y = 1120 - (browserName === 'firefox' ? REAL_FIREROX_SCROLL_Y : scrollY);
     await page.mouse.move(x, y);
     await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grabbing;');
     await focalPointButton.dispatchEvent('mouseup');

packages/react-image-focal-point/package.json

@@ -26,7 +26,7 @@
     "clean": "rimraf dist",
     "test": "jest -c ./config/test/jest.js",
     "test:watch": "npm run test -- --watchAll -i",
-    "test:e2e-dev": "playwright test --debug --project=chromium"
+    "test:e2e": "playwright test"
   },
   "repository": {
     "type": "git",

packages/react-image-focal-point/src/image-focal-point.helpers.ts

@@ -16,9 +16,9 @@ export const onMove = (props: Props) => e => {
   if (props.canMove) {
     const event = e as MouseEvent;
     const containerBoundingRectangle = props.container.getBoundingClientRect();
-    const currentTarget = event.currentTarget as HTMLDivElement;
     const xPixels = event.clientX - containerBoundingRectangle.left;
     const yPixels = event.clientY - containerBoundingRectangle.top;
+    const currentTarget = event.currentTarget as HTMLDivElement;
     const x = parseToPercentage(xPixels, currentTarget.clientWidth);
     const y = parseToPercentage(yPixels, currentTarget.clientHeight);
     props.setX(x);

packages/react-image-focal-point/src/image-focal-point.hooks.ts

@@ -11,17 +11,10 @@ const DEFAULT_PERCENTAGE = 50;
 
 export const useFocalPoint = (props: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
-  const boundingRectangle = React.useRef<DOMRect | null>(null);
   const [x, setX] = React.useState<number>(props.focalPoint?.x ?? DEFAULT_PERCENTAGE);
   const [y, setY] = React.useState<number>(props.focalPoint?.y ?? DEFAULT_PERCENTAGE);
   const [canMove, setCanMove] = React.useState(false);
 
-  // React.useEffect(() => {
-  //   if (ref.current) {
-  //     boundingRectangle.current = ref.current.getBoundingClientRect();
-  //   }
-  // }, [ref, window.scrollX, window.scrollY]);
-
   return {
     ref,
     x,
@@ -30,7 +23,6 @@ export const useFocalPoint = (props: Props) => {
       setX,
       setY,
       container: ref.current!,
-      // boundingRectangle: boundingRectangle.current!,
       onChange: (x, y) => props.onChange({ x, y }),
       canMove,
     }),