From 4a4881049e280db045ad047d547758df011f6d9b Mon Sep 17 00:00:00 2001 From: techfg Date: Sun, 24 Mar 2024 08:22:24 -0400 Subject: [PATCH] test: multiple page tests for #492 (#493) --- src/lib/service-worker/fetch.ts | 6 +- tests/index.html | 342 +++++++++--------- .../event-forwarding/event-forwarding.spec.ts | 38 +- .../integrations/event-forwarding/index.html | 8 + .../facebook-pixel/facebook-pixel.spec.ts | 65 +++- tests/integrations/gtm/gtm.spec.ts | 88 +++-- tests/integrations/gtm/index.html | 16 +- tests/platform/event/event.spec.ts | 32 +- tests/platform/window/window.spec.ts | 34 +- 9 files changed, 402 insertions(+), 227 deletions(-) diff --git a/src/lib/service-worker/fetch.ts b/src/lib/service-worker/fetch.ts index e6ff35db..cd576f20 100644 --- a/src/lib/service-worker/fetch.ts +++ b/src/lib/service-worker/fetch.ts @@ -1,7 +1,7 @@ -import { debug } from '../utils'; -import type { MainAccessRequest, MainAccessResponse } from '../types'; import Sandbox from '@sandbox'; import SandboxDebug from '@sandbox-debug'; +import type { MainAccessRequest, MainAccessResponse } from '../types'; +import { debug } from '../utils'; export const onFetchServiceWorkerRequest = (ev: FetchEvent) => { const req = ev.request; @@ -45,7 +45,7 @@ const getClientByTab = (clients: Client[], msgId: string) => { } return client; -} +}; const sendMessageToSandboxFromServiceWorker = (accessReq: MainAccessRequest) => new Promise(async (resolve) => { diff --git a/tests/index.html b/tests/index.html index 2030f71a..06f8cab1 100644 --- a/tests/index.html +++ b/tests/index.html @@ -1,172 +1,174 @@ - - - - - Partytown Tests - - - -

Partytown Tests 🎉

- -

- Stand-alone tests for - main thread - APIs executed from within a - web worker. These pages are also tested using Playwright from - Partytown's - CI Workerflow. -

-

- Please see the - local development - page for more information on how to re-create issues locally, - submit issues and writing tests. Being able to recreate the issue with a minimal amount of code makes it easier debug. -

- -

Platform Tests

- - -
- -

Service Integration Tests

- - -
- -

Benchmarks / Browser Tests

- - -
- -

More Info

- -

Made with ❤️ by the Builder.io Team

- - + + + + + + Partytown Tests + + + + +

Partytown Tests 🎉

+ +

+ Stand-alone tests for + main thread + APIs executed from within a + web worker. These + pages are also tested using Playwright from + Partytown's + CI Workerflow. +

+

+ Please see the + local development + page for more information on how to re-create issues locally, + submit + issues and writing tests. Being able to recreate the issue with a minimal amount of code makes it easier + debug. +

+ +

Platform Tests

+ + +
+ +

Service Integration Tests

+ + +
+ +

Benchmarks / Browser Tests

+ + +
+ +

More Info

+ +

Made with ❤️ by the Builder.io Team

+ + + \ No newline at end of file diff --git a/tests/integrations/event-forwarding/event-forwarding.spec.ts b/tests/integrations/event-forwarding/event-forwarding.spec.ts index f840717c..7cbd3d5d 100644 --- a/tests/integrations/event-forwarding/event-forwarding.spec.ts +++ b/tests/integrations/event-forwarding/event-forwarding.spec.ts @@ -1,18 +1,25 @@ -import { test, expect } from '@playwright/test'; - -test('integration event forwarding', async ({ page }) => { - await page.goto('/tests/integrations/event-forwarding/'); - await page.waitForSelector('.completed'); +import { test, expect, Page } from '@playwright/test'; +const testPage = async (page: Page) => { const testFn = page.locator('#testFn'); await expect(testFn).toHaveText('fnReady'); + const testFnInner = page.locator('#testFnInner'); + await expect(testFnInner).toHaveText('fnReady'); + const testArray = page.locator('#testArray'); await expect(testArray).toHaveText('arrayReady'); const testPreservedArray = page.locator('#testPreservedArray'); await expect(testPreservedArray).toHaveText('arrayReady'); + const testArrayInner = page.locator('#testArrayInner'); + await expect(testArrayInner).toHaveText('arrayReady'); + + const kiwiSizing = page.locator('#kiwisizing'); + await expect(kiwiSizing).not.toBeEmpty(); + await expect(JSON.parse(await kiwiSizing.textContent() as string).collections).toEqual('211448987800'); + const buttonForwardEvent = page.locator('#buttonForwardEvent'); await buttonForwardEvent.click(); await expect(testFn).toHaveText('click1'); @@ -51,4 +58,25 @@ test('integration event forwarding', async ({ page }) => { await expect(superPreservedArray).toStrictEqual([{ mph: 89 }, { mph: 88 }, 'arrayReady']); await windowHandle.dispose(); +}; + +test('integration event forwarding', async ({ page }) => { + await page.goto('/tests/integrations/event-forwarding/'); + await page.waitForSelector('.completed'); + await testPage(page); +}); + +test('integration event forwarding multiple tabs', async ({ page, context }) => { + await page.goto('/tests/integrations/event-forwarding/'); + await page.waitForSelector('.completed'); + + const page2 = await context.newPage(); + await page2.goto('/tests/integrations/event-forwarding/'); + await page2.waitForSelector('.completed'); + + await page.bringToFront(); + await testPage(page); + + await page2.bringToFront(); + await testPage(page2); }); diff --git a/tests/integrations/event-forwarding/index.html b/tests/integrations/event-forwarding/index.html index 2b7780ce..08e813cd 100644 --- a/tests/integrations/event-forwarding/index.html +++ b/tests/integrations/event-forwarding/index.html @@ -36,13 +36,16 @@ const testFn = document.getElementById('testFn'); superDuperFunction = function() { + const testFnInner = document.getElementById('testFnInner'); switch (arguments[0]) { case 'fnReady': { testFn.textContent = arguments[0]; + testFnInner.textContent = arguments[0]; break; } case 'testForwardEvent': { testFn.textContent = arguments[1] + (++inc); + testFnInner.textContent = arguments[1] + (inc); break; } } @@ -56,13 +59,16 @@ superArray = []; superArray.push = function() { + const testArrayInner = document.getElementById('testArrayInner'); switch (arguments[0]) { case 'arrayReady': { testArray.textContent = arguments[0]; + testArrayInner.textContent = arguments[0]; break; } default: { testArray.textContent = JSON.stringify(arguments[0]); + testArrayInner.textContent = JSON.stringify(arguments[0]); break; } } @@ -155,6 +161,7 @@

Integration Event Forwarding

fn event + @@ -109,7 +109,7 @@

Google Tag Manager (GTM) 🎉

function gtmPush() { const data = { event: 'button-click', from: 'partytown' }; console.log(`GTM dataLayer.push(${JSON.stringify(data)})`); - dataLayer.push({ event: 'button-click', from: 'partytown' }); + dataLayer.push(data); const testDataLayer = document.getElementById('testDataLayer'); testDataLayer.textContent = 'pushed'; diff --git a/tests/platform/event/event.spec.ts b/tests/platform/event/event.spec.ts index 25c303ab..b6382b75 100644 --- a/tests/platform/event/event.spec.ts +++ b/tests/platform/event/event.spec.ts @@ -1,10 +1,6 @@ -import { test, expect } from '@playwright/test'; - -test('events', async ({ page }) => { - await page.goto('/tests/platform/event/'); - - await page.waitForSelector('.completed'); +import { Page, expect, test } from '@playwright/test'; +const testPage = async (page: Page) => { const testAddEventListener = page.locator('#testAddEventListener'); const buttonAddEventListener = page.locator('#buttonAddEventListener'); await buttonAddEventListener.click(); @@ -67,4 +63,28 @@ test('events', async ({ page }) => { '#testWinAddEventListenerNoContextCount' ); await expect(testWinAddEventListenerNoContextCount).toHaveText('1'); +}; + +test('events', async ({ page }) => { + await page.goto('/tests/platform/event/'); + + await page.waitForSelector('.completed'); + + await testPage(page); +}); + +test('events multiple tabs', async ({ page, context }) => { + await page.goto('/tests/platform/event/'); + + await page.waitForSelector('.completed'); + + const page2 = await context.newPage(); + + await page2.goto('/tests/platform/event/'); + + await page2.waitForSelector('.completed'); + + await testPage(page); + + await testPage(page2); }); diff --git a/tests/platform/window/window.spec.ts b/tests/platform/window/window.spec.ts index b7a935f0..e52826c7 100644 --- a/tests/platform/window/window.spec.ts +++ b/tests/platform/window/window.spec.ts @@ -1,10 +1,6 @@ -import { test, expect } from '@playwright/test'; - -test('window', async ({ page }) => { - await page.goto('/tests/platform/window/'); - - await page.waitForSelector('.completed'); +import { Page, expect, test } from '@playwright/test'; +const testPage = async (page: Page) => { const testWindowName = page.locator('#testWindowName'); await expect(testWindowName).toHaveText('Window'); @@ -113,7 +109,7 @@ test('window', async ({ page }) => { await expect(testDevicePixelRatio).not.toHaveText(''); const testOrigin = page.locator('#testOrigin'); - const origin = new URL(await testOrigin.textContent()); + const origin = new URL((await testOrigin.textContent()) || ''); expect(origin.pathname).toBe('/'); expect(origin.hostname).toBe('localhost'); @@ -157,4 +153,28 @@ test('window', async ({ page }) => { const testDocumentScripts = page.locator('#testDocumentScripts'); await expect(testDocumentScripts).toHaveText('scripts.length: number'); +}; + +test('window', async ({ page }) => { + await page.goto('/tests/platform/window/'); + + await page.waitForSelector('.completed'); + + await testPage(page); +}); + +test('window multiple tabs', async ({ page, context }) => { + await page.goto('/tests/platform/window/'); + + await page.waitForSelector('.completed'); + + const page2 = await context.newPage(); + + await page2.goto('/tests/platform/window/'); + + await page2.waitForSelector('.completed'); + + await testPage(page); + + await testPage(page2); });