test(table): add table component test

src/packages/__VUE/table/__tests__/index.spec.ts

@@ -0,0 +1,281 @@
+import { mount, config } from '@vue/test-utils';
+import Table from '../index.vue';
+import { nextTick, h } from 'vue';
+import NutIcon from '../../icon/index.vue';
+import NutButton from '../../button/index.vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon,
+    NutButton
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+const columns = [
+  {
+    title: '姓名',
+    key: 'name',
+    align: 'center'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+];
+
+const data = [
+  {
+    sex: '男',
+    name: 'Tom',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+];
+
+const column2 = [
+  {
+    title: '姓名',
+    key: 'name',
+    align: 'center'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '操作',
+    key: 'render'
+  }
+];
+
+const data2 = [
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学',
+    render: () => {
+      return h(
+        NutButton,
+        {
+          onClick: () => {},
+          size: 'small',
+          type: 'primary'
+        },
+        () => h('div', {}, 'Hello')
+      );
+    }
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科',
+    render: () => {
+      return h(NutIcon, { name: 'dongdong', size: '14px' });
+    }
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中',
+    render: () => {
+      return h(
+        NutButton,
+        {
+          type: 'success',
+          size: 'small',
+          onClick: () => {
+            window.open('https://www.jd.com');
+          }
+        },
+        () => h('div', {}, '跳转到京东')
+      );
+    }
+  }
+];
+
+test('render bordered props', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns,
+      data
+    }
+  });
+
+  await nextTick();
+
+  const headBorder = wrapper.findAll('.nut-table__main__head__tr--border');
+
+  expect(headBorder.length).toBeGreaterThan(0);
+});
+
+test('render align props', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns,
+      data
+    }
+  });
+
+  await nextTick();
+
+  const headTh = wrapper.findAll('.nut-table__main__head__tr__th');
+  const bodyTd = wrapper.findAll('.nut-table__main__body__tr__td');
+
+  expect(headTh[0].classes()).toContain('nut-table__main__head__tr--aligncenter');
+  expect(bodyTd[0].classes()).toContain('nut-table__main__head__tr--aligncenter');
+  expect(bodyTd[3].classes()).toContain('nut-table__main__head__tr--aligncenter');
+  expect(bodyTd[6].classes()).toContain('nut-table__main__head__tr--aligncenter');
+});
+
+test('show summary', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns,
+      data,
+      summary: () => {
+        return {
+          value: '这是总结栏',
+          colspan: 5
+        };
+      }
+    }
+  });
+
+  await nextTick();
+
+  const tableSummary = wrapper.find('.nut-table__summary');
+
+  expect(tableSummary.exists()).toBe(true);
+});
+
+test('render striped props', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns,
+      data,
+      striped: true
+    }
+  });
+
+  await nextTick();
+
+  const tableMain = wrapper.find('.nut-table__main');
+
+  expect(tableMain.classes()).toContain('nut-table__main--striped');
+});
+
+test('render no data', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns,
+      data
+    }
+  });
+
+  wrapper.setProps({
+    data: []
+  });
+
+  await nextTick();
+
+  const tableNoData = wrapper.find('.nut-table__nodata');
+
+  expect(tableNoData.exists()).toBe(true);
+});
+
+test('render no data of user defined', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns,
+      data
+    },
+    slots: {
+      nodata: h('div', { class: 'no-data' }, '这里是自定义展示')
+    }
+  });
+
+  wrapper.setProps({
+    data: []
+  });
+
+  await nextTick();
+
+  const tableNoData = wrapper.find('.no-data');
+
+  expect(tableNoData.html()).toContain('这里是自定义展示');
+});
+
+test('user defined td content', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns: column2,
+      data: data2
+    }
+  });
+
+  await nextTick();
+
+  const bodyTd = wrapper.findAll('.nut-table__main__body__tr__td');
+
+  expect(bodyTd[3].find('.nut-button').exists()).toBe(true);
+});
+
+test('render async', async () => {
+  const wrapper = mount(Table, {
+    props: {
+      bordered: true,
+      columns: columns,
+      data: []
+    }
+  });
+
+  await nextTick();
+
+  const bodyTr = wrapper.findAll('.nut-table__main__body__tr');
+
+  expect(bodyTr.length).toBe(0);
+
+  await sleep(2000);
+
+  wrapper.setProps({
+    data
+  });
+
+  await nextTick();
+
+  expect(wrapper.findAll('.nut-table__main__body__tr').length).toBe(3);
+});

src/packages/__VUE/table/demo.vue

@@ -192,7 +192,7 @@ export default createDemo({
                 size: 'small',
                 type: 'primary'
               },
-              'Hello'
+              () => h('div', {}, 'Hello')
             );
           }
         },
@@ -218,7 +218,7 @@ export default createDemo({
                   window.open('https://www.jd.com');
                 }
               },
-              '跳转到京东'
+              () => h('div', {}, '跳转到京东')
             );
           }
         }

src/packages/__VUE/table/renderColumn.ts

@@ -4,6 +4,6 @@ export default {
     return () => h(`view`, {}, props.slots());
   },
   props: {
-    slots: Object
+    slots: Function
   }
 };