feat: 补充单元测试一些注释

baobao12356 · Jul 21, 2021 · 9d07b91 · 9d07b91
1 parent 4f67506
commit 9d07b91
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 8 deletions.
diff --git a/src/__tests__/common.ts b/src/__tests__/common.ts
@@ -22,6 +22,7 @@ export const ports = {
   source_patch: 9013,
 }
 
+// 启动服务
 export function startServer (port?: number): void {
   if (typeof port === 'number') {
     liveServer.params.port = port
@@ -30,13 +31,21 @@ export function startServer (port?: number): void {
   liveServer.start(liveServer.params)
 }
 
+// 重写console.warn和console.error
 const rawWarn = global.console.warn
 const rawError = global.console.error
 export function rewriteConsole (): void {
   global.console.warn = jest.fn()
   global.console.error = jest.fn()
 }
 
+// 释放console
+export function releaseConsole (): void {
+  global.console.warn = rawWarn
+  global.console.error = rawError
+}
+
+// 初始基座页面的内容
 export function initDocument (): void {
   const baseStyle = document.createElement('style')
   baseStyle.textContent = `
@@ -71,11 +80,6 @@ export function commonStartEffect (port?: number): void {
   initDocument()
 }
 
-export function releaseConsole (): void {
-  global.console.warn = rawWarn
-  global.console.error = rawError
-}
-
 export function releaseAllEffect (): Promise<boolean> {
   // 所有test结束后，jest会自动清空document及其内容，从而导致出错，所以要主动卸载所有应用
   document.querySelector('#app-container')!.innerHTML = ''
@@ -90,11 +94,16 @@ export function releaseAllEffect (): Promise<boolean> {
   })
 }
 
+/**
+ * 绑定应用
+ * @param appName 应用名称
+ */
 export function setAppName (appName: string): void {
   setCurrentAppName(appName)
   defer(() => setCurrentAppName(null))
 }
 
+// 清空当前绑定的应用
 export function clearAppName (): void {
   setCurrentAppName(null)
 }
diff --git a/src/__tests__/create_app.test.ts b/src/__tests__/create_app.test.ts
@@ -16,6 +16,7 @@ describe('create_app', () => {
     return releaseAllEffect()
   })
 
+  // 在子应用加载完静态资源之前就卸载，然后重新渲染
   test('unmount app before end of loading resource and remount', async () => {
     const microappElement1 = document.createElement('micro-app')
     microappElement1.setAttribute('name', 'test-app1')

diff --git a/src/__tests__/demo/common/script1.js b/src/__tests__/demo/common/script1.js
@@ -1,3 +1,4 @@
+// 初始化子应用文档内容
 const root = document.querySelector('#root')
 root.innerHTML = `
   <div class='container'>
@@ -6,6 +7,7 @@ root.innerHTML = `
   </div>
 `
 
+// 动态创建js、css标签
 const dynamicLink = document.createElement('link')
 dynamicLink.setAttribute('rel', 'stylesheet')
 dynamicLink.setAttribute('href', '/common/link2.css')
@@ -16,6 +18,11 @@ dynamicScript.setAttribute('src', './script2.js')
 document.body.appendChild(dynamicScript)
 
 console.log('子应用打印的信息 - 1')
+
+/**
+ * testBindFunction 为基座应用的全局变量，子应用访问时会兜底到基座应用
+ * 这里测试 testBindFunction 绑定的this及原型属性是否正常
+ */
 testBindFunction()
 testBindFunction() // test bind_function cacheMap
 eval('console.log("在app1 eval中执行")')

diff --git a/src/__tests__/demo/element-config/index.html b/src/__tests__/demo/element-config/index.html
@@ -13,8 +13,10 @@
   <link rel="stylesheet" href="./link1.css" exclude id='app4-link-exclude'>
   <link rel="apple-touch-icon" />
   <link rel="stylesheet" href="./link1.css" global>
+  <!-- 重复的 link1.css 会从缓存中读取 -->
   <link rel="stylesheet" href="./link1.css" global>
   <link rel="stylesheet" href="/common/link2.css">
+  <!-- common app中有设置全局link2.css、global.js，所以会先尝试从缓存中获取 -->
   <link rel="stylesheet" href="./link2.css">
   <script src="/common/global.js"></script>
   <title>element-config</title>
@@ -23,6 +25,7 @@
   <div id="root"></div>
   <script src="./script1.js" exclude id='app4-script-exclude'></script>
   <script src="./script2.js" global></script>
+  <!-- 重复的 script2.js 会从缓存中读取 -->
   <script src="./script2.js" global></script>
 </body>
 </html>
diff --git a/src/__tests__/demo/ssr-render/index.html b/src/__tests__/demo/ssr-render/index.html
@@ -15,10 +15,12 @@
 <body>
   <div id="root"></div>
   <div id='source-element-con'>
+    <!-- 这些地址在初始化时需要被补全，否则无法正常加载 -->
     <img src="/path-a/img.jpg" alt="" id='app2-img1'>
     <iframe src="/path-b/" frameborder="0" id='app2-iframe1'></iframe>
     <a href="path-c/index.html" id='app2-a1'></a>
   </div>
+  <!-- 测试元素查询的patch函数 -->
   <div id='patch-element-con'>
     <div name='ssr-html-name'></div>
     <div class='ssr-html-class'></div>

diff --git a/src/__tests__/demo/ssr-render/script1.js b/src/__tests__/demo/ssr-render/script1.js
@@ -1,3 +1,4 @@
+// 初始化页面内容
 const root = document.querySelector('#root')
 root.innerHTML = `
   <div class='container'>

diff --git a/src/__tests__/interact/index.test.ts b/src/__tests__/interact/index.test.ts
@@ -50,15 +50,18 @@ describe('data center', () => {
     const cbForApp2AutoTrigger = jest.fn()
     const cbForGlobal = jest.fn()
 
+    // 子应用app1绑定的监听函数
     const app1Cb = jest.fn()
     const app1CbOther = jest.fn()
     const app1Global = jest.fn()
 
+    // 子应用2绑定的监听函数
     const app2Cb = jest.fn()
     const app2CbAutoTrigger = jest.fn()
     const app2GlobalCb = jest.fn()
     const app2GlobalCbAutoTrigger = jest.fn()
 
+    // 数据对象
     const dataToApp1One = { info: 'data to app1 from baseapp' }
     const dataToApp1Two = { info: 'data to app1 from baseapp' }
     const dataFromApp1 = { info: 'data from app1' }

diff --git a/src/__tests__/interact/lifecycles_event.test.ts b/src/__tests__/interact/lifecycles_event.test.ts
@@ -15,6 +15,7 @@ describe('lifecycles_event', () => {
     return releaseAllEffect()
   })
 
+  // 生命周期函数测试覆盖
   test('render common app', async () => {
     const microappElement = document.createElement('micro-app')
     microappElement.setAttribute('name', 'test-app')

diff --git a/src/__tests__/micro_app.test.ts b/src/__tests__/micro_app.test.ts
@@ -23,6 +23,7 @@ test('just define micro-app in pure start', () => {
   expect(Boolean(window.customElements.get('micro-app'))).toBeTruthy()
 })
 
+// 在不支持customElements的环境下打印错误信息
 test('log error message if customElements is not supported in this environment', () => {
   const rawcustomElements = window.customElements
   Object.defineProperty(window, 'customElements', {
@@ -37,6 +38,7 @@ test('log error message if customElements is not supported in this environment',
   window.customElements = rawcustomElements
 })
 
+// tagName非法
 test('log error message if config error tagName', () => {
   microApp.start({
     tagName: 'error-name',

diff --git a/src/__tests__/prefetch.test.ts b/src/__tests__/prefetch.test.ts
@@ -9,8 +9,8 @@ global.console.error = jest.fn()
 test('coverage branch for prefetch', async () => {
   microApp.start()
 
-  preFetch(123 as any)
-  preFetch([{ name: 'test-app1', url: 'http://www.micro-app-test.com' }])
+  preFetch(123 as any) // 非法的入参
+  preFetch([{ name: 'test-app1', url: 'http://www.micro-app-test.com' }]) // 正常入参
   await new Promise((reslove) => {
     setTimeout(() => {
       reslove(true)

diff --git a/src/__tests__/source/patch.test.ts b/src/__tests__/source/patch.test.ts
@@ -15,7 +15,7 @@ describe('source patch', () => {
     return releaseAllEffect()
   })
 
-  // getElementsByName 测试
+  // 子应用中操作元素的行为需要被拦截和处理
   test('element query', async () => {
     const microappElement1 = document.createElement('micro-app')
     microappElement1.setAttribute('name', 'test-app1')