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:
 

tests/audiences.test.js

@@ -65,6 +65,52 @@ test.describe('Page-level audiences', () => {
     ]);
   });
 
+  test('Track RUM is fired before redirect.', async ({ page }) => {
+    await page.addInitScript(() => {
+      window.rumCalls = [];
+      window.hlx = { rum: { sampleRUM: (...args) => window.rumCalls.push(args) } };
+    });
+    // Intercept the script
+    await page.route('src/index.js', async (route) => {
+      const response = await route.fetch();
+      let body = await response.text();
+      if (body.includes('window.location.replace')) {
+        // Comment out the redirect
+        body = body.replace(/window\.location\.replace\s*\(/g, '//window.location.replace(');
+      }
+      await route.fulfill({
+        response,
+        body,
+        headers: {
+          ...response.headers(),
+          'content-length': String(body.length),
+        },
+      });
+    });
+    await goToAndRunAudience(page, '/tests/fixtures/audiences/page-level--redirect');
+    expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
+      'audience',
+      expect.objectContaining({
+        source: 'foo',
+        target: 'foo:bar',
+      }),
+    ]);
+  });
+
+  test("Track page is redirected.", async ({ page }) => {
+    await page.goto('/tests/fixtures/audiences/page-level--redirect');
+    const targetUrls = [
+        '/tests/fixtures/audiences/variant-1',
+        '/tests/fixtures/audiences/variant-2',
+    ];
+    await page.waitForFunction(
+        (targetUrls) => targetUrls.includes(window.location.pathname),
+        targetUrls
+    );
+    const currentPath = new URL(page.url()).pathname;
+    expect(targetUrls).toContain(currentPath);
+});
+
   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,44 @@ test.describe('Page-level campaigns', () => {
     ]);
   });
 
+  test('Tracks RUM is fired before redirect.', async ({ page }) => {
+    await page.addInitScript(() => {
+      window.rumCalls = [];
+      window.hlx = { rum: { sampleRUM: (...args) => window.rumCalls.push(args) } };
+    });
+    // Intercept script
+    await page.route('src/index.js', async (route) => {
+      const response = await route.fetch();
+      let body = await response.text();
+      if (body.includes('window.location.replace')) {
+        // Comment out the redirect
+        body = body.replace(/window\.location\.replace\s*\(/g, '//window.location.replace(');
+      }
+      await route.fulfill({
+        response,
+        body,
+        headers: {
+          ...response.headers(),
+          'content-length': String(body.length),
+        },
+      });
+    });
+    await goToAndRunCampaign(page, '/tests/fixtures/campaigns/page-level--redirect?campaign=foo');
+    expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
+      'audience',
+      expect.objectContaining({
+        source: 'foo',
+        target: 'foo:bar',
+      }),
+    ]);
+  });
+
+  test("Track page is redirected.", async ({ page }) => {
+    await page.goto('/tests/fixtures/campaigns/page-level--redirect?campaign=bar');
+    await page.waitForURL('/tests/fixtures/campaigns/variant-2');
+    expect(new URL(page.url()).pathname).toBe('/tests/fixtures/campaigns/variant-2');
+  });
+
   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,50 @@ test.describe('Page-level experiments', () => {
     ]);
   });
 
+  test('Track RUM is fired before redirect.', async ({ page }) => {
+    await page.addInitScript(() => {
+      window.rumCalls = [];
+      window.hlx = { rum: { sampleRUM: (...args) => window.rumCalls.push(args) } };
+    });
+    // Intercept script
+    await page.route('src/index.js', async (route) => {
+      const response = await route.fetch();
+      let body = await response.text();
+      if (body.includes('window.location.replace')) {
+        // Commnet out the call of window.location.replace
+        body = body.replace(/window\.location\.replace\s*\(/g, '//window.location.replace(');
+      }
+      await route.fulfill({
+        response,
+        body,
+        headers: {
+          ...response.headers(),
+          'content-length': String(body.length),
+        },
+      });
+    });
+    await goToAndRunExperiment(page, '/tests/fixtures/experiments/page-level--redirect');
+    expect(await page.evaluate(() => window.rumCalls)).toContainEqual([
+      'experiment',
+      expect.objectContaining({
+        source: 'foo',
+        target: expect.stringMatching(/control|challenger-1|challenger-2/),
+      }),
+    ]);
+  });
+
+    test("Track page is redirected.", async ({ page }) => {
+      await page.goto(
+        "/tests/fixtures/experiments/page-level--redirect"
+      );
+      const targetUrl = [
+        "/tests/fixtures/experiments/page-level--redirect",
+        "/tests/fixtures/experiments/page-level-v1",
+        "/tests/fixtures/experiments/page-level-v2",
+      ];
+      expect(targetUrl).toContain(new URL(page.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>