wix-style-react/dist/src/DataTable/DataTable.spec.js

wix-style-react

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _DataTable = require('./DataTable.driver');

var _DataTable2 = _interopRequireDefault(_DataTable);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _DataTable3 = require('./DataTable');

var _DataTable4 = _interopRequireDefault(_DataTable3);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _enzyme = require('enzyme');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

describe('Table', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_DataTable2.default);

  var createDefaultProps = function createDefaultProps() {
    return {
      id: 'id',
      data: [{ a: 'value 1', b: 'value 2' }, { a: 'value 3', b: 'value 4' }],
      columns: [{ title: 'Row Num', render: function render(row, rowNum) {
          return rowNum;
        } }, { title: 'A', render: function render(row) {
          return row.a;
        } }, { title: 'B', render: function render(row) {
          return row.b;
        } }],
      rowClass: 'class-name'
    };
  };
  var defaultProps = createDefaultProps();

  it('should pass id prop to child', function () {
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, defaultProps));
    expect(driver.hasChildWithId(defaultProps.id)).toBeTruthy();
  });

  describe('data is empty', function () {
    var rowDataHook = 'row-data-hook';
    var props = Object.assign({}, defaultProps, {
      data: [],
      rowDataHook: rowDataHook
    });

    it('should display nothing', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.isDisplayingNothing()).toBeTruthy();
    });

    it('should count 0 rows', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.getRowsCount()).toEqual(0);
    });

    it('should count 0 rows with class name', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.getRowsWithClassCount(defaultProps.rowClass)).toEqual(0);
    });

    it('should find 0 rows with data-hook', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.getRowsWithDataHook(rowDataHook)).toHaveLength(0);
    });

    it('should not find a row with data-hook', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.getRowWithDataHook(rowDataHook)).toEqual(null);
    });

    it('should not a header only', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.isDisplayingHeaderOnly()).toBeFalsy;
    });

    it('should not a header ', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.isDisplayingHeader()).toBeFalsy;
    });

    it('should not find a child with id', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.hasChildWithId(defaultProps.id)).toBeFalsy;
    });

    // There rest of the driver's methods would throw some error
  });

  it('should display something when data is non-empty', function () {
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, defaultProps));
    expect(driver.isDisplayingNothing()).toBeFalsy();
  });

  it('should display header only when data is empty and showHeaderWhenEmpty is true', function () {
    var props = _extends({}, defaultProps, {
      data: [],
      showHeaderWhenEmpty: true
    });

    var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
    expect(driver.isDisplayingHeaderOnly()).toBeTruthy();
  });

  it('should render column titles', function () {
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, defaultProps));
    expect(driver.getTitles()).toEqual(defaultProps.columns.map(function (col) {
      return col.title;
    }));
  });

  describe('column width', function () {
    var columns = [{ title: 'Row Num', width: '30%', render: function render(row, rowNum) {
        return rowNum;
      } }, { title: 'A', width: '40px', render: function render(row) {
        return row.a;
      } }, { title: 'B', width: '50px', render: function render(row) {
        return row.b;
      } }];

    it('should apply column.width', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, _extends({}, defaultProps, { columns: columns })));
      columns.forEach(function (column, colIndex) {
        expect(driver.getHeaderCellWidth(colIndex)).toEqual(column.width);
        for (var rowIndex = 0; rowIndex < driver.getRowsCount(); rowIndex++) {
          expect(driver.getCellWidth(rowIndex, colIndex)).toBe('');
        }
      });
    });

    it('should apply column.width when header is hidden', function () {
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, _extends({}, defaultProps, { columns: columns, hideHeader: true })));
      columns.forEach(function (column, colIndex) {
        for (var rowIndex = 0; rowIndex < driver.getRowsCount(); rowIndex++) {
          if (rowIndex === 0) {
            expect(driver.getCellWidth(rowIndex, colIndex)).toEqual(column.width);
          } else {
            expect(driver.getCellWidth(rowIndex, colIndex)).toBe('');
          }
        }
      });
    });
  });

  it('should display correct amount of rows', function () {
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, defaultProps));
    expect(driver.getRowsCount()).toBe(defaultProps.data.length);
  });

  it('should render rows', function () {
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, defaultProps));
    expect(driver.getRowText(0)).toEqual(['0', 'value 1', 'value 2']);
    expect(driver.getRowText(1)).toEqual(['1', 'value 3', 'value 4']);
  });

  it('should assign class to rows', function () {
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, defaultProps));
    expect(driver.getRowsWithClassCount(defaultProps.rowClass)).toBe(defaultProps.data.length);
  });

  it('should assign a dynamic class to rows', function () {
    var getClass = function getClass(rowData) {
      return rowData.a.replace(/[\s]+/g, '-');
    };
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, _extends({}, defaultProps, { dynamicRowClass: getClass })));
    expect(driver.getRowsWithClassCount('value-1')).toBe(1);
    expect(driver.getRowsWithClassCount('value-3')).toBe(1);
    expect(driver.getRowsWithClassCount(defaultProps.rowClass)).toBe(defaultProps.data.length);
  });

  it('should assign dataHook to rows', function () {
    var rowDataHook = 'row-data-hook';
    var props = Object.assign({}, defaultProps, { rowDataHook: rowDataHook });
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
    expect(driver.getRowsWithDataHook(rowDataHook)[0].textContent).toBe('0value 1value 2');
    expect(driver.getRowsWithDataHook(rowDataHook)[1].textContent).toBe('1value 3value 4');
    expect(driver.getRowsWithDataHook(rowDataHook)).toHaveLength(defaultProps.data.length);
  });

  describe('row keys', function () {
    var getRowKey = function getRowKey(wrapper, index) {
      return wrapper.find('tbody tr[data-table-row="dataTableRow"]').at(index).key();
    };

    it('should assign data.id as row keys', function () {
      var props = createDefaultProps();
      props.data[0].id = '000';
      props.data[1].id = '111';
      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_DataTable4.default, props));
      expect(getRowKey(wrapper, 0)).toBe('000');
      expect(getRowKey(wrapper, 1)).toBe('111');
    });

    it('should use rowIndex as keys', function () {
      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_DataTable4.default, createDefaultProps()));
      expect(getRowKey(wrapper, 0)).toBe('0');
      expect(getRowKey(wrapper, 1)).toBe('1');
    });
  });

  it('should assign a dynamic dataHook to rows', function () {
    var calcDataHook = function calcDataHook(rowData, rowIndex) {
      return 'row-index-' + rowIndex + '-a-' + rowData.a.replace(' ', '_');
    };
    var props = Object.assign({}, defaultProps, {
      rowDataHook: calcDataHook
    });
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
    expect(driver.getRowWithDataHook('row-index-0-a-value_1').textContent).toBe('0value 1value 2');
    expect(driver.getRowWithDataHook('row-index-1-a-value_3').textContent).toBe('1value 3value 4');
  });

  it('should get a row classes', function () {
    var getDynamicClass = function getDynamicClass(rowData, rowNum) {
      return rowNum === 1 ? 'rowNum1' : '';
    };
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, _extends({}, defaultProps, { dynamicRowClass: getDynamicClass })));
    expect(driver.getRowClasses(1).sort()).toEqual(['class-name', 'rowNum1']);
  });

  it('should hide table header', function () {
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, _extends({}, defaultProps, { hideHeader: true })));
    expect(driver.isDisplayingHeader()).toBe(false);
  });

  it('should override default table header styles', function () {
    var inlineThStyle = {
      thPadding: '1px',
      thHeight: '2px',
      thFontSize: '3px',
      thBorder: '4px',
      thColor: 'rgb(18, 52, 86)',
      thOpacity: '0.8',
      thLetterSpacing: '1.5px'
    };
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, _extends({}, defaultProps, inlineThStyle)));
    expect(driver.getHeaderCellStyle(0)).toEqual(jasmine.objectContaining({
      padding: '1px',
      height: '2px',
      'font-size': '3px',
      border: '4px',
      color: 'rgb(18, 52, 86)',
      opacity: '0.8',
      'letter-spacing': '1.5px'
    }));
  });

  it('should override default cell styles', function () {
    var clonedProps = Object.assign({}, defaultProps);
    clonedProps.columns.push({
      title: 'c',
      render: function render() {
        return 'c';
      },
      style: {
        paddingLeft: '1px',
        height: '2px',
        width: '100px'
      }
    });
    var driver = createDriver(_react2.default.createElement(_DataTable4.default, clonedProps));
    expect(driver.getCellStyle(0, 3)).toEqual(jasmine.objectContaining({
      'padding-left': '1px',
      height: '2px',
      width: '100px'
    }));
  });

  describe('clickableDataRow class', function () {
    it('should not assign the class to rows by default', function () {
      var props = _extends({}, defaultProps);

      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));

      expect(driver.isRowClickable(0)).toBe(false);
    });

    it('should assign the class to rows when onRowClick prop is provided', function () {
      var props = _extends({}, defaultProps, {
        onRowClick: jest.fn()
      });

      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.isRowClickable(0)).toBe(true);
    });
  });

  describe('animatedDataRow class', function () {
    it('should not assign the class to rows by default', function () {
      var props = _extends({}, defaultProps);

      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));

      expect(driver.isRowAnimated(0)).toBe(false);
    });

    it('should assign the class to rows when rowDetails prop is provided', function () {
      var props = _extends({}, defaultProps, {
        rowDetails: function rowDetails(row) {
          return _react2.default.createElement(
            'span',
            null,
            row.a
          );
        }
      });

      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.isRowAnimated(0)).toBe(true);
    });
  });

  describe('Row event handlers', function () {
    var tests = [{ handler: 'onRowClick', driverMethod: 'clickRow' }, { handler: 'onMouseEnterRow', driverMethod: 'mouseEnterRow' }, { handler: 'onMouseLeaveRow', driverMethod: 'mouseLeaveRow' }];

    tests.forEach(function (_ref) {
      var handler = _ref.handler,
          driverMethod = _ref.driverMethod;

      it('should call ' + handler + ' with row data and index', function () {
        var props = _extends({}, defaultProps, _defineProperty({}, handler, jest.fn()));

        var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));

        driver[driverMethod](0);
        expect(props[handler]).toBeCalledWith(props.data[0], 0);

        driver[driverMethod](1);
        expect(props[handler]).toHaveBeenLastCalledWith(props.data[1], 1);
      });
    });

    it('should expand with correct content and collapse', function () {
      var animationSpeed = 500;

      var props = _extends({}, defaultProps, {
        rowDetails: function rowDetails(row) {
          return _react2.default.createElement(
            'span',
            null,
            row.a
          );
        }
      });

      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.hasRowDetails(0)).toBe(true);
      expect(driver.getRowDetailsText(0)).toBe('');
      driver.clickRow(0);

      // After clicking content will appear at once
      expect(driver.getRowDetailsText(0)).toBe(defaultProps.data[0].a);
      driver.clickRow(0);
      expect(driver.hasRowDetails(0)).toBe(true);

      // When we clicking second time to collapse content will disappear after a while (based on animation speed)
      expect(driver.getRowDetailsText(0)).not.toBe('');

      return new Promise(function (resolve) {
        setTimeout(function () {
          expect(driver.getRowDetailsText(0)).toBe('');
        }, animationSpeed);
        resolve();
      });
    });

    it('should have correct row count when row details enabled', function () {
      var props = _extends({}, defaultProps, {
        rowDetails: jest.fn()
      });

      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.getRowsCount()).toBe(2);
      driver.clickRow(0);
      expect(driver.getRowsCount()).toBe(2);
    });
  });

  describe('Sortable column titles', function () {
    var props = void 0;

    beforeEach(function () {
      props = _extends({}, defaultProps, {
        columns: [{ title: 'Row Num', render: function render(row, rowNum) {
            return rowNum;
          } }, {
          title: 'A',
          sortable: true,
          sortDescending: false,
          render: function render(row) {
            return row.a;
          }
        }, { title: 'B', render: function render(row) {
            return row.b;
          } }, {
          title: 'C',
          sortable: true,
          sortDescending: true,
          render: function render(row) {
            return row.a;
          }
        }]
      });
    });

    it('should display sortable title', function () {
      var _props = Object.assign({}, props, { onSortClick: jest.fn() });
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, _props));
      expect(driver.hasSortableTitle(0)).toBe(false);
      expect(driver.hasSortableTitle(1)).toBe(true);
    });

    it('should display sort asc/desc style', function () {
      var _props = Object.assign({}, props, { onSortClick: jest.fn() });
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, _props));
      expect(driver.hasSortDescending(1)).toBe(false);
      expect(driver.hasSortDescending(3)).toBe(true);
    });

    it('should display new sort asc/desc style', function () {
      var _props = Object.assign({}, props, { onSortClick: jest.fn() });
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, _extends({}, _props, { newDesign: true })));
      expect(driver.hasNewSortDescending(1)).toBe(false);
      expect(driver.hasNewSortDescending(3)).toBe(true);
    });

    it('should call on sort callback', function () {
      var _props = Object.assign({}, props, { onSortClick: jest.fn() });
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, _props));
      driver.clickSort(1);
      expect(_props.onSortClick).toBeCalledWith(props.columns[1], 1);
    });

    it('should not call on sort callback when non-sortable column is clicked', function () {
      var _props = Object.assign({}, props, { onSortClick: jest.fn() });
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, _props));
      driver.clickSort(2);
      expect(_props.onSortClick).not.toHaveBeenCalled();
    });
  });

  describe('Tooltip titles', function () {
    it('should display tooltip icon', function () {
      var props = _extends({}, defaultProps, {
        columns: [{ title: 'Row Num', render: function render(row, rowNum) {
            return rowNum;
          } }, {
          title: 'A',
          infoTooltipProps: { content: 'Vary informative tooltip text' },
          render: function render(row) {
            return row.a;
          }
        }, { title: 'B', render: function render(row) {
            return row.b;
          } }]
      });
      var driver = createDriver(_react2.default.createElement(_DataTable4.default, props));
      expect(driver.hasInfoIcon(0)).toBe(false);
      expect(driver.hasInfoIcon(1)).toBe(true);
    });
  });
});