feat: 完善0.4.1单元测试

.eslintignore

@@ -4,4 +4,4 @@ node_modules
 /polyfill
 /docs
 /plugins
-/src/__tests__/demo
+/src/__tests__/demos

docs/zh-cn/advanced.md

@@ -154,39 +154,51 @@ microApp.start({
 #### ** React **
 ```js
 // index.js
-...
+import React from "react"
+import ReactDOM from "react-dom"
+import App from './App'
+
 // 👇 将渲染操作放入 mount 函数
 export function mount () {
   ReactDOM.render(<App />, document.getElementById("root"))
 }
 
 // 👇 将卸载操作放入 unmount 函数
 export function unmount () {
-  ReactDOM.unmountComponentAtNode(document.getElementById("root"));
+  ReactDOM.unmountComponentAtNode(document.getElementById("root"))
 }
 
 // 微前端环境下，注册mount和unmount方法
 if (window.__MICRO_APP_ENVIRONMENT__) {
   window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
 } else {
   // 非微前端环境直接渲染
-  mount();
+  mount()
 }
 ```
 
 #### ** Vue2 **
+这里只介绍配合`vue-router3.x`的用法
+
 ```js
 // main.js
-...
+import Vue from 'vue'
+import router from './router'
+import App from './App.vue'
+
 let app = null
 // 👇 将渲染操作放入 mount 函数
 function mount () {
-  app = new Vue(...).$mount('#app')
+  app = new Vue({
+    router,
+    render: h => h(App),
+  }).$mount('#app')
 }
 
 // 👇 将卸载操作放入 unmount 函数
 function unmount () {
   app.$destroy()
+  app.$el.innerHTML = ''
   app = null
 }
 
@@ -200,12 +212,26 @@ if (window.__MICRO_APP_ENVIRONMENT__) {
 ```
 
 #### ** Vue3 **
+这里只介绍配合`vue-router4.x`的用法
+
 ```js
 // main.js
-...
+import { createApp } from 'vue'
+import * as VueRouter from 'vue-router'
+import routes from './router'
+import App from './App.vue'
+
 let app = null
+let router = null
+let history = null
 // 👇 将渲染操作放入 mount 函数
 function mount () {
+  history = VueRouter.createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/')
+  router = VueRouter.createRouter({
+    history,
+    routes,
+  })
+
   app = createApp(App)
   app.use(router)
   app.mount('#app')
@@ -214,7 +240,10 @@ function mount () {
 // 👇 将卸载操作放入 unmount 函数
 function unmount () {
   app.unmount()
+  history.destroy()
   app = null
+  router = null
+  history = null
 }
 
 // 微前端环境下，注册mount和unmount方法
@@ -244,17 +273,17 @@ declare global {
 
 let app = null;
 // 👇 将渲染操作放入 mount 函数
-function mount () {
-  platformBrowserDynamic().bootstrapModule(AppModule)
-  .then((ngModuleRef: any) => {
-    app = ngModuleRef
-  })
+async function mount () {
+  app = await platformBrowserDynamic()
+  .bootstrapModule(AppModule)
   .catch(err => console.error(err))
 }
 
 // 👇 将卸载操作放入 unmount 函数
 function unmount () {
   app?.destroy();
+  // 清空根元素，如果根元素不是app-root，根据实际情况调整
+  document.querySelector('app-root').innerHTML = '';
   app = null;
 }
 
@@ -271,12 +300,25 @@ if (window.__MICRO_APP_ENVIRONMENT__) {
 #### ** Vite **
 因为vite作为子应用时关闭了沙箱，导致`__MICRO_APP_ENVIRONMENT__`和`__MICRO_APP_NAME__`两个变量失效，所以需要自行判断是否微前端环境以及手动填写应用name值。
 
+这里以 vue3 + vue-router4 为例：
 ```js
 // main.js
-...
+import { createApp } from 'vue'
+import * as VueRouter from 'vue-router'
+import routes from './router'
+import App from './App.vue'
+
 let app = null
+let router = null
+let history = null
 // 👇 将渲染操作放入 mount 函数
 function mount () {
+  history = VueRouter.createWebHashHistory(import.meta.env.BASE_URL)
+  router = VueRouter.createRouter({
+    history,
+    routes,
+  })
+
   app = createApp(App)
   app.use(router)
   app.mount('#app')
@@ -285,11 +327,14 @@ function mount () {
 // 👇 将卸载操作放入 unmount 函数
 function unmount () {
   app.unmount()
+  history.destroy()
   app = null
+  router = null
+  history = null
 }
 
 // 微前端环境下，注册mount和unmount方法
-if (我在微前端环境) {
+if (如果是微前端环境) {
   // 应用的name值，即 <micro-app> 元素的name属性值
   window[`micro-app-${应用的name值}`] = { mount, unmount }
 } else {
@@ -299,8 +344,9 @@ if (我在微前端环境) {
 ```
 <!-- tabs:end -->
 
+#### 自定义名称
 
-通常注册的形式为`window['micro-app-${window.__MICRO_APP_NAME__}'] = {...}`，但也支持自定义名称，`window['自定义的名称'] = {...}`
+通常注册函数的形式为 `window['micro-app-${window.__MICRO_APP_NAME__}'] = {}`，但也支持自定义名称，`window['自定义的名称'] = {}`
 
 自定义的值需要在`<micro-app>`标签中通过`library`属性指定。
 

docs/zh-cn/changelog.md

@@ -14,11 +14,12 @@
 
 - **Bug Fix**
 
+  - 🐞 修复了umd模式下，应用二次渲染时样式丢失的问题
   - 🐞 修复了资源地址为空时，补全错误的问题
   - 🐞 修复了对iframe元素src属性的错误处理
   - 🐞 修复了mounted生命周期在异步脚本中执行时机错误的问题
   - 🐞 修复了在非沙箱环境下使用umd模式，开启destory后，卸载时注册的函数没有卸载的问题
-  - 🐞 修复了umd模式下，应用二次渲染时样式丢失的问题
+  - 🐞 修复了子应用带有preload时资源加载两次的问题
 
 - **Update**
 

docs/zh-cn/start.md

@@ -37,8 +37,6 @@ export default function AppRoute () {
     </BrowserRouter>
   )
 }
-
-export default routes
 ```
 
 #### ** Vue **

examples/children/angular11/src/main.ts

@@ -29,7 +29,8 @@ async function mount () {
 // 将卸载操作放入 unmount 函数
 function unmount () {
   app?.destroy();
-  document.querySelector('app-root').innerHTML = ''
+  // @ts-ignore
+  document.querySelector('app-root')?.innerHTML = '';
   app = null;
   console.log('微应用child-angular11卸载了');
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A minimalist solution for building micro front-end applications",
   "private": false,
   "main": "lib/index.min.js",

scripts/test_server.js

@@ -3,7 +3,7 @@ const path = require('path')
 
 const params = {
   port: 9000,
-  root: path.join(process.cwd(), '/src/__tests__/demo'),
+  root: path.join(process.cwd(), '/src/__tests__/demos'),
   open: false,
   file: 'index.html',
   wait: 1000,

src/__tests__/common/initial.ts

@@ -6,7 +6,7 @@ global.fetch = require('node-fetch')
 jest.useRealTimers()
 
 export const ports = {
-  index: 9000,
+  main: 9000,
   create_app: 9001,
   micro_app_element: 9002,
   lifecycles_event: 9003,

src/__tests__/create_app.test.ts

@@ -146,4 +146,27 @@ describe('create_app', () => {
       }, 200)
     })
   })
+
+  // 非沙箱环境的umd，在destory卸载时，注册在window的函数应该删除
+  test('render umd app with disablesandbox & destory', async () => {
+    const microAppElement6 = document.createElement('micro-app')
+    microAppElement6.setAttribute('name', 'test-app6')
+    microAppElement6.setAttribute('library', 'umd-app1') // 自定义umd名称
+    microAppElement6.setAttribute('url', `http://127.0.0.1:${ports.create_app}/umd1`)
+    microAppElement6.setAttribute('disablesandbox', 'true')
+    microAppElement6.setAttribute('destory', 'true')
+
+    appCon.appendChild(microAppElement6)
+
+    await new Promise((reslove) => {
+      microAppElement6.addEventListener('mounted', () => {
+        // @ts-ignore
+        expect(window['umd-app1']).not.toBeUndefined()
+        appCon.removeChild(microAppElement6)
+        // @ts-ignore
+        expect(window['umd-app1']).toBeUndefined()
+        reslove(true)
+      })
+    })
+  })
 })

src/__tests__/demo/common/index.html → src/__tests__/demos/common/index.html

@@ -12,6 +12,11 @@
   <link rel="stylesheet" href="/common/link1.css">
   <link rel="stylesheet" href="/common/link2.css" global>
   <link rel="preload" href="./manifest.js" as="script">
+  <!-- 分支覆盖 -->
+  <link rel="dns-prefetch" href="//test.com">
+  <link rel="dns-prefetch">
+  <!-- 分支覆盖 -->
+  <link rel="modulepreload" href="//test.com/test.js">
   <script src="/common/global.js" global></script>
   <script defer src="./defer.js"></script>
   <script async src="./async.js"></script>
@@ -29,6 +34,7 @@
   <script type='application/json'>
     window.abc = {}
   </script>
+  <script src="./script3.js"></script>
   <title>common</title>
 </head>
 <body>

src/__tests__/demos/common/script3.js

@@ -0,0 +1 @@
+console.warn('warn in /common/script3')

src/__tests__/demos/dynamic/script1.js

@@ -0,0 +1 @@
+console.warn('dynamic script1')

src/__tests__/demo/umd1/index.html → src/__tests__/demos/umd1/index.html

@@ -9,5 +9,6 @@
 <body>
   <div id='umd-root1'></div>
   <script src="./index.js"></script>
+  <script src="./script2.js"></script>
 </body>
 </html>

src/__tests__/demos/umd1/script2.js

@@ -0,0 +1 @@
+

src/__tests__/demo/umd2/index.js → src/__tests__/demos/umd2/index.js

@@ -6,11 +6,11 @@ window.removeEventListener('load', handleWindowLoad)
 let supportsPassive = false
 try {
   const opts = Object.defineProperty({}, 'passive', {
-    get: function() {
-      supportsPassive = true;
+    get: function () {
+      supportsPassive = true
     }
   })
- window.addEventListener("test", null, opts)
+  window.addEventListener('test', null, opts)
 } catch (e) {}
 
 // 不要加document事件监听 --- 单测分支覆盖！！！

src/__tests__/libs/utils.test.ts

@@ -12,14 +12,14 @@ afterAll(() => {
 
 test('uitls ==> logError & logWarn', () => {
   Utils.logError('msg')
-  expect(console.error).toBeCalledWith('[micro-app] msg')
+  expect(console.error).toHaveBeenLastCalledWith('[micro-app] msg')
   Utils.logError(new Error('123'), 'appName', 111)
-  expect(console.error).toBeCalledWith('[micro-app] app appName', expect.any(Error), 111)
+  expect(console.error).toHaveBeenLastCalledWith('[micro-app] app appName:', expect.any(Error), 111)
 
   Utils.logWarn('msg')
-  expect(console.warn).toBeCalledWith('[micro-app] msg')
+  expect(console.warn).toHaveBeenLastCalledWith('[micro-app] msg')
   Utils.logWarn(new Error('123'), 'appName', 111)
-  expect(console.warn).toBeCalledWith('[micro-app] app appName', expect.any(Error), 111)
+  expect(console.warn).toHaveBeenLastCalledWith('[micro-app] app appName:', expect.any(Error), 111)
 })
 
 test('call function in micro task', () => {