chore(deps): update dependencies

e2e/consts.ts

@@ -0,0 +1 @@
+export const IFRAME_SELECTOR = 'iframe[title="storybook-preview-iframe"]';

e2e/events.spec.ts

@@ -1,14 +1,14 @@
 import { test, expect } from '@playwright/test';
 
-const IFRAME_LOCATOR = 'iframe[title="storybook-preview-iframe"]';
+import { IFRAME_SELECTOR } from './consts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
   await page.getByRole('link', { name: 'Event - Params' }).click();
 });
 
 test("should trigger 'onMove' event with 'mousemove' event type when mouse hovers tilt element", async ({ page }) => {
-  const content = page.frameLocator(IFRAME_LOCATOR);
+  const content = page.frameLocator(IFRAME_SELECTOR);
 
   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
   await expect(content.getByTestId('evenDescription')).toHaveText(
@@ -17,7 +17,7 @@ test("should trigger 'onMove' event with 'mousemove' event type when mouse hover
 });
 
 test("should trigger 'onMove' event with 'autoreset' event type when mouse leaves tilt element", async ({ page }) => {
-  const content = page.frameLocator(IFRAME_LOCATOR);
+  const content = page.frameLocator(IFRAME_SELECTOR);
 
   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
   await content.getByText('Track events:').hover();
@@ -27,7 +27,7 @@ test("should trigger 'onMove' event with 'autoreset' event type when mouse leave
 });
 
 test("should trigger 'onEnter' event with 'mouseenter' event type when mouse enters tilt element", async ({ page }) => {
-  const content = page.frameLocator(IFRAME_LOCATOR);
+  const content = page.frameLocator(IFRAME_SELECTOR);
 
   await content.getByLabel('onMove').uncheck();
   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
@@ -37,7 +37,7 @@ test("should trigger 'onEnter' event with 'mouseenter' event type when mouse ent
 });
 
 test("should trigger 'onLeave' event with 'mouseleave' event type when mouse enters tilt element", async ({ page }) => {
-  const content = page.frameLocator(IFRAME_LOCATOR);
+  const content = page.frameLocator(IFRAME_SELECTOR);
 
   await content.getByLabel('onMove').uncheck();
   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });

e2e/global.setup.ts

@@ -0,0 +1,13 @@
+// import { test as setup } from '@playwright/test';
+
+// setup('do login', async ({ page }) => {
+//   await page.goto('/');
+//   await page.getByLabel('User Name').fill('user');
+//   await page.getByLabel('Password').fill('password');
+//   await page.getByText('Sign in').click();
+
+//   // Wait until the page actually signs in.
+//   await expect(page.getByText('Hello, user!')).toBeVisible();
+
+//   await page.context().storageState({ path: STORAGE_STATE });
+// });

e2e/on-move-params.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 
 import { OnMoveParams } from 'index';
 
-const IFRAME_LOCATOR = 'iframe[title="storybook-preview-iframe"]';
+import { IFRAME_SELECTOR } from './consts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -12,7 +12,7 @@ test.beforeEach(async ({ page }) => {
 test('should get max values of move params rendered when mouse is positioned at top left corner of tilt element', async ({
   page,
 }) => {
-  const content = page.frameLocator(IFRAME_LOCATOR);
+  const content = page.frameLocator(IFRAME_SELECTOR);
 
   await content.getByTestId('topLeft').hover({ position: { x: 10, y: 10 } });
   await expect(content.getByTestId('tiltAngleX')).toHaveText('-20.00° / -100.00%');
@@ -22,7 +22,7 @@ test('should get max values of move params rendered when mouse is positioned at
 });
 
 test('should get max values of move params when mouse is positioned at corners of tilt element', async ({ page }) => {
-  const content = page.frameLocator(IFRAME_LOCATOR);
+  const content = page.frameLocator(IFRAME_SELECTOR);
 
   await content.getByTestId('topLeft').hover({ position: { x: 10, y: 10 } });
 
@@ -74,7 +74,7 @@ test('should get max values of move params when mouse is positioned at corners o
 });
 
 test('should get half of max value when mouse is positioned in the middle of tilt element', async ({ page }) => {
-  const content = page.frameLocator(IFRAME_LOCATOR);
+  const content = page.frameLocator(IFRAME_SELECTOR);
 
   await content.getByTestId('topMidLeft').hover({ position: { x: 10, y: 10 } });
 

playwright.config.ts

@@ -20,39 +20,50 @@ export default defineConfig({
   },
 
   projects: [
+    {
+      name: 'setup',
+      testMatch: /global.setup\.ts/,
+    },
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
+      dependencies: ['setup'],
     },
 
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
+      dependencies: ['setup'],
     },
 
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
+      dependencies: ['setup'],
     },
 
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',
     //   use: { ...devices['Pixel 5'] },
+    //   dependencies: ['setup'],
     // },
     // {
     //   name: 'Mobile Safari',
     //   use: { ...devices['iPhone 12'] },
+    //   dependencies: ['setup'],
     // },
 
     /* Test against branded browsers. */
     // {
     //   name: 'Microsoft Edge',
     //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    //   dependencies: ['setup'],
     // },
     // {
     //   name: 'Google Chrome',
     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    //   dependencies: ['setup'],
     // },
   ],