@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/cjs/components/DataTable/DataTable.test.js

@@ -0,0 +1,1307 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Array$isArray = require("@babel/runtime-corejs3/core-js-stable/array/is-array");
+
+var _getIteratorMethod = require("@babel/runtime-corejs3/core-js/get-iterator-method");
+
+var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
+
+var _Array$from = require("@babel/runtime-corejs3/core-js-stable/array/from");
+
+var _sliceInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/slice");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+
+var _sort2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _data = require("@react-stately/data");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _DataTable = _interopRequireDefault(require("./DataTable"));
+
+var _index = require("../../index");
+
+var _react3 = require("@emotion/react");
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (_Array$isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { var _context37; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context37 = Object.prototype.toString.call(o)).call(_context37, 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 ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context35, _context36; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context35 = ownKeys(Object(source), !0)).call(_context35, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context36 = ownKeys(Object(source))).call(_context36, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var offsetWidth;
+var offsetHeight;
+beforeAll(function () {
+  offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  jest.useFakeTimers();
+});
+afterAll(function () {
+  offsetWidth.mockReset();
+  offsetHeight.mockReset();
+});
+var columns = [{
+  name: 'Country',
+  key: 'country'
+}, {
+  name: 'Population',
+  key: 'population'
+}, {
+  name: 'Continent',
+  key: 'continent'
+}];
+var rows = [{
+  id: 1,
+  country: 'USA',
+  population: 320000000,
+  continent: 'North America'
+}, {
+  id: 2,
+  country: 'Canada',
+  population: 37000000,
+  continent: 'North America'
+}, {
+  id: 3,
+  country: 'China',
+  population: 1398000000,
+  continent: 'Asia'
+}, {
+  id: 4,
+  country: 'France',
+  population: 67000000,
+  continent: 'Europe'
+}];
+
+var getCell = function getCell(view, text) {
+  // Find by text, then go up to the element with the cell role.
+  // eslint-disable-next-line testing-library/prefer-screen-queries
+  var el = view.getByText(text);
+
+  while (el && !/gridcell|rowheader|columnheader/.test(el.getAttribute('role'))) {
+    el = el.parentElement;
+  }
+
+  return el;
+};
+
+var focusCell = function focusCell(tree, text) {
+  return (0, _react2.act)(function () {
+    return getCell(tree, text).focus();
+  });
+};
+
+var moveFocus = function moveFocus(key) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  _react2.fireEvent.keyDown(document.activeElement, _objectSpread({
+    key: key
+  }, opts));
+};
+
+describe('Static DataTable', function () {
+  var testId = 'staticTable';
+  var defaultProps = {
+    'aria-label': 'Default table with static content',
+    width: '100%',
+    height: '100%',
+    density: 'spacious',
+    'data-testid': testId
+  };
+
+  var staticDataTable = function staticDataTable() {
+    return (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], defaultProps, (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center"
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, {
+      items: rows
+    }, function (item) {
+      return (0, _react3.jsx)(_index.DataTableRow, null, function (columnKey) {
+        return (0, _react3.jsx)(_index.DataTableCell, null, item[columnKey]);
+      });
+    })));
+  };
+
+  test('renders DataTable component with static content', function () {
+    staticDataTable();
+
+    var staticTable = _react2.screen.getByTestId(testId);
+
+    expect(staticTable).toBeInTheDocument();
+    expect(staticTable).toBeVisible();
+    expect(staticTable).toHaveAttribute('aria-label', 'Default table with static content');
+    expect(staticTable).toHaveAttribute('data-testid', testId);
+    expect(staticTable).toHaveAttribute('aria-rowcount', '5');
+    expect(staticTable).toHaveAttribute('aria-colcount', '3');
+    var rowgroups = (0, _react2.within)(staticTable).getAllByRole('rowgroup');
+    expect(rowgroups).toHaveLength(2);
+    var headers = (0, _react2.within)(staticTable).getAllByRole('columnheader');
+    expect(headers).toHaveLength(3);
+    expect(headers[0]).toHaveAttribute('aria-colindex', '1');
+    expect(headers[1]).toHaveAttribute('aria-colindex', '2');
+    expect(headers[2]).toHaveAttribute('aria-colindex', '3'); // eslint-disable-next-line no-unused-vars, no-restricted-syntax
+
+    var _iterator = _createForOfIteratorHelper(headers),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var header = _step.value;
+        expect(header).not.toHaveAttribute('aria-sort');
+        expect(header).not.toHaveAttribute('aria-describedby');
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    expect(headers[0]).toHaveTextContent(columns[0].name);
+    expect(headers[1]).toHaveTextContent(columns[1].name);
+    expect(headers[2]).toHaveTextContent(columns[2].name);
+    var tRows = (0, _react2.within)(rowgroups[1]).getAllByRole('row');
+    expect(tRows).toHaveLength(4);
+    expect(tRows[0]).toHaveAttribute('aria-rowindex', '2');
+    expect(tRows[1]).toHaveAttribute('aria-rowindex', '3');
+    expect(tRows[2]).toHaveAttribute('aria-rowindex', '4');
+    expect(tRows[3]).toHaveAttribute('aria-rowindex', '5');
+    var rowheader = (0, _react2.within)(tRows[0]).getByRole('rowheader');
+    expect(rowheader).toHaveTextContent(rows[0].country);
+    expect(rowheader).toHaveAttribute('aria-colindex', '1');
+    rowheader = (0, _react2.within)(tRows[1]).getByRole('rowheader');
+    expect(rowheader).toHaveTextContent(rows[1].country);
+    expect(rowheader).toHaveAttribute('aria-colindex', '1');
+    rowheader = (0, _react2.within)(tRows[2]).getByRole('rowheader');
+    expect(rowheader).toHaveTextContent(rows[2].country);
+    expect(rowheader).toHaveAttribute('aria-colindex', '1');
+    rowheader = (0, _react2.within)(tRows[3]).getByRole('rowheader');
+    expect(rowheader).toHaveTextContent(rows[3].country);
+    expect(rowheader).toHaveAttribute('aria-colindex', '1');
+    var cells = (0, _react2.within)(rowgroups[1]).getAllByRole('gridcell');
+    expect(cells).toHaveLength(8);
+    expect(cells[0]).toHaveAttribute('aria-colindex', '2');
+    expect(cells[1]).toHaveAttribute('aria-colindex', '3');
+    expect(cells[2]).toHaveAttribute('aria-colindex', '2');
+    expect(cells[3]).toHaveAttribute('aria-colindex', '3');
+    expect(cells[4]).toHaveAttribute('aria-colindex', '2');
+    expect(cells[5]).toHaveAttribute('aria-colindex', '3');
+    expect(cells[6]).toHaveAttribute('aria-colindex', '2');
+    expect(cells[7]).toHaveAttribute('aria-colindex', '3');
+  });
+  test('should move focus to the next cell in a row with ArrowRight', function () {
+    var view = staticDataTable();
+    focusCell(view, 'USA');
+    moveFocus('ArrowRight'); // eslint-disable-next-line jest-dom/prefer-focus
+
+    expect(document.activeElement).toBe(getCell(view, 320000000));
+  });
+  test('should move focus to the previous cell in a row with ArrowLeft', function () {
+    var view = staticDataTable();
+    focusCell(view, 'Asia');
+    moveFocus('ArrowLeft');
+    expect(getCell(view, 1398000000)).toHaveFocus();
+  });
+  test('should move focus to the next cell in a row with ArrowUp', function () {
+    var view = staticDataTable();
+    focusCell(view, 'China');
+    moveFocus('ArrowUp'); // eslint-disable-next-line jest-dom/prefer-focus
+
+    expect(document.activeElement).toBe(getCell(view, 'Canada'));
+  });
+  test('should move focus to the previous cell in a row with ArrowDown', function () {
+    var view = staticDataTable();
+    focusCell(view, 'Asia');
+    moveFocus('ArrowDown');
+    expect(getCell(view, 'Europe')).toHaveFocus();
+  });
+});
+describe('Async DataTable', function () {
+  test('renders a spinner when loading', function () {
+    var testId = 'loadingTable';
+    var defaultProps = {
+      'aria-label': 'Custom table with loading content',
+      width: '100%',
+      height: 565,
+      density: 'spacious',
+      'data-testid': testId
+    };
+    (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], defaultProps, (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center"
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, {
+      loadingState: "loading"
+    }, [])));
+
+    var asyncTable = _react2.screen.getByTestId(testId);
+
+    expect(asyncTable).toBeInTheDocument();
+    expect(asyncTable).toBeVisible();
+    expect(asyncTable).toHaveAttribute('aria-label', 'Custom table with loading content');
+    expect(asyncTable).toHaveAttribute('data-testid', testId);
+    var tRows = (0, _react2.within)(asyncTable).getAllByRole('row');
+    expect(tRows).toHaveLength(2);
+    expect(tRows[1]).toHaveAttribute('aria-rowindex', '2');
+    var cell = (0, _react2.within)(tRows[1]).getByRole('rowheader');
+    expect(cell).toHaveAttribute('aria-colspan', '3');
+    var spinner = (0, _react2.within)(cell).getByRole('alert');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toBeVisible();
+    expect(spinner).toHaveAttribute('aria-label', 'loading');
+    expect(spinner).toHaveAttribute('aria-live', 'assertive');
+    expect(spinner).not.toHaveAttribute('aria-valuenow');
+  });
+  test('calls onLoadMore when scrolling near the bottom', function () {
+    var testId = 'onLoadMoreTable';
+    var defaultProps = {
+      'aria-label': 'Custom table with onLoadMore',
+      width: '100%',
+      height: 565,
+      density: 'spacious',
+      'data-testid': testId
+    };
+    var items = [];
+
+    for (var i = 1; i <= 100; i += 1) {
+      items.push({
+        id: i,
+        country: "Country ".concat(i),
+        population: "".concat(i),
+        continent: "Continent ".concat(i)
+      });
+    }
+
+    var onLoadMore = jest.fn();
+    (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], defaultProps, (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center"
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, {
+      items: items,
+      onLoadMore: onLoadMore
+    }, function (item) {
+      return (0, _react3.jsx)(_index.DataTableRow, null, function (columnKey) {
+        return (0, _react3.jsx)(_index.DataTableCell, null, item[columnKey]);
+      });
+    })));
+
+    var asyncTable = _react2.screen.getByTestId(testId);
+
+    expect(asyncTable).toBeInTheDocument();
+    expect(asyncTable).toBeVisible();
+    expect(asyncTable).toHaveAttribute('aria-label', 'Custom table with onLoadMore');
+
+    var body = _react2.screen.getAllByRole('rowgroup')[1];
+
+    var scrollView = body.parentNode.parentNode;
+    scrollView.scrollTop = 250;
+
+    _react2.fireEvent.scroll(scrollView);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    scrollView.scrollTop = 1500;
+
+    _react2.fireEvent.scroll(scrollView);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    scrollView.scrollTop = 2800;
+
+    _react2.fireEvent.scroll(scrollView);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(onLoadMore).toHaveBeenCalledTimes(2);
+  });
+  test('renders a spinner at the bottom when loading more', function () {
+    var testId = 'loadingMoreTable';
+    var defaultProps = {
+      'aria-label': 'Custom table with loadingMore',
+      width: '100%',
+      height: '100%',
+      density: 'spacious',
+      'data-testid': testId
+    };
+    (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], defaultProps, (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center"
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, {
+      items: rows,
+      loadingState: "loadingMore"
+    }, function (item) {
+      return (0, _react3.jsx)(_index.DataTableRow, null, function (columnKey) {
+        return (0, _react3.jsx)(_index.DataTableCell, null, item[columnKey]);
+      });
+    })));
+
+    var asyncTable = _react2.screen.getByTestId(testId);
+
+    expect(asyncTable).toBeInTheDocument();
+    expect(asyncTable).toBeVisible();
+    expect(asyncTable).toHaveAttribute('aria-label', 'Custom table with loadingMore');
+    expect(asyncTable).toHaveAttribute('data-testid', testId);
+    expect(asyncTable).toHaveAttribute('aria-rowcount', '5');
+    expect(asyncTable).toHaveAttribute('aria-colcount', '3');
+    var rowgroups = (0, _react2.within)(asyncTable).getAllByRole('rowgroup');
+    expect(rowgroups).toHaveLength(2);
+    var tRows = (0, _react2.within)(asyncTable).getAllByRole('row');
+    expect(tRows).toHaveLength(6);
+    expect(tRows[5]).toHaveAttribute('aria-rowindex', '6');
+    var cell = (0, _react2.within)(tRows[5]).getByRole('rowheader');
+    expect(cell).toHaveAttribute('aria-colspan', '3');
+    var spinner = (0, _react2.within)(cell).getByRole('alert');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toBeVisible();
+    expect(spinner).toHaveAttribute('aria-label', 'loadingMore');
+    expect(spinner).toHaveAttribute('aria-live', 'assertive');
+    expect(spinner).not.toHaveAttribute('aria-valuenow');
+  });
+});
+describe('Sortable DataTable', function () {
+  var testId = 'sortableTable';
+  var defaultProps = {
+    'aria-label': 'Custom table with sortable content',
+    width: '100%',
+    height: '100%',
+    density: 'spacious',
+    'data-testid': testId
+  };
+  test('sorting', function () {
+    (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], defaultProps, (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center",
+        allowsSorting: true
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, {
+      items: rows
+    }, function (item) {
+      return (0, _react3.jsx)(_index.DataTableRow, null, function (columnKey) {
+        return (0, _react3.jsx)(_index.DataTableCell, null, item[columnKey]);
+      });
+    })));
+
+    var sortableTable = _react2.screen.getByTestId(testId);
+
+    expect(sortableTable).toBeInTheDocument();
+    expect(sortableTable).toBeVisible();
+    expect(sortableTable).toHaveAttribute('aria-label', 'Custom table with sortable content');
+    expect(sortableTable).toHaveAttribute('data-testid', testId);
+    expect(sortableTable).toHaveAttribute('aria-rowcount', '5');
+    expect(sortableTable).toHaveAttribute('aria-colcount', '3');
+
+    var sortableGrid = _react2.screen.getByRole('grid');
+
+    var columnheaders = (0, _react2.within)(sortableGrid).getAllByRole('columnheader');
+    expect(columnheaders).toHaveLength(3);
+    expect(columnheaders[0]).toHaveAttribute('aria-sort', 'none');
+    expect(columnheaders[1]).toHaveAttribute('aria-sort', 'none');
+    expect(columnheaders[2]).toHaveAttribute('aria-sort', 'none');
+    expect(columnheaders[0]).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(columnheaders[0].getAttribute('aria-describedby'))).toHaveTextContent('sortable column');
+    expect(columnheaders[1]).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(columnheaders[1].getAttribute('aria-describedby'))).toHaveTextContent('sortable column');
+    expect(columnheaders[1]).toHaveAttribute('aria-describedby');
+    expect(document.getElementById(columnheaders[1].getAttribute('aria-describedby'))).toHaveTextContent('sortable column');
+  });
+});
+describe('Sortable with useAsyncList', function () {
+  var ITEMS = [{
+    id: 1,
+    name: '1'
+  }, {
+    id: 2,
+    name: '2'
+  }];
+  var ITEMS2 = [{
+    id: 2,
+    name: '1'
+  }, {
+    id: 1,
+    name: '2'
+  }];
+
+  function getItems() {
+    return new _promise["default"](function (resolve) {
+      (0, _setTimeout2["default"])(function () {
+        return resolve({
+          items: ITEMS
+        });
+      });
+    });
+  }
+
+  function getItems2() {
+    return new _promise["default"](function (resolve) {
+      (0, _setTimeout2["default"])(function () {
+        return resolve({
+          items: ITEMS2
+        });
+      });
+    });
+  }
+
+  test('should call load function', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var load, _renderHook, result;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            load = jest.fn().mockImplementation(getItems);
+            _renderHook = (0, _reactHooks.renderHook)(function () {
+              return (0, _data.useAsyncList)({
+                load: load
+              });
+            }), result = _renderHook.result;
+            expect(load).toHaveBeenCalledTimes(1);
+            expect(result.current.items).toEqual([]);
+            _context2.next = 6;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+              return _regenerator["default"].wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      jest.runAllTimers();
+
+                    case 1:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            })));
+
+          case 6:
+            expect(result.current.items).toEqual(ITEMS);
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('should call sort function', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var load, sort, _renderHook2, result, args;
+
+    return _regenerator["default"].wrap(function _callee6$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            load = jest.fn().mockImplementation(getItems);
+            sort = jest.fn().mockImplementation(getItems2);
+            _renderHook2 = (0, _reactHooks.renderHook)(function () {
+              return (0, _data.useAsyncList)({
+                load: load,
+                sort: sort,
+                initialSortDescriptor: {
+                  direction: 'ASC'
+                }
+              });
+            }), result = _renderHook2.result;
+            expect(load).toHaveBeenCalledTimes(1);
+            args = load.mock.calls[0][0];
+            expect(args.sortDescriptor).toEqual({
+              direction: 'ASC'
+            });
+            expect(result.current.items).toEqual([]);
+            _context7.next = 9;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+              return _regenerator["default"].wrap(function _callee3$(_context3) {
+                while (1) {
+                  switch (_context3.prev = _context3.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }
+              }, _callee3);
+            })));
+
+          case 9:
+            expect(result.current.items).toEqual(ITEMS);
+            _context7.next = 12;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+              var _context4;
+
+              return _regenerator["default"].wrap(function _callee4$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      (0, _sort2["default"])(_context4 = result.current).call(_context4, {
+                        column: 'name'
+                      });
+
+                    case 1:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee4);
+            })));
+
+          case 12:
+            expect(result.current.items).toEqual(ITEMS);
+            expect(sort).toHaveBeenCalledTimes(1);
+            args = sort.mock.calls[0][0];
+            expect(args.items).toStrictEqual(ITEMS);
+            _context7.next = 18;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+              return _regenerator["default"].wrap(function _callee5$(_context6) {
+                while (1) {
+                  switch (_context6.prev = _context6.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context6.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 18:
+            expect(result.current.items).toEqual(ITEMS2);
+
+          case 19:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee6);
+  })));
+});
+describe('Sortable DataTable with useAsyncList', function () {
+  var testId = 'sortableTable';
+  var defaultProps = {
+    'aria-label': 'Custom table with sortable content',
+    width: '100%',
+    height: '100%',
+    density: 'spacious',
+    'data-testid': testId
+  };
+
+  function load() {
+    return _load.apply(this, arguments);
+  }
+
+  function _load() {
+    _load = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
+      return _regenerator["default"].wrap(function _callee15$(_context18) {
+        while (1) {
+          switch (_context18.prev = _context18.next) {
+            case 0:
+              return _context18.abrupt("return", {
+                items: rows
+              });
+
+            case 1:
+            case "end":
+              return _context18.stop();
+          }
+        }
+      }, _callee15);
+    }));
+    return _load.apply(this, arguments);
+  }
+
+  function sort(_x) {
+    return _sort.apply(this, arguments);
+  }
+
+  function _sort() {
+    _sort = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16(list) {
+      var _context19;
+
+      return _regenerator["default"].wrap(function _callee16$(_context20) {
+        while (1) {
+          switch (_context20.prev = _context20.next) {
+            case 0:
+              // eslint-disable-next-line no-param-reassign
+              list.items = (0, _sort2["default"])(_context19 = list.items).call(_context19, function (a, b) {
+                var first = a[list.sortDescriptor.column];
+                var second = b[list.sortDescriptor.column];
+                var cmp = // eslint-disable-next-line radix
+                ((0, _parseInt2["default"])(first) || first) < ((0, _parseInt2["default"])(second) || second) ? -1 : 1;
+
+                if (list.sortDescriptor.direction === 'descending') {
+                  cmp *= -1;
+                }
+
+                return cmp;
+              });
+              return _context20.abrupt("return", list);
+
+            case 2:
+            case "end":
+              return _context20.stop();
+          }
+        }
+      }, _callee16);
+    }));
+    return _sort.apply(this, arguments);
+  }
+
+  var sortableDataTable = function sortableDataTable(_ref7) {
+    var result = _ref7.result;
+    return (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], defaultProps, (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center",
+        allowsSorting: true
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, {
+      items: result.current.items
+    }, function (item) {
+      return (0, _react3.jsx)(_index.DataTableRow, null, function (columnKey) {
+        return (0, _react3.jsx)(_index.DataTableCell, null, item[columnKey]);
+      });
+    })));
+  };
+
+  test('sort by country column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var _renderHook3, result, sortableTable, rowgroups, tRows;
+
+    return _regenerator["default"].wrap(function _callee10$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            _renderHook3 = (0, _reactHooks.renderHook)(function () {
+              return (0, _data.useAsyncList)({
+                load: load,
+                sort: sort,
+                initialSortDescriptor: {
+                  column: 'country',
+                  direction: 'ascending'
+                }
+              });
+            }), result = _renderHook3.result;
+            _context12.next = 3;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+              return _regenerator["default"].wrap(function _callee7$(_context8) {
+                while (1) {
+                  switch (_context8.prev = _context8.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context8.stop();
+                  }
+                }
+              }, _callee7);
+            })));
+
+          case 3:
+            _context12.next = 5;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+              var _context9;
+
+              return _regenerator["default"].wrap(function _callee8$(_context10) {
+                while (1) {
+                  switch (_context10.prev = _context10.next) {
+                    case 0:
+                      (0, _sort2["default"])(_context9 = result.current).call(_context9);
+
+                    case 1:
+                    case "end":
+                      return _context10.stop();
+                  }
+                }
+              }, _callee8);
+            })));
+
+          case 5:
+            _context12.next = 7;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+              return _regenerator["default"].wrap(function _callee9$(_context11) {
+                while (1) {
+                  switch (_context11.prev = _context11.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context11.stop();
+                  }
+                }
+              }, _callee9);
+            })));
+
+          case 7:
+            sortableDataTable({
+              result: result
+            });
+            sortableTable = _react2.screen.getByTestId(testId);
+            expect(sortableTable).toBeInTheDocument();
+            expect(sortableTable).toBeVisible();
+            expect(sortableTable).toHaveAttribute('aria-label', 'Custom table with sortable content');
+            expect(sortableTable).toHaveAttribute('data-testid', testId);
+            expect(sortableTable).toHaveAttribute('aria-rowcount', '5');
+            expect(sortableTable).toHaveAttribute('aria-colcount', '3');
+            rowgroups = (0, _react2.within)(sortableTable).getAllByRole('rowgroup');
+            tRows = (0, _react2.within)(rowgroups[1]).getAllByRole('row'); // verify country column is sorted a -> z
+
+            expect(tRows).toHaveLength(4);
+            expect(tRows[0]).toHaveAttribute('aria-rowindex', '2');
+            expect(tRows[0]).toHaveTextContent('Canada');
+            expect(tRows[1]).toHaveAttribute('aria-rowindex', '3');
+            expect(tRows[1]).toHaveTextContent('China');
+            expect(tRows[2]).toHaveAttribute('aria-rowindex', '4');
+            expect(tRows[2]).toHaveTextContent('France');
+            expect(tRows[3]).toHaveAttribute('aria-rowindex', '5');
+            expect(tRows[3]).toHaveTextContent('USA');
+
+          case 26:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  test('sort by country column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+    var _renderHook4, result, sortableTable, rowgroups, tRows;
+
+    return _regenerator["default"].wrap(function _callee14$(_context17) {
+      while (1) {
+        switch (_context17.prev = _context17.next) {
+          case 0:
+            _renderHook4 = (0, _reactHooks.renderHook)(function () {
+              return (0, _data.useAsyncList)({
+                load: load,
+                sort: sort,
+                initialSortDescriptor: {
+                  column: 'country',
+                  direction: 'descending'
+                }
+              });
+            }), result = _renderHook4.result;
+            _context17.next = 3;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+              return _regenerator["default"].wrap(function _callee11$(_context13) {
+                while (1) {
+                  switch (_context13.prev = _context13.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context13.stop();
+                  }
+                }
+              }, _callee11);
+            })));
+
+          case 3:
+            _context17.next = 5;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+              var _context14;
+
+              return _regenerator["default"].wrap(function _callee12$(_context15) {
+                while (1) {
+                  switch (_context15.prev = _context15.next) {
+                    case 0:
+                      (0, _sort2["default"])(_context14 = result.current).call(_context14);
+
+                    case 1:
+                    case "end":
+                      return _context15.stop();
+                  }
+                }
+              }, _callee12);
+            })));
+
+          case 5:
+            _context17.next = 7;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+              return _regenerator["default"].wrap(function _callee13$(_context16) {
+                while (1) {
+                  switch (_context16.prev = _context16.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context16.stop();
+                  }
+                }
+              }, _callee13);
+            })));
+
+          case 7:
+            sortableDataTable({
+              result: result
+            });
+            sortableTable = _react2.screen.getByTestId(testId);
+            expect(sortableTable).toBeInTheDocument();
+            expect(sortableTable).toBeVisible();
+            expect(sortableTable).toHaveAttribute('aria-label', 'Custom table with sortable content');
+            expect(sortableTable).toHaveAttribute('data-testid', testId);
+            expect(sortableTable).toHaveAttribute('aria-rowcount', '5');
+            expect(sortableTable).toHaveAttribute('aria-colcount', '3');
+            rowgroups = (0, _react2.within)(sortableTable).getAllByRole('rowgroup');
+            tRows = (0, _react2.within)(rowgroups[1]).getAllByRole('row'); // verify country column is sorted z -> a
+
+            expect(tRows).toHaveLength(4);
+            expect(tRows[0]).toHaveAttribute('aria-rowindex', '2');
+            expect(tRows[0]).toHaveTextContent('USA');
+            expect(tRows[1]).toHaveAttribute('aria-rowindex', '3');
+            expect(tRows[1]).toHaveTextContent('France');
+            expect(tRows[2]).toHaveAttribute('aria-rowindex', '4');
+            expect(tRows[2]).toHaveTextContent('China');
+            expect(tRows[3]).toHaveAttribute('aria-rowindex', '5');
+            expect(tRows[3]).toHaveTextContent('Canada');
+
+          case 26:
+          case "end":
+            return _context17.stop();
+        }
+      }
+    }, _callee14);
+  })));
+});
+describe('Sortable DataTable with useAsyncList', function () {
+  var testId = 'sortableTable';
+  var defaultProps = {
+    'aria-label': 'Custom table with sortable content',
+    width: '100%',
+    height: '100%',
+    density: 'spacious',
+    'data-testid': testId
+  };
+
+  var sortableDataTable = function sortableDataTable(_ref16) {
+    var result = _ref16.result;
+    return (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], (0, _extends2["default"])({}, defaultProps, {
+      sortDescriptor: result.current.sortDescriptor,
+      onSortChange: (0, _sort2["default"])(result.current)
+    }), (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center",
+        allowsSorting: true
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, {
+      items: result.current.items
+    }, function (item) {
+      return (0, _react3.jsx)(_index.DataTableRow, null, function (columnKey) {
+        return (0, _react3.jsx)(_index.DataTableCell, null, item[columnKey]);
+      });
+    })));
+  };
+
+  test('click on column header should sort column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee24() {
+    var _renderHook5, result, sortableTable, headers;
+
+    return _regenerator["default"].wrap(function _callee24$(_context28) {
+      while (1) {
+        switch (_context28.prev = _context28.next) {
+          case 0:
+            _renderHook5 = (0, _reactHooks.renderHook)(function () {
+              return (0, _data.useAsyncList)({
+                load: function load() {
+                  return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17() {
+                    return _regenerator["default"].wrap(function _callee17$(_context21) {
+                      while (1) {
+                        switch (_context21.prev = _context21.next) {
+                          case 0:
+                            return _context21.abrupt("return", {
+                              items: rows
+                            });
+
+                          case 1:
+                          case "end":
+                            return _context21.stop();
+                        }
+                      }
+                    }, _callee17);
+                  }))();
+                },
+                sort: function sort(_ref18) {
+                  return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
+                    var items, sortDescriptor;
+                    return _regenerator["default"].wrap(function _callee18$(_context22) {
+                      while (1) {
+                        switch (_context22.prev = _context22.next) {
+                          case 0:
+                            items = _ref18.items, sortDescriptor = _ref18.sortDescriptor;
+                            return _context22.abrupt("return", {
+                              items: (0, _sort2["default"])(items).call(items, function (a, b) {
+                                var first = a[sortDescriptor.column];
+                                var second = b[sortDescriptor.column]; // eslint-disable-next-line radix
+
+                                // eslint-disable-next-line radix
+                                var cmp = ((0, _parseInt2["default"])(first) || first) < ((0, _parseInt2["default"])(second) || second) ? -1 : 1;
+
+                                if (sortDescriptor.direction === 'descending') {
+                                  cmp *= -1;
+                                }
+
+                                return cmp;
+                              })
+                            });
+
+                          case 2:
+                          case "end":
+                            return _context22.stop();
+                        }
+                      }
+                    }, _callee18);
+                  }))();
+                },
+                initialSortDescriptor: {
+                  column: 'country',
+                  direction: 'descending'
+                }
+              });
+            }), result = _renderHook5.result;
+            _context28.next = 3;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
+              return _regenerator["default"].wrap(function _callee19$(_context23) {
+                while (1) {
+                  switch (_context23.prev = _context23.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context23.stop();
+                  }
+                }
+              }, _callee19);
+            })));
+
+          case 3:
+            sortableDataTable({
+              result: result
+            });
+            _context28.next = 6;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee20() {
+              return _regenerator["default"].wrap(function _callee20$(_context24) {
+                while (1) {
+                  switch (_context24.prev = _context24.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context24.stop();
+                  }
+                }
+              }, _callee20);
+            })));
+
+          case 6:
+            sortableTable = _react2.screen.getByTestId(testId);
+            expect(sortableTable).toBeInTheDocument();
+            expect(sortableTable).toBeVisible();
+            headers = (0, _react2.within)(sortableTable).getAllByRole('columnheader');
+            expect(headers).toHaveLength(3);
+            expect(headers[0]).toHaveAttribute('aria-colindex', '1');
+            expect(headers[1]).toHaveAttribute('aria-colindex', '2');
+            expect(headers[2]).toHaveAttribute('aria-colindex', '3');
+            expect(headers[0]).toHaveTextContent(columns[0].name);
+            expect(headers[1]).toHaveTextContent(columns[1].name);
+            expect(headers[2]).toHaveTextContent(columns[2].name);
+            expect(result.current.items[0].country).toBe('USA');
+            expect(result.current.items[1].country).toBe('Canada');
+            expect(result.current.items[2].country).toBe('China');
+            expect(result.current.items[3].country).toBe('France');
+            expect(result.current.items[0].population).toBe(320000000);
+            expect(result.current.items[1].population).toBe(37000000);
+            expect(result.current.items[2].population).toBe(1398000000);
+            expect(result.current.items[3].population).toBe(67000000);
+            expect(result.current.items[0].continent).toBe('North America');
+            expect(result.current.items[1].continent).toBe('North America');
+            expect(result.current.items[2].continent).toBe('Asia');
+            expect(result.current.items[3].continent).toBe('Europe');
+            _context28.next = 31;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee21() {
+              return _regenerator["default"].wrap(function _callee21$(_context25) {
+                while (1) {
+                  switch (_context25.prev = _context25.next) {
+                    case 0:
+                      _react2.fireEvent.click(headers[0]);
+
+                    case 1:
+                    case "end":
+                      return _context25.stop();
+                  }
+                }
+              }, _callee21);
+            })));
+
+          case 31:
+            expect(result.current.items[0].country).toBe('Canada');
+            expect(result.current.items[1].country).toBe('China');
+            expect(result.current.items[2].country).toBe('France');
+            expect(result.current.items[3].country).toBe('USA');
+            _context28.next = 37;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee22() {
+              return _regenerator["default"].wrap(function _callee22$(_context26) {
+                while (1) {
+                  switch (_context26.prev = _context26.next) {
+                    case 0:
+                      _react2.fireEvent.click(headers[1]);
+
+                    case 1:
+                    case "end":
+                      return _context26.stop();
+                  }
+                }
+              }, _callee22);
+            })));
+
+          case 37:
+            expect(result.current.items[0].population).toBe(37000000);
+            expect(result.current.items[1].population).toBe(67000000);
+            expect(result.current.items[2].population).toBe(320000000);
+            expect(result.current.items[3].population).toBe(1398000000);
+            _context28.next = 43;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee23() {
+              return _regenerator["default"].wrap(function _callee23$(_context27) {
+                while (1) {
+                  switch (_context27.prev = _context27.next) {
+                    case 0:
+                      _react2.fireEvent.click(headers[2]);
+
+                    case 1:
+                    case "end":
+                      return _context27.stop();
+                  }
+                }
+              }, _callee23);
+            })));
+
+          case 43:
+            expect(result.current.items[0].continent).toBe('Asia');
+            expect(result.current.items[1].continent).toBe('Europe');
+            expect(result.current.items[2].continent).toBe('North America');
+            expect(result.current.items[3].continent).toBe('North America');
+
+          case 47:
+          case "end":
+            return _context28.stop();
+        }
+      }
+    }, _callee24);
+  })));
+  test('click on column header should sort column Z => A', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee30() {
+    var _renderHook6, result, sortableTable, headers;
+
+    return _regenerator["default"].wrap(function _callee30$(_context34) {
+      while (1) {
+        switch (_context34.prev = _context34.next) {
+          case 0:
+            _renderHook6 = (0, _reactHooks.renderHook)(function () {
+              return (0, _data.useAsyncList)({
+                load: function load() {
+                  return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee25() {
+                    return _regenerator["default"].wrap(function _callee25$(_context29) {
+                      while (1) {
+                        switch (_context29.prev = _context29.next) {
+                          case 0:
+                            return _context29.abrupt("return", {
+                              items: rows
+                            });
+
+                          case 1:
+                          case "end":
+                            return _context29.stop();
+                        }
+                      }
+                    }, _callee25);
+                  }))();
+                },
+                sort: function sort(_ref25) {
+                  return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee26() {
+                    var items, sortDescriptor;
+                    return _regenerator["default"].wrap(function _callee26$(_context30) {
+                      while (1) {
+                        switch (_context30.prev = _context30.next) {
+                          case 0:
+                            items = _ref25.items, sortDescriptor = _ref25.sortDescriptor;
+                            return _context30.abrupt("return", {
+                              items: (0, _sort2["default"])(items).call(items, function (a, b) {
+                                var first = a[sortDescriptor.column];
+                                var second = b[sortDescriptor.column]; // eslint-disable-next-line radix
+
+                                // eslint-disable-next-line radix
+                                var cmp = ((0, _parseInt2["default"])(first) || first) < ((0, _parseInt2["default"])(second) || second) ? -1 : 1;
+
+                                if (sortDescriptor.direction === 'descending') {
+                                  cmp *= -1;
+                                }
+
+                                return cmp;
+                              })
+                            });
+
+                          case 2:
+                          case "end":
+                            return _context30.stop();
+                        }
+                      }
+                    }, _callee26);
+                  }))();
+                },
+                initialSortDescriptor: {
+                  column: 'country',
+                  direction: 'ascending'
+                }
+              });
+            }), result = _renderHook6.result;
+            _context34.next = 3;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee27() {
+              return _regenerator["default"].wrap(function _callee27$(_context31) {
+                while (1) {
+                  switch (_context31.prev = _context31.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context31.stop();
+                  }
+                }
+              }, _callee27);
+            })));
+
+          case 3:
+            sortableDataTable({
+              result: result
+            });
+            _context34.next = 6;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee28() {
+              return _regenerator["default"].wrap(function _callee28$(_context32) {
+                while (1) {
+                  switch (_context32.prev = _context32.next) {
+                    case 0:
+                      jest.runOnlyPendingTimers();
+
+                    case 1:
+                    case "end":
+                      return _context32.stop();
+                  }
+                }
+              }, _callee28);
+            })));
+
+          case 6:
+            sortableTable = _react2.screen.getByTestId(testId);
+            expect(sortableTable).toBeInTheDocument();
+            expect(sortableTable).toBeVisible();
+            headers = (0, _react2.within)(sortableTable).getAllByRole('columnheader');
+            expect(headers).toHaveLength(3);
+            expect(headers[0]).toHaveAttribute('aria-colindex', '1');
+            expect(headers[1]).toHaveAttribute('aria-colindex', '2');
+            expect(headers[2]).toHaveAttribute('aria-colindex', '3');
+            expect(headers[0]).toHaveTextContent(columns[0].name);
+            expect(headers[1]).toHaveTextContent(columns[1].name);
+            expect(headers[2]).toHaveTextContent(columns[2].name);
+            expect(result.current.items[0].country).toBe('USA');
+            expect(result.current.items[1].country).toBe('Canada');
+            expect(result.current.items[2].country).toBe('China');
+            expect(result.current.items[3].country).toBe('France');
+            expect(result.current.items[0].population).toBe(320000000);
+            expect(result.current.items[1].population).toBe(37000000);
+            expect(result.current.items[2].population).toBe(1398000000);
+            expect(result.current.items[3].population).toBe(67000000);
+            expect(result.current.items[0].continent).toBe('North America');
+            expect(result.current.items[1].continent).toBe('North America');
+            expect(result.current.items[2].continent).toBe('Asia');
+            expect(result.current.items[3].continent).toBe('Europe');
+            _context34.next = 31;
+            return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee29() {
+              return _regenerator["default"].wrap(function _callee29$(_context33) {
+                while (1) {
+                  switch (_context33.prev = _context33.next) {
+                    case 0:
+                      _react2.fireEvent.click(headers[0]);
+
+                    case 1:
+                    case "end":
+                      return _context33.stop();
+                  }
+                }
+              }, _callee29);
+            })));
+
+          case 31:
+            expect(result.current.items[0].country).toBe('USA');
+            expect(result.current.items[1].country).toBe('France');
+            expect(result.current.items[2].country).toBe('China');
+            expect(result.current.items[3].country).toBe('Canada');
+
+          case 35:
+          case "end":
+            return _context34.stop();
+        }
+      }
+    }, _callee30);
+  })));
+});