From e52f10b9d21c6d280d06a85ef9585a5b67899279 Mon Sep 17 00:00:00 2001
From: Artem Zakharchenko <kettanaito@gmail.com>
Date: Thu, 18 Jul 2024 16:01:11 +0200
Subject: [PATCH] test: add isolated response test for iframes (#2205)

---
 .../iframe-isolated-response/app.html         |  2 +
 .../iframe-isolated-response.mocks.ts         | 11 ++++
 .../iframe-isolated-response.test.ts          | 51 +++++++++++++++++++
 .../iframe-isolated-response/one.html         | 34 +++++++++++++
 .../iframe-isolated-response/two.html         | 34 +++++++++++++
 5 files changed, 132 insertions(+)
 create mode 100644 test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/app.html
 create mode 100644 test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.mocks.ts
 create mode 100644 test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.test.ts
 create mode 100644 test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/one.html
 create mode 100644 test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/two.html

diff --git a/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/app.html b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/app.html
new file mode 100644
index 000000000..e0a417336
--- /dev/null
+++ b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/app.html
@@ -0,0 +1,2 @@
+<iframe id="frame-one" src="./one.html"></iframe>
+<iframe id="frame-two" src="./two.html"></iframe>
diff --git a/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.mocks.ts b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.mocks.ts
new file mode 100644
index 000000000..8204158dc
--- /dev/null
+++ b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.mocks.ts
@@ -0,0 +1,11 @@
+import { http } from 'msw'
+import { setupWorker } from 'msw/browser'
+
+const worker = setupWorker()
+worker.start()
+
+// @ts-ignore
+window.msw = {
+  worker,
+  http,
+}
diff --git a/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.test.ts b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.test.ts
new file mode 100644
index 000000000..ef97469a6
--- /dev/null
+++ b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/iframe-isolated-response.test.ts
@@ -0,0 +1,51 @@
+import * as path from 'path'
+import * as express from 'express'
+import type { Frame, Page } from '@playwright/test'
+import { test, expect } from '../../../../playwright.extend'
+
+const staticMiddleware = (router: express.Router) => {
+  router.use(express.static(__dirname))
+}
+
+function getFrameById(id: string, page: Page): Frame {
+  const frame = page
+    .mainFrame()
+    .childFrames()
+    .find((frame) => frame.name() === id)
+
+  if (!frame) {
+    throw new Error(`Unable to find frame with id "${id}" on the page`)
+  }
+
+  return frame
+}
+
+test('responds with different responses for the same request based on request referrer (frame url)', async ({
+  loadExample,
+  page,
+}) => {
+  await loadExample(require.resolve('./iframe-isolated-response.mocks.ts'), {
+    markup: path.resolve(__dirname, 'app.html'),
+    beforeNavigation(compilation) {
+      compilation.use(staticMiddleware)
+    },
+  })
+
+  const frameOne = getFrameById('frame-one', page)!
+  const frameTwo = getFrameById('frame-two', page)!
+
+  await Promise.all([
+    frameOne.evaluate(() => window.request()),
+    frameTwo.evaluate(() => window.request()),
+  ])
+
+  /**
+   * @note Each frame is able to receive a unique response
+   * because it uses the `isolatedResolver` utility.
+   * It's IMPORTANT it runs in the frame's context. We cannot
+   * ship that logic in MSW because MSW always runs in the
+   * main thread (the top-level client, which is the parent).
+   */
+  await expect(frameOne.getByText('one')).toBeVisible()
+  await expect(frameTwo.getByText('two')).toBeVisible()
+})
diff --git a/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/one.html b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/one.html
new file mode 100644
index 000000000..7f6f5aca8
--- /dev/null
+++ b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/one.html
@@ -0,0 +1,34 @@
+<script>
+  const { worker, http } = window.parent.msw
+
+  function isolatedResolver(resolver) {
+    return (info) => {
+      if (info.request.referrer !== location.href) {
+        return
+      }
+      return resolver(info)
+    }
+  }
+
+  worker.use(
+    http.get(
+      './resource',
+      isolatedResolver(({ request }) => {
+        return new Response('one')
+      }),
+    ),
+  )
+
+  window.request = () => {
+    return fetch('./resource')
+      .then((response) => response.text())
+      .then((data) => {
+        const node = document.createElement('p')
+        node.innerText = data
+        document.body.appendChild(node)
+      })
+      .catch((error) => console.error(error))
+  }
+
+  document.addEventListener('click', window.request)
+</script>
diff --git a/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/two.html b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/two.html
new file mode 100644
index 000000000..fdce56461
--- /dev/null
+++ b/test/browser/msw-api/setup-worker/scenarios/iframe-isolated-response/two.html
@@ -0,0 +1,34 @@
+<script>
+  const { worker, http } = window.parent.msw
+
+  function isolatedResolver(resolver) {
+    return (info) => {
+      if (info.request.referrer !== location.href) {
+        return
+      }
+      return resolver(info)
+    }
+  }
+
+  worker.use(
+    http.get(
+      './resource',
+      isolatedResolver(({ request }) => {
+        return new Response('two')
+      }),
+    ),
+  )
+
+  window.request = () => {
+    return fetch('./resource')
+      .then((response) => response.text())
+      .then((data) => {
+        const node = document.createElement('p')
+        node.innerText = data
+        document.body.appendChild(node)
+      })
+      .catch((error) => console.error(error))
+  }
+
+  document.addEventListener('click', window.request)
+</script>