Merge pull request #846 from Tencent/test/tab-bar/unit

test(tab-bar): add unit test
Tencent · Sep 6, 2022 · 6192c80 · 6192c80
2 parents 8a4ebd7 + ac40275
commit 6192c80
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 49 deletions.
diff --git a/src/tab-bar/README.en-US.md b/src/tab-bar/README.en-US.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### TabBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bordered | Boolean | true | \- | N
+external-classes | Array | - | `['t-class']` | N
+fixed | Boolean | true | \- | N
+safe-area-inset-bottom | Boolean | true | \- | N
+split | Boolean | true | \- | N
+value | String / Number / Array | undefined | Typescript：`string | number | Array<string | number>` | N
+default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`string | number | Array<string | number>` | N
+
+### TabBar Events
+
+name | params | description
+-- | -- | --
+change | `(value: string | number)` | \-
+
+### TabBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+icon | String / Slot | - | \- | N
+sub-tab-bar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+value | String / Number | - | \- | N
diff --git a/src/tab-bar/README.md b/src/tab-bar/README.md
@@ -5,6 +5,7 @@ spline: navigation
 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-100%25-blue" /></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-93%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
@@ -78,7 +79,7 @@ change | `(value: string | number)` | 选中标签切换时触发
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-badge-props | Object | - | 图标右上角提示信息。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+badge-props | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
 icon | String / Slot | - | 图标名称 | N
 sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
 value | String / Number | - | 标识符 | N
diff --git a/src/tab-bar/__test__/index.js b/src/tab-bar/__test__/index.js
@@ -0,0 +1,37 @@
+Component({
+  data: {
+    value: 'label_1',
+    list: [
+      { value: 'label_1', label: 'value1', icon: 'app' },
+      { value: 'label_2', label: 'value2', icon: 'app' },
+      {
+        value: 'label_3',
+        label: 'value3',
+        icon: 'app',
+        children: [
+          {
+            value: 'spread_3',
+            label: '展开项三',
+          },
+          {
+            value: 'spread_2',
+            label: '展开项二',
+          },
+          {
+            value: 'spread_1',
+            label: '展开项一',
+          },
+        ],
+      },
+      { value: undefined, label: 'value4', icon: 'app' },
+    ],
+  },
+
+  methods: {
+    onChange(e) {
+      this.setData({
+        value: e.detail.value,
+      });
+    },
+  },
+});
diff --git a/src/tab-bar/__test__/index.json b/src/tab-bar/__test__/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tab-bar": "../tab-bar",
+    "t-tab-bar-item": "../tab-bar-item"
+  }
+}
diff --git a/src/tab-bar/__test__/index.test.js b/src/tab-bar/__test__/index.test.js
@@ -0,0 +1,50 @@
+import simulate from 'miniprogram-simulate';
+import path from 'path';
+
+describe('tab-bar', () => {
+  const id = simulate.load(path.resolve(__dirname, `./index`), 't-tab-bar', {
+    less: true,
+    rootPath: path.resolve(__dirname, '../..'),
+  });
+
+  it(':base', () => {
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    expect(comp.querySelector('#item1').instance.data.isChecked).toBeTruthy();
+  });
+
+  it(':events', async () => {
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $item2 = comp.querySelector('#item2');
+    const $content = $item2.querySelector('.t-tab-bar-item__content');
+
+    $content.dispatchEvent('tap');
+
+    await simulate.sleep();
+
+    expect($item2.instance.data.isChecked).toBeTruthy();
+  });
+
+  it(':sub', async () => {
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $item3 = comp.querySelector('#item3');
+    const $content = $item3.querySelector('.t-tab-bar-item__content');
+
+    $content.dispatchEvent('tap');
+    await simulate.sleep();
+
+    expect($item3.instance.data.isSpread).toBeTruthy();
+
+    const $spreadItem = $item3.querySelector('.t-tab-bar-item__spread-item');
+
+    $spreadItem.dispatchEvent('tap');
+    await simulate.sleep();
+
+    expect(comp.instance.data.value).toBe('spread_3');
+  });
+});
diff --git a/src/tab-bar/__test__/index.wxml b/src/tab-bar/__test__/index.wxml
@@ -0,0 +1,12 @@
+<t-tab-bar id="base" value="{{value}}" bindchange="onChange">
+  <t-tab-bar-item
+    wx:for="{{list}}"
+    wx:key="index"
+    id="item{{index+1}}"
+    value="{{item.value}}"
+    icon="{{item.icon}}"
+    sub-tab-bar="{{item.children}}"
+  >
+    {{item.label}}
+  </t-tab-bar-item>
+</t-tab-bar>
diff --git a/src/tab-bar/props.ts b/src/tab-bar/props.ts
@@ -32,15 +32,13 @@ const props: TdTabBarProps = {
   },
   /** 当前选中标签的索引 */
   value: {
-    type: String,
-    optionalTypes: [Number, Array],
+    type: null,
     value: null,
   },
   /** 当前选中标签的索引，非受控属性 */
   defaultValue: {
-    type: String,
-    optionalTypes: [Number, Array],
-    value: undefined,
+    type: null,
+    value: null,
   },
 };
 

diff --git a/src/tab-bar/tab-bar-item-props.ts b/src/tab-bar/tab-bar-item-props.ts
@@ -20,8 +20,8 @@ const props: TdTabBarItemProps = {
   },
   /** 标识符 */
   value: {
-    type: String,
-    optionalTypes: [Number],
+    type: null,
+    value: null,
   },
 };
 

diff --git a/src/tab-bar/tab-bar-item.ts b/src/tab-bar/tab-bar-item.ts
@@ -7,11 +7,14 @@ const classPrefix = `${prefix}-tab-bar-item`;
 
 @wxComponent()
 export default class TabbarItem extends SuperComponent {
+  parent = null;
+
   relations: RelationsOptions = {
     './tab-bar': {
       type: 'ancestor',
       linked(parent) {
-        this.data.parent = parent;
+        this.parent = parent;
+
         this.setData({
           split: parent.data.split,
           currentName: this.properties.value ? this.properties.value : parent.initName(),
@@ -30,7 +33,6 @@ export default class TabbarItem extends SuperComponent {
     classPrefix,
     isSpread: false,
     isChecked: false,
-    parent: null,
     hasChildren: false,
     currentName: '',
     split: true,
@@ -53,7 +55,8 @@ export default class TabbarItem extends SuperComponent {
       });
     },
     toggle() {
-      const { parent, currentName, hasChildren, isSpread } = this.data;
+      const { parent } = this;
+      const { currentName, hasChildren, isSpread } = this.data;
 
       if (hasChildren) {
         this.setData({
@@ -64,23 +67,17 @@ export default class TabbarItem extends SuperComponent {
       parent.changeOtherSpread(currentName);
     },
     selectChild(event) {
-      const { parent, currentName } = this.data;
-      const childName = event.target.dataset.name;
+      const { parent } = this;
+      const { value } = event.target.dataset;
 
-      if (!(Array.isArray(parent.value) && parent.value[1] === childName)) {
-        parent.updateValue([currentName, childName]);
-      }
+      parent.updateValue(value);
       this.setData({
         isSpread: false,
       });
     },
     checkActive(value) {
-      const { currentName, hasChildren } = this.data;
-      const isChecked = currentName === value;
-
-      if (hasChildren && Array.isArray(value)) {
-        return value.indexOf(currentName) > -1;
-      }
+      const { currentName, subTabBar } = this.data;
+      const isChecked = subTabBar?.some((item) => item.value === value) || currentName === value;
 
       this.setData({
         isChecked,

diff --git a/src/tab-bar/tab-bar-item.wxml b/src/tab-bar/tab-bar-item.wxml
@@ -36,8 +36,8 @@
       wx:for-item="child"
       wx:for-index="index"
       wx:key="index"
-      bindtap="selectChild"
-      data-name="{{child.name || index}}"
+      bind:tap="selectChild"
+      data-value="{{child.value || index}}"
       >{{ child.label }}
     </view>
   </view>

diff --git a/src/tab-bar/tab-bar.ts b/src/tab-bar/tab-bar.ts
@@ -15,10 +15,11 @@ export default class Tabbar extends SuperComponent {
 
   externalClasses = [`${prefix}-class`];
 
+  backupValue: 0;
+
   data = {
     prefix,
     classPrefix,
-    defaultNameIndex: -1,
   };
 
   properties = props;
@@ -49,9 +50,9 @@ export default class Tabbar extends SuperComponent {
       const len = items.length;
       const { value } = this.data;
       if (len > 0) {
-        items.forEach((item) => {
-          if (item.properties.currentName === value) {
-            item.showSpread();
+        items.forEach((child) => {
+          if (child.properties.value === value) {
+            child.showSpread();
           }
         });
       }
@@ -62,8 +63,8 @@ export default class Tabbar extends SuperComponent {
       const { value } = this.data;
 
       if (len > 0) {
-        items.forEach((item) => {
-          item.checkActive(value);
+        items.forEach((child) => {
+          child.checkActive(value);
         });
       }
     },
@@ -73,22 +74,15 @@ export default class Tabbar extends SuperComponent {
     changeOtherSpread(value) {
       const items = this.getRelationNodes('./tab-bar-item');
 
-      items.forEach((item) => {
-        if (item.properties.currentName !== value) {
-          item.closeSpread();
+      items.forEach((child) => {
+        if (child.properties.value !== value) {
+          child.closeSpread();
         }
       });
     },
-    /**
-     * 对于没有 name 的 item 生成一个 name
-     */
-    initName() {
-      const nameIndex = this.data.defaultNameIndex + 1;
 
-      this.setData({
-        defaultNameIndex: nameIndex,
-      });
-      return nameIndex;
+    initName() {
+      return (this.backupValue += 1);
     },
   };
 }
diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts
@@ -50,16 +50,14 @@ export interface TdTabBarProps {
    * 当前选中标签的索引
    */
   value?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor | ArrayConstructor>;
+    type: null;
     value?: string | number | Array<string | number>;
   };
   /**
    * 当前选中标签的索引，非受控属性
    */
   defaultValue?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor | ArrayConstructor>;
+    type: null;
     value?: string | number | Array<string | number>;
   };
 }
@@ -71,7 +69,6 @@ export interface TdTabBarItemProps {
   badgeProps?: {
     type: ObjectConstructor;
     value?: BadgeProps;
-    required?: boolean;
   };
   /**
    * 图标名称
@@ -91,8 +88,7 @@ export interface TdTabBarItemProps {
    * 标识符
    */
   value?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor>;
+    type: null;
     value?: string | number;
   };
 }