test: add unit test badge

src/progress/README.md

@@ -5,6 +5,7 @@ spline: message
 isComponent: true
 ---
 
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-54%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-60%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-50%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-23%25-red" /></span>
 ## 引入
 
 ### 引入组件

src/progress/__test__/index.test.js

@@ -1,20 +1,74 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
-import { getBackgroundColor } from '../utils';
 
 describe('progress', () => {
   const progress = simulate.load(path.resolve(__dirname, `../progress`), {
     less: true,
   });
+  it(`: status `, () => {
+    const id = simulate.load({
+      template: `
+      <t-progress class="base" status="{{status}}" ></t-progress>
+      `,
+      data: {},
+      methods: {},
+      usingComponents: {
+        't-progress': progress,
+      },
+    });
+
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
 
-  it(`progress :`, async () => {
+    comp.setData({
+      status: 'error',
+    });
+
+    const component = comp.querySelector('.base >>> .t-progress');
+    expect(component.dom.getAttribute('class').includes('t-progress--status--error')).toBeTruthy();
+  });
+
+  it(`: label `, async () => {
     const id = simulate.load({
       template: `
+      <t-progress class="base" lable="{{label}}" percentage="{{percentage}}" ></t-progress>
+      `,
+      data: {},
+      methods: {
+        percentage: 88,
+      },
+      usingComponents: {
+        't-progress': progress,
+      },
+    });
 
-      <t-progress percentage="{{percentage}}" color="{{color}}"></t-progress>
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    comp.setData({
+      label: true,
+      percentage: 100,
+    });
+
+    const $progress = comp.querySelector('.base');
+    expect($progress.data.computedProgress).toBe(100);
+
+    // props: status
+    const component = comp.querySelector('.base >>> .t-progress');
+    expect($progress.data.computedStatus).toBe('success');
+    expect(component.dom.getAttribute('class').includes('t-progress--status--success')).toBeTruthy();
+
+    // props: label
+    const label = comp.querySelector('.base >>> .t-progress__label');
+    expect(label.dom.textContent.trim()).toBe('100%');
+  });
+
+  it(`: color `, () => {
+    const id = simulate.load({
+      template: `
+      <t-progress class="base" color="{{color}}" ></t-progress>
       `,
       data: {
-        percentage: 88,
         color: '#0052D9',
       },
       methods: {},
@@ -26,21 +80,89 @@ describe('progress', () => {
     const comp = simulate.render(id);
     comp.attach(document.createElement('parent-wrapper'));
 
-    // await simulate.sleep(10);
-    // const $btn = comp.querySelector('.btn >>> .t-button');
-    // $btn.dispatchEvent('click');
+    comp.setData({
+      color: 'rgb(0, 82, 222)',
+    });
+    const barPercent = comp.querySelector('.base >>> .t-progress__bar-percent ');
+    expect(window.getComputedStyle(barPercent.dom).background).toBe('rgb(0, 82, 222)');
+  });
+
+  it(`: trackColor `, () => {
+    const id = simulate.load({
+      template: `
+      <t-progress class="base" trackColor="{{trackColor}}" ></t-progress>
+      `,
+      data: {
+        trackColor: '#0052D9',
+      },
+      methods: {},
+      usingComponents: {
+        't-progress': progress,
+      },
+    });
+
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    comp.setData({
+      trackColor: 'rgb(0, 82, 200)',
+    });
+    const bar = comp.querySelector('.base >>> .t-progress__bar');
+    expect(window.getComputedStyle(bar.dom).background).toBe('rgb(0, 82, 200)');
+  });
+
+  it(`: percentage `, () => {
+    const id = simulate.load({
+      template: `
+      <t-progress class="base" percentage="{{percentage}}"></t-progress>
+      `,
+      data: {
+        percentage: 88,
+      },
+      methods: {},
+      usingComponents: {
+        't-progress': progress,
+      },
+    });
+
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $progress = comp.querySelector('.base');
+    expect($progress.data.computedProgress).toBe(88);
+    const barPercent = comp.querySelector('.base >>> .t-progress__bar-percent');
 
-    // await simulate.sleep(10);
-    // comp.setData({ color: ['#f00', '#0ff', '#f0f'] });
+    expect(barPercent.dom.getAttribute('style').includes('width:88%')).toBeTruthy();
+
+    comp.setData({
+      percentage: 100,
+    });
+    expect($progress.data.computedProgress).toBe(100);
+    expect(barPercent.dom.getAttribute('style').includes('width:100%')).toBeTruthy();
   });
-});
 
-describe('function getBackgroundColor', () => {
-  // 输入 ['#f00', '#0ff', '#f0f']，预期值为 linear-gradient( 90deg,#f00,#0ff,#f0f )
-  // 输入 { from: '#000', to: '#000' }，预期值为 linear-gradient(to right, #000, #000)
-  it('getBackgroundColor() to equal string', () => {
-    expect(getBackgroundColor(['#f00', '#0ff', '#f0f'])).toBe('linear-gradient( 90deg,#f00,#0ff,#f0f )');
-    expect(getBackgroundColor({ from: '#000', to: '#000' })).toBe('linear-gradient(to right, #000, #000)');
-    expect(getBackgroundColor({ '0%': '#f00', '100%': '#0ff' })).toBe('linear-gradient(to right, #f00 0%,#0ff 100%)');
+  it(`: strokeWidth `, () => {
+    const id = simulate.load({
+      template: `
+      <t-progress class="base" strokeWidth="{{strokeWidth}}"></t-progress>
+      `,
+      data: {
+        strokeWidth: '',
+      },
+      methods: {},
+      usingComponents: {
+        't-progress': progress,
+      },
+    });
+
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    comp.setData({
+      strokeWidth: 10,
+    });
+
+    const bar = comp.querySelector('.base >>> .t-progress__bar');
+    expect(bar.dom.getAttribute('style').includes('height: 10px')).toBeTruthy();
   });
 });