@wix/design-system/dist/esm/NestableList/test/NestableList.spec.js

@wix/design-system

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/NestableList/test/NestableList.spec.jsx",
  _this = this;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import { createRendererWithUniDriver, cleanup } from '../../utils/test-utils/unit';
import userEvent from '@testing-library/user-event';
import NestableList from '../NestableList';
import { nestableListDriverFactory } from '../NestableList.uni.driver';

// Mock window.scrollBy which is not implemented in jsdom
beforeAll(function () {
  window.scrollBy = vi.fn();
  Object.defineProperty(window, 'innerHeight', {
    writable: true,
    configurable: true,
    value: 768
  });
});
var renderNestableList = function renderNestableList() {
  return /*#__PURE__*/React.createElement(NestableList, {
    dataHook: "styled-nestable-list",
    items: [{
      id: '0',
      dataHook: 'firstItem',
      options: [{
        value: 'Node 0'
      }],
      draggable: true,
      children: [{
        id: '1',
        options: [{
          value: 'Node 0 child'
        }],
        draggable: true,
        dataHook: 'firstItemChild'
      }]
    }, {
      id: '2',
      dataHook: 'secondItem',
      options: [{
        value: 'Node 1'
      }],
      draggable: true,
      children: [{
        id: '3',
        options: [{
          value: 'Node 1 child'
        }],
        draggable: true,
        dataHook: 'secondItemChild'
      }]
    }],
    onChange: function onChange() {},
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 23,
      columnNumber: 5
    }
  });
};
describe('NestableList', function () {
  var render = createRendererWithUniDriver(nestableListDriverFactory);
  afterEach(cleanup);
  it('should reorder', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var _render, driver;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          _render = render(renderNestableList()), driver = _render.driver;
          _context.next = 3;
          return driver.reorder({
            dataHookFrom: 'firstItem',
            dataHookTo: 'secondItem'
          });
        case 3:
          _context.t0 = expect;
          _context.next = 6;
          return driver.getItemPosition({
            dataHook: 'firstItem'
          });
        case 6:
          _context.t1 = _context.sent;
          (0, _context.t0)(_context.t1).toEqual(2);
        case 8:
        case "end":
          return _context.stop();
      }
    }, _callee);
  })));
  it('should change item depth', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
    var _render2, driver;
    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) switch (_context2.prev = _context2.next) {
        case 0:
          _render2 = render(renderNestableList()), driver = _render2.driver;
          _context2.next = 3;
          return driver.changeItemDepth({
            dataHook: 'secondItem',
            depthLevel: 2
          });
        case 3:
          _context2.t0 = expect;
          _context2.next = 6;
          return driver.getItemDepth({
            dataHook: 'secondItem'
          });
        case 6:
          _context2.t1 = _context2.sent;
          (0, _context2.t0)(_context2.t1).toEqual(2);
        case 8:
        case "end":
          return _context2.stop();
      }
    }, _callee2);
  })));
  function renderNestableListWithActions() {
    var rootActionHandler = vi.fn(function (e) {
      return e.persist();
    });
    var childActionHandler1 = vi.fn(function (e) {
      return e.persist();
    });
    var childActionHandler2 = vi.fn(function (e) {
      return e.persist();
    });
    var itemWithAction = {
      id: '1',
      options: [{
        value: 'Node 0 child'
      }],
      actionsDataHook: 'item-with-actions',
      actions: [{
        label: 'Child Action 1',
        onClick: childActionHandler1
      }, {
        label: 'Child Action 2',
        onClick: childActionHandler2
      }],
      draggable: true
    };
    var _render3 = render(/*#__PURE__*/React.createElement(NestableList, {
        dataHook: "styled-nestable-list",
        actions: [{
          label: 'Root Action 1',
          onClick: rootActionHandler
        }],
        items: [{
          id: '0',
          options: [{
            value: 'Node 0'
          }],
          draggable: true,
          actionsDataHook: 'without-actions',
          children: [itemWithAction]
        }, {
          id: '2',
          options: [{
            value: 'Node 1'
          }],
          draggable: true,
          children: [{
            id: '3',
            options: [{
              value: 'Node 1 child'
            }],
            draggable: true
          }]
        }],
        onChange: function onChange() {},
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 109,
          columnNumber: 7
        }
      })),
      driver = _render3.driver;
    return {
      driver: driver,
      rootActionHandler: rootActionHandler,
      childActionHandler1: childActionHandler1,
      childActionHandler2: childActionHandler2,
      itemWithAction: itemWithAction
    };
  }
  it('should render actions', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
    var _renderNestableListWi, driver;
    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) switch (_context3.prev = _context3.next) {
        case 0:
          _renderNestableListWi = renderNestableListWithActions(), driver = _renderNestableListWi.driver;
          _context3.t0 = expect;
          _context3.next = 4;
          return driver.getActionsCount();
        case 4:
          _context3.t1 = _context3.sent;
          (0, _context3.t0)(_context3.t1).toBe(1);
          _context3.t2 = expect;
          _context3.next = 9;
          return driver.getActionsCount('item-with-actions');
        case 9:
          _context3.t3 = _context3.sent;
          (0, _context3.t2)(_context3.t3).toBe(2);
          _context3.t4 = expect;
          _context3.next = 14;
          return driver.getActionsCount('without-actions');
        case 14:
          _context3.t5 = _context3.sent;
          (0, _context3.t4)(_context3.t5).toBe(0);
        case 16:
        case "end":
          return _context3.stop();
      }
    }, _callee3);
  })));
  it('should action onClick be fired with correct data', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
    var _renderNestableListWi2, driver, rootActionHandler, childActionHandler1, childActionHandler2, itemWithAction;
    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
      while (1) switch (_context4.prev = _context4.next) {
        case 0:
          _renderNestableListWi2 = renderNestableListWithActions(), driver = _renderNestableListWi2.driver, rootActionHandler = _renderNestableListWi2.rootActionHandler, childActionHandler1 = _renderNestableListWi2.childActionHandler1, childActionHandler2 = _renderNestableListWi2.childActionHandler2, itemWithAction = _renderNestableListWi2.itemWithAction;
          _context4.next = 3;
          return driver.clickActionAt({
            actionIndex: 0
          });
        case 3:
          expect(rootActionHandler).toHaveBeenCalled();
          expect(rootActionHandler.mock.calls[0][0].type).toBe('click');
          expect(rootActionHandler.mock.calls[0][1]).toBe(undefined);
          _context4.next = 8;
          return driver.clickActionAt({
            actionIndex: 0,
            parentDataHook: 'item-with-actions'
          });
        case 8:
          expect(childActionHandler1).toHaveBeenCalledTimes(1);
          expect(childActionHandler1.mock.calls[0][0].type).toBe('click');
          expect(childActionHandler1.mock.calls[0][1]).toBe(itemWithAction);
          _context4.next = 13;
          return driver.clickActionAt({
            actionIndex: 1,
            parentDataHook: 'item-with-actions'
          });
        case 13:
          expect(childActionHandler2).toHaveBeenCalledTimes(1);
          expect(childActionHandler2.mock.calls[0][0].type).toBe('click');
          expect(childActionHandler2.mock.calls[0][1]).toBe(itemWithAction);
        case 16:
        case "end":
          return _context4.stop();
      }
    }, _callee4);
  })));
  it('should render correct actions labels', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
    var _renderNestableListWi3, driver;
    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
      while (1) switch (_context5.prev = _context5.next) {
        case 0:
          _renderNestableListWi3 = renderNestableListWithActions(), driver = _renderNestableListWi3.driver;
          _context5.t0 = expect;
          _context5.next = 4;
          return driver.getActionLabelAt({
            actionIndex: 0
          });
        case 4:
          _context5.t1 = _context5.sent;
          (0, _context5.t0)(_context5.t1).toBe('Root Action 1');
          _context5.t2 = expect;
          _context5.next = 9;
          return driver.getActionLabelAt({
            actionIndex: 0,
            parentDataHook: 'item-with-actions'
          });
        case 9:
          _context5.t3 = _context5.sent;
          (0, _context5.t2)(_context5.t3).toBe('Child Action 1');
        case 11:
        case "end":
          return _context5.stop();
      }
    }, _callee5);
  })));
  it('should call onDragStart when drag starts', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
    var onDragStart, _render4, driver;
    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
      while (1) switch (_context6.prev = _context6.next) {
        case 0:
          onDragStart = vi.fn();
          _render4 = render(/*#__PURE__*/React.createElement(NestableList, {
            dataHook: "styled-nestable-list",
            items: [{
              id: '0',
              dataHook: 'firstItem',
              options: [{
                value: 'Node 0'
              }],
              draggable: true
            }, {
              id: '2',
              dataHook: 'secondItem',
              options: [{
                value: 'Node 1'
              }],
              draggable: true
            }],
            onChange: function onChange() {},
            onDragStart: onDragStart,
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 208,
              columnNumber: 7
            }
          })), driver = _render4.driver;
          _context6.next = 4;
          return driver.reorder({
            dataHookFrom: 'firstItem',
            dataHookTo: 'secondItem'
          });
        case 4:
          expect(onDragStart).toHaveBeenCalledTimes(1);
        case 5:
        case "end":
          return _context6.stop();
      }
    }, _callee6);
  })));
  it('should call onDragEnd when drag ends', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
    var onDragEnd, _render5, driver;
    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
      while (1) switch (_context7.prev = _context7.next) {
        case 0:
          onDragEnd = vi.fn();
          _render5 = render(/*#__PURE__*/React.createElement(NestableList, {
            dataHook: "styled-nestable-list",
            items: [{
              id: '0',
              dataHook: 'firstItem',
              options: [{
                value: 'Node 0'
              }],
              draggable: true
            }, {
              id: '2',
              dataHook: 'secondItem',
              options: [{
                value: 'Node 1'
              }],
              draggable: true
            }],
            onChange: function onChange() {},
            onDragEnd: onDragEnd,
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 240,
              columnNumber: 7
            }
          })), driver = _render5.driver;
          _context7.next = 4;
          return driver.reorder({
            dataHookFrom: 'firstItem',
            dataHookTo: 'secondItem'
          });
        case 4:
          expect(onDragEnd).toHaveBeenCalledTimes(1);
        case 5:
        case "end":
          return _context7.stop();
      }
    }, _callee7);
  })));
  it('should call onDragStart before onDragEnd during reorder', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
    var callOrder, onDragStart, onDragEnd, _render6, driver;
    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
      while (1) switch (_context8.prev = _context8.next) {
        case 0:
          callOrder = [];
          onDragStart = vi.fn(function () {
            return callOrder.push('start');
          });
          onDragEnd = vi.fn(function () {
            return callOrder.push('end');
          });
          _render6 = render(/*#__PURE__*/React.createElement(NestableList, {
            dataHook: "styled-nestable-list",
            items: [{
              id: '0',
              dataHook: 'firstItem',
              options: [{
                value: 'Node 0'
              }],
              draggable: true
            }, {
              id: '2',
              dataHook: 'secondItem',
              options: [{
                value: 'Node 1'
              }],
              draggable: true
            }],
            onChange: function onChange() {},
            onDragStart: onDragStart,
            onDragEnd: onDragEnd,
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 275,
              columnNumber: 7
            }
          })), driver = _render6.driver;
          _context8.next = 6;
          return driver.reorder({
            dataHookFrom: 'firstItem',
            dataHookTo: 'secondItem'
          });
        case 6:
          expect(onDragStart).toHaveBeenCalledTimes(1);
          expect(onDragEnd).toHaveBeenCalledTimes(1);
          expect(callOrder).toEqual(['start', 'end']);
        case 9:
        case "end":
          return _context8.stop();
      }
    }, _callee8);
  })));
  it('should work when onDragStart and onDragEnd are not provided', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
    var _render7, driver;
    return _regeneratorRuntime.wrap(function _callee9$(_context9) {
      while (1) switch (_context9.prev = _context9.next) {
        case 0:
          _render7 = render(/*#__PURE__*/React.createElement(NestableList, {
            dataHook: "styled-nestable-list",
            items: [{
              id: '0',
              dataHook: 'firstItem',
              options: [{
                value: 'Node 0'
              }],
              draggable: true
            }, {
              id: '2',
              dataHook: 'secondItem',
              options: [{
                value: 'Node 1'
              }],
              draggable: true
            }],
            onChange: function onChange() {},
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 309,
              columnNumber: 7
            }
          })), driver = _render7.driver;
          _context9.next = 3;
          return expect(driver.reorder({
            dataHookFrom: 'firstItem',
            dataHookTo: 'secondItem'
          })).resolves.not.toThrow();
        case 3:
        case "end":
          return _context9.stop();
      }
    }, _callee9);
  })));
  it('should call item onFocus when item gains focus', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0() {
    var user, onFocusMock;
    return _regeneratorRuntime.wrap(function _callee0$(_context0) {
      while (1) switch (_context0.prev = _context0.next) {
        case 0:
          user = userEvent.setup();
          onFocusMock = vi.fn();
          render(/*#__PURE__*/React.createElement(NestableList, {
            dataHook: "styled-nestable-list",
            items: [{
              id: '0',
              dataHook: 'firstItem',
              options: [{
                value: 'Node 0'
              }],
              draggable: true,
              onFocus: onFocusMock
            }],
            onChange: function onChange() {},
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 341,
              columnNumber: 7
            }
          }));
          _context0.next = 5;
          return user.tab();
        case 5:
          expect(onFocusMock).toHaveBeenCalled();
        case 6:
        case "end":
          return _context0.stop();
      }
    }, _callee0);
  })));
  it('should call item onBlur when item loses focus', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee1() {
    var user, onBlurMock;
    return _regeneratorRuntime.wrap(function _callee1$(_context1) {
      while (1) switch (_context1.prev = _context1.next) {
        case 0:
          user = userEvent.setup();
          onBlurMock = vi.fn();
          render(/*#__PURE__*/React.createElement(NestableList, {
            dataHook: "styled-nestable-list",
            items: [{
              id: '0',
              dataHook: 'firstItem',
              options: [{
                value: 'Node 0'
              }],
              draggable: true,
              onBlur: onBlurMock
            }, {
              id: '1',
              dataHook: 'secondItem',
              options: [{
                value: 'Node 1'
              }],
              draggable: true
            }],
            onChange: function onChange() {},
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 365,
              columnNumber: 7
            }
          }));
          _context1.next = 5;
          return user.tab();
        case 5:
          _context1.next = 7;
          return user.tab();
        case 7:
          // focus second item, blur first

          expect(onBlurMock).toHaveBeenCalled();
        case 8:
        case "end":
          return _context1.stop();
      }
    }, _callee1);
  })));
});