fix: enrich coverage badge type

package.json

@@ -161,9 +161,9 @@
     "rollup-pluginutils": "^2.8.2",
     "tdesign-icons-view": "^0.1.0",
     "tdesign-publish-cli": "^0.0.10",
-    "tdesign-site-components": "^0.10.0",
+    "tdesign-site-components": "^0.11.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.2",
+    "typescript": "~4.7.2",
     "vite": "^2.9.14",
     "vite-plugin-tdoc": "^2.0.1",
     "vitest": "^0.16.0",

scripts/test/generate-coverage.js

@@ -3,60 +3,7 @@ const path = require('path');
 const camelCase = require('camelcase');
 
 const DomParser = require('dom-parser');
-
 const parser = new DomParser();
-const result = {};
-
-// 只关注组件本身的测试覆盖率
-const components_enum = [
-  'button',
-  'fab',
-  'icon',
-  'cell',
-  'divider',
-  'grid',
-  'DropdownMenu',
-  'indexes',
-  'navbar',
-  'steps',
-  'stikcy',
-  'tabBar',
-  'checkbox',
-  'DateTimePicker',
-  'input',
-  'picker',
-  'radio',
-  'rate',
-  'search',
-  'slider',
-  'stepper',
-  'switch',
-  'textarea',
-  'upload',
-  'avater',
-  'badge',
-  'collapse',
-  'countDown',
-  'image',
-  'imageViewer',
-  'list',
-  'reault',
-  'skeleton',
-  'swiper',
-  'tag',
-  'actionSheet',
-  'backTop',
-  'dialog',
-  'drawer',
-  'loading',
-  'message',
-  'noticeBar',
-  'overlay',
-  'popup',
-  'progress',
-  'PullDownRefresh',
-  'swipeCell',
-]
 
 function resolveCwd(...args) {
   args.unshift(process.cwd());
@@ -65,28 +12,40 @@ function resolveCwd(...args) {
 
 fs.readFile(resolveCwd('test/unit/coverage/index.html'), 'utf8', (err, html) => {
   if (err) {
-    console.log('please execute npm run test:coverage first!', err);
+    console.log('please execute npm run test:unit-coverage first!', err);
     return;
   }
   if (!err) {
     const dom = parser.parseFromString(html);
     const tds = dom.getElementsByTagName('td');
 
-    let key = '';
-    let value = '';
+    const size = 10;
+    const groups = Math.ceil(tds.length / size);
+    let componentCoverage = [];
+    for (let i = 0; i < groups; i++) {
+      componentCoverage.push(tds.slice(i * size, (i + 1) * size))
+    }
 
-    Array.from(tds).forEach((item, index) => {
-      const col = index % 10;
-      if (col === 0) {
-        const [, name] = item.getAttribute('data-value').split('src/');
-        components_enum.includes(name) && (key = camelCase(name));
-      } else if (col === 8) {
-        value = `${item.getAttribute('data-value')}%`;
-      } else if (col === 9) {
-        result[key] = value;
+    let resultCoverage = {};
+    componentCoverage.forEach((item, index) => {
+      if ( item[0].getAttribute('data-value').indexOf('/') != -1  && item[0].getAttribute('data-value').indexOf('/') === item[0].getAttribute('data-value').lastIndexOf('/')) {
+        const [, name] = item[0].getAttribute('data-value').split('/');
+        const statements = `${item[2].getAttribute('data-value')}%`;
+        const branches = `${item[4].getAttribute('data-value')}%`;
+        const functions = `${item[6].getAttribute('data-value')}%`;
+        const lines = `${item[8].getAttribute('data-value')}%`;
+
+        const key = camelCase(name)
+        resultCoverage[key] = {
+          statements,
+          branches,
+          functions,
+          lines,
+        };
       }
-    });
-    const finalRes = `module.exports = ${JSON.stringify(result, null, 2)}`;
+    })
+
+    const finalRes = `module.exports = ${JSON.stringify(resultCoverage)}`;
     fs.writeFileSync(resolveCwd('site/web/test-coverage.js'), finalRes);
     console.log('successful re-generate coverage');
   }

site/web/plugin-tdoc/md-to-vue.js

@@ -16,9 +16,9 @@ export default function mdToVue(options) {
   const mdSegment = customRender(options);
   const { demoCodesDefsStr, demoCodeInstallStr } = options;
 
-  let coverage = '';
+  let coverage = {};
   if (mdSegment.isComponent) {
-    coverage = testCoverage[camelCase(mdSegment.componentName)] || '0%';
+    coverage = testCoverage[camelCase(mdSegment.componentName)] || {};
   }
 
   const sfc = `
@@ -34,7 +34,12 @@ export default function mdToVue(options) {
             spline="${mdSegment.spline}"
             component-name="${mdSegment.isComponent ? mdSegment.componentName : ''}"
           >
-          ${mdSegment.isComponent ? `<td-doc-badge slot="badge" label="coverage" message="${coverage}" />` : ''}
+          ${mdSegment.isComponent ? `
+            <td-doc-badge style="margin-right: 10px" slot="badge" label="coverages: lines" message="${coverage.lines || '0%'}" />
+            <td-doc-badge style="margin-right: 10px" slot="badge" label="coverages: functions" message="${coverage.functions || '0%'}" />
+            <td-doc-badge style="margin-right: 10px" slot="badge" label="coverages: statements" message="${coverage.statements || '0%'}" />
+            <td-doc-badge style="margin-right: 10px" slot="badge" label="coverages: branches" message="${coverage.branches || '0%'}" />`
+          : ''}
           </td-doc-header>` : ''
         }
         ${
@@ -112,7 +117,7 @@ export default function mdToVue(options) {
           }
 
           Prismjs.highlightAll();
-    
+
           this.$emit('loaded', () => {
             tdDocContent.pageStatus = 'show';
           });