@salesforce/design-system-react/module/components/data-table/__tests__/data-table.browser-test.js

Salesforce Lightning Design System for React

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _extends() { _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; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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; }

/* eslint-disable max-lines */
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import chai, { expect } from 'chai';
import { keyObjects } from '../../../utilities/key-code';
import Dropdown from '../../menu-dropdown';
import DataTable from '../../data-table';
import DataTableColumn from '../../data-table/column';
import DataTableRowActions from '../../data-table/row-actions';
import DataTableHighlightCell from '../../data-table/highlight-cell';
import IconSettings from '../../icon-settings';
import { mountComponent, unmountComponent } from '../../../tests/enzyme-helpers';
chai.should();
var Simulate = TestUtils.Simulate;
describe('DataTable: ', function describeFunction() {
  var items = [{
    id: '8IKZHZZV80',
    name: 'Cloudhub',
    count: 100976,
    lastModified: 'Yesterday'
  }, {
    id: '5GJOOOPWU7',
    name: 'Cloudhub + Anypoint Connectors',
    count: 54976,
    lastModified: 'Today'
  }, {
    id: 'Q8Z71ZUCEZ',
    name: 'Cloud City',
    count: 101280,
    lastModified: 'Today'
  }, {
    id: '2FSH2DP0LY',
    name: 'IoT',
    count: 976,
    lastModified: 'Yesterday'
  }, {
    id: '8NE888QKV1',
    name: 'IoT + Anypoint Connectors',
    count: 54976,
    lastModified: 'Today'
  }, {
    id: 'M4D37GW83H',
    name: 'Salesforce Tower',
    count: 101280,
    lastModified: 'Today'
  }];
  var itemsWithHeaderRows = [{
    id: 'K6R34GW73J',
    type: 'header-row',
    name: 'Address',
    count: 101210,
    lastModified: 'Today'
  }].concat(items, [{
    id: 'KA78KJAY76',
    type: 'header-row',
    name: 'Company',
    count: 101318,
    lastModified: 'Today'
  }]);
  var columns = [{
    label: 'Name',
    property: 'name',
    truncate: true
  }, {
    label: 'Count',
    property: 'count',
    sortable: true
  }];
  var defaultProps = {
    id: 'DataTableExample-default',
    items: items,
    selectRows: true
  };

  var defaultPropsWithHeaderRows = _objectSpread(_objectSpread({}, defaultProps), {}, {
    items: itemsWithHeaderRows
  });

  var renderTable = function renderTable(instance) {
    return function renderTableFunction() {
      this.dom = document.createElement('div');
      document.body.appendChild(this.dom);
      /* deepscan-disable REACT_ASYNC_RENDER_RETURN_VALUE */
      // eslint-disable-next-line react/no-render-return-value

      this.component = ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconSettings, {
        iconPath: "/assets/icons"
      }, instance)), this.dom);
      /* deepscan-enable REACT_ASYNC_RENDER_RETURN_VALUE */
    };
  };

  function removeTable() {
    ReactDOM.unmountComponentAtNode(this.dom);
    document.body.removeChild(this.dom);
  }

  var getTable = function getTable(dom) {
    return dom.querySelector('.slds-table');
  };

  var getRow = function getRow(dom, row) {
    var tbody = getTable(dom).querySelectorAll('tbody')[0];
    return tbody.querySelectorAll('tr')[row - 1];
  };

  var getCell = function getCell(dom, row, column) {
    var tr = getRow(dom, row);
    return tr.querySelectorAll('td')[column];
  };

  var getMenu = function getMenu(dom) {
    return dom.querySelector('.slds-dropdown');
  };

  describe('Structure', function describeFunction2() {
    beforeEach(renderTable( /*#__PURE__*/React.createElement(DataTable, defaultProps, columns.map(function (columnProps) {
      return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
        key: columnProps.property
      }));
    }))));
    afterEach(removeTable);
    it('has a header', function () {
      var thead = getTable(this.dom).querySelectorAll('thead');
      thead.should.have.length(1);
      thead[0].querySelectorAll('th').should.have.length(3);
    });
    it('has a row for each item', function () {
      var tbody = getTable(this.dom).querySelectorAll('tbody');
      tbody.should.have.length(1);
      tbody[0].querySelectorAll('tr').should.have.length(6);
    });
    it('renders the correct contents in each cell', function () {
      var firstName = getCell(this.dom, 1, 1);
      firstName.innerHTML.should.equal('<div class="" title="Cloudhub">Cloudhub</div>');
      var secondCount = getCell(this.dom, 2, 2);
      secondCount.innerHTML.should.equal('<div class="" title="54976">54976</div>');
    });
    it('has checkboxes when selectRows is true or "checkbox"', function () {
      var checkboxes = getTable(this.dom).querySelectorAll('.slds-checkbox');
      checkboxes.should.have.length(7);
      removeTable.call(this);
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selectRows: false
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      checkboxes = getTable(this.dom).querySelectorAll('.slds-checkbox');
      checkboxes.should.have.length(0);
      removeTable.call(this);
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selectRows: "checkbox"
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      checkboxes = getTable(this.dom).querySelectorAll('.slds-checkbox');
      checkboxes.should.have.length(7);
    });
    it('has radios only when selectRows is "radio"', function () {
      var checkboxes = getTable(this.dom).querySelectorAll('.slds-checkbox');
      checkboxes.should.have.length(7);
      removeTable.call(this);
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selectRows: "radio"
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var radios = getTable(this.dom).querySelectorAll('.slds-radio');
      radios.should.have.length(6);
    });
  });
  describe('Selectable - Checkbox', function describeFunction2() {
    var defaultSelection = [{
      id: '8IKZHZZV80',
      name: 'Cloudhub',
      count: 100976,
      lastModified: 'Yesterday'
    }];
    afterEach(removeTable);
    it('can start with a row selected', function () {
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: defaultSelection
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var tbody = getTable(this.dom).querySelectorAll('tbody')[0];
      var selectedRows = tbody.querySelectorAll('tr.slds-is-selected');
      selectedRows.should.have.length(1);
      var checkedBoxes = tbody.querySelectorAll('.slds-checkbox input:checked');
      checkedBoxes.should.have.length(1);
    });
    it('can start with a row disabled', function () {
      var onChangeHandler = sinon.spy();
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: [],
        disabledSelection: defaultSelection,
        onRowChange: onChangeHandler
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var tbody = getTable(this.dom).querySelectorAll('tbody')[0];
      var disabledRows = tbody.querySelectorAll('.slds-checkbox input:disabled');
      disabledRows.should.have.length(1);
      var checkbox = disabledRows[0];
      Simulate.change(checkbox, {
        target: {
          checked: true
        }
      });
      expect(onChangeHandler.callCount).to.equal(0);
    });
    it('can deselect a row', function (done) {
      this.onRowChange = function (event, _ref) {
        var selection = _ref.selection;
        selection.should.have.length(0);
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: defaultSelection,
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var tbody = getTable(this.dom).querySelectorAll('tbody')[0];
      var selectedRow = tbody.querySelectorAll('tr.slds-is-selected')[0];
      var checkbox = selectedRow.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkbox, {
        target: {
          checked: false
        }
      });
    });
    it('can select a row', function (done) {
      this.onRowChange = function (event, _ref2) {
        var selection = _ref2.selection;
        selection.should.have.length(2);
        selection[1].id.should.equal('5GJOOOPWU7');
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: defaultSelection,
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var secondRow = getRow(this.dom, 2);
      var checkbox = secondRow.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkbox, {
        target: {
          checked: true
        }
      });
    });
    it('can select all rows', function (done) {
      this.onRowChange = function (event, _ref3) {
        var selection = _ref3.selection;
        selection.should.have.length(6);
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var checkAll = thead.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkAll, {
        target: {
          checked: true
        }
      });
    });
    it('can select all rows excluding disabled rows', function (done) {
      this.onRowChange = function (event, _ref4) {
        var selection = _ref4.selection;
        selection.should.have.length(5);
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: [items[0]],
        disabledSelection: [items[0], items[1]],
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var checkAll = thead.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkAll, {
        target: {
          checked: true
        }
      });
    });
    it('can deselect all rows', function (done) {
      this.onRowChange = function (event, _ref5) {
        var selection = _ref5.selection;
        selection.should.have.length(0);
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: items,
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var checkAll = thead.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkAll, {
        target: {
          checked: false
        }
      });
    });
    it('can deselect all rows excluding disabled rows', function (done) {
      this.onRowChange = function (event, _ref6) {
        var selection = _ref6.selection;
        selection.should.have.length(2);
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: items,
        disabledSelection: [items[0], items[1]],
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var checkAll = thead.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkAll, {
        target: {
          checked: false
        }
      });
    });
    it('can select all rows with header-rows present', function (done) {
      this.onRowChange = function (event, _ref7) {
        var selection = _ref7.selection;
        selection.should.have.length(6);
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultPropsWithHeaderRows, {
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var checkAll = thead.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkAll, {
        target: {
          checked: true
        }
      });
    });
    it('can deselect all rows with header-rows present', function (done) {
      this.onRowChange = function (event, _ref8) {
        var selection = _ref8.selection;
        selection.should.have.length(0);
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultPropsWithHeaderRows, {
        selection: items,
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var checkAll = thead.querySelectorAll('.slds-checkbox input')[0];
      Simulate.change(checkAll, {
        target: {
          checked: false
        }
      });
    });
  });
  describe('Selectable - Radio', function describeFunction2() {
    var defaultSelection = [{
      id: '8IKZHZZV80',
      name: 'Cloudhub',
      count: 100976,
      lastModified: 'Yesterday'
    }];
    afterEach(removeTable);
    it('can start with a row selected', function () {
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: defaultSelection,
        selectRows: "radio"
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var tbody = getTable(this.dom).querySelectorAll('tbody')[0];
      var selectedRows = tbody.querySelectorAll('tr.slds-is-selected');
      selectedRows.should.have.length(1);
      var radios = tbody.querySelectorAll('.slds-radio input:checked');
      radios.should.have.length(1);
    });
    it('can start with a row disabled', function () {
      var onChangeHandler = sinon.spy();
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: [],
        disabledSelection: defaultSelection,
        onRowChange: onChangeHandler,
        selectRows: "radio"
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var tbody = getTable(this.dom).querySelectorAll('tbody')[0];
      var radios = tbody.querySelectorAll('.slds-radio input:disabled');
      radios.should.have.length(1);
      Simulate.change(radios[0], {
        target: {
          checked: true
        }
      });
      expect(onChangeHandler.callCount).to.equal(0);
    });
    it('can select a row', function (done) {
      this.onRowChange = function (event, _ref9) {
        var selection = _ref9.selection;
        selection.should.have.length(1);
        selection[0].id.should.equal('5GJOOOPWU7');
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        selection: defaultSelection,
        selectRows: "radio",
        onRowChange: this.onRowChange
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var secondRow = getRow(this.dom, 2);
      var radio = secondRow.querySelectorAll('.slds-radio input')[0];
      Simulate.change(radio, {
        target: {
          checked: true
        }
      });
    });
  });
  describe('Sortable', function describeFunction2() {
    afterEach(removeTable);
    it('first clicked on sortable column header should result in ascending sort by default', function (done) {
      this.onSort = function (data) {
        data.property.should.equal('count');
        data.sortDirection.should.equal('asc');
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        fixedLayout: true,
        onSort: this.onSort
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var sortButton = thead.querySelectorAll('a')[0];
      Simulate.click(sortButton, {});
    });
    it('if isDefaultSortDescending is true, first click on sortable column header should result in descending order', function (done) {
      this.onSort = function (data) {
        data.property.should.equal('count');
        data.sortDirection.should.equal('desc');
        done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        fixedLayout: true,
        onSort: this.onSort
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          isDefaultSortDescending: true,
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var sortButton = thead.querySelectorAll('a')[0];
      Simulate.click(sortButton, {});
    });
    it('does not call onSort when a non-sortable column is clicked', function (done) {
      this.onSort = function () {
        done('sort called');
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        onSort: this.onSort
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var thead = getTable(this.dom).querySelectorAll('thead')[0];
      var secondColumn = thead.querySelectorAll('th')[1];
      Simulate.click(secondColumn, {});
      setTimeout(done, 0);
    });
  });
  describe('w/ RowActions', function describeFunction2() {
    afterEach(removeTable);
    it('renders the RowActions and uses dropdown override property', function () {
      renderTable( /*#__PURE__*/React.createElement(DataTable, defaultProps, columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }), /*#__PURE__*/React.createElement(DataTableRowActions, {
        dropdown: /*#__PURE__*/React.createElement(Dropdown, {
          options: [{
            id: 0,
            label: 'Add to Group',
            value: '1'
          }, {
            id: 1,
            label: 'Publish',
            value: '2'
          }]
        })
      }))).call(this);

      var rowActionMenus = _toConsumableArray(this.component.getElementsByTagName('button')).filter(function (button) {
        return button.textContent === 'Actions';
      });

      rowActionMenus.should.have.length(6);
    });
    it('calls onAction & onSelect when an action is clicked', function (done) {
      var expectedCalbacks = 2;

      this.onAction = function (item, action) {
        item.id.should.equal('8IKZHZZV80');
        action.value.should.equal('1'); // eslint-disable-next-line no-plusplus

        if (! --expectedCalbacks) done();
      };

      this.onSelect = function (action) {
        action.value.should.equal('1'); // eslint-disable-next-line no-plusplus

        if (! --expectedCalbacks) done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, defaultProps, columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }), /*#__PURE__*/React.createElement(DataTableRowActions, {
        onAction: this.onAction,
        options: [{
          id: 0,
          label: 'Add to Group',
          value: '1'
        }, {
          id: 1,
          label: 'Publish',
          value: '2'
        }],
        dropdown: /*#__PURE__*/React.createElement(Dropdown, {
          onSelect: this.onSelect
        })
      }))).call(this);

      var trigger = _toConsumableArray(this.component.getElementsByTagName('button')).filter(function (button) {
        return button.textContent === 'Actions';
      })[0];

      Simulate.click(trigger, {});
      setTimeout(function () {
        var menu = getMenu(document.body);
        var firstAction = menu.querySelectorAll('.slds-dropdown__item')[0];
        Simulate.click(firstAction.querySelector('a'), {});
      }, 0);
    });
  });
  describe('w/ HighlightCell', function describeFunction2() {
    afterEach(removeTable);
    it('marks the appropriate text in a cell', function () {
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        search: "Cloud"
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }), /*#__PURE__*/React.createElement(DataTableHighlightCell, null));
      }))).call(this);
      var secondRow = getRow(this.dom, 2);
      var markedText = secondRow.querySelectorAll('mark')[0];
      markedText.innerHTML.should.equal('Cloud');
    });
  });
  describe('w/ Fixed Headers', function describeFunction2() {
    afterEach(removeTable);
    it('Renders a fixedHeader table as expected', function () {
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        fixedHeader: true,
        fixedLayout: true,
        id: "DataTable-FixedHeader-Test",
        onFixedHeaderResize: function onFixedHeaderResize(event, data) {
          expect(Array.isArray(data.headerRefs)).to.eql(true);
          expect(data.headerRefs.length).to.eql(4);
          data.headerRefs.forEach(function (ref) {
            expect(_typeof(ref)).to.eql('object');
          });
          expect(_typeof(data.scrollerRef)).to.eql('object');
          expect(data.scrollerRef.className.search('slds-table_header-fixed_scroller') >= 0).to.eql(true);
        },
        onToggleFixedHeaderListeners: function onToggleFixedHeaderListeners(event, data) {
          expect(_typeof(data.attach)).to.eql('boolean');
          expect(_typeof(data.resizeHandler)).to.eql('function');
          expect(_typeof(data.scrollerRef)).to.eql('object');
          expect(data.scrollerRef.className.search('slds-table_header-fixed_scroller') >= 0).to.eql(true);
        },
        selectRows: "checkbox"
      }), /*#__PURE__*/React.createElement(DataTableColumn, {
        isSorted: true,
        label: "Name",
        primaryColumn: true,
        property: "name",
        sortable: true,
        sortDirection: "asc"
      }), /*#__PURE__*/React.createElement(DataTableColumn, {
        label: "Count",
        property: "count"
      }), /*#__PURE__*/React.createElement(DataTableRowActions, {
        options: [{
          id: 0,
          label: 'Add to Group',
          value: '1'
        }, {
          id: 1,
          label: 'Publish',
          value: '2'
        }],
        onAction: function onAction() {},
        dropdown: /*#__PURE__*/React.createElement(Dropdown, {
          length: "5"
        })
      }))).call(this);
      expect(this.dom.querySelectorAll('.slds-table_header-fixed_container').length).to.eql(1);
      expect(this.dom.querySelectorAll('.slds-table_header-fixed_scroller').length).to.eql(1);
      expect(this.dom.querySelector('table.slds-table').className.search('slds-table_header-fixed') >= 0).to.eql(true);
      expect(this.dom.querySelectorAll('thead .slds-cell-fixed').length).to.eql(4);
    });
    it('Renders a fixedHeader table with column resizing functionality as expected', function () {
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        fixedHeader: true,
        fixedLayout: true,
        resizable: true,
        id: "DataTable-resizable-cols-Test"
      }), /*#__PURE__*/React.createElement(DataTableColumn, {
        isSorted: true,
        label: "Name",
        primaryColumn: true,
        property: "name",
        sortable: true,
        sortDirection: "asc"
      }), /*#__PURE__*/React.createElement(DataTableColumn, {
        label: "Count",
        property: "count"
      }), /*#__PURE__*/React.createElement(DataTableRowActions, {
        options: [{
          id: 0,
          label: 'Add to Group',
          value: '1'
        }, {
          id: 1,
          label: 'Publish',
          value: '2'
        }],
        onAction: function onAction() {},
        dropdown: /*#__PURE__*/React.createElement(Dropdown, {
          length: "5"
        })
      }))).call(this); // actions column is not resizable

      expect(this.dom.querySelectorAll('.grip-resizable').length).to.eql(4);
      expect(this.dom.querySelectorAll('.grip-container').length).to.eql(1);
    });
  });
  describe('Column resizing', function describeFunction2() {
    beforeEach(mountComponent( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
      fixedLayout: true,
      keyboardNavigation: true,
      resizable: true,
      resizableOptions: {
        resizeMode: 'overflow',
        onResize: function onResize() {}
      }
    }), [].concat(_toConsumableArray(columns.map(function (columnProps) {
      return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
        key: columnProps.property
      }));
    })), [/*#__PURE__*/React.createElement(DataTableRowActions, {
      key: "actions",
      options: [{
        id: 0,
        label: 'Add to Group',
        value: '1'
      }, {
        id: 1,
        label: 'Publish',
        value: '2'
      }],
      onAction: function onAction() {},
      dropdown: /*#__PURE__*/React.createElement(Dropdown, {
        length: "5"
      })
    })]))));
    afterEach(unmountComponent);
    it('Resize functionality should work with left key', function () {
      var initial = this.dom.querySelectorAll('th')[0].style.width;
      var cell = this.wrapper.find('td').first();
      cell.simulate('focus');
      expect(this.wrapper.find('td').first().prop('tabIndex')).to.equal('0');
      cell.simulate('keyDown', keyObjects.UP);
      cell = this.wrapper.find('th').at(0);
      expect(this.wrapper.find('th').first().prop('tabIndex')).to.equal('0');
      cell.simulate('keyDown', keyObjects.ENTER);
      cell.simulate('keyDown', keyObjects.LEFT);
      cell.simulate('keyDown', keyObjects.LEFT);
      cell.simulate('keyDown', keyObjects.LEFT);
      cell.simulate('keyDown', keyObjects.ESCAPE);
      expect("".concat(parseInt(initial, 10) - 30, "px")).to.equal(this.dom.querySelectorAll('th')[0].style.width);
    });
    it('Resize functionality should work with right key', function () {
      var initial = this.dom.querySelectorAll('th')[0].style.width;
      var cell = this.wrapper.find('td').first();
      cell.simulate('focus');
      expect(this.wrapper.find('td').first().prop('tabIndex')).to.equal('0');
      cell.simulate('keyDown', keyObjects.UP);
      cell = this.wrapper.find('th').at(0);
      expect(this.wrapper.find('th').first().prop('tabIndex')).to.equal('0');
      cell.simulate('keyDown', keyObjects.ENTER);
      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.ESCAPE);
      expect("".concat(parseInt(initial, 10) + 60, "px")).to.equal(this.dom.querySelectorAll('th')[0].style.width);
    });
  });
  describe('w/ Infinite Scrolling', function describeFunction2() {
    afterEach(removeTable);
    it('renders a spinner as expected', function () {
      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        fixedHeader: true,
        fixedLayout: true,
        hasMore: true
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      expect(this.dom.querySelectorAll('.slds-spinner').length).to.eql(1);
    });
    it('onLoadMore callback is called when scroller is scrolled', function (done) {
      var expectedCalbacks = 1;

      this.onLoadMore = function () {
        // eslint-disable-next-line no-plusplus
        if (! --expectedCalbacks) done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        fixedHeader: true,
        fixedLayout: true,
        hasMore: true,
        onLoadMore: this.onLoadMore
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      var scroller = this.dom.querySelector('.slds-table_header-fixed_scroller');
      scroller.dispatchEvent(new Event('scroll'));
    });
    it('onLoadMore callback is called when window is resized', function (done) {
      var expectedCalbacks = 1;

      this.onLoadMore = function () {
        // eslint-disable-next-line no-plusplus
        if (! --expectedCalbacks) done();
      };

      renderTable( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        fixedHeader: true,
        fixedLayout: true,
        hasMore: true,
        onLoadMore: this.onLoadMore
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this);
      window.dispatchEvent(new Event('resize'));
    });
    it('onLoadMore callback is called when the component is updated', function (done) {
      var expectedCallbacks = 1;

      this.onLoadMore = function () {
        // eslint-disable-next-line no-plusplus
        if (! --expectedCallbacks) done();
      };

      mountComponent( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
        items: [],
        fixedHeader: true,
        fixedLayout: true,
        hasMore: true,
        onLoadMore: this.onLoadMore
      }), columns.map(function (columnProps) {
        return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
          key: columnProps.property
        }));
      }))).call(this); // Simulate the first page loading

      this.wrapper.setProps({
        items: [items[0]]
      });
    });
  });
  describe('Keyboard Navigation', function describeFunction2() {
    beforeEach(mountComponent( /*#__PURE__*/React.createElement(DataTable, _extends({}, defaultProps, {
      fixedLayout: true,
      keyboardNavigation: true
    }), [].concat(_toConsumableArray(columns.map(function (columnProps) {
      return /*#__PURE__*/React.createElement(DataTableColumn, _extends({}, columnProps, {
        key: columnProps.property
      }));
    })), [/*#__PURE__*/React.createElement(DataTableRowActions, {
      key: "actions",
      options: [{
        id: 0,
        label: 'Add to Group',
        value: '1'
      }, {
        id: 1,
        label: 'Publish',
        value: '2'
      }],
      onAction: function onAction() {},
      dropdown: /*#__PURE__*/React.createElement(Dropdown, {
        length: "5"
      })
    })]))));
    afterEach(unmountComponent);
    it('moves selection when using keyboard up/down/left/right keys', function () {
      // Focus the first cell
      var cell = this.wrapper.find('td').first();
      cell.simulate('focus');
      expect(this.wrapper.find('td').first().prop('tabIndex')).to.equal('0'); // Press Right

      cell.simulate('keyDown', keyObjects.RIGHT);
      cell = this.wrapper.find('td').at(1);
      expect(cell.prop('tabIndex')).to.equal('0'); // Press Down

      cell.simulate('keyDown', keyObjects.DOWN);
      cell = this.wrapper.find('td').at(5);
      expect(cell.prop('tabIndex')).to.equal('0'); // Press Left

      cell.simulate('keyDown', keyObjects.LEFT);
      cell = this.wrapper.find('td').at(4);
      expect(cell.prop('tabIndex')).to.equal('0'); // Press Up

      cell.simulate('keyDown', keyObjects.UP);
      cell = this.wrapper.find('td').at(0);
      expect(cell.prop('tabIndex')).to.equal('0');
    });
    it('enters actionable mode when using keyboard enter key; and enters navigation mode when using keyboard escape key', function () {
      // Focus the first cell
      var cell = this.wrapper.find('td').first();
      cell.simulate('focus');
      expect(this.wrapper.find('td').first().prop('tabIndex')).to.equal('0'); // Press Enter

      cell.simulate('keyDown', keyObjects.ENTER);
      cell = this.wrapper.find('td').first();
      expect(cell.prop('tabIndex')).to.be.undefined;
      var checkbox = this.wrapper.find('td').first().find('input[type="checkbox"]');
      expect(checkbox.prop('tabIndex')).to.equal('0'); // Press Escape

      cell.simulate('keyDown', keyObjects.ESCAPE);
      cell = this.wrapper.find('td').first();
      expect(cell.prop('tabIndex')).to.equal('0');
      checkbox = this.wrapper.find('td').first().find('input[type="checkbox"]');
      expect(checkbox.prop('tabIndex')).to.equal('-1'); // Navigate to Dropdown

      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.RIGHT);
      cell.simulate('keyDown', keyObjects.RIGHT); // Press Enter

      cell.simulate('keyDown', keyObjects.ENTER);
      var dropdownTrigger = this.wrapper.find('td').at(3).find('.slds-dropdown-trigger button');
      expect(dropdownTrigger.prop('tabIndex')).to.equal('0'); // Press Escape

      cell.simulate('keyDown', keyObjects.ESCAPE);
      dropdownTrigger = this.wrapper.find('td').at(3).find('.slds-dropdown-trigger button');
      expect(dropdownTrigger.prop('tabIndex')).to.equal('-1');
    });
  });
});
//# sourceMappingURL=data-table.browser-test.js.map