test: reduce flakiness of DOM event tests

adobe · May 29, 2024 · fe89007 · fe89007
1 parent 036852c
commit fe89007
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 12 deletions.
diff --git a/tests/audiences.test.js b/tests/audiences.test.js
@@ -84,8 +84,9 @@ test.describe('Page-level audiences', () => {
   });
 
   test('triggers a DOM event with the audience detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/audiences/page-level');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'audience',
       element: await page.evaluate(() => document.body),
       audience: 'foo',
@@ -125,8 +126,9 @@ test.describe('Section-level audiences', () => {
   });
 
   test('triggers a DOM event with the audience detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/audiences/section-level');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'audience',
       element: await page.evaluate(() => document.querySelector('.section')),
       audience: 'bar',
@@ -181,8 +183,9 @@ test.describe('Fragment-level audiences', () => {
   });
 
   test('triggers a DOM event with the audience detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/audiences/fragment-level');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'audience',
       element: await page.evaluate(() => document.querySelector('.fragment')),
       audience: 'foo',

diff --git a/tests/campaigns.test.js b/tests/campaigns.test.js
@@ -93,8 +93,9 @@ test.describe('Page-level campaigns', () => {
   });
 
   test('triggers a DOM event with the campaign detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/campaigns/page-level?campaign=bar');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'campaign',
       element: await page.evaluate(() => document.body),
       campaign: 'bar',
@@ -133,8 +134,9 @@ test.describe('Section-level campaigns', () => {
   });
 
   test('triggers a DOM event with the campaign detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/campaigns/section-level?campaign=bar');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'campaign',
       element: await page.evaluate(() => document.querySelector('.section')),
       campaign: 'bar',
@@ -183,8 +185,9 @@ test.describe('Fragment-level campaigns', () => {
   });
 
   test('triggers a DOM event with the campaign detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/campaigns/fragment-level?campaign=foo');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'campaign',
       element: await page.evaluate(() => document.querySelector('.fragment')),
       campaign: 'foo',

diff --git a/tests/experiments.test.js b/tests/experiments.test.js
@@ -155,8 +155,9 @@ test.describe('Page-level experiments', () => {
   });
 
   test('triggers a DOM event with the experiment detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/experiments/page-level?experiment=foo&experiment-variant=challenger-1');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'experiment',
       element: await page.evaluate(() => document.body),
       experiment: 'foo',
@@ -211,8 +212,9 @@ test.describe('Section-level experiments', () => {
   });
 
   test('triggers a DOM event with the experiment detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/experiments/section-level?experiment=bar/challenger-2');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'experiment',
       element: await page.evaluate(() => document.querySelector('.section')),
       experiment: 'bar',
@@ -292,8 +294,9 @@ test.describe('Fragment-level experiments', () => {
   });
 
   test('triggers a DOM event with the experiment detail', async ({ page }) => {
+    const fn = await waitForDomEvent(page, 'aem:experimentation');
     await page.goto('/tests/fixtures/experiments/fragment-level?experiment=baz/challenger-1');
-    expect(await waitForDomEvent(page, 'aem:experimentation')).toEqual({
+    expect(await page.evaluate(fn)).toEqual({
       type: 'experiment',
       element: await page.evaluate(() => document.querySelector('.fragment')),
       experiment: 'baz',

diff --git a/tests/utils.js b/tests/utils.js
@@ -24,7 +24,11 @@ export async function goToAndRunExperiment(page, url) {
 }
 
 export async function waitForDomEvent(page, eventName) {
-  return page.evaluate((name) => new Promise((resolve) => {
-    document.addEventListener(name, (ev) => resolve(ev.detail));
-  }), eventName);
+  await page.addInitScript((name) => {
+    // Override the prototype
+    window.eventPromise = new Promise((resolve) => {
+      document.addEventListener(name, (ev) => resolve(ev.detail));
+    });
+  }, eventName);
+  return async () => await window.eventPromise;
 }