@wix/design-system/dist/cjs/Table/ColumnResize/ColumnResize.spec.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _index = require("./index");
var _react2 = require("../../utils/test-utils/react");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/ColumnResize/ColumnResize.spec.tsx";
describe('ColumnResize', () => {
  var _columnResizeContext = null;
  var defaultColumns = [{
    title: 'col1',
    render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null),
    resizeProps: {
      id: 'col1'
    },
    width: '100px'
  }, {
    title: 'col2',
    render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null),
    resizeProps: {
      id: 'col2'
    },
    width: 150
  }, {
    title: 'col3',
    render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null),
    resizeProps: {
      id: 'col3'
    },
    width: '200px'
  }];
  var renderColumnResize = props => {
    return (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ColumnResize, (0, _extends2.default)({}, props, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 37,
        columnNumber: 7
      }
    }), /*#__PURE__*/_react.default.createElement(_index.ColumnResizeConsumer, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 38,
        columnNumber: 9
      }
    }, columnResizeContext => {
      _columnResizeContext = columnResizeContext;
      return /*#__PURE__*/_react.default.createElement("div", {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 41,
          columnNumber: 20
        }
      });
    })));
  };
  afterEach(() => {
    _columnResizeContext = null;
  });
  describe('getEffectiveColumnWidth', () => {
    it('should return original width when table is not resizable', () => {
      var _columnResizeContext2;
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: false
      });
      var result = (_columnResizeContext2 = _columnResizeContext) == null ? void 0 : _columnResizeContext2.getEffectiveColumnWidth(defaultColumns[0]);
      expect(result).toBe('100px');
    });
    it('should return resized width when table is resizable and column has been resized', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      var _columnResizeContext4;
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext3;
        (_columnResizeContext3 = _columnResizeContext) == null || _columnResizeContext3.resizeColumn('col1', 150);
      }));
      var result = (_columnResizeContext4 = _columnResizeContext) == null ? void 0 : _columnResizeContext4.getEffectiveColumnWidth(defaultColumns[0]);
      expect(result).toBe(150);
    }));
    it('should return parseFloat of original width for columns without stored width', () => {
      var _columnResizeContext5;
      var column = {
        title: 'new-col',
        render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null),
        width: '175px',
        resizeProps: {
          id: 'new-col'
        }
      };
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true
      });
      var result = (_columnResizeContext5 = _columnResizeContext) == null ? void 0 : _columnResizeContext5.getEffectiveColumnWidth(column);
      expect(result).toBe(175);
    });
  });
  describe('Column Width Clamping', () => {
    var onColumnResizeMock;
    beforeEach(() => {
      onColumnResizeMock = jest.fn();
    });
    afterEach(() => {
      jest.clearAllMocks();
    });
    it('should clamp width to minimum value', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      var _columnResizeContext7;
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        minColumnWidth: 80,
        onColumnResize: onColumnResizeMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext6;
        (_columnResizeContext6 = _columnResizeContext) == null || _columnResizeContext6.resizeColumn('col1', 50);
      }));
      expect((_columnResizeContext7 = _columnResizeContext) == null || (_columnResizeContext7 = _columnResizeContext7.columnWidths) == null ? void 0 : _columnResizeContext7.col1).toBe(80);
      expect(onColumnResizeMock).toHaveBeenCalledWith('col1', 80);
    }));
    it('should clamp width to maximum value', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      var _columnResizeContext9;
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        maxColumnWidth: 300,
        onColumnResize: onColumnResizeMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext8;
        (_columnResizeContext8 = _columnResizeContext) == null || _columnResizeContext8.resizeColumn('col1', 400);
      }));
      expect((_columnResizeContext9 = _columnResizeContext) == null || (_columnResizeContext9 = _columnResizeContext9.columnWidths) == null ? void 0 : _columnResizeContext9.col1).toBe(300);
      expect(onColumnResizeMock).toHaveBeenCalledWith('col1', 300);
    }));
    it('should allow width within min-max range', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      var _columnResizeContext1;
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        minColumnWidth: 50,
        maxColumnWidth: 300,
        onColumnResize: onColumnResizeMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext0;
        (_columnResizeContext0 = _columnResizeContext) == null || _columnResizeContext0.resizeColumn('col1', 150);
      }));
      expect((_columnResizeContext1 = _columnResizeContext) == null || (_columnResizeContext1 = _columnResizeContext1.columnWidths) == null ? void 0 : _columnResizeContext1.col1).toBe(150);
      expect(onColumnResizeMock).toHaveBeenCalledWith('col1', 150);
    }));
    it('should handle only minimum constraint', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      var _columnResizeContext12, _columnResizeContext13;
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        minColumnWidth: 75,
        onColumnResize: onColumnResizeMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext10;
        (_columnResizeContext10 = _columnResizeContext) == null || _columnResizeContext10.resizeColumn('col1', 60);
      }));
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext11;
        (_columnResizeContext11 = _columnResizeContext) == null || _columnResizeContext11.resizeColumn('col2', 500);
      }));
      expect((_columnResizeContext12 = _columnResizeContext) == null || (_columnResizeContext12 = _columnResizeContext12.columnWidths) == null ? void 0 : _columnResizeContext12.col1).toBe(75);
      expect((_columnResizeContext13 = _columnResizeContext) == null || (_columnResizeContext13 = _columnResizeContext13.columnWidths) == null ? void 0 : _columnResizeContext13.col2).toBe(500);
    }));
  });
  describe('onColumnResize callback', () => {
    var onColumnResizeMock;
    beforeEach(() => {
      onColumnResizeMock = jest.fn();
    });
    afterEach(() => {
      jest.clearAllMocks();
    });
    it('should call onColumnResize with correct parameters', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        onColumnResize: onColumnResizeMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext14;
        (_columnResizeContext14 = _columnResizeContext) == null || _columnResizeContext14.resizeColumn('col1', 175);
      }));
      expect(onColumnResizeMock).toHaveBeenCalledWith('col1', 175);
      expect(onColumnResizeMock).toHaveBeenCalledTimes(1);
    }));
    it('should not call onColumnResize when table is not resizable', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: false,
        onColumnResize: onColumnResizeMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext15;
        (_columnResizeContext15 = _columnResizeContext) == null || _columnResizeContext15.resizeColumn('col1', 175);
      }));
      expect(onColumnResizeMock).not.toHaveBeenCalled();
    }));
  });
  describe('onColumnResizeStart callback', () => {
    var onColumnResizeStartMock;
    beforeEach(() => {
      onColumnResizeStartMock = jest.fn();
    });
    afterEach(() => {
      jest.clearAllMocks();
    });
    it('should call onColumnResizeStart with correct parameters', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        onColumnResizeStart: onColumnResizeStartMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext16;
        (_columnResizeContext16 = _columnResizeContext) == null || _columnResizeContext16.resizeColumn('col1', 150);
      }));
      var mockEvent = new MouseEvent('mousedown');
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext17;
        (_columnResizeContext17 = _columnResizeContext) == null || _columnResizeContext17.startColumnResize('col1', mockEvent);
      }));
      expect(onColumnResizeStartMock).toHaveBeenCalledWith('col1', 150, mockEvent);
      expect(onColumnResizeStartMock).toHaveBeenCalledTimes(1);
    }));
    it('should not call onColumnResizeStart when no callback provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext18;
        (_columnResizeContext18 = _columnResizeContext) == null || _columnResizeContext18.resizeColumn('col1', 150);
      }));
      var mockEvent = new MouseEvent('mousedown');
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext19;
        (_columnResizeContext19 = _columnResizeContext) == null || _columnResizeContext19.startColumnResize('col1', mockEvent);
      }));
      expect(true).toBe(true);
    }));
  });
  describe('onColumnResizeEnd callback', () => {
    var onColumnResizeEndMock;
    beforeEach(() => {
      onColumnResizeEndMock = jest.fn();
    });
    afterEach(() => {
      jest.clearAllMocks();
    });
    it('should call onColumnResizeEnd with correct parameters', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        onColumnResizeEnd: onColumnResizeEndMock
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext20;
        (_columnResizeContext20 = _columnResizeContext) == null || _columnResizeContext20.resizeColumn('col1', 200);
      }));
      var mockEvent = new MouseEvent('mouseup');
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext21;
        (_columnResizeContext21 = _columnResizeContext) == null || _columnResizeContext21.endColumnResize('col1', mockEvent);
      }));
      expect(onColumnResizeEndMock).toHaveBeenCalledWith('col1', 200, mockEvent);
      expect(onColumnResizeEndMock).toHaveBeenCalledTimes(1);
    }));
    it('should not call onColumnResizeEnd when no callback provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true
      });
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext22;
        (_columnResizeContext22 = _columnResizeContext) == null || _columnResizeContext22.resizeColumn('col1', 200);
      }));
      var mockEvent = new MouseEvent('mouseup');
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext23;
        (_columnResizeContext23 = _columnResizeContext) == null || _columnResizeContext23.endColumnResize('col1', mockEvent);
      }));
      expect(true).toBe(true);
    }));
  });
  describe('Callback Integration', () => {
    var onColumnResizeMock;
    var onColumnResizeStartMock;
    var onColumnResizeEndMock;
    beforeEach(() => {
      onColumnResizeMock = jest.fn();
      onColumnResizeStartMock = jest.fn();
      onColumnResizeEndMock = jest.fn();
    });
    afterEach(() => {
      jest.clearAllMocks();
    });
    it('should call all resize callbacks in sequence', /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
      renderColumnResize({
        columns: defaultColumns,
        isTableResizable: true,
        onColumnResize: onColumnResizeMock,
        onColumnResizeStart: onColumnResizeStartMock,
        onColumnResizeEnd: onColumnResizeEndMock
      });
      var mockStartEvent = new MouseEvent('mousedown');
      var mockEndEvent = new MouseEvent('mouseup');
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext24;
        (_columnResizeContext24 = _columnResizeContext) == null || _columnResizeContext24.startColumnResize('col1', mockStartEvent);
      }));
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext25;
        (_columnResizeContext25 = _columnResizeContext) == null || _columnResizeContext25.resizeColumn('col1', 180);
      }));
      yield (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
        var _columnResizeContext26;
        (_columnResizeContext26 = _columnResizeContext) == null || _columnResizeContext26.endColumnResize('col1', mockEndEvent);
      }));
      expect(onColumnResizeStartMock).toHaveBeenCalledWith('col1', 100, mockStartEvent);
      expect(onColumnResizeMock).toHaveBeenCalledWith('col1', 180);
      expect(onColumnResizeEndMock).toHaveBeenCalledWith('col1', 180, mockEndEvent);
      expect(onColumnResizeStartMock).toHaveBeenCalledTimes(1);
      expect(onColumnResizeMock).toHaveBeenCalledTimes(1);
      expect(onColumnResizeEndMock).toHaveBeenCalledTimes(1);
    }));
  });
});
//# sourceMappingURL=ColumnResize.spec.js.map