test: test server.origin (#17886)

Author: hi-ogawa

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/)
+    }
   })
 })
 

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,

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',

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,