@kdcloudjs/table 1.0.0

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

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _enzyme = require("enzyme");
+
+var _multiSelect2 = require("../multiSelect");
+
+var _pipeline = require("../../pipeline");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var NAME = 'multiSelect';
+
+var MockCheckbox = function MockCheckbox(_a) {
+  var indeterminate = _a.indeterminate,
+      props = __rest(_a, ["indeterminate"]);
+
+  return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    type: 'checkbox',
+    className: 'checkbox'
+  }, props));
+};
+
+var ROWS = [{
+  id: '1'
+}];
+var INPUT_DATA = {
+  columns: [],
+  dataSource: ROWS
+};
+describe("".concat(NAME), function () {
+  it('not set Checkbox', function () {
+    var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)();
+    }),
+        result = _renderHook.result;
+
+    var _multiSelect = function _multiSelect() {
+      return (0, _multiSelect2.multiSelect)()(result.current);
+    };
+
+    expect(_multiSelect).toThrowError(/Checkbox/);
+  });
+  it('set require props,test checkboxColumn render, cell change and select all event', function () {
+    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        components: {
+          Checkbox: MockCheckbox
+        }
+      }).input(INPUT_DATA).primaryKey('id');
+    }),
+        result = _renderHook2.result;
+
+    (0, _multiSelect2.multiSelect)({
+      stopClickEventPropagation: true // 阻止冒泡
+
+    })(result.current);
+    expect(result.current.getColumns().length).toBeGreaterThan(0);
+    var checkboxColumn = result.current.getColumns()[0];
+    var wrapper = (0, _enzyme.mount)(checkboxColumn.render({}, {
+      id: '1'
+    }, 0)); // 测试复选框行点击onChange
+
+    (0, _reactHooks.act)(function () {
+      (0, _find.default)(wrapper).call(wrapper, MockCheckbox).at(0).simulate('change', {
+        target: {},
+        nativeEvent: {
+          stopPropagation: jest.fn()
+        }
+      });
+    });
+    expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
+      "lastKey": "1",
+      "value": ["1"]
+    });
+    var titleWrapper = (0, _enzyme.mount)(checkboxColumn.title); // 测试选择列表头全选
+
+    (0, _reactHooks.act)(function () {
+      (0, _find.default)(titleWrapper).call(titleWrapper, MockCheckbox).at(0).simulate('change');
+    });
+  });
+  it('set clickArea=cell, test getCellProps and cell click', function () {
+    var _renderHook3 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        components: {
+          Checkbox: MockCheckbox
+        }
+      }).input(INPUT_DATA).primaryKey('id');
+    }),
+        result = _renderHook3.result;
+
+    (0, _multiSelect2.multiSelect)({
+      clickArea: 'cell'
+    })(result.current);
+    var checkboxColumn = result.current.getColumns()[0]; // 测试getCellProps
+
+    var cellProps = checkboxColumn.getCellProps('', ROWS[0], 0);
+
+    if (typeof cellProps.onClick === 'function') {
+      (0, _reactHooks.act)(function () {
+        var mockEvent = {};
+        cellProps.onClick(mockEvent);
+      });
+      expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
+        "lastKey": "1",
+        "value": ["1"]
+      });
+    }
+  });
+  it('set clickArea=row, test appendRowPropsGetter fn', function () {
+    var _renderHook4 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        components: {
+          Checkbox: MockCheckbox
+        }
+      }).input(INPUT_DATA).primaryKey('id');
+    }),
+        result = _renderHook4.result;
+
+    var pipeline = (0, _multiSelect2.multiSelect)({
+      lastKey: '1',
+      clickArea: 'row'
+    })(result.current); // 调用 appendRowPropsGetter 设置的函数
+
+    var props = pipeline.getProps();
+    var rowProps = props.getRowProps(ROWS[0], 0);
+
+    if (rowProps.onClick) {
+      (0, _reactHooks.act)(function () {
+        var mockEvent = {
+          shiftKey: true
+        };
+        rowProps.onClick(mockEvent);
+      });
+      expect(result.current.getStateAtKey('multiSelect')).toMatchObject({
+        "lastKey": "1",
+        "value": ["1"]
+      });
+    }
+  });
+});

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

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

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

@@ -0,0 +1,230 @@
+"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 _rowDetail = require("../rowDetail");
+
+var _pipeline = require("../../pipeline");
+
+var _enzyme = require("enzyme");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _testUtils = require("react-dom/test-utils");
+
+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: 1162,
+  cure: 428,
+  dead: 0,
+  t: '2020-02-15 19:52:02'
+}, {
+  id: '5',
+  prov: '湖南省',
+  confirm: 1001,
+  cure: 417,
+  dead: 2,
+  t: '2020-02-15 19:52:02'
+}];
+var columns = [{
+  code: 'prov',
+  name: '省份',
+  width: 150,
+  features: {
+    sortable: true,
+    filterable: true
+  }
+}, {
+  code: 'confirm',
+  name: '确诊',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true,
+    filterable: true
+  }
+}, {
+  code: 'cure',
+  name: '治愈',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true,
+    filterable: true
+  }
+}, {
+  code: 'dead',
+  name: '死亡',
+  width: 100,
+  align: 'right',
+  features: {
+    sortable: true,
+    filterable: true
+  }
+}, {
+  code: 't',
+  name: '更新时间',
+  width: 180,
+  features: {
+    sortable: true,
+    filterable: true
+  }
+}];
+describe('rowDetail 单元测试', function () {
+  var opt = {
+    defaultOpenKeys: ['2'],
+    clickArea: 'content',
+    hasDetail: function hasDetail(row) {
+      var _context;
+
+      return (0, _includes.default)(_context = ['1', '2', '3']).call(_context, row.id);
+    },
+    renderDetail: jest.fn(),
+    onChangeOpenKeys: jest.fn()
+  };
+  it('初始化', 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;
+    var newPipeline = (0, _rowDetail.rowDetail)(opt)(tablePipeline); // 默认有1行展开，所以有6行
+
+    expect(newPipeline.getDataSource().length).toBe(6);
+  });
+  it('primaryKey不传', function () {
+    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)().input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook2.result;
+
+    var tablePipeline = result.current;
+    expect(function () {
+      return (0, _rowDetail.rowDetail)(opt)(tablePipeline);
+    }).toThrow(Error);
+  });
+  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;
+    var newPipeline = (0, _rowDetail.rowDetail)(opt)(tablePipeline);
+    var newDataSource = newPipeline.getDataSource();
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[0].render('1', newDataSource[0], 0));
+    var div = (0, _find.default)(wrapper).call(wrapper, 'div').at(0);
+    expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(0);
+    (0, _testUtils.act)(function () {
+      div.simulate('click');
+    });
+    expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(1); // 点击没有展开行的行，不会触发onChange回调
+
+    var wrapper1 = (0, _enzyme.mount)(col[0].render('4', newDataSource[4], 4));
+    var div1 = (0, _find.default)(wrapper1).call(wrapper1, 'div').at(0);
+    (0, _testUtils.act)(function () {
+      div1.simulate('click');
+    });
+    expect(opt.onChangeOpenKeys).toHaveBeenCalledTimes(1);
+  });
+  it('设置指定列展开', function () {
+    var _renderHook4 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook4.result;
+
+    var tablePipeline = result.current;
+    opt.expandColumnCode = 'confirm';
+    var newPipeline = (0, _rowDetail.rowDetail)(opt)(tablePipeline);
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[1].render('1', newPipeline.getDataSource()[0], 0)); // 不知道为啥是两个
+
+    expect((0, _find.default)(wrapper).call(wrapper, '.expansion-cell').length).toBe(2);
+    col[0].render('1', newPipeline.getDataSource()[2], 2);
+    expect(opt.renderDetail).toBeCalled();
+    var spanRect = col[0].getSpanRect('1', newPipeline.getDataSource()[2], 2);
+    expect(spanRect).toEqual({
+      top: 2,
+      bottom: 3,
+      left: 0,
+      right: 6
+    });
+    delete opt.expandColumnCode;
+  });
+  it('getCellProps 和getSpanRect', function () {
+    var _renderHook5 = (0, _reactHooks.renderHook)(function () {
+      return (0, _pipeline.useTablePipeline)({
+        primaryKey: 'id'
+      }).input({
+        dataSource: dataSource,
+        columns: columns
+      });
+    }),
+        result = _renderHook5.result;
+
+    var tablePipeline = result.current;
+    opt.clickArea = 'cell';
+    var newPipeline = (0, _rowDetail.rowDetail)(opt)(tablePipeline);
+    var col = newPipeline.getColumns();
+    var cellProps = col[0].getCellProps('1', newPipeline.getDataSource()[0], 0);
+    expect(cellProps.style).toEqual({
+      cursor: 'pointer'
+    });
+    cellProps.onClick();
+    expect(opt.onChangeOpenKeys).toBeCalled(); // detail 总是成一行
+
+    var spanRect = col[0].getSpanRect('1', newPipeline.getDataSource()[2], 2);
+    expect(spanRect).toEqual({
+      top: 2,
+      bottom: 3,
+      left: 0,
+      right: 6
+    });
+  });
+});

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

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

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

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _rowGrouping = require("../rowGrouping");
+
+var _pipeline = require("../../pipeline");
+
+var _enzyme = require("enzyme");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var dataSource = [{
+  id: 'alibaba',
+  groupTitle: '阿里巴巴网络技术有限公司',
+  children: [{
+    id: '1-1',
+    title: '二级标题',
+    dept: '消费者事业部-淘宝-UED',
+    dest: '云南大理',
+    guide: 'Douglas Lee'
+  }, {
+    id: '1-2',
+    title: '二级标题',
+    dept: '消费者事业部-淘宝-UED',
+    dest: '云南大理',
+    guide: 'Douglas Lee'
+  }]
+}, {
+  id: 'antfin',
+  groupTitle: '蚂蚁金服有限公司',
+  children: [{
+    id: '2-1',
+    title: '二级标题',
+    dept: '消费者事业部-淘宝-UED',
+    dest: '云南大理',
+    guide: 'Douglas Lee'
+  }, {
+    id: '2-2',
+    title: '二级标题',
+    dept: '消费者事业部-淘宝-UED',
+    dest: '云南大理',
+    guide: 'Douglas Lee'
+  }]
+}, {
+  id: 'other',
+  groupTitle: 'group without children'
+}];
+var columns = [{
+  code: 'title',
+  name: '标题',
+  width: 200
+}, {
+  code: 'dept',
+  name: '部门名称',
+  width: 180
+}, {
+  code: 'dest',
+  name: '团建目的地',
+  width: 160
+}, {
+  code: 'guide',
+  name: '当地导游',
+  width: 160
+}];
+describe('rowGrouping 单元测试', function () {
+  var opts = {
+    defaultOpenAll: true,
+    onChangeOpenKeys: 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, _rowGrouping.rowGrouping)(opts)(tablePipeline);
+  });
+  afterEach(function () {
+    newPipeline = null;
+    opts.onChangeOpenKeys.mockClear();
+  });
+  it('初始化', function () {
+    expect(newPipeline.getDataSource().length).toBe(7);
+  });
+  it('getCellProps', function () {
+    var col = newPipeline.getColumns();
+    var cellProps = col[0].getCellProps('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[0], 0);
+    expect(cellProps.style).toEqual({
+      cursor: 'pointer'
+    });
+    cellProps.onClick();
+    expect(opts.onChangeOpenKeys).toBeCalled(); // 不是分组行没有cellProps
+
+    var cellProps1 = col[0].getCellProps('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[1], 1);
+    expect(cellProps1).toBe(undefined);
+  });
+  it('getSpanRect', function () {
+    var col = newPipeline.getColumns();
+    var spanRect = col[0].getSpanRect('阿里巴巴网络技术有限公司', newPipeline.getDataSource()[0], 0);
+    expect(spanRect).toEqual({
+      top: 0,
+      bottom: 1,
+      left: 0,
+      right: 5
+    });
+  });
+  it('单元格渲染', function () {
+    var col = newPipeline.getColumns();
+    var wrapper = (0, _enzyme.mount)(col[0].render('1', newPipeline.getDataSource()[0], 0));
+    expect((0, _find.default)(wrapper).call(wrapper, '.expansion-cell').length).toBe(2);
+    var wrapper1 = (0, _enzyme.mount)(col[0].render('1', newPipeline.getDataSource()[1], 1));
+    expect((0, _find.default)(wrapper1).call(wrapper1, '.expansion-cell').length).toBe(0);
+  });
+  it('appendRowPropsGetter', function () {
+    var props = newPipeline.getProps();
+    var rowProps = props.getRowProps(newPipeline.getDataSource()[0], 0);
+    expect(rowProps.className).toBe('alternative');
+  });
+});

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

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