test: add tests for page level redirects

documentation/experiments.md

@@ -136,7 +136,7 @@ For the use case that fully redirect to the target URL instead of just replacing
 | Experiment Variants   | [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-1](), [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-2](), [https://{ref}--{repo}--{org}.hlx.page/my-page-variant-3]() |
 | Experiment Resolution     | redirect
 
-In this example, the Hero Test experiment will redirect to one of the specified URLs when you simulate that variant.
+In this example, the Hero Test experiment will redirect to one of the specified URLs based on the selected variant.
 
 Similarly, the redirects for audience personalization and campaign personalization could be enabled by adding:
 

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.1",
   "main": "src/index.js",
   "scripts": {
-    "lint:js": "eslint src",
+    "lint:js": "eslint src tests",
     "lint:css": "stylelint src/**/*.css --allow-empty-input",
     "lint": "npm run lint:js && npm run lint:css",
     "start": "http-server . -p 3000",

tests/audiences.test.js

@@ -65,6 +65,24 @@ test.describe('Page-level audiences', () => {
     ]);
   });
 
+  test('Track RUM is fired before redirect.', async ({ page }) => {
+    const rumCalls = [];
+    await page.exposeFunction('logRumCall', (...args) => rumCalls.push(args));
+    await page.addInitScript(() => {
+      window.hlx = { rum: { sampleRUM: (...args) => window.logRumCall(args) } };
+    });
+    await page.goto('/tests/fixtures/audiences/page-level--redirect');
+    await page.waitForURL('/tests/fixtures/audiences/variant-1');
+    expect(await page.evaluate(() => window.document.body.innerText)).toEqual('Hello v1!');
+    expect(rumCalls[0]).toContainEqual([
+      'audience',
+      {
+        source: 'foo',
+        target: 'foo:bar',
+      },
+    ]);
+  });
+
   test('Exposes the audiences in a JS API.', async ({ page }) => {
     await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level');
     expect(await page.evaluate(() => window.hlx.audiences)).toContainEqual(

tests/campaigns.test.js

@@ -75,6 +75,24 @@ test.describe('Page-level campaigns', () => {
     ]);
   });
 
+  test('Track RUM is fired before redirect.', async ({ page }) => {
+    const rumCalls = [];
+    await page.exposeFunction('logRumCall', (...args) => rumCalls.push(args));
+    await page.addInitScript(() => {
+      window.hlx = { rum: { sampleRUM: (...args) => window.logRumCall(args) } };
+    });
+    await page.goto('/tests/fixtures/campaigns/page-level--redirect?campaign=bar');
+    await page.waitForURL('/tests/fixtures/campaigns/variant-2');
+    expect(await page.evaluate(() => window.document.body.innerText)).toEqual('Hello v2!');
+    expect(rumCalls[0]).toContainEqual([
+      'audience',
+      {
+        source: 'bar',
+        target: 'foo:bar',
+      },
+    ]);
+  });
+
   test('Exposes the campaign in a JS API.', async ({ page }) => {
     await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level?campaign=bar');
     expect(await page.evaluate(() => window.hlx.campaigns)).toContainEqual(

tests/experiments.test.js

@@ -117,6 +117,40 @@ test.describe('Page-level experiments', () => {
     ]);
   });
 
+  test('Track RUM is fired before redirect', async ({ page }) => {
+    const rumCalls = [];
+    await page.exposeFunction('logRumCall', (...args) => rumCalls.push(args));
+    await page.addInitScript(() => {
+      window.hlx = { rum: { sampleRUM: (...args) => window.logRumCall(args) } };
+    });
+    await page.goto('/tests/fixtures/experiments/page-level--redirect');
+    await page.waitForFunction(() => window.hlx.rum.sampleRUM);
+    expect(rumCalls[0]).toContainEqual([
+      'experiment',
+      {
+        source: 'foo',
+        target: expect.stringMatching(/control|challenger-1|challenger-2/),
+      },
+    ]);
+
+    const expectedContent = {
+      v1: 'Hello v1!',
+      v2: 'Hello v2!',
+      redirect: 'Hello World!',
+    };
+    const expectedUrlPath = {
+      v1: '/tests/fixtures/experiments/page-level-v1',
+      v2: '/tests/fixtures/experiments/page-level-v2',
+      redirect: '/tests/fixtures/experiments/page-level--redirect',
+    };
+    const url = new URL(page.url());
+    const variant = Object.keys(expectedUrlPath).find((k) => url.pathname.endsWith(k));
+    expect(await page.evaluate(() => window.document.body.innerText)).toMatch(
+      new RegExp(expectedContent[variant]),
+    );
+    expect(expectedUrlPath[variant]).toBe(url.pathname);
+  });
+
   test('Exposes the experiment in a JS API.', async ({ page }) => {
     await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level');
     expect(await page.evaluate(() => window.hlx.experiments)).toContainEqual(

tests/fixtures/audiences/page-level--redirect.html

@@ -0,0 +1,20 @@
+<html>
+<head>
+  <meta name="audience-foo" content="/tests/fixtures/audiences/variant-1"/>
+  <meta name="audience-bar" content="/tests/fixtures/audiences/variant-2"/>
+  <meta name="audience-resolution" content="redirect"/>
+  <meta property="audience:-foo" content="/tests/fixtures/audiences/variant-1"/>
+  <script>
+    window.AUDIENCES = {
+      foo: () => true,
+      bar: () => true,
+    }
+  </script>
+  <script type="module" src="/tests/fixtures/scripts.js"></script>
+</head>
+<body>
+  <main>
+    <div>Hello World!</div>
+  </main>
+</body>
+</html>

tests/fixtures/campaigns/page-level--redirect.html

@@ -0,0 +1,19 @@
+<html>
+<head>
+  <meta name="campaign-foo" content="/tests/fixtures/campaigns/variant-1"/>
+  <meta name="campaign-bar" content="/tests/fixtures/campaigns/variant-2"/>
+  <meta name="campaign-resolution" content="redirect"/>
+  <script type="module" src="/tests/fixtures/scripts.js"></script>
+  <script>
+    window.AUDIENCES = {
+      foo: () => true,
+      bar: () => true,
+    }
+  </script>
+</head>
+<body>
+  <main>
+    <div>Hello World!</div>
+  </main>
+</body>
+</html>

tests/fixtures/experiments/page-level--redirect.html

@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta name="experiment" content="foo"/>
+  <meta name="experiment-variants" content="/tests/fixtures/experiments/page-level-v1,/tests/fixtures/experiments/page-level-v2"/>
+  <meta name="experiment-name" content="V1,V2"/>
+  <meta name="experiment-resolution" content="redirect"/>
+  <script type="module" src="/tests/fixtures/scripts.js"></script>
+</head>
+<body>
+  <main>Hello World!</main>
+</body>
+</html>

tests/utils.js

@@ -30,5 +30,5 @@ export async function waitForDomEvent(page, eventName) {
       document.addEventListener(name, (ev) => resolve(ev.detail));
     });
   }, eventName);
-  return async () => await window.eventPromise;
+  return async () => window.eventPromise;
 }