Merge pull request #729 from Tencent/test/radio/unit

Test/radio/unit

src/radio-group/radio-group.ts

@@ -58,7 +58,7 @@ export default class RadioGroup extends SuperComponent {
   methods = {
     getChilds() {
       let items = this.getRelationNodes('../radio/radio');
-      if (!items.length) {
+      if (!items?.length) {
         items = this.selectAllComponents(`.${prefix}-radio-option`);
       }
       return items;

src/radio/README.md

@@ -5,6 +5,7 @@ spline: form
 isComponent: true
 ---
 
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-98%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

src/radio/__test__/index.js

@@ -0,0 +1,13 @@
+Component({
+  data: {
+    value: '1',
+    options: ['a', 'b', { label: 'c', value: 'c' }],
+  },
+  methods: {
+    onChange(e) {
+      const { value } = e.detail;
+
+      this.setData({ value });
+    },
+  },
+});

src/radio/__test__/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "t-radio": "../radio",
+    "t-radio-group": "../../radio-group/radio-group"
+  }
+}

src/radio/__test__/index.test.js

@@ -2,22 +2,116 @@ import path from 'path';
 import simulate from 'miniprogram-simulate';
 
 describe('radio', () => {
-  const id = simulate.load(path.resolve(__dirname, '../../radio/radio'), 't-radio', {
-    less: true,
-    rootPath: path.resolve(__dirname, '../../'),
+  // test('comp should trigger change events', async () => {
+  //   const container = simulate.render(radio);
+  //   const comp = container.instance;
+  //   comp.triggerEvent = jest.fn();
+  //   comp.doChange();
+  //   expect(comp.triggerEvent).toHaveBeenCalled();
+  // });
+  const id = simulate.load(path.resolve(__dirname, `./index`), { less: true });
+
+  it(':base', async () => {
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const radio = comp.querySelector('.single');
+
+    expect(radio.data.checked).not.toBeTruthy();
+
+    radio.querySelector('.t-radio__icon').dispatchEvent('tap');
+    await simulate.sleep(10);
+
+    expect(radio.data.checked).toBeTruthy();
   });
 
-  test('comp should render correctly', async () => {
-    const container = simulate.render(id);
-    container.attach(document.createElement('parent-wrapper'));
-    expect(container.toJSON()).toMatchSnapshot();
+  it(':disabled', async () => {
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const radio = comp.querySelector('.disable');
+
+    expect(radio.data.checked).not.toBeTruthy();
+
+    radio.querySelector('.t-radio__icon').dispatchEvent('tap');
+    await simulate.sleep(10);
+
+    expect(radio.data.checked).not.toBeTruthy();
   });
 
-  test('comp should trigger change events', async () => {
-    const container = simulate.render(id);
-    const comp = container.instance;
-    comp.triggerEvent = jest.fn();
-    comp.doChange();
-    expect(comp.triggerEvent).toHaveBeenCalled();
+  describe('with group', () => {
+    it(`:base`, async () => {
+      // const id = simulate.load({
+      //   template: `
+      //   <t-radio-group class="group" value="1">
+      //     <t-radio class="a" value="1"></t-radio>
+      //   </t-radio-group>
+      //   `,
+      //   usingComponents: {
+      //     't-radio': './radio',
+      //     't-radio-group': '../../radio-group/radio-group',
+      //   },
+      //   rootPath: path.resolve(__dirname, '../..'),
+      //   compiler: 'official',
+      // });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      // const group = comp.querySelector('.group')
+      const a = comp.querySelector('.a');
+
+      expect(a.data.checked).toBeTruthy();
+
+      const b = comp.querySelector('.b >>> .t-radio__icon');
+
+      b.dispatchEvent('tap');
+
+      await simulate.sleep(10);
+
+      expect(comp.data.value).toBe('2');
+    });
+
+    it(`:disabled content`, async () => {
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      const a = comp.querySelector('.a');
+
+      expect(a.data.checked).toBeTruthy();
+
+      const b = comp.querySelector('.b >>> .t-radio__icon');
+
+      b.dispatchEvent('tap');
+
+      await simulate.sleep(10);
+
+      expect(comp.data.value).toBe('2');
+
+      const contentOfC = comp.querySelector('.c >>> .t-radio__content');
+      contentOfC.dispatchEvent('tap');
+      await simulate.sleep(10);
+
+      expect(comp.data.value).toBe('2');
+
+      const iconOfC = comp.querySelector('.c >>> .t-radio__icon');
+      iconOfC.dispatchEvent('tap');
+      await simulate.sleep(10);
+
+      expect(comp.data.value).toBe('3');
+    });
+
+    it(':with options', () => {
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      const group = comp.querySelector('#optionsGroup');
+      group.instance.handleRadioChange({
+        target: {
+          dataset: { value: 'b' },
+        },
+      });
+
+      expect(group.data.value).toBe('b');
+    });
   });
 });

src/radio/__test__/index.wxml

@@ -0,0 +1,11 @@
+<t-radio-group class="group" value="{{value}}" bind:change="onChange">
+  <t-radio class="a" value="1"></t-radio>
+  <t-radio class="b" value="2"></t-radio>
+  <t-radio class="c" value="3" content-disabled></t-radio>
+</t-radio-group>
+
+<t-radio class="single" />
+
+<t-radio class="disable" disabled />
+
+<t-radio-group options="{{options}}" defaultValue="a" id="optionsGroup" />