test: add tests for page level redirects (#45)

<!--- Provide a general summary of your changes in the Title above -->
## Description
<!--- Describe your changes in detail -->
**To test:**
 1. RUM is fired before redirect
2. Page is successfully redirected in all three cases (experiments,
campaigns, audiences)
 
**Finding:**
1. Tried different ways to override the `window.location.replace () ` to
let it do nothing when testing RUM is fired before redirect.
However, some browsers have strict security restriction that don't allow
certain function to be overridden, which leads to test fails.
2. Modify the script before its execution. The line with
`window.location.replace () ` is commented out before the script is
executed and security policies are applied.

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] I have signed the [Adobe Open Source
CLA](https://opensource.adobe.com/cla.html).
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have read the **CONTRIBUTING** document.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.

---------

Co-authored-by: Julien Ramboz <[email protected]>

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;
 }