From ed5ecd90fdddcd6a6bdce1858735ae47a6a1e2da Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 20 Aug 2024 16:52:19 +0900
Subject: [PATCH] test: test `server.origin` (#17886)

---
 .../__tests__/backend-integration.spec.ts     | 29 ++++++++++++++-----
 playground/backend-integration/vite.config.js |  6 ++++
 playground/tailwind/vite.config.ts            |  5 ----
 playground/test-utils.ts                      |  1 +
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts
index 5dbfd55177d2d8..c6ac1aaf59cb91 100644
--- a/playground/backend-integration/__tests__/backend-integration.spec.ts
+++ b/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import {
   browserErrors,
   browserLogs,
@@ -8,16 +8,13 @@ import {
   isServe,
   listAssets,
   page,
+  ports,
   readManifest,
   serverLogs,
   untilBrowserLogAfter,
   untilUpdated,
 } from '~utils'
 
-const outerAssetMatch = isBuild
-  ? /\/dev\/assets\/logo-[-\w]{8}\.png/
-  : /\/dev\/@fs\/.+?\/images\/logo\.png/
-
 test('should have no 404s', () => {
   browserLogs.forEach((msg) => {
     expect(msg).not.toMatch('404')
@@ -26,9 +23,25 @@ test('should have no 404s', () => {
 
 describe('asset imports from js', () => {
   test('file outside root', async () => {
-    expect(
-      await page.textContent('.asset-reference.outside-root .asset-url'),
-    ).toMatch(outerAssetMatch)
+    // assert valid image src https://github.com/microsoft/playwright/issues/6046#issuecomment-1799585719
+    await vi.waitUntil(() =>
+      page
+        .locator('.asset-reference.outside-root .asset-preview')
+        .evaluate((el: HTMLImageElement) => el.naturalWidth > 0),
+    )
+
+    const text = await page.textContent(
+      '.asset-reference.outside-root .asset-url',
+    )
+    if (isBuild) {
+      expect(text).toMatch(/\/dev\/assets\/logo-[-\w]{8}\.png/)
+    } else {
+      // asset url is prefixed with server.origin
+      expect(text).toMatch(
+        `http://localhost:${ports['backend-integration']}/dev/@fs/`,
+      )
+      expect(text).toMatch(/\/dev\/@fs\/.+?\/images\/logo\.png/)
+    }
   })
 })
 
diff --git a/playground/backend-integration/vite.config.js b/playground/backend-integration/vite.config.js
index 881eac1a14688e..f0df64975f65e6 100644
--- a/playground/backend-integration/vite.config.js
+++ b/playground/backend-integration/vite.config.js
@@ -22,6 +22,12 @@ function BackendIntegrationExample() {
       entrypoints.push(['bar.css', path.resolve(__dirname, './dir/foo.css')])
 
       return {
+        server: {
+          // same port in playground/test-utils.ts
+          port: 5009,
+          strictPort: true,
+          origin: 'http://localhost:5009',
+        },
         build: {
           manifest: true,
           outDir,
diff --git a/playground/tailwind/vite.config.ts b/playground/tailwind/vite.config.ts
index 86521cff913e97..37112cc15ff700 100644
--- a/playground/tailwind/vite.config.ts
+++ b/playground/tailwind/vite.config.ts
@@ -27,11 +27,6 @@ export default defineConfig({
     // to make tests faster
     minify: false,
   },
-  server: {
-    // This option caused issues with HMR,
-    // although it should not affect the build
-    origin: 'http://localhost:8080',
-  },
   plugins: [
     {
       name: 'delay view',
diff --git a/playground/test-utils.ts b/playground/test-utils.ts
index f46bc3c95389cf..4666820f850c28 100644
--- a/playground/test-utils.ts
+++ b/playground/test-utils.ts
@@ -46,6 +46,7 @@ export const ports = {
   'css/postcss-plugins-different-dir': 5006,
   'css/dynamic-import': 5007,
   'css/lightningcss-proxy': 5008,
+  'backend-integration': 5009,
 }
 export const hmrPorts = {
   'optimize-missing-deps': 24680,