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

@wix/design-system

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/SidebarNext/test/SidebarNextWrapper.spec.jsx",
  _this = this;
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import SidebarNext from '../SidebarNext';
import { sidebarNextPrivateDriverFactory } from './SidebarNext.private.uni.driver';
import { createRendererWithUniDriver } from '../../utils/test-utils/unit';
import SidebarItemNext from '../../SidebarItemNext/SidebarItemNext';
import SidebarSubMenuNext from '../../SidebarSubMenuNext/SidebarSubMenuNext';
import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
import { sidebarSubMenuNextDriverFactory } from '../../SidebarSubMenuNext/SidebarSubMenuNext.uni.driver';
describe('Sidebar Wrapper', function () {
  var render = createRendererWithUniDriver(sidebarNextPrivateDriverFactory);
  var sidebarSubMenuNextTestkitFactory = uniTestkitFactoryCreator(sidebarSubMenuNextDriverFactory);
  var sidebarWithSelectedKey = function sidebarWithSelectedKey(selectedKey) {
    return /*#__PURE__*/React.createElement(SidebarNext, {
      selectedKey: selectedKey,
      isLoading: false,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 18,
        columnNumber: 5
      }
    }, /*#__PURE__*/React.createElement(SidebarSubMenuNext, {
      key: "first-sub-menu",
      dataHook: "first-sub-menu",
      itemKey: "first-sub-menu",
      onClick: function onClick() {},
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 19,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement(SidebarItemNext, {
      itemKey: "first-item",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 25,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement("div", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 26,
        columnNumber: 11
      }
    }, "First")), /*#__PURE__*/React.createElement(SidebarItemNext, {
      dataHook: "first-item-sibling",
      itemKey: "first-item-sibling",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 28,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement("div", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 32,
        columnNumber: 11
      }
    }, "Sibling"))), /*#__PURE__*/React.createElement(SidebarSubMenuNext, {
      key: "second-sub-menu",
      dataHook: "second-sub-menu",
      itemKey: "second-sub-menu",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 35,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement(SidebarItemNext, {
      itemKey: "second-item",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 40,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement("div", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 41,
        columnNumber: 11
      }
    }, "Second"))), /*#__PURE__*/React.createElement(SidebarSubMenuNext, {
      key: "third-sub-menu",
      dataHook: "third-sub-menu",
      itemKey: "third-sub-menu",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 44,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement(SidebarItemNext, {
      itemKey: "third-item",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement("div", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 50,
        columnNumber: 11
      }
    }, "Third"))), /*#__PURE__*/React.createElement(SidebarItemNext, {
      itemKey: "non-sub-menu-item",
      dataHook: "non-sub-menu-item",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 53,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement("div", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 54,
        columnNumber: 9
      }
    }, "No SubMenu item")));
  };
  var renderWithSelectedKey = function renderWithSelectedKey(selectedKey) {
    return render(sidebarWithSelectedKey(selectedKey));
  };

  // TODO: rework delay implementation
  it.skip('shouldNextMenuOpenWithDelay should be false if there is no open menu', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var _renderWithSelectedKe, driver;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          _renderWithSelectedKe = renderWithSelectedKey('non-sub-menu-item'), driver = _renderWithSelectedKe.driver;
          _context.t0 = expect;
          _context.next = 4;
          return driver.shouldNextMenuOpenWithDelay();
        case 4:
          _context.t1 = _context.sent;
          (0, _context.t0)(_context.t1).toBe('false');
        case 6:
        case "end":
          return _context.stop();
      }
    }, _callee);
  })));
  it.skip('shouldNextMenuOpenWithDelay should return true if there is an open menu before selecting new menu', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
    var _renderWithSelectedKe2, driver, rerender;
    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) switch (_context2.prev = _context2.next) {
        case 0:
          _renderWithSelectedKe2 = renderWithSelectedKey('first-sub-menu'), driver = _renderWithSelectedKe2.driver, rerender = _renderWithSelectedKe2.rerender;
          rerender(sidebarWithSelectedKey('second-sub-menu'));
          _context2.t0 = expect;
          _context2.next = 5;
          return driver.shouldNextMenuOpenWithDelay();
        case 5:
          _context2.t1 = _context2.sent;
          (0, _context2.t0)(_context2.t1).toBe('true');
        case 7:
        case "end":
          return _context2.stop();
      }
    }, _callee2);
  })));
  it.skip('shouldNextMenuOpenWithDelay should return false if there is an item (non sub menu) selected before selecting new menu', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
    var _renderWithSelectedKe3, driver, rerender;
    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) switch (_context3.prev = _context3.next) {
        case 0:
          _renderWithSelectedKe3 = renderWithSelectedKey('non-sub-menu-item'), driver = _renderWithSelectedKe3.driver, rerender = _renderWithSelectedKe3.rerender;
          rerender(sidebarWithSelectedKey('second-sub-menu'));
          _context3.t0 = expect;
          _context3.next = 5;
          return driver.shouldNextMenuOpenWithDelay();
        case 5:
          _context3.t1 = _context3.sent;
          (0, _context3.t0)(_context3.t1).toBe('false');
        case 7:
        case "end":
          return _context3.stop();
      }
    }, _callee3);
  })));
  it.skip('shouldNextMenuOpenWithDelay should return true if there is an subMenu-item selected before selecting new menu', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
    var _renderWithSelectedKe4, driver, rerender;
    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
      while (1) switch (_context4.prev = _context4.next) {
        case 0:
          _renderWithSelectedKe4 = renderWithSelectedKey('first-item'), driver = _renderWithSelectedKe4.driver, rerender = _renderWithSelectedKe4.rerender;
          rerender(sidebarWithSelectedKey('second-sub-menu'));
          _context4.t0 = expect;
          _context4.next = 5;
          return driver.shouldNextMenuOpenWithDelay();
        case 5:
          _context4.t1 = _context4.sent;
          (0, _context4.t0)(_context4.t1).toBe('true');
        case 7:
        case "end":
          return _context4.stop();
      }
    }, _callee4);
  })));
  it.skip('shouldNextMenuOpenWithDelay should return false if there is an menu/subMenu-item selected before selecting new item', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
    var _renderWithSelectedKe5, driver, rerender;
    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
      while (1) switch (_context5.prev = _context5.next) {
        case 0:
          _renderWithSelectedKe5 = renderWithSelectedKey('first-item'), driver = _renderWithSelectedKe5.driver, rerender = _renderWithSelectedKe5.rerender;
          rerender(sidebarWithSelectedKey('non-sub-menu-item'));
          _context5.t0 = expect;
          _context5.next = 5;
          return driver.shouldNextMenuOpenWithDelay();
        case 5:
          _context5.t1 = _context5.sent;
          (0, _context5.t0)(_context5.t1).toBe('false');
        case 7:
        case "end":
          return _context5.stop();
      }
    }, _callee5);
  })));
  it.skip('shouldNextMenuOpenWithDelay should return false if there is a selected menu that is collapsed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
    var selectedKey, _renderWithSelectedKe6, driver, container, firstSubMenuTestKit;
    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
      while (1) switch (_context6.prev = _context6.next) {
        case 0:
          selectedKey = 'first-sub-menu';
          _renderWithSelectedKe6 = renderWithSelectedKey(selectedKey), driver = _renderWithSelectedKe6.driver, container = _renderWithSelectedKe6.container;
          firstSubMenuTestKit = sidebarSubMenuNextTestkitFactory({
            wrapper: container,
            dataHook: selectedKey
          });
          _context6.next = 5;
          return firstSubMenuTestKit.click();
        case 5:
          _context6.t0 = expect;
          _context6.next = 8;
          return driver.shouldNextMenuOpenWithDelay();
        case 8:
          _context6.t1 = _context6.sent;
          (0, _context6.t0)(_context6.t1).toBe('false');
        case 10:
        case "end":
          return _context6.stop();
      }
    }, _callee6);
  })));

  // TODO: move to SidebarNext spec
  it('is state.selectedKey equals to props.selectedKey on mount', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
    var selectedKey, _renderWithSelectedKe7, driver;
    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
      while (1) switch (_context7.prev = _context7.next) {
        case 0:
          selectedKey = 'non-sub-menu-item';
          _renderWithSelectedKe7 = renderWithSelectedKey(selectedKey), driver = _renderWithSelectedKe7.driver;
          _context7.t0 = expect;
          _context7.next = 5;
          return driver.getSelectedKey();
        case 5:
          _context7.t1 = _context7.sent;
          (0, _context7.t0)(_context7.t1).toBe(selectedKey);
        case 7:
        case "end":
          return _context7.stop();
      }
    }, _callee7);
  })));
  it('is state.selectedKey equals to props.selectedKey on change of props.selectedKey', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
    var finalSelectedKey, _renderWithSelectedKe8, driver, rerender;
    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
      while (1) switch (_context8.prev = _context8.next) {
        case 0:
          finalSelectedKey = 'first-sub-menu';
          _renderWithSelectedKe8 = renderWithSelectedKey('non-sub-menu-item'), driver = _renderWithSelectedKe8.driver, rerender = _renderWithSelectedKe8.rerender;
          rerender(sidebarWithSelectedKey(finalSelectedKey));
          _context8.t0 = expect;
          _context8.next = 6;
          return driver.getSelectedKey();
        case 6:
          _context8.t1 = _context8.sent;
          (0, _context8.t0)(_context8.t1).toBe(finalSelectedKey);
        case 8:
        case "end":
          return _context8.stop();
      }
    }, _callee8);
  })));

  // TODO: move to sidebar state hook tests
  it('isSelectedExpanded should be true when menu is selected', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
    var _renderWithSelectedKe9, driver;
    return _regeneratorRuntime.wrap(function _callee9$(_context9) {
      while (1) switch (_context9.prev = _context9.next) {
        case 0:
          _renderWithSelectedKe9 = renderWithSelectedKey('first-sub-menu'), driver = _renderWithSelectedKe9.driver;
          _context9.t0 = expect;
          _context9.next = 4;
          return driver.isSelectedExpanded();
        case 4:
          _context9.t1 = _context9.sent;
          (0, _context9.t0)(_context9.t1).toBe('true');
        case 6:
        case "end":
          return _context9.stop();
      }
    }, _callee9);
  })));
  it('isSelectedExpanded should be false when menu is selected and clicked to toggle', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee0() {
    var selectedKey, _renderWithSelectedKe0, driver, container, firstSubMenuTestKit;
    return _regeneratorRuntime.wrap(function _callee0$(_context0) {
      while (1) switch (_context0.prev = _context0.next) {
        case 0:
          selectedKey = 'first-sub-menu';
          _renderWithSelectedKe0 = renderWithSelectedKey(selectedKey), driver = _renderWithSelectedKe0.driver, container = _renderWithSelectedKe0.container;
          firstSubMenuTestKit = sidebarSubMenuNextTestkitFactory({
            wrapper: container,
            dataHook: selectedKey
          });
          _context0.next = 5;
          return firstSubMenuTestKit.click();
        case 5:
          _context0.t0 = expect;
          _context0.next = 8;
          return driver.isSelectedExpanded();
        case 8:
          _context0.t1 = _context0.sent;
          (0, _context0.t0)(_context0.t1).toBe('false');
        case 10:
        case "end":
          return _context0.stop();
      }
    }, _callee0);
  })));
  it('isSelectedExpanded should be true when menu is selected and clicked to collapse and then clicked to expand again', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee1() {
    var selectedKey, _renderWithSelectedKe1, driver, container, firstSubMenuTestKit;
    return _regeneratorRuntime.wrap(function _callee1$(_context1) {
      while (1) switch (_context1.prev = _context1.next) {
        case 0:
          selectedKey = 'first-sub-menu';
          _renderWithSelectedKe1 = renderWithSelectedKey(selectedKey), driver = _renderWithSelectedKe1.driver, container = _renderWithSelectedKe1.container;
          firstSubMenuTestKit = sidebarSubMenuNextTestkitFactory({
            wrapper: container,
            dataHook: selectedKey
          });
          _context1.next = 5;
          return firstSubMenuTestKit.click();
        case 5:
          _context1.next = 7;
          return firstSubMenuTestKit.click();
        case 7:
          _context1.t0 = expect;
          _context1.next = 10;
          return driver.isSelectedExpanded();
        case 10:
          _context1.t1 = _context1.sent;
          (0, _context1.t0)(_context1.t1).toBe('true');
        case 12:
        case "end":
          return _context1.stop();
      }
    }, _callee1);
  })));
});