added controlled and styled e2e

nasdan · nasdan · commit 3647ab01ab2c · 2023-02-13T14:16:24.000+01:00
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,7 +4,7 @@ on:
   pull_request:
 
 jobs:
-  ci:
+  unit-tests:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repository
@@ -20,3 +20,19 @@ jobs:
 
       - name: Tests
         run: npm test
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+
+      - name: Add NPM registry
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install
+        run: npm ci
+
+      - name: Tests
+        run: npm run test:e2e
diff --git a/packages/e2e-react-web-app/src/pages/basic-with-margin.tsx b/packages/e2e-react-web-app/src/pages/basic-with-margin.tsx
@@ -1,6 +1,6 @@
 import '@lemoncode/react-image-focal-point/style.css';
 import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
-import classes from './basic-with-margin.module.css';
+import classes from './with-margin.module.css';
 
 const IMAGE_URL = 'landscape.jpg';
 
diff --git a/packages/e2e-react-web-app/src/pages/basic-with-scroll.tsx b/packages/e2e-react-web-app/src/pages/basic-with-scroll.tsx
@@ -1,6 +1,6 @@
 import '@lemoncode/react-image-focal-point/style.css';
 import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
-import classes from './basic-with-scroll.module.css';
+import classes from './with-scroll.module.css';
 
 const IMAGE_URL = 'landscape.jpg';
 
diff --git a/packages/e2e-react-web-app/src/pages/controlled-with-margin.tsx b/packages/e2e-react-web-app/src/pages/controlled-with-margin.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint, FocalPoint } from '@lemoncode/react-image-focal-point';
+import classes from './with-margin.module.css';
+
+const IMAGE_URL = 'landscape.jpg';
+
+export const ControlledWithMargin = () => {
+  const [focalPoint, setFocalPoint] = React.useState<FocalPoint>({ x: 5, y: 10 });
+  return (
+    <div className={classes.root}>
+      <ImageFocalPoint src={IMAGE_URL} focalPoint={focalPoint} onChange={setFocalPoint} />
+    </div>
+  );
+};
diff --git a/packages/e2e-react-web-app/src/pages/controlled-with-scroll.tsx b/packages/e2e-react-web-app/src/pages/controlled-with-scroll.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint, FocalPoint } from '@lemoncode/react-image-focal-point';
+import classes from './with-scroll.module.css';
+
+const IMAGE_URL = 'landscape.jpg';
+
+export const ControlledWithScroll = () => {
+  const [focalPoint, setFocalPoint] = React.useState<FocalPoint>({ x: 5, y: 10 });
+  return (
+    <div className={classes.root}>
+      <ImageFocalPoint src={IMAGE_URL} focalPoint={focalPoint} onChange={setFocalPoint} />
+    </div>
+  );
+};
diff --git a/packages/e2e-react-web-app/src/pages/controlled.tsx b/packages/e2e-react-web-app/src/pages/controlled.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint, FocalPoint } from '@lemoncode/react-image-focal-point';
+
+const IMAGE_URL = 'landscape.jpg';
+
+export const Controlled = () => {
+  const [focalPoint, setFocalPoint] = React.useState<FocalPoint>({ x: 5, y: 10 });
+  return <ImageFocalPoint src={IMAGE_URL} focalPoint={focalPoint} onChange={setFocalPoint} />;
+};
diff --git a/packages/e2e-react-web-app/src/pages/index.ts b/packages/e2e-react-web-app/src/pages/index.ts
@@ -1,3 +1,9 @@
 export * from './basic';
 export * from './basic-with-margin';
 export * from './basic-with-scroll';
+export * from './controlled';
+export * from './controlled-with-margin';
+export * from './controlled-with-scroll';
+export * from './styled';
+export * from './styled-with-margin';
+export * from './styled-with-scroll';
diff --git a/packages/e2e-react-web-app/src/pages/styled-with-margin.tsx b/packages/e2e-react-web-app/src/pages/styled-with-margin.tsx
@@ -0,0 +1,22 @@
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+import styledClasses from './styled.module.css';
+import classes from './with-margin.module.css';
+
+const IMAGE_URL = 'landscape.jpg';
+
+export const StyledWithMargin = () => {
+  return (
+    <div className={classes.root}>
+      <ImageFocalPoint
+        classes={{
+          root: styledClasses.imageFocalPoint,
+          image: styledClasses.image,
+          focalPoint: styledClasses.focalPoint,
+        }}
+        src={IMAGE_URL}
+        onChange={console.log}
+      />
+    </div>
+  );
+};
diff --git a/packages/e2e-react-web-app/src/pages/styled-with-scroll.tsx b/packages/e2e-react-web-app/src/pages/styled-with-scroll.tsx
@@ -0,0 +1,22 @@
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+import styledClasses from './styled.module.css';
+import classes from './with-scroll.module.css';
+
+const IMAGE_URL = 'landscape.jpg';
+
+export const StyledWithScroll = () => {
+  return (
+    <div className={classes.root}>
+      <ImageFocalPoint
+        classes={{
+          root: styledClasses.imageFocalPoint,
+          image: styledClasses.image,
+          focalPoint: styledClasses.focalPoint,
+        }}
+        src={IMAGE_URL}
+        onChange={console.log}
+      />
+    </div>
+  );
+};
diff --git a/packages/e2e-react-web-app/src/pages/styled.module.css b/packages/e2e-react-web-app/src/pages/styled.module.css
@@ -0,0 +1,12 @@
+.image-focal-point {
+  width: 500px;
+  height: 500px;
+}
+
+.image {
+  border-radius: 10px;
+}
+
+.focal-point {
+  background-color: rgba(255, 0, 0, 0.4);
+}
diff --git a/packages/e2e-react-web-app/src/pages/styled.tsx b/packages/e2e-react-web-app/src/pages/styled.tsx
@@ -0,0 +1,15 @@
+import '@lemoncode/react-image-focal-point/style.css';
+import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
+import classes from './styled.module.css';
+
+const IMAGE_URL = 'landscape.jpg';
+
+export const Styled = () => {
+  return (
+    <ImageFocalPoint
+      classes={{ root: classes.imageFocalPoint, image: classes.image, focalPoint: classes.focalPoint }}
+      src={IMAGE_URL}
+      onChange={console.log}
+    />
+  );
+};
diff --git a/packages/e2e-react-web-app/src/pages/with-margin.module.css b/packages/e2e-react-web-app/src/pages/with-margin.module.css
diff --git a/packages/e2e-react-web-app/src/pages/with-scroll.module.css b/packages/e2e-react-web-app/src/pages/with-scroll.module.css
diff --git a/packages/e2e-react-web-app/src/router.tsx b/packages/e2e-react-web-app/src/router.tsx
@@ -1,11 +1,27 @@
 import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router-dom';
-import { Basic, BasicWithMargin, BasicWithScroll } from './pages';
+import {
+  Basic,
+  BasicWithMargin,
+  BasicWithScroll,
+  Controlled,
+  ControlledWithMargin,
+  ControlledWithScroll,
+  Styled,
+  StyledWithMargin,
+  StyledWithScroll,
+} from './pages';
 
 const routes = {
   root: '/',
   basic: '/basic',
   basicWithMargin: '/basic-with-margin',
   basicWithScroll: '/basic-with-scroll',
+  controlled: '/controlled',
+  controlledWithMargin: '/controlled-with-margin',
+  controlledWithScroll: '/controlled-with-scroll',
+  styled: '/styled',
+  styledWithMargin: '/styled-with-margin',
+  styledWithScroll: '/styled-with-scroll',
 };
 
 export const router = createBrowserRouter(
@@ -15,6 +31,12 @@ export const router = createBrowserRouter(
       <Route path={routes.basic} element={<Basic />} />
       <Route path={routes.basicWithMargin} element={<BasicWithMargin />} />
       <Route path={routes.basicWithScroll} element={<BasicWithScroll />} />
+      <Route path={routes.controlled} element={<Controlled />} />
+      <Route path={routes.controlledWithMargin} element={<ControlledWithMargin />} />
+      <Route path={routes.controlledWithScroll} element={<ControlledWithScroll />} />
+      <Route path={routes.styled} element={<Styled />} />
+      <Route path={routes.styledWithMargin} element={<StyledWithMargin />} />
+      <Route path={routes.styledWithScroll} element={<StyledWithScroll />} />
     </>
   )
 );
diff --git a/packages/react-image-focal-point/e2e/basic.spec.ts b/packages/react-image-focal-point/e2e/basic.spec.ts
@@ -1,8 +1,10 @@
 import { test, expect } from '@playwright/test';
 
+const BASE_URL = '/basic';
+
 test.describe('basic', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/');
+    await page.goto(BASE_URL);
   });
 
   test('should place the focal point button on X=50% and Y=50% on init', async ({ page }) => {
@@ -27,7 +29,7 @@ test.describe('basic', () => {
 
 test.describe('basic with margin', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/basic-with-margin');
+    await page.goto(`${BASE_URL}-with-margin`);
   });
 
   test('should place the focal point button on X=50% and Y=50% on init', async ({ page }) => {
@@ -54,7 +56,7 @@ test.describe('basic with margin', () => {
 
 test.describe('basic with scroll', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('/basic-with-scroll');
+    await page.goto(`${BASE_URL}-with-scroll`);
   });
 
   test('should place the focal point button on X=50% and Y=50% on init', async ({ page }) => {
@@ -63,7 +65,7 @@ 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
+  const REAL_FIREFOX_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,
@@ -72,12 +74,13 @@ test.describe('basic with scroll', () => {
     const focalPointButton = page.getByRole('button', { name: 'Focal Point' });
     const scrollY = 800;
     await page.mouse.wheel(0, scrollY);
+    await page.waitForLoadState('load');
 
     await focalPointButton.dispatchEvent('mousedown');
     await expect(focalPointButton).toHaveAttribute('style', 'left: 50%; top: 50%; cursor: grabbing;');
 
     const x = 1180;
-    const y = 1120 - (browserName === 'firefox' ? REAL_FIREROX_SCROLL_Y : scrollY);
+    const y = 1120 - (browserName === 'firefox' ? REAL_FIREFOX_SCROLL_Y : scrollY);
     await page.mouse.move(x, y);
     await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grabbing;');
     await focalPointButton.dispatchEvent('mouseup');
diff --git a/packages/react-image-focal-point/e2e/controlled.spec.ts b/packages/react-image-focal-point/e2e/controlled.spec.ts
@@ -0,0 +1,89 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = '/controlled';
+
+test.describe('controlled', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE_URL);
+  });
+
+  test('should place the focal point button on X=5% and Y=10% on init', async ({ page }) => {
+    const focalPointButton = page.getByRole('button', { name: 'Focal Point' });
+
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 5%; top: 10%; cursor: grab;');
+  });
+
+  test('should place the focal point button on X=60% and Y=40% when it moves X=180px and Y=120px', async ({ page }) => {
+    const focalPointButton = page.getByRole('button', { name: 'Focal Point' });
+    const x = 180;
+    const y = 120;
+
+    await focalPointButton.dispatchEvent('mousedown');
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 5%; top: 10%; cursor: grabbing;');
+    await page.mouse.move(x, y);
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grabbing;');
+    await focalPointButton.dispatchEvent('mouseup');
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grab;');
+  });
+});
+
+test.describe('controlled with margin', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`${BASE_URL}-with-margin`);
+  });
+
+  test('should place the focal point button on X=5% and Y=10% on init', async ({ page }) => {
+    const focalPointButton = page.getByRole('button', { name: 'Focal Point' });
+
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 5%; top: 10%; cursor: grab;');
+  });
+
+  test('should place the focal point button on X=60% and Y=40% when it moves X=380px and Y=320px because page has 200px of margin', async ({
+    page,
+  }) => {
+    const focalPointButton = page.getByRole('button', { name: 'Focal Point' });
+    const x = 380;
+    const y = 320;
+
+    await focalPointButton.dispatchEvent('mousedown');
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 5%; top: 10%; cursor: grabbing;');
+    await page.mouse.move(x, y);
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grabbing;');
+    await focalPointButton.dispatchEvent('mouseup');
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grab;');
+  });
+});
+
+test.describe('controlled with scroll', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`${BASE_URL}-with-scroll`);
+  });
+
+  test('should place the focal point button on X=5% and Y=10% on init', async ({ page }) => {
+    const focalPointButton = page.getByRole('button', { name: 'Focal Point' });
+
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 5%; top: 10%; cursor: grab;');
+  });
+
+  const REAL_FIREFOX_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 scrollY = 800;
+    await page.mouse.wheel(0, scrollY);
+    await page.waitForLoadState('load');
+
+    await focalPointButton.dispatchEvent('mousedown');
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 5%; top: 10%; cursor: grabbing;');
+
+    const x = 1180;
+    const y = 1120 - (browserName === 'firefox' ? REAL_FIREFOX_SCROLL_Y : scrollY);
+    await page.mouse.move(x, y);
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grabbing;');
+    await focalPointButton.dispatchEvent('mouseup');
+    await expect(focalPointButton).toHaveAttribute('style', 'left: 60%; top: 40%; cursor: grab;');
+  });
+});
diff --git a/packages/react-image-focal-point/e2e/styled.spec.ts b/packages/react-image-focal-point/e2e/styled.spec.ts
diff --git a/packages/react-image-focal-point/package.json b/packages/react-image-focal-point/package.json
diff --git a/packages/react-image-focal-point/src/image-focal-point.component.spec.tsx b/packages/react-image-focal-point/src/image-focal-point.component.spec.tsx
diff --git a/packages/react-image-focal-point/tsconfig.json b/packages/react-image-focal-point/tsconfig.json
diff --git a/turbo.json b/turbo.json
