function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import '@testing-library/jest-dom/extend-expect';
import React, { useState } from 'react';
import { render, waitForElementToBeRemoved } from '@testing-library/react';
import { Button } from '../Button';
import { TableColumn, Table } from '.';
describe('Table', function () {
  var wrapper;
  describe('default props', function () {
    beforeEach(function () {
      var tableDataMock = [{
        id: 'a',
        first: 'a1',
        second: 'a2',
        third: 'a3'
      }, {
        id: 'b',
        first: 'b1',
        second: 'b2',
        third: 'b3'
      }, {
        id: 'c',
        first: 'c1',
        second: 'c2',
        third: 'c3'
      }];
      wrapper = render( /*#__PURE__*/React.createElement(Table, {
        data: tableDataMock
      }, /*#__PURE__*/React.createElement(TableColumn, {
        field: "first"
      }, "First"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "second"
      }, "Second"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "third"
      }, "Third")));
    });
    it('should not display the caption', function () {
      expect(wrapper.queryByTestId('table-caption')).not.toBeInTheDocument();
    });
    it('should set the `role` attribute to `grid`', function () {
      expect(wrapper.getByTestId('table')).toHaveAttribute('role', 'grid');
    });
    it('should render three table header cells', function () {
      expect(wrapper.queryAllByTestId('table-header')).toHaveLength(3);
    });
    it('should not set an `aria-sort` attribute on any table header cells', function () {
      var tableHeaderCells = wrapper.queryAllByTestId('table-header');
      tableHeaderCells.forEach(function (tableHeaderCell) {
        expect(tableHeaderCell).not.toHaveAttribute('aria-sort');
      });
    });
    it('should render three rows', function () {
      expect(wrapper.queryAllByTestId('table-row')).toHaveLength(3);
    });
  });
  describe('when columns are sortable', function () {
    beforeEach(function () {
      var tableDataMock = [{
        id: 'b',
        first: 'b1',
        second: 'b2',
        third: 'c6'
      }, {
        id: 'a',
        first: 'a1',
        second: 'a2',
        third: 'c5'
      }, {
        id: 'c',
        first: 'c1',
        second: 'c2',
        third: 'c4'
      }];
      wrapper = render( /*#__PURE__*/React.createElement(Table, {
        data: tableDataMock
      }, /*#__PURE__*/React.createElement(TableColumn, {
        field: "first",
        isSortable: true
      }, "First"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "second"
      }, "Second"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "third",
        isSortable: true
      }, "Third")));
    });
    it('should have sort icons', function () {
      expect(wrapper.queryAllByTestId('unsorted').length).toEqual(2);
      expect(wrapper.queryAllByTestId('descending').length).toEqual(0);
      expect(wrapper.queryAllByTestId('ascending').length).toEqual(0);
    });
    it('should set the `aria-sort` attribute on the table header cells', function () {
      var tableHeaderCells = wrapper.queryAllByTestId('table-header');
      expect(tableHeaderCells[0]).toHaveAttribute('aria-sort', 'none');
      expect(tableHeaderCells[1]).not.toHaveAttribute('aria-sort');
      expect(tableHeaderCells[2]).toHaveAttribute('aria-sort', 'none');
    });
    describe('when the second cell header is clicked', function () {
      beforeEach(function () {
        wrapper.getByText('Second').click();
      });
      it('should have sort icons', function () {
        expect(wrapper.queryAllByTestId('unsorted').length).toEqual(2);
        expect(wrapper.queryAllByTestId('descending').length).toEqual(0);
        expect(wrapper.queryAllByTestId('ascending').length).toEqual(0);
      });
      it('should set the `aria-sort` attribute on the table header cells', function () {
        var tableHeaderCells = wrapper.queryAllByTestId('table-header');
        expect(tableHeaderCells[0]).toHaveAttribute('aria-sort', 'none');
        expect(tableHeaderCells[1]).not.toHaveAttribute('aria-sort');
        expect(tableHeaderCells[2]).toHaveAttribute('aria-sort', 'none');
      });
      it('should not change the order of the rows', function () {
        var rows = wrapper.getAllByTestId('table-row');
        expect(rows[0].children[0].textContent).toEqual('b1');
        expect(rows[1].children[0].textContent).toEqual('a1');
        expect(rows[2].children[0].textContent).toEqual('c1');
      });
    });
    describe('when the first cell header is clicked for the first time', function () {
      beforeEach(function () {
        wrapper.getByText('First').click();
      });
      it('should have sort icons', function () {
        expect(wrapper.queryAllByTestId('unsorted').length).toEqual(1);
        expect(wrapper.queryAllByTestId('descending').length).toEqual(1);
        expect(wrapper.queryAllByTestId('ascending').length).toEqual(0);
      });
      it('should apply `aria-hidden` to sort icons', function () {
        expect(wrapper.queryAllByTestId('unsorted')[0]).toHaveAttribute('aria-hidden');
        expect(wrapper.queryAllByTestId('descending')[0]).toHaveAttribute('aria-hidden');
      });
      it('should set the `aria-sort` attribute on the table header cells', function () {
        var tableHeaderCells = wrapper.queryAllByTestId('table-header');
        expect(tableHeaderCells[0]).toHaveAttribute('aria-sort', 'descending');
        expect(tableHeaderCells[1]).not.toHaveAttribute('aria-sort');
        expect(tableHeaderCells[2]).toHaveAttribute('aria-sort', 'none');
      });
      it('should sort the data in descending order of the first column', function () {
        var rows = wrapper.getAllByTestId('table-row');
        expect(rows[0].children[0].textContent).toEqual('c1');
        expect(rows[1].children[0].textContent).toEqual('b1');
        expect(rows[2].children[0].textContent).toEqual('a1');
      });
      describe('when the first cell header is clicked for the second time', function () {
        beforeEach(function () {
          wrapper.getByText('First').click();
        });
        it('should have sort icons', function () {
          expect(wrapper.queryAllByTestId('unsorted').length).toEqual(1);
          expect(wrapper.queryAllByTestId('descending').length).toEqual(0);
          expect(wrapper.queryAllByTestId('ascending').length).toEqual(1);
        });
        it('should apply `aria-hidden` to sort icons', function () {
          expect(wrapper.queryAllByTestId('unsorted')[0]).toHaveAttribute('aria-hidden');
          expect(wrapper.queryAllByTestId('ascending')[0]).toHaveAttribute('aria-hidden');
        });
        it('should set the `aria-sort` attribute on the table header cells', function () {
          var tableHeaderCells = wrapper.queryAllByTestId('table-header');
          expect(tableHeaderCells[0]).toHaveAttribute('aria-sort', 'ascending');
          expect(tableHeaderCells[1]).not.toHaveAttribute('aria-sort');
          expect(tableHeaderCells[2]).toHaveAttribute('aria-sort', 'none');
        });
        it('should sort the data in ascending order of the first column', function () {
          var rows = wrapper.getAllByTestId('table-row');
          expect(rows[0].children[0].textContent).toEqual('a1');
          expect(rows[1].children[0].textContent).toEqual('b1');
          expect(rows[2].children[0].textContent).toEqual('c1');
        });
        describe('when the first cell header is clicked for the third time', function () {
          beforeEach(function () {
            wrapper.getByText('First').click();
          });
          it('should have sort icons', function () {
            expect(wrapper.queryAllByTestId('unsorted').length).toEqual(2);
            expect(wrapper.queryAllByTestId('descending').length).toEqual(0);
            expect(wrapper.queryAllByTestId('ascending').length).toEqual(0);
          });
          it('should set the `aria-sort` attribute on the table header cells', function () {
            var tableHeaderCells = wrapper.queryAllByTestId('table-header');
            expect(tableHeaderCells[0]).toHaveAttribute('aria-sort', 'none');
            expect(tableHeaderCells[1]).not.toHaveAttribute('aria-sort');
            expect(tableHeaderCells[2]).toHaveAttribute('aria-sort', 'none');
          });
          it('should unsort the data in the first column', function () {
            var rows = wrapper.getAllByTestId('table-row');
            expect(rows[0].children[0].textContent).toEqual('b1');
            expect(rows[1].children[0].textContent).toEqual('a1');
            expect(rows[2].children[0].textContent).toEqual('c1');
          });
        });
      });
    });
    describe('when the first cell header is clicked once and then the third cell header is clicked', function () {
      beforeEach(function () {
        wrapper.getByText('First').click();
        wrapper.getByText('Third').click();
      });
      it('should have sort icons', function () {
        expect(wrapper.queryAllByTestId('unsorted').length).toEqual(1);
        expect(wrapper.queryAllByTestId('descending').length).toEqual(1);
        expect(wrapper.queryAllByTestId('ascending').length).toEqual(0);
      });
      it('should set the `aria-sort` attribute on the table header cells', function () {
        var tableHeaderCells = wrapper.queryAllByTestId('table-header');
        expect(tableHeaderCells[0]).toHaveAttribute('aria-sort', 'none');
        expect(tableHeaderCells[1]).not.toHaveAttribute('aria-sort');
        expect(tableHeaderCells[2]).toHaveAttribute('aria-sort', 'descending');
      });
      it('should sort the data in descending order of the third column', function () {
        var rows = wrapper.getAllByTestId('table-row');
        expect(rows[0].children[2].textContent).toEqual('c6');
        expect(rows[1].children[2].textContent).toEqual('c5');
        expect(rows[2].children[2].textContent).toEqual('c4');
      });
    });
  });
  describe('when the data updates externally', function () {
    beforeEach(function () {
      var initialMock = [{
        id: 'a',
        first: 'a1',
        second: 'a2',
        third: 'a3'
      }, {
        id: 'b',
        first: 'b1',
        second: 'b2',
        third: 'b3'
      }, {
        id: 'c',
        first: 'c1',
        second: 'c2',
        third: 'c3'
      }];
      var updatedMock = [initialMock[0], initialMock[1]];
      var TableWithUpdate = function TableWithUpdate() {
        var _useState = useState(initialMock),
          _useState2 = _slicedToArray(_useState, 2),
          tableData = _useState2[0],
          updateTableData = _useState2[1];
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
          onClick: function onClick() {
            return updateTableData(updatedMock);
          }
        }, "Update"), /*#__PURE__*/React.createElement(Table, {
          data: tableData
        }, /*#__PURE__*/React.createElement(TableColumn, {
          field: "first"
        }, "First"), /*#__PURE__*/React.createElement(TableColumn, {
          field: "second"
        }, "Second"), /*#__PURE__*/React.createElement(TableColumn, {
          field: "third"
        }, "Third")));
      };
      wrapper = render( /*#__PURE__*/React.createElement(TableWithUpdate, null));
      wrapper.getByText('Update').click();
      return waitForElementToBeRemoved(function () {
        return wrapper.queryAllByText('c1');
      });
    });
    it('should update the table data', function () {
      var rows = wrapper.queryAllByTestId('table-row');
      expect(rows).toHaveLength(2);
    });
  });
  describe('when caption is provided', function () {
    beforeEach(function () {
      var tableDataMock = [{
        id: 'a',
        first: 'a1',
        second: 'a2',
        third: 'a3'
      }, {
        id: 'b',
        first: 'b1',
        second: 'b2',
        third: 'b3'
      }, {
        id: 'c',
        first: 'c1',
        second: 'c2',
        third: 'c3'
      }];
      wrapper = render( /*#__PURE__*/React.createElement(Table, {
        data: tableDataMock,
        caption: "Hello, World!"
      }, /*#__PURE__*/React.createElement(TableColumn, {
        field: "first"
      }, "First"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "second"
      }, "Second"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "third"
      }, "Third")));
    });
    it('should display the caption', function () {
      expect(wrapper.queryByTestId('table-caption')).toBeInTheDocument();
      expect(wrapper.getByTestId('table-caption').innerHTML).toEqual('Hello, World!');
    });
  });
  describe('when arbitrary props are provided', function () {
    beforeEach(function () {
      var tableDataMock = [{
        id: 'a',
        first: 'a1',
        second: 'a2',
        third: 'a3'
      }, {
        id: 'b',
        first: 'b1',
        second: 'b2',
        third: 'b3'
      }, {
        id: 'c',
        first: 'c1',
        second: 'c2',
        third: 'c3'
      }];
      wrapper = render( /*#__PURE__*/React.createElement(Table, {
        data: tableDataMock,
        "data-arbitrary": "arbitrary"
      }, /*#__PURE__*/React.createElement(TableColumn, {
        "data-arbitrary": "arbitrary-column",
        field: "first"
      }, "First"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "second"
      }, "Second"), /*#__PURE__*/React.createElement(TableColumn, {
        field: "third"
      }, "Third")));
    });
    it('should spread arbitrary props on the table', function () {
      expect(wrapper.getByTestId('table')).toHaveAttribute('data-arbitrary', 'arbitrary');
    });
    it('should spread arbitrary props on the table column', function () {
      expect(wrapper.getAllByTestId('table-header')[0]).toHaveAttribute('data-arbitrary', 'arbitrary-column');
    });
  });
});