wix-style-react/dist/src/PopoverMenu/PopoverMenu.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _waitForCond = require('wait-for-cond');

var _waitForCond2 = _interopRequireDefault(_waitForCond);

var _PopoverMenu = require('./PopoverMenu.driver');

var _PopoverMenu2 = _interopRequireDefault(_PopoverMenu);

var _PopoverMenu3 = require('./PopoverMenu');

var _PopoverMenu4 = _interopRequireDefault(_PopoverMenu3);

var _PopoverMenuItem = require('../PopoverMenuItem/PopoverMenuItem');

var _PopoverMenuItem2 = _interopRequireDefault(_PopoverMenuItem);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _testkitSanity = require('../../test/utils/testkit-sanity');

var _testkit = require('../../testkit');

var _enzyme = require('../../testkit/enzyme');

var _enzyme2 = require('enzyme');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

var waitFor = function waitFor(fn) {
  return _waitForCond2.default.assert(fn, 5000);
};

afterEach(function () {
  // under the hood PopoverMenu uses Tooltip component, which renders straight into document.body
  // thus need to keep it maintained
  document.body.innerHTML = '';
});

var menuItemDataHook = 'myItemDataHook';

describe('PopoverMenu', function () {
  var createDriver = (0, _driverFactory.createDriverFactory)(_PopoverMenu2.default);

  it('should render trigger button', function () {
    var driver = createDriver(_react2.default.createElement(_PopoverMenu4.default, null));

    expect(driver.exists()).toBe(true);
  });

  it('should render popover menu on trigger button click', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var menuItem1Text, menuItem1Listener, driver;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            menuItem1Text = 'Menu Item';
            menuItem1Listener = jest.fn();
            driver = createDriver(_react2.default.createElement(
              _PopoverMenu4.default,
              null,
              _react2.default.createElement(_PopoverMenuItem2.default, {
                dataHook: menuItemDataHook,
                text: menuItem1Text,
                onClick: menuItem1Listener
              }),
              _react2.default.createElement(_PopoverMenuItem2.default, { dataHook: menuItemDataHook, text: 'Menu Item #2' })
            )).init.menuItemDataHook(menuItemDataHook);


            driver.click();

            _context.next = 6;
            return waitFor(function () {
              expect(driver.menu.isShown()).toBe(true);
            });

          case 6:

            expect(driver.menu.itemsLength()).toBe(2);
            expect(driver.menu.itemContentAt(0)).toBe(menuItem1Text);

            driver.menu.clickItemAt(0);
            expect(menuItem1Listener).toBeCalled();

            _context.next = 12;
            return waitFor(function () {
              expect(driver.menu.isShown()).toBe(false);
            });

          case 12:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, undefined);
  })));

  it('should not render non-existing items', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
    var driver;
    return regeneratorRuntime.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            driver = createDriver(_react2.default.createElement(
              _PopoverMenu4.default,
              null,
              _react2.default.createElement(_PopoverMenuItem2.default, { dataHook: menuItemDataHook, text: 'Menu Item #1' }),
              false && _react2.default.createElement(_PopoverMenuItem2.default, { dataHook: menuItemDataHook, text: 'Menu Item #2' })
            )).init.menuItemDataHook(menuItemDataHook);


            driver.click();

            _context2.next = 4;
            return waitFor(function () {
              expect(driver.menu.isShown()).toBe(true);
            });

          case 4:

            expect(driver.menu.itemsLength()).toBe(1);

          case 5:
          case 'end':
            return _context2.stop();
        }
      }
    }, _callee2, undefined);
  })));

  it('should render item disabled', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
    var menuItem1Listener, driver;
    return regeneratorRuntime.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            menuItem1Listener = jest.fn();
            driver = createDriver(_react2.default.createElement(
              _PopoverMenu4.default,
              null,
              _react2.default.createElement(_PopoverMenuItem2.default, {
                dataHook: menuItemDataHook,
                onClick: menuItem1Listener,
                disabled: true
              })
            )).init.menuItemDataHook(menuItemDataHook);


            driver.click();

            _context3.next = 5;
            return waitFor(function () {
              expect(driver.menu.isShown()).toBe(true);
            });

          case 5:

            driver.menu.clickItemAt(0);
            expect(menuItem1Listener).not.toBeCalled();

          case 7:
          case 'end':
            return _context3.stop();
        }
      }
    }, _callee3, undefined);
  })));
});

describe('Testkits', function () {
  var genPopoverMenuElement = function genPopoverMenuElement() {
    return _react2.default.createElement(
      _PopoverMenu4.default,
      null,
      _react2.default.createElement(_PopoverMenuItem2.default, { text: 'Menu Item #1' }),
      _react2.default.createElement(_PopoverMenuItem2.default, { text: 'Menu Item #2' })
    );
  };

  it('Using ReactTestUtils testkit', function () {
    expect((0, _testkitSanity.isTestkitExists)(genPopoverMenuElement(), _testkit.popoverMenuTestkitFactory)).toBe(true);
  });

  it('Using Enzyme testkit', function () {
    expect((0, _testkitSanity.isEnzymeTestkitExists)(genPopoverMenuElement(), _enzyme.popoverMenuTestkitFactory, _enzyme2.mount)).toBe(true);
  });
});