@kdcloudjs/table 1.0.0

package/lib/table/pipeline/features/__test__/singleSelect.test.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _singleSelect = require("../singleSelect");
+
+var _pipeline = require("../../pipeline");
+
+var _enzyme = require("enzyme");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _react = _interopRequireDefault(require("react"));
+
+var dataSource = [{
+  id: '1',
+  name: '阿里巴巴网络技术有限公司',
+  amount: '600,000.00(CNY)',
+  dept: '招商银行丨杭州分行',
+  applier: 'James Collier'
+}, {
+  id: '2',
+  name: '阿里巴巴网络技术有限公司',
+  amount: '600,000.00(CNY)',
+  dept: '建设银行丨未来科技城',
+  applier: 'Philip Burke'
+}, {
+  id: '3',
+  name: '阿里巴巴网络技术有限公司',
+  amount: '600,000.00(CNY)',
+  dept: '交通银行丨浙大路支行',
+  applier: 'Wesley Cruz'
+}, {
+  id: '4',
+  name: '阿里巴巴网络技术有限公司',
+  amount: '600,000.00(CNY)',
+  dept: '招商银行丨庆春路支行',
+  applier: 'Billy Horton'
+}, {
+  id: '5',
+  name: '阿里巴巴网络技术有限公司',
+  amount: '600,000.00(CNY)',
+  dept: '招商银行丨文一路分行',
+  applier: 'Paul Tran'
+}, {
+  id: '6',
+  name: '阿里巴巴网络技术有限公司',
+  amount: '600,000.00(CNY)',
+  dept: '农业银行丨杭州分行',
+  applier: 'Anna Poole'
+}];
+var columns = [{
+  code: 'name',
+  width: 220,
+  name: '公司名称'
+}, {
+  code: 'amount',
+  width: 160,
+  align: 'right',
+  name: '金额'
+}, {
+  code: 'dept',
+  width: 160,
+  name: '金融机构'
+}, {
+  code: 'applier',
+  width: 120,
+  name: '申请人'
+}];
+
+function Radio(_ref) {
+  var checked = _ref.checked,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
+    type: 'radio',
+    disabled: disabled,
+    checked: checked,
+    onChange: onChange
+  }));
+}
+
+describe('singleSelect 单元测试', function () {
+  var opts = {
+    value: '1',
+    clickArea: 'cell',
+    highlightRowWhenSelected: true,
+    isDisabled: function isDisabled(row, rowIndex) {
+      var _context;
+
+      return (0, _includes.default)(_context = ['4', '5', '6']).call(_context, row.id);
+    },
+    onChange: jest.fn()
+  };
+  var newPipeline = null;
+  beforeEach(function () {
+    var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id',
+        components: {
+          Radio: Radio
+        }
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook.result;
+
+    var tablePipeline = result.current;
+    newPipeline = (0, _singleSelect.singleSelect)(opts)(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+    opts.onChange.mockClear();
+  });
+  it('初始渲染', function () {
+    var col = newPipeline.getColumns(); // 表格会在最后补一个空白列，加上单选列所以有6列
+
+    expect(col.length).toBe(6);
+    expect(col[0].code).toBe('__SELECT');
+  });
+  it('getCellProps', function () {
+    var col = newPipeline.getColumns();
+    var cellProps = col[0].getCellProps('', newPipeline.getDataSource()[0], 0);
+    expect(cellProps.style).toEqual({
+      cursor: 'pointer'
+    });
+    expect(opts.onChange).not.toHaveBeenCalled();
+    cellProps.onClick();
+    expect(opts.onChange).toHaveBeenCalled();
+  });
+  it('单元格渲染', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[0].render('', newPipeline.getDataSource()[0], 0));
+    expect((0, _find.default)(wrapper).call(wrapper, 'Radio').length).toBe(1);
+  });
+  it('触发区域为radio', function () {
+    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id',
+        components: {
+          Radio: Radio
+        }
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    opts.clickArea = 'radio';
+    var newPipeline = (0, _singleSelect.singleSelect)(opts)(tablePipeline);
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[0].render('', newPipeline.getDataSource()[0], 0)); // Radio 触发onChange
+
+    var input = (0, _find.default)(wrapper).call(wrapper, 'input');
+    input.simulate('change');
+    expect(opts.onChange).toHaveBeenCalled();
+    opts.clickArea = 'cell';
+  });
+  it('appendRowPropsGetter', function () {
+    var props = newPipeline.getProps();
+    var rowProps = props.getRowProps(newPipeline.getDataSource()[0], 0);
+    expect(rowProps.className).toBe('highlight');
+    expect(rowProps.style).toEqual({});
+  });
+  it('触发区域为row', function () {
+    var _renderHook3 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id',
+        components: {
+          Radio: Radio
+        }
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook3.result;
+
+    var tablePipeline = result.current;
+    opts.clickArea = 'row';
+    var newPipeline = (0, _singleSelect.singleSelect)(opts)(tablePipeline);
+    var props = newPipeline.getProps();
+    var rowProps = props.getRowProps(newPipeline.getDataSource()[0], 0);
+    expect(rowProps.style).toEqual({
+      cursor: 'pointer'
+    });
+    rowProps.onClick();
+    expect(opts.onChange).toHaveBeenCalled(); // disable的行没有样式
+
+    var rowProps1 = props.getRowProps(newPipeline.getDataSource()[4], 4);
+    expect(rowProps1.style).toEqual({});
+  });
+});

package/lib/table/pipeline/features/__test__/sort.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/table/pipeline/features/__test__/sort.test.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _sort = require("../sort");
+
+var _pipeline = require("../../pipeline");
+
+var _enzyme = require("enzyme");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var dataSource = [{
+  id: '1',
+  prov: '湖北省',
+  confirm: 54406,
+  cure: 4793,
+  dead: 1457,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '2',
+  prov: '广东省',
+  confirm: 1294,
+  cure: 409,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '3',
+  prov: '河南省',
+  confirm: 1212,
+  cure: 390,
+  dead: 13,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '4',
+  prov: '浙江省',
+  confirm: 1000,
+  cure: 428,
+  dead: 0,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '5',
+  prov: '湖南省',
+  confirm: 1000,
+  cure: 417,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}];
+var columns = [{
+  code: 'prov',
+  name: '省份',
+  width: 150,
+  features: {
+    sortable: true
+  }
+}, {
+  code: 'confirm',
+  name: '确诊',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true
+  }
+}, {
+  code: 'cure',
+  name: '治愈',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true
+  }
+}, {
+  code: 'dead',
+  name: '死亡',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true
+  }
+}, {
+  code: 't',
+  name: '更新时间',
+  width: 180,
+  features: {
+    sortable: true
+  }
+}];
+describe('sort 单元测试', function () {
+  var opts = {
+    defaultSorts: [{
+      code: 'cure',
+      order: 'asc'
+    }],
+    highlightColumnWhenActive: true,
+    mode: 'single',
+    keepDataSource: false,
+    onChangeSorts: jest.fn()
+  };
+  var newPipeline = null;
+  beforeEach(function () {
+    var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook.result;
+
+    var tablePipeline = result.current;
+    newPipeline = (0, _sort.sort)(opts)(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+    opts.onChangeSorts.mockClear();
+  });
+  it('初始化数据', function () {
+    // 默认cure列升序排序
+    expect(newPipeline.getDataSource()[0]).toEqual({
+      id: '3',
+      prov: '河南省',
+      confirm: 1212,
+      cure: 390,
+      dead: 13,
+      t: '2020-02-15 19:52:02'
+    });
+  });
+  it('列头单元格渲染', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[0].title);
+    expect((0, _find.default)(wrapper).call(wrapper, 'SortIcon').length).toBe(1); // 列头单元格
+
+    var div = (0, _find.default)(wrapper).call(wrapper, 'div').at(0);
+    div.simulate('click');
+    expect(opts.onChangeSorts).toBeCalledWith([{
+      code: 'prov',
+      order: 'desc'
+    }], {
+      code: 'prov',
+      order: 'desc'
+    });
+    expect(1).toBe(1);
+  });
+  it('getCellProps', function () {
+    var col = newPipeline.getColumns();
+    var cellProps = col[2].getCellProps(4793, newPipeline.getDataSource()[0], 0);
+    expect(cellProps.style).toEqual({
+      background: 'var(--highlight-bgcolor)'
+    });
+  });
+  it('keepDataSource为true,数据不变', function () {
+    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    opts.keepDataSource = true;
+    var newPipeline = (0, _sort.sort)(opts)(tablePipeline);
+    expect(newPipeline.getDataSource()[0].id).toBe('1');
+    opts.keepDataSource = false;
+  });
+  it('多列排序', function () {
+    var _renderHook3 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook3.result;
+
+    var tablePipeline = result.current;
+    opts.defaultSorts = [{
+      code: 'confirm',
+      order: 'desc'
+    }, {
+      code: 'cure',
+      order: 'asc'
+    }];
+    opts.mode = 'multiple';
+    var newPipeline = (0, _sort.sort)(opts)(tablePipeline); // confirm 降序，cure升序
+
+    expect(newPipeline.getDataSource()[3].confirm).toBe(1000);
+    expect(newPipeline.getDataSource()[3].cure).toBe(417);
+    expect(newPipeline.getDataSource()[4].confirm).toBe(1000);
+    expect(newPipeline.getDataSource()[4].cure).toBe(428);
+    var col = newPipeline.getColumns();
+    var confirmWrapper = (0, _enzyme.mount)(col[1].title); // 列头单元格
+
+    var div = (0, _find.default)(confirmWrapper).call(confirmWrapper, 'div').at(0);
+    div.simulate('click'); // confirm 列初始是降序，点击后是升序
+    // calls[0][1]表示第1次调用的第二个参数
+
+    expect(opts.onChangeSorts.mock.calls[0][1]).toEqual({
+      code: 'confirm',
+      order: 'asc'
+    });
+    opts.onChangeSorts.mockClear();
+    var cureWrapper = (0, _enzyme.mount)(col[2].title);
+    var div1 = (0, _find.default)(cureWrapper).call(cureWrapper, 'div').at(0);
+    div1.simulate('click'); // confirm 列初始是升序，点击后没有排序
+
+    expect(opts.onChangeSorts.mock.calls[0][1]).toEqual({
+      code: 'cure',
+      order: 'none'
+    });
+  });
+});

package/lib/table/pipeline/features/__test__/tips.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/table/pipeline/features/__test__/tips.test.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _tips = require("../tips");
+
+var _pipeline = require("../../pipeline");
+
+var _enzyme = require("enzyme");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _react = _interopRequireDefault(require("react"));
+
+var dataSource = [{
+  id: '1',
+  prov: '湖北省',
+  confirm: 54406,
+  cure: 4793,
+  dead: 1457,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '2',
+  prov: '广东省',
+  confirm: 1294,
+  cure: 409,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '3',
+  prov: '河南省',
+  confirm: 1212,
+  cure: 390,
+  dead: 13,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '4',
+  prov: '浙江省',
+  confirm: 1000,
+  cure: 428,
+  dead: 0,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '5',
+  prov: '湖南省',
+  confirm: 1000,
+  cure: 417,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}];
+var columns = [{
+  code: 'prov',
+  name: '省份',
+  width: 150,
+  features: {
+    tips: '省份信息'
+  }
+}, {
+  code: 'confirm',
+  name: '确诊',
+  width: 100,
+  align: 'right',
+  features: {
+    tips: '确诊数量'
+  }
+}, {
+  code: 'cure',
+  name: '治愈',
+  width: 100,
+  align: 'right'
+}, {
+  code: 'dead',
+  name: '死亡',
+  width: 100,
+  align: 'right'
+}, {
+  code: 't',
+  name: '更新时间',
+  width: 180
+}];
+
+function Tooltip(_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement("div", null, title);
+}
+
+describe('tips 单元测试', function () {
+  var newPipeline = null;
+  beforeEach(function () {
+    var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id',
+        components: {
+          Tooltip: Tooltip
+        }
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook.result;
+
+    var tablePipeline = result.current;
+    newPipeline = (0, _tips.tips)()(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+  });
+  it('初始化时存在Tooltip组件', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[0].title);
+    expect((0, _find.default)(wrapper).call(wrapper, 'Tooltip').length).toBe(1);
+  });
+  it('不传Tooltip', function () {
+    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    expect(function () {
+      return (0, _tips.tips)()(tablePipeline);
+    }).toThrow(Error);
+  });
+});

package/lib/table/pipeline/features/__test__/treeMode.test.d.ts

@@ -0,0 +1 @@
+export {};