test: update statistic test

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'skeleton', // dev components
+    componentName: 'statistic', // dev components
   },
 };

components/statistic/__tests__/__snapshots__/demo.test.js.snap

@@ -16,7 +16,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
 exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
 <div style="background: rgb(236, 236, 236); padding: 30px;">
   <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
-    <div class="ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+    <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
       <div class="ant-card ant-card-bordered">
         <div class="ant-card-body">
           <div class="ant-statistic" style="margin-right: 50px;">
@@ -26,7 +26,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <div class="ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+    <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
       <div class="ant-card ant-card-bordered">
         <div class="ant-card-body">
           <div class="ant-statistic" valueclass="demo-class">
@@ -42,19 +42,19 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
 
 exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
 <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
-  <div class="ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Countdown</div>
       <div class="ant-statistic-content"><span class="ant-statistic-content-value">48:00:30</span></div>
     </div>
   </div>
-  <div class="ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Million Seconds</div>
       <div class="ant-statistic-content"><span class="ant-statistic-content-value">48:00:30:000</span></div>
     </div>
   </div>
-  <div class="ant-col-24" style="padding-left: 8px; padding-right: 8px; margin-top: 32px;">
+  <div class="ant-col ant-col-24" style="padding-left: 8px; padding-right: 8px; margin-top: 32px;">
     <div class="ant-statistic">
       <div class="ant-statistic-title">Day Level</div>
       <div class="ant-statistic-content"><span class="ant-statistic-content-value">2 天 0 时 0 分 30 秒</span></div>
@@ -65,13 +65,13 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
 
 exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
 <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
-  <div class="ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" style="margin-right: 50px;">
       <div class="ant-statistic-title">Feedback</div>
       <div class="ant-statistic-content"><span class="ant-statistic-content-value"><span class="ant-statistic-content-value-int">1,128</span></span><span class="ant-statistic-content-suffix"><i aria-label="icon: like" class="anticon anticon-like"><svg viewBox="64 64 896 896" data-icon="like" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg></i></span></div>
     </div>
   </div>
-  <div class="ant-col-12" style="padding-left: 8px; padding-right: 8px;">
+  <div class="ant-col ant-col-12" style="padding-left: 8px; padding-right: 8px;">
     <div class="ant-statistic" valueclass="demo-class">
       <div class="ant-statistic-title">Unmerged</div>
       <div class="ant-statistic-content"><span class="ant-statistic-content-value"><span class="ant-statistic-content-value-int">93</span></span><span class="ant-statistic-content-suffix"><span> / 100</span></span></div>

components/statistic/__tests__/index.test.js

@@ -3,8 +3,14 @@ import { asyncExpect } from '@/tests/utils';
 import MockDate from 'mockdate';
 import moment from 'moment';
 import Statistic from '..';
+import { formatTimeStr } from '../utils';
+import { sleep } from '../../../tests/utils';
+import mountTest from '../../../tests/shared/mountTest';
 
 describe('Statistic', () => {
+  mountTest(Statistic);
+  mountTest(Statistic.Countdown);
+
   beforeAll(() => {
     MockDate.set(moment('2018-11-28 00:00:00'));
   });
@@ -104,4 +110,9 @@ describe('Statistic', () => {
       // expect(instance.countdownId).toBe(undefined);
     });
   });
+  describe('utils', () => {
+    it('format should support escape', () => {
+      expect(formatTimeStr(1000 * 60 * 60 * 24, 'D [Day]')).toBe('1 Day');
+    });
+  });
 });

components/statistic/demo/countdown.md

@@ -41,7 +41,7 @@ Countdown component.
     },
     methods: {
       onFinish() {
-        console.log('over');
+        console.log('finished!');
       },
     },
   };

components/statistic/utils.js

@@ -14,10 +14,14 @@ const timeUnits = [
   ['S', 1], // million seconds
 ];
 
-function formatTimeStr(duration, format) {
+export function formatTimeStr(duration, format) {
   let leftDuration = duration;
 
-  return timeUnits.reduce((current, [name, unit]) => {
+  const escapeRegex = /\[[^\]]*\]/g;
+  const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
+  const templateText = format.replace(escapeRegex, '[]');
+
+  const replacedText = timeUnits.reduce((current, [name, unit]) => {
     if (current.indexOf(name) !== -1) {
       const value = Math.floor(leftDuration / unit);
       leftDuration -= value * unit;
@@ -27,7 +31,14 @@ function formatTimeStr(duration, format) {
       });
     }
     return current;
-  }, format);
+  }, templateText);
+
+  let index = 0;
+  return replacedText.replace(escapeRegex, () => {
+    const match = keepList[index];
+    index += 1;
+    return match;
+  });
 }
 
 export function formatCountdown(value, config) {