e2e: runner

dhilt · May 24, 2024 · 2ebdda3 · 2ebdda3
1 parent b8497f4
commit 2ebdda3
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 58 deletions.
diff --git a/tests/e2e/initialization.spec.ts b/tests/e2e/initialization.spec.ts
@@ -1,4 +1,5 @@
-import { test, expect, Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
+import { runScroller } from './misc/runner';
 
 const URL = '127.0.0.1:3000';
 
@@ -30,18 +31,9 @@ test('DOM + Workflow', async ({ page }) => {
   expect(name).toBe('vscroll');
 });
 
-const runScroller = async (page: Page, { settings = {}, devSettings = {} } = {}) =>
-  await page.evaluate(({ settings, devSettings }) => {
-    const { Scroller, datasource } = window['__vscroll__'];
-    datasource.settings = { ...datasource.settings, ...settings };
-    datasource.devSettings = { ...datasource.devSettings, ...devSettings };
-    const { workflow } = new Scroller(datasource);
-    window['__vscroll__'].workflow = workflow;
-  }, { settings, devSettings });
-
 test('Workflow & Adapter. Delayed initialization', async ({ page }) => {
   await page.goto(URL + '/need-run');
-  await runScroller(page, { devSettings: { initDelay: 100 } });
+  await runScroller(page, { datasourceDevSettings: { initDelay: 100 } });
 
   await page.waitForFunction(() => {
     const { workflow, datasource } = window['__vscroll__'];
@@ -58,7 +50,7 @@ test('Workflow & Adapter. Delayed initialization', async ({ page }) => {
 
 test('Workflow & Adapter. Disposing after delayed initialization', async ({ page }) => {
   await page.goto(URL + '/need-run');
-  await runScroller(page, { devSettings: { initDelay: 100 } });
+  await runScroller(page, { datasourceDevSettings: { initDelay: 100 } });
 
   await page.waitForTimeout(100);
   await page.evaluate(() => window['__vscroll__'].workflow.dispose());
@@ -71,7 +63,7 @@ test('Workflow & Adapter. Disposing after delayed initialization', async ({ page
 
 test('Workflow & Adapter. Disposing before delayed initialization', async ({ page }) => {
   await page.goto(URL + '/need-run');
-  await runScroller(page, { devSettings: { initDelay: 100 } });
+  await runScroller(page, { datasourceDevSettings: { initDelay: 100 } });
 
   await page.evaluate(() => window['__vscroll__'].workflow.dispose());
   await page.waitForTimeout(100);

diff --git a/tests/e2e/misc/itemsCounter.ts b/tests/e2e/misc/itemsCounter.ts
@@ -1,4 +1,3 @@
-
 import { Page } from '@playwright/test';
 import { Direction } from '../../../src/inputs/common';
 import { TESTS } from './types';

diff --git a/tests/e2e/misc/runner.ts b/tests/e2e/misc/runner.ts
@@ -0,0 +1,42 @@
+import { Page } from '@playwright/test';
+import { Config } from './types';
+
+export const runScroller = async (page: Page, config: Config = {}) =>
+  await page.evaluate(config => {
+    const { datasourceSettings, datasourceDevSettings, templateSettings } = config as Config;
+    const { Scroller, datasource } = window['__vscroll__'];
+    datasource.settings = { ...datasource.settings, ...datasourceSettings };
+    datasource.devSettings = { ...datasource.devSettings, ...datasourceDevSettings };
+
+    const viewport = window.document.querySelector('.viewport') as HTMLElement;
+    if (templateSettings?.viewportWidth) {
+      viewport.style.width = templateSettings.viewportWidth + 'px';
+    }
+    if (templateSettings?.viewportHeight) {
+      viewport.style.height = templateSettings.viewportHeight + 'px';
+    }
+    if (templateSettings?.horizontal) {
+      viewport.className += ' horizontal';
+    }
+    let styles = '';
+    if (templateSettings?.itemWidth) {
+      styles += `
+      .viewport .item { 
+        width: ${templateSettings.itemWidth}px;
+      }`;
+    }
+    if (templateSettings?.itemHeight) {
+      styles += `
+      .viewport .item { 
+        height: ${templateSettings.itemHeight}px;
+      }`;
+    }
+    if (styles) {
+      const styleSheet = document.createElement('style');
+      styleSheet.innerText = styles;
+      document.head.appendChild(styleSheet);
+    }
+
+    const { workflow } = new Scroller(datasource);
+    window['__vscroll__'].workflow = workflow;
+  }, config as unknown);
diff --git a/tests/e2e/misc/types.ts b/tests/e2e/misc/types.ts
@@ -39,8 +39,8 @@ type TemplateSettings = {
 export type Config<Custom = void> = {
   datasourceClass?: { new(): unknown };
   datasourceName?: string;
-  datasourceSettings: Settings;
-  datasourceDevSettings: DevSettings;
+  datasourceSettings?: Settings;
+  datasourceDevSettings?: DevSettings;
   templateSettings?: TemplateSettings;
   toThrow?: boolean;
   custom?: Custom;

diff --git a/tests/e2e/scroll-basic.spec.ts b/tests/e2e/scroll-basic.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect, Page } from '@playwright/test';
 import { ScrollResult, initializeItemsCounter } from './misc/itemsCounter';
 import { Config, It, MakeTest } from './misc/types';
+import { runScroller } from './misc/runner';
 import { Direction } from '../../src/inputs/common';
 
 // test.use({ headless: false });
@@ -166,53 +167,12 @@ const shouldScroll = async (config: Config<ICustom>, page: Page) => {
     .toHaveText(`${oppositeItemIndex[0]}) item #${oppositeItemIndex[0]}`);
 };
 
-const runScroller = async (page: Page, config: Config<ICustom>) =>
-  await page.evaluate(config => {
-    const { datasourceSettings, datasourceDevSettings, templateSettings } = config as Config<ICustom>;
-    const { Scroller, datasource } = window['__vscroll__'];
-    datasource.settings = { ...datasource.settings, ...datasourceSettings };
-    datasource.devSettings = { ...datasource.devSettings, ...datasourceDevSettings };
-
-    const viewport = window.document.querySelector('.viewport') as HTMLElement;
-    if (templateSettings?.viewportWidth) {
-      viewport.style.width = templateSettings.viewportWidth + 'px';
-    }
-    if (templateSettings?.viewportHeight) {
-      viewport.style.height = templateSettings.viewportHeight + 'px';
-    }
-    if (templateSettings?.horizontal) {
-      viewport.className += ' horizontal';
-    }
-    let styles = '';
-    if (templateSettings?.itemWidth) {
-      styles += `
-      .viewport .item { 
-        width: ${templateSettings.itemWidth}px;
-      }`;
-    }
-    if (templateSettings?.itemHeight) {
-      styles += `
-      .viewport .item { 
-        height: ${templateSettings.itemHeight}px;
-      }`;
-    }
-    if (styles) {
-      const styleSheet = document.createElement('style');
-      styleSheet.innerText = styles;
-      document.head.appendChild(styleSheet);
-    }
-
-    const { workflow } = new Scroller(datasource);
-    window['__vscroll__'].workflow = workflow;
-  }, config as unknown);
-
-
 const makeTest: MakeTest<ICustom> = ({ title, config, it }) =>
   test(title, ({ page }) => it({ config, page }));
 
 const shouldWork: It<ICustom> = async ({ config, page }) => {
   await page.goto(URL + '/need-run');
-  await runScroller(page, config);
+  await runScroller(page, config as Config);
   await shouldScroll(config, page);
   // await new Promise(r => setTimeout(r, 2000));
 };