test(divider): add unit test

babel.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
   plugins: [
-    ['@babel/plugin-proposal-decorators', { 'legacy': true }],
-    ['@babel/plugin-proposal-class-properties', { 'loose' : true }]
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
   ],
 };

jest.config.js

@@ -12,15 +12,18 @@ module.exports = {
   coverageDirectory: '<rootDir>/test/unit/coverage',
   reporters: [
     'default',
-    ['./node_modules/jest-html-reporter', {
-      pageTitle: 'TDesign-miniprogram Unit Test Report',
-      outputPath: './test/unit/report/test-report.html',
-    }],
+    [
+      './node_modules/jest-html-reporter',
+      {
+        pageTitle: 'TDesign-miniprogram Unit Test Report',
+        outputPath: './test/unit/report/test-report.html',
+      },
+    ],
   ],
   setupFiles: ['<rootDir>/script/test/setup.js'],
   coverageReporters: ['html', 'json-summary'],
   globals: {
     CONFIG_PREFIX: 't',
   },
-  snapshotSerializers: ["miniprogram-simulate/jest-snapshot-plugin"]
+  snapshotSerializers: ['miniprogram-simulate/jest-snapshot-plugin'],
 };

src/divider/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-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-0%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-0%25-red" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

src/divider/__test__/index.test.js

@@ -0,0 +1,119 @@
+import simulate from 'miniprogram-simulate';
+import path from 'path';
+
+// 文本位置
+const textAlign = ['left', 'center', 'right'];
+
+// 类型
+const layout = ['horizontal', 'vertical'];
+
+describe('Divider', () => {
+  const divider = simulate.load(path.resolve(__dirname, `../divider`), 't-divider', {
+    less: true,
+    rootPath: path.resolve(__dirname, '../..'),
+  });
+
+  textAlign.forEach((align) => {
+    it(`:align ${align} render correctly`, () => {
+      const id = simulate.load({
+        template: `<t-divider class="divider" align={{align}}></t-divider>`,
+        usingComponents: {
+          't-divider': divider,
+        },
+        data: {
+          align,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      const $divider = comp.querySelector('.divider >>> .t-divider');
+      expect($divider.dom.getAttribute('class').includes(`t-divider--${align}`));
+    });
+  });
+
+  it(`:content string render correctly`, () => {
+    const id = simulate.load({
+      template: `<t-divider class="divider" content={{content}}></t-divider>`,
+      usingComponents: {
+        't-divider': divider,
+      },
+      data: {
+        content: '文字信息',
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $divider = comp.querySelector('.divider >>> .t-divider__content');
+    expect($divider.dom.innerHTML).toBe('<wx-view> 文字信息 </wx-view>');
+  });
+
+  it(`:content slot render correctly`, () => {
+    const id = simulate.load({
+      template: `<t-divider class="divider"><text slot="content">文字信息</text></t-divider>`,
+      usingComponents: {
+        't-divider': divider,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $divider = comp.querySelector('.divider >>> .t-divider__content');
+    expect($divider.dom.innerHTML).toBe('<wx-text>文字信息</wx-text>');
+  });
+
+  it(':dashed render correctly', () => {
+    const id = simulate.load({
+      template: `<t-divider class="divider" dashed={{dashed}}></t-divider>`,
+      usingComponents: {
+        't-divider': divider,
+      },
+      data: {
+        dashed: true,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $divider = comp.querySelector('.divider >>> .t-divider');
+    expect($divider.dom.getAttribute('class').includes(`t-divider--dash`));
+  });
+
+  layout.forEach((lay) => {
+    it(`:layout ${lay} render correctly`, () => {
+      const id = simulate.load({
+        template: `<t-divider class="divider" layout={{layout}}></t-divider>`,
+        data: {
+          layout: 'horizontal',
+        },
+        usingComponents: {
+          't-divider': divider,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      const $divider = comp.querySelector('.divider >>> .t-divider');
+      expect($divider.dom.getAttribute('class').includes(`t-divider--${lay}`));
+    });
+  });
+
+  it(':line-color render correctly', () => {
+    const lineColor = '#eee';
+    const id = simulate.load({
+      template: `<t-divider class="divider" lineColor={{lineColor}}></t-divider>`,
+      usingComponents: {
+        't-divider': divider,
+      },
+      data: {
+        lineColor,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $divider = comp.querySelector('.divider >>> .t-divider');
+    expect($divider.dom.style.borderColor).toBe('#eee');
+  });
+});