multiple page tests for QwikDev#492

techfg · Nov 5, 2023 · e9c0b01 · e9c0b01
1 parent ed844ab
commit e9c0b01
Show file tree

Hide file tree

Showing 10 changed files with 346 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
 });