From e9c0b01bd091624170e7b8d270427e661a0135bb Mon Sep 17 00:00:00 2001
From: techfg <barry@techfg.com>
Date: Sat, 4 Nov 2023 18:49:51 -0700
Subject: [PATCH] multiple page tests for #492

---
 tests/index.html                              |  1 +
 .../event-forwarding/event-forwarding.spec.ts | 37 +++++++-
 .../integrations/event-forwarding/index.html  | 10 +-
 .../facebook-pixel/facebook-pixel.spec.ts     | 65 ++++++++++++-
 tests/integrations/gtm/gtm.spec.ts            | 65 ++++++++++++-
 tests/integrations/gtm/index.html             | 16 ++--
 tests/platform/event/event.spec.ts            | 34 +++++--
 tests/platform/multiple-pages/index.html      | 95 +++++++++++++++++++
 .../multiple-pages/multiple-pages.spec.ts     | 27 ++++++
 tests/platform/window/window.spec.ts          | 34 +++++--
 10 files changed, 346 insertions(+), 38 deletions(-)
 create mode 100644 tests/platform/multiple-pages/index.html
 create mode 100644 tests/platform/multiple-pages/multiple-pages.spec.ts

diff --git a/tests/index.html b/tests/index.html
index 37f5f1a6..595a92ec 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -95,6 +95,7 @@ <h2>Platform Tests</h2>
       <li><a href="/tests/platform/iframe/">IFrame</a></li>
       <li><a href="/tests/platform/image/">Image</a></li>
       <li><a href="/tests/platform/intersection-observer/">IntersectionObserver</a></li>
+      <li><a href="/tests/platform/multiple-pages/">Multiple Pages</a></li>
       <li><a href="/tests/platform/mutation-observer/">MutationObserver</a></li>
       <li><a href="/tests/platform/navigator/">Navigator</a></li>
       <li><a href="/tests/platform/node/">Node</a></li>
diff --git a/tests/integrations/event-forwarding/event-forwarding.spec.ts b/tests/integrations/event-forwarding/event-forwarding.spec.ts
index aaad4c78..b94797ec 100644
--- a/tests/integrations/event-forwarding/event-forwarding.spec.ts
+++ b/tests/integrations/event-forwarding/event-forwarding.spec.ts
@@ -1,15 +1,21 @@
-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 testArrayInner = page.locator('#testArrayInner');
+  await expect(testArrayInner).toHaveText('arrayReady');  
+
+  const kiwiSizing = page.locator('#kiwisizing');
+  await expect(kiwiSizing).toHaveText('211448987800');
+
   const buttonForwardEvent = page.locator('#buttonForwardEvent');
   await buttonForwardEvent.click();
   await expect(testFn).toHaveText('click1');
@@ -21,4 +27,25 @@ test('integration event forwarding', async ({ page }) => {
   await expect(testArray).toHaveText(JSON.stringify({ mph: 88 }));
   await buttonArrayPush.click();
   await expect(testArray).toHaveText(JSON.stringify({ mph: 89 }));
+};
+
+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 fdb65ad7..be514fc4 100644
--- a/tests/integrations/event-forwarding/index.html
+++ b/tests/integrations/event-forwarding/index.html
@@ -30,13 +30,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;
             }
           }
@@ -50,13 +53,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;
             }
           }
@@ -78,7 +84,7 @@
     <script type="text/partytown">
       console.log("KiwiSizing", KiwiSizing)
       console.log("KiwiSizing.data", KiwiSizing.data)
-      window.document.getElementById("kiwisizing").innerText = KiwiSizing.data;
+      window.document.getElementById("kiwisizing").innerText = KiwiSizing.data.collections;
     </script>
       <style>
       body {
@@ -126,6 +132,7 @@ <h1>Integration Event Forwarding</h1>
         <strong>fn event</strong>
         <button id="buttonForwardEvent">fn</button>
         <code id="testFn"></code>
+        <code id="testFnInner"></code>
         <script>
           (function () {
             const btn = document.getElementById('buttonForwardEvent');
@@ -140,6 +147,7 @@ <h1>Integration Event Forwarding</h1>
         <strong>array push event</strong>
         <button id="buttonArrayPush">push</button>
         <code id="testArray"></code>
+        <code id="testArrayInner"></code>
         <script>
           (function () {
             let mph = 88;
diff --git a/tests/integrations/facebook-pixel/facebook-pixel.spec.ts b/tests/integrations/facebook-pixel/facebook-pixel.spec.ts
index 46205b0d..d2599903 100644
--- a/tests/integrations/facebook-pixel/facebook-pixel.spec.ts
+++ b/tests/integrations/facebook-pixel/facebook-pixel.spec.ts
@@ -1,13 +1,68 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, ConsoleMessage, Page } from '@playwright/test';
+
+const testPage = async (page: Page) => {
+  const buttonSendEvent = page.locator('#buttonSendEvent');
+  await buttonSendEvent.click();
+
+  const testFbq = page.locator('#testFbq');
+  await expect(testFbq).toHaveText('called');
+};
 
 test('facebook-pixel', async ({ page }) => {
   await page.goto('/tests/integrations/facebook-pixel/');
 
   await page.waitForSelector('.completed');
 
-  const buttonSendEvent = page.locator('#buttonSendEvent');
-  await buttonSendEvent.click();
+  await testPage(page);
+});
 
-  const testFbq = page.locator('#testFbq');
-  await expect(testFbq).toHaveText('called');
+/*
+  The standard sequence of open tab/wait/open tab/wait/
+  act/act only fails intermittently when running automated
+  test although it fails consistently when performing manual
+  testing.  The sequence below (open tab/open tab/wait/wait/
+  act/act) seems to fail consistently when running automated
+  test.
+*/
+test('facebook-pixel multiple tabs', async ({ page, context }) => {
+  const pageConsoleErrors: Array<ConsoleMessage> = [];
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      pageConsoleErrors.push(msg);
+    }
+  });
+
+  const pageErrors: Array<Error> = [];
+  page.on('pageerror', ex => {
+    pageErrors.push(ex);
+  });
+
+  const page2 = await context.newPage();
+  const page2ConsoleErrors: Array<ConsoleMessage> = [];
+  page2.on('console', msg => {
+    if (msg.type() === 'error') {
+      page2ConsoleErrors.push(msg);
+    }
+  });
+
+  const page2Errors: Array<Error> = [];
+  page2.on('pageerror', ex => {
+    page2Errors.push(ex);
+  });
+
+  await page.goto('/tests/integrations/facebook-pixel/');
+  await page2.goto('/tests/integrations/facebook-pixel/');
+  await page.waitForSelector('.completed');  
+  await page2.waitForSelector('.completed');
+
+  await page.bringToFront();
+  await testPage(page);
+
+  await page2.bringToFront();
+  await testPage(page2);  
+
+  expect(pageErrors.length).toBe(0);
+  expect(pageConsoleErrors.length).toBe(0);
+  expect(page2Errors.length).toBe(0);
+  expect(page2ConsoleErrors.length).toBe(0);
 });
diff --git a/tests/integrations/gtm/gtm.spec.ts b/tests/integrations/gtm/gtm.spec.ts
index aa4619fb..7e129bc7 100644
--- a/tests/integrations/gtm/gtm.spec.ts
+++ b/tests/integrations/gtm/gtm.spec.ts
@@ -1,13 +1,68 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, ConsoleMessage, Page } from '@playwright/test';
+
+const testPage = async (page: Page) => {
+  const buttonDataLayerPush = page.locator('#buttonDataLayerPush');
+  await buttonDataLayerPush.click();
+
+  const testDataLayer = page.locator('#testDataLayer');
+  await expect(testDataLayer).toHaveText('pushed');
+}
 
 test('gtm', async ({ page }) => {
   await page.goto('/tests/integrations/gtm/');
 
   await page.waitForSelector('.completed');
 
-  const buttonDataLayerPush = page.locator('#buttonDataLayerPush');
-  await buttonDataLayerPush.click();
+  await testPage(page);
+});
 
-  const testDataLayer = page.locator('#testDataLayer');
-  await expect(testDataLayer).toHaveText('pushed');
+/*
+  The standard sequence of open tab/wait/open tab/wait/
+  act/act only fails intermittently when running automated
+  test although it fails consistently when performing manual
+  testing.  The sequence below (open tab/open tab/wait/wait/
+  act/act) seems to fail consistently when running automated
+  test.
+*/
+test('gtm multiple tabs', async ({ page, context }) => {
+  const pageConsoleErrors: Array<ConsoleMessage> = [];
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      pageConsoleErrors.push(msg);
+    }
+  });
+
+  const pageErrors: Array<Error> = [];
+  page.on('pageerror', ex => {
+    pageErrors.push(ex);
+  });
+
+  const page2 = await context.newPage();
+  const page2ConsoleErrors: Array<ConsoleMessage> = [];
+  page2.on('console', msg => {
+    if (msg.type() === 'error') {
+      page2ConsoleErrors.push(msg);
+    }
+  });
+
+  const page2Errors: Array<Error> = [];
+  page2.on('pageerror', ex => {
+    page2Errors.push(ex);
+  });
+
+  await page.goto('/tests/integrations/gtm/');    
+  await page2.goto('/tests/integrations/gtm/');
+  await page.waitForSelector('.completed');  
+  await page2.waitForSelector('.completed');
+
+  await page.bringToFront();
+  await testPage(page);
+
+  await page2.bringToFront();
+  await testPage(page2);
+
+  expect(pageConsoleErrors.length).toBe(0);
+  expect(pageErrors.length).toBe(0);
+  expect(page2ConsoleErrors.length).toBe(0);
+  expect(page2Errors.length).toBe(0);
 });
diff --git a/tests/integrations/gtm/index.html b/tests/integrations/gtm/index.html
index 40520179..21c14328 100644
--- a/tests/integrations/gtm/index.html
+++ b/tests/integrations/gtm/index.html
@@ -36,25 +36,25 @@
 
     <!-- Google Tag Manager -->
     <script type="text/partytown">
-      (function (window, document, i) {
-        window['dataLayer'] = window[dataLayer] || [];
+      (function (window, document, dataLayerName, i) {
+        window[dataLayerName] = window[dataLayerName] || [];
 
-        window['dataLayer'].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
+        window[dataLayerName].push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' });
 
         var firstScript = document.getElementsByTagName('script')[0];
         var gtmScript = document.createElement('script');
-        var dataLayer = 'dataLayer' != 'dataLayer' ? '&l=' + 'dataLayer' : '';
+        var dataLayerParam = dataLayerName != 'dataLayer' ? '&l=' + dataLayerName : '';
 
         gtmScript.async = true;
 
         // ORIGINAL
-        gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dataLayer;
+        gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dataLayerParam;
 
         // HACK
-        // gtmScript.src = './gtm.js?id=' + i + dataLayer;
+        // gtmScript.src = './gtm.js?id=' + i + dataLayerParam;
 
         firstScript.parentNode.insertBefore(gtmScript, firstScript);
-      })(window, document, 'GTM-W275NLW');
+      })(window, document, 'dataLayer', 'GTM-W275NLW');
     </script>
     <!-- End Google Tag Manager -->
 
@@ -109,7 +109,7 @@ <h1>Google Tag Manager (GTM) 🎉</h1>
       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 3e9e75e6..3dd0d997 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 { test, expect, Page } from '@playwright/test';
 
+const testPage = async (page: Page) => {
   const testAddEventListener = page.locator('#testAddEventListener');
   const buttonAddEventListener = page.locator('#buttonAddEventListener');
   await buttonAddEventListener.click();
@@ -57,5 +53,29 @@ test('events', async ({ page }) => {
   await btnPreventDefault.click();
   await page.waitForSelector('.testPreventDefault');
   const testPreventDefault = page.locator('#testPreventDefault');
-  await expect(testPreventDefault).toHaveText('preventDefault-noop');
+  await expect(testPreventDefault).toHaveText('preventDefault-noop');  
+};
+
+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/multiple-pages/index.html b/tests/platform/multiple-pages/index.html
new file mode 100644
index 00000000..dcbf802c
--- /dev/null
+++ b/tests/platform/multiple-pages/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Partytown Test Page" />
+    <title>Multiple Pages</title>
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+          Apple Color Emoji, Segoe UI Emoji;
+        font-size: 12px;
+      }
+      h1 {
+        margin: 0 0 15px 0;
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 16px 8px;
+      }
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: blue;
+      }
+      a:hover {
+        background-color: #eee;
+      }
+      li {
+        display: flex;
+        margin: 15px 0;
+      }
+      li strong,
+      li code,
+      li button,
+      li a {
+        white-space: nowrap;
+        flex: 1;
+        margin: 0 5px;
+        padding: 0;
+      }
+    </style>
+    <script>
+      partytown = {
+        logCalls: true,
+        logGetters: true,
+        logSetters: true,
+        logImageRequests: true,
+        logMainAccess: true,
+        logSendBeaconRequests: true,
+        logStackTraces: false,
+        logScriptExecution: true,        
+      };
+    </script>
+    <script src="/~partytown/debug/partytown.js"></script>
+  </head>
+  <body mph="88">
+    <h1>Multiple Pages</h1>
+    <ul>
+      <li>
+        <a id="anchorOpenNewPage" target="_blank" href=".">Open New Page</a>
+        <div>Opened Pages:<code id="testAnchorOpenNewPage"></code></div>
+        <script type="text/partytown">
+          (function() {
+            function updateCounter(v) {
+              const c = document.getElementById('testAnchorOpenNewPage');
+              c.textContent = v;  
+            }
+
+            let count = 0;
+            updateCounter(count);
+            const a = document.getElementById('anchorOpenNewPage');            
+            a.addEventListener('click', function() {
+              updateCounter(++count);
+            });
+          })()
+        </script>
+      </li>
+    </ul>
+
+    <script type="text/partytown">
+      (function () {
+        document.body.classList.add('completed');
+      })();
+    </script>
+
+    <hr />
+    <p><a href="/tests/">All Tests</a></p>
+  </body>
+</html>
diff --git a/tests/platform/multiple-pages/multiple-pages.spec.ts b/tests/platform/multiple-pages/multiple-pages.spec.ts
new file mode 100644
index 00000000..c4363f38
--- /dev/null
+++ b/tests/platform/multiple-pages/multiple-pages.spec.ts
@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+
+test('multiple pages', async ({ page }) => {
+  await page.goto('/tests/platform/multiple-pages/');
+
+  await page.waitForSelector('.completed');
+
+  const testAnchorOpenNewPage = page.locator('#testAnchorOpenNewPage');
+  const anchorOpenNewPage = page.locator('#anchorOpenNewPage');
+
+  await expect(testAnchorOpenNewPage).toHaveText('0');
+
+  await anchorOpenNewPage.click();
+  await expect(testAnchorOpenNewPage).toHaveText('1');   
+
+  await anchorOpenNewPage.click();
+  await expect(testAnchorOpenNewPage).toHaveText('2');
+  
+  await anchorOpenNewPage.click();
+  await expect(testAnchorOpenNewPage).toHaveText('3');
+  
+  await anchorOpenNewPage.click();
+  await expect(testAnchorOpenNewPage).toHaveText('4');
+  
+  await anchorOpenNewPage.click();
+  await expect(testAnchorOpenNewPage).toHaveText('5');  
+});
\ No newline at end of file
diff --git a/tests/platform/window/window.spec.ts b/tests/platform/window/window.spec.ts
index 2753d945..3ec3d913 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 { test, expect, Page } 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');
 
@@ -154,4 +150,28 @@ test('window', async ({ page }) => {
 
   const testVisualViewport = page.locator('#testVisualViewport');
   await expect(testVisualViewport).toHaveText('scale:1 VisualViewport');
+};
+
+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);
 });