test: add dev mode test(e2e) (#322)

Author: Jiannan-dev

.github/workflows/ci.yml

@@ -50,8 +50,14 @@ jobs:
       - name: Build vite-plugin-federation
         run: pnpm run build
 
-      - name: Test build
-        run: pnpm run test
+      - name: Unit test
+        run: pnpm run 'test:unit'
+
+      - name: Dev mode e2e test
+        run: pnpm run 'test:e2e-dev'
+
+      - name: Serve mode e2e test
+        run: pnpm run 'test:e2e-serve'
 
   lint:
     runs-on: ubuntu-latest

.github/workflows/publish.yml

@@ -27,8 +27,14 @@ jobs:
       - name: Build
         run: pnpm build
 
-      - name: Test
-        run: pnpm test
+      - name: Unit test
+        run: pnpm run 'test:unit'
+
+      - name: Dev mode e2e test
+        run: pnpm run 'test:e2e-dev'
+
+      - name: Serve mode e2e test
+        run: pnpm run 'test:e2e-serve'
 
       - name: Create Release for Tag
         id: release_tag

package.json

@@ -19,9 +19,10 @@
     "lint": "eslint packages/*/{src,types}/**",
     "lint:fix": "eslint --fix",
     "build": "cd packages/lib && pnpm build",
-    "test": "npm-run-all test:unit test:e2e",
+    "test": "npm-run-all test:unit test:e2e-serve test:e2e-dev",
     "test:unit": "vitest run --coverage",
-    "test:e2e": "vitest run -c vitest.config.e2e.ts"
+    "test:e2e-serve": "vitest run -c vitest.config.e2e-serve.ts",
+    "test:e2e-dev": "vitest run -c vitest.config.e2e-dev.ts"
   },
   "devDependencies": {
     "@types/node": "^18.6.4",

packages/examples/basic-host-remote/__tests__/basic-host-remote.spec.ts renamed to packages/examples/basic-host-remote/__tests__/basic-host-remote.serve.spec.ts

@@ -0,0 +1,116 @@
+import { execa } from 'execa';
+import { dirname, join, resolve } from 'node:path'
+import os from 'node:os'
+import fs from 'fs-extra'
+import { chromium } from 'playwright-chromium'
+import type { Browser, Page } from 'playwright-chromium'
+import type { File } from 'vitest'
+import { beforeAll, afterAll } from 'vitest'
+
+export const workspaceRoot = resolve(__dirname, '../')
+/**
+ * Path to the test folder
+ */
+export let testDir: string
+
+export function slash(p: string): string {
+  return p.replace(/\\/g, '/')
+}
+
+export const browserLogs: string[] = []
+export const browserErrors: Error[] = []
+
+export let page: Page = undefined!
+export let browser: Browser = undefined!
+export let viteTestUrl: string = ''
+
+const DIR = join(os.tmpdir(), 'vitest_playwright_global_setup')
+
+let err: Error
+let skipError: boolean
+
+beforeAll(async (s) => {
+  process.env.NODE_ENV = 'production'
+  const suite = s as File
+  // skip browser setup for non-examples tests
+  if (!suite.filepath.includes('examples')) {
+    return
+  }
+
+  const wsEndpoint = fs.readFileSync(join(DIR, 'wsEndpoint'), 'utf-8')
+  if (!wsEndpoint) {
+    throw new Error('wsEndpoint not found')
+  }
+
+  browser = await chromium.connect(wsEndpoint)
+  page = await browser.newPage()
+
+  const globalConsole = global.console
+  const warn = globalConsole.warn
+  globalConsole.warn = (msg, ...args) => {
+    // suppress @vue/reactivity-transform warning
+    if (msg.includes('@vue/reactivity-transform')) return
+    warn.call(globalConsole, msg, ...args)
+  }
+
+  skipError = false
+  try {
+    page.on('console', (msg) => {
+      browserLogs.push(msg.text())
+    })
+    page.on('pageerror', (error) => {
+      browserErrors.push(error)
+    })
+
+    const testPath = suite.filepath!
+    const testName = slash(testPath).match(
+      /packages\/examples\/([\w-]+)\//
+    )?.[1]
+    testDir = dirname(testPath)
+
+
+    // if this is a test placed under examples/xxx/__tests__
+    // start a vite server in that directory.
+    if (testName) {
+      testDir = resolve(workspaceRoot, 'temp', testName)
+      if (testName === 'vue2-demo') {
+        await execa('pnpm', ['install'], {
+          cwd: testDir,
+          stdio: 'inherit'
+        })
+      }
+      execa('pnpm', ['run', 'dev:hosts'], {cwd: testDir, stdio: 'inherit'})
+      execa('pnpm', ['run', 'serve:remotes'], {cwd: testDir, stdio: 'inherit'})
+      await execa('pnpm', ['run', 'build:remotes'], {cwd: testDir, stdio: 'inherit'})
+
+
+      const port = 5000
+      // use resolved port/base from server
+      viteTestUrl = `http://localhost:${port}`
+      await page.goto(viteTestUrl)
+    }
+  } catch (e) {
+    // jest doesn't exit if our setup has error here
+    // https://github.com/facebook/jest/issues/2713
+    if (!skipError) {
+      err = e
+    }
+    // Closing the page since an error in the setup, for example a runtime error
+    // when building the playground should skip further tests.
+    // If the page remains open, a command like `await page.click(...)` produces
+    // a timeout with an exception that hides the real error in the console.
+    await page.close()
+  }
+}, 60000)
+
+afterAll(async () => {
+  await page?.close()
+  skipError = true
+  await execa('pnpm', ['run', 'stop'], { cwd: testDir, stdio: 'inherit' })
+  if (browser) {
+    await browser.close()
+  }
+  if (err) {
+    throw err
+  }
+})

packages/examples/react-in-vue/__tests__/react-in-vue.spec.ts renamed to packages/examples/react-in-vue/__tests__/react-in-vue.spec.dev&serve.ts

@@ -0,0 +1,26 @@
+import { browserLogs, page } from '~utils'
+import { expect, test } from 'vitest'
+
+test('should have no 404s', () => {
+  browserLogs.forEach((msg) => {
+    expect(msg).not.toMatch('404')
+  })
+})
+
+test('Reacted Products', async () => {
+  expect(
+    await page.textContent('#reco>h3')
+  ).toBe('Related Products')
+})
+
+test('buy', async () => {
+  expect(
+    await page.textContent('#buy>button')
+  ).toBe(' buy for 66,00 €')
+})
+
+test('baskets', async () => {
+  expect(
+      await page.textContent('#basket>div')
+  ).toBe("basket: 0 item(s)")
+})

packages/examples/simple-react-esm/__tests__/simple-react-esm.spec.ts renamed to packages/examples/simple-react-esm/__tests__/simple-react-esm.spec.serve.ts

@@ -12,7 +12,10 @@
     "build": "pnpm --parallel --filter \"./**\" build ",
     "serve": "pnpm --parallel --filter \"./**\" serve ",
     "restart": "pnpm stop & pnpm build & pnpm serve",
-    "stop": "kill-port --port 5001,5002,5003",
+    "build:remotes": "pnpm --parallel --filter \"./team-blue\" --filter \"./team-green\"  build",
+    "serve:remotes": "pnpm --parallel --filter \"./team-blue\" --filter \"./team-green\"  serve",
+    "dev:hosts": "pnpm --filter \"./team-red\" dev",
+    "stop": "kill-port --port 5000,5001,5002",
     "clean": "pnpm run clean"
   },
   "devDependencies": {

packages/examples/simple-react-systemjs/__tests__/simple-react-systemjs.spec.ts renamed to packages/examples/simple-react-systemjs/__tests__/simple-react-systemjs.serve.spec.ts

@@ -4,11 +4,11 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5003 --strictPort",
+    "dev": "vite --port 5001 --strictPort",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview --port 5003 --strictPort",
+    "serve": "vite preview --port 5001 --strictPort",
     "clean": "rm -rf dist",
-    "stop": "kill-port --port 5003"
+    "stop": "kill-port --port 5001"
   },
   "dependencies": {
     "vue": "^3.2.45",

packages/examples/simple-react-webpack/__tests__/simple-react-systemjs.spec.ts renamed to packages/examples/simple-react-webpack/__tests__/simple-react-systemjs.serve.spec.ts

@@ -4,11 +4,11 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5001 --strictPort",
+    "dev": "vite --port 5000 --strictPort",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview --port 5001 --strictPort",
+    "serve": "vite preview --port 5000 --strictPort",
     "clean": "rm -rf dist",
-    "stop": "kill-port --port 5001"
+    "stop": "kill-port --port 5000"
   },
   "dependencies": {
     "element-plus": "^2.2.15",

packages/examples/testUtils.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       name: 'team-red',
       remotes: {
         "team-blue": "http://localhost:5002/assets/remoteEntry.js",
-        "team-green": "http://localhost:5003/assets/remoteEntry.js",
+        "team-green": "http://localhost:5001/assets/remoteEntry.js",
       },
       shared: ['vue','pinia']
   })

packages/examples/vitestSetup-dev.ts

@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo-esm/layout-esm",
+  "name": "@vue3-demo-esm-shared-store/host",
   "private": true,
   "version": "1.0.0",
   "scripts": {

packages/examples/vitestSetup.ts renamed to packages/examples/vitestSetup-serve.ts

@@ -3,14 +3,16 @@
   "private": true,
   "version": "1.0.0",
   "workspaces": [
-    "home",
-    "common-lib",
-    "layout",
-    "css-modules"
+    "host",
+    "remote-A",
+    "remote-B"
   ],
   "scripts": {
     "build": "pnpm --parallel --filter \"./**\" build ",
     "serve": "pnpm --parallel --filter \"./**\" serve",
+    "build:remotes": "pnpm --parallel --filter \"./remote-A\" --filter \"./remote-B\"  build",
+    "serve:remotes": "pnpm --parallel --filter \"./remote-A\" --filter \"./remote-B\"  serve",
+    "dev:hosts": "pnpm --filter \"./host\" dev",
     "stop": "kill-port --port 5000,5001,5002,5003"
   },
   "devDependencies": {

packages/examples/vue2-demo/__tests__/vue2-demo.spec.ts renamed to packages/examples/vue2-demo/__tests__/vue2-demo.serve.spec.ts

@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo-esm/home-esm",
+  "name": "@vue3-demo-esm-shared-store/remote-A",
   "private": true,
   "version": "1.0.0",
   "scripts": {

packages/examples/vue3-advanced-demo/__tests__/vue3-advanced-demo.dev&serve.spec.ts

@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo-esm/home-esm",
+  "name": "@vue3-demo-esm-shared-store/remote-B",
   "private": true,
   "version": "1.0.0",
   "scripts": {

packages/examples/vue3-advanced-demo/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo-esm/common-lib-esm",
+  "name": "@vue3-demo-esm/common-lib",
   "private": true,
   "version": "1.0.0",
   "scripts": {

packages/examples/vue3-advanced-demo/team-green/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo-esm/css-modules-esm",
+  "name": "@vue3-demo-esm/css-modules",
   "private": true,
   "version": "1.0.0",
   "scripts": {

packages/examples/vue3-advanced-demo/team-red/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo-esm/home-esm",
+  "name": "@vue3-demo-esm/home",
   "private": true,
   "version": "1.0.0",
   "scripts": {

packages/examples/vue3-advanced-demo/team-red/vite.config.ts

@@ -1,5 +1,5 @@
 {
-  "name": "@vue3-demo-esm/layout-esm",
+  "name": "@vue3-demo-esm/layout",
   "private": true,
   "version": "1.0.0",
   "scripts": {

packages/examples/vue3-demo-esm-shared-store/__tests__/vue3-demo-esm-shared-store.spec.ts renamed to packages/examples/vue3-demo-esm-shared-store/__tests__/vue3-demo-esm-shared-store.dev&serve.spec.ts

@@ -11,6 +11,9 @@
   "scripts": {
     "build": "pnpm --parallel --filter \"./**\" build ",
     "serve": "pnpm --parallel --filter \"./**\" serve",
+    "build:remotes": "pnpm --parallel --filter \"./home\" --filter \"./css-modules\" --filter \"./common-lib\"  build",
+    "serve:remotes": "pnpm --parallel --filter \"./home\" --filter \"./css-modules\" --filter \"./common-lib\"  serve",
+    "dev:hosts": "pnpm --filter \"./layout\" dev",
     "stop": "kill-port --port 5000,5001,5002,5003"
   },
   "devDependencies": {

packages/examples/vue3-demo-esm-shared-store/host/package.json

@@ -21,7 +21,7 @@ export default defineConfig({
   build: {
     assetsInlineLimit: 40960,
     target: 'esnext',
-    minify: true,
+    minify: false,
     cssCodeSplit: false,
     sourcemap: true,
     rollupOptions: {

packages/examples/vue3-demo-esm-shared-store/package.json

@@ -12,6 +12,9 @@
     "start": "pnpm start",
     "build": "pnpm --parallel --filter \"./**\" build",
     "serve": "pnpm --parallel --filter \"./**\" serve",
+    "build:remotes": "pnpm --parallel --filter \"./home\" --filter \"./css-modules\" --filter \"./common-lib\"  build",
+    "serve:remotes": "pnpm --parallel --filter \"./home\" --filter \"./css-modules\" --filter \"./common-lib\"  serve",
+    "dev:hosts": "pnpm --filter \"./layout\" dev",
     "stop": "kill-port --port 5000,5001,5002,5003",
     "clean": "rm -rf dist"
   },

packages/examples/vue3-demo-esm-shared-store/remote-A/package.json

@@ -4,6 +4,9 @@
   "scripts": {
     "build": "pnpm --parallel --filter \"./**\" build ",
     "serve": "pnpm --parallel --filter \"./**\" serve",
+    "build:remotes": "pnpm --parallel --filter \"./home\"  build",
+    "serve:remotes": "pnpm --parallel --filter \"./home\"  serve",
+    "dev:hosts": "pnpm --filter \"./layout\" dev",
     "stop": "kill-port --port 5000,5001"
   },
   "workspaces": [

packages/examples/vue3-demo-esm-shared-store/remote-B/package.json

@@ -4,6 +4,9 @@
   "scripts": {
     "build": "pnpm --parallel --filter \"./**\" build",
     "serve": "pnpm --parallel --filter \"./**\" serve ",
+    "build:remotes": "pnpm --filter \"./home\"  build",
+    "serve:remotes": "pnpm --filter \"./home\"  serve",
+    "dev:hosts": "pnpm --filter \"./layout\" dev",
     "stop": "kill-port --port 5000,5001"
   },
   "workspaces": [