wix-style-react/dist/src/Backoffice/Tooltip/Tooltip.spec.js

wix-style-react

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _testUtils = require('react-dom/test-utils');

var _testUtils2 = _interopRequireDefault(_testUtils);

var _Tooltip = require('./Tooltip.driver');

var _Tooltip2 = _interopRequireDefault(_Tooltip);

var _Tooltip3 = require('./Tooltip');

var _Tooltip4 = _interopRequireDefault(_Tooltip3);

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

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

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

var _enzyme2 = require('enzyme');

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

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

var _waitForCond2 = _interopRequireDefault(_waitForCond);

var _polyfills = require('../../../testkit/polyfills');

var _react3 = require('../../../test/utils/react');

var _unit = require('../../../test/utils/unit');

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"); }); }; }

describe('Tooltip', function () {
  var render = (0, _react3.createRendererWithDriver)(_Tooltip2.default);
  var createDriver = (0, _driverFactory.createDriverFactory)(_Tooltip2.default);
  var _props = {
    showDelay: 5,
    hideDelay: 5,
    content: _react2.default.createElement(
      'div',
      null,
      'Some content'
    )
  };
  var children = _react2.default.createElement(
    'div',
    null,
    'foo children'
  );

  beforeEach(function () {
    document.body.innerHTML = '';
    _polyfills.rangePolyfill.install();
  });

  afterEach(function () {
    _polyfills.rangePolyfill.uninstall();
    (0, _react3.cleanup)();
  });

  it('should be hidden by default', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      children
    ));
    expect(driver.isShown()).toBeFalsy();
  });

  it('should show a tooltip once hovering', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      children
    ));
    driver.mouseEnter();
    expect(driver.isShown()).toBeFalsy();
    return waitFor.assert(function () {
      return expect(driver.isShown()).toBeTruthy();
    });
  });

  it('should hide when mouse leaving', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      children
    ));
    driver.mouseEnter();
    expect(driver.isShown()).toBeFalsy();

    return waitFor.assert(function () {
      return expect(driver.isShown()).toBeTruthy();
    }).then(function () {
      return driver.mouseLeave();
    }).then(function () {
      return waitFor.assert(function () {
        return expect(driver.isShown()).toBeFalsy();
      });
    });
  });

  it('click triggers', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({}, _props, { showTrigger: 'click', hideTrigger: 'click' }),
      children
    ));
    driver.click();

    return waitFor.assert(function () {
      return expect(driver.isShown()).toBeTruthy();
    }).then(function () {
      driver.click();
      return waitFor.assert(function () {
        return expect(driver.isShown()).toBeFalsy();
      });
    });
  });

  it('show on focus, hide on blur', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({}, _props, { showTrigger: 'focus', hideTrigger: 'blur' }),
      _react2.default.createElement('input', null)
    ));

    driver.focus();

    return waitFor.assert(function () {
      return expect(driver.isShown()).toBeTruthy();
    }).then(function () {
      driver.blur();
      return waitFor.assert(function () {
        return expect(driver.isShown()).toBeFalsy();
      });
    });
  });

  it('hover trigger is disabled in click mode', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({}, _props, { showTrigger: 'click', hideTrigger: 'click' }),
      children
    ));

    driver.mouseEnter();

    return waitFor.assertHold(function () {
      return expect(driver.isShown()).toBeFalsy();
    }, 300);
  });

  it('custom mode - mouse enter does not hide', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({}, _extends({}, _props, { showTrigger: 'custom', hideTrigger: 'custom' }), {
        active: true
      }),
      _react2.default.createElement('input', null)
    ));

    expect(driver.isShown()).toBeTruthy();

    driver.mouseEnter();

    return waitFor.assertHold(function () {
      return expect(driver.isShown()).toBeTruthy();
    });
  });

  it('focus and blur triggers', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({}, _props, { showTrigger: 'focus', hideTrigger: 'blur' }),
      _react2.default.createElement('input', null)
    ));

    driver.focus();

    return waitFor.assert(function () {
      return expect(driver.isShown()).toBeTruthy();
    }).then(function () {
      driver.blur();
      return waitFor.assert(function () {
        return expect(driver.isShown()).toBeFalsy();
      });
    });
  });

  it('should hide tooltip when using custom triggers', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var props, _render, driver, rerender;

    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            props = _extends({}, _props, { hideTrigger: 'custom', showTrigger: 'custom' });
            _render = render(_react2.default.createElement(
              _Tooltip4.default,
              props,
              children
            )), driver = _render.driver, rerender = _render.rerender;

            driver.mouseEnter();

            expect(driver.isShown()).toBeFalsy();
            rerender(_react2.default.createElement(
              _Tooltip4.default,
              _extends({}, props, { active: true }),
              children
            ));

            _context.next = 7;
            return (0, _unit.eventually)(function () {
              expect(driver.isShown()).toBeTruthy();
            });

          case 7:

            rerender(_react2.default.createElement(
              _Tooltip4.default,
              _extends({}, props, { active: false }),
              children
            ));

            _context.next = 10;
            return (0, _unit.eventually)(function () {
              expect(driver.isShown()).toBeFalsy();
            });

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

  it('should test inner component', function () {
    var dataHook = 'button_data_hook';
    var buttonContent = _react2.default.createElement(
      'div',
      null,
      'Custom Content...\xA0',
      _react2.default.createElement(
        _Button2.default,
        { dataHook: dataHook, id: 'inner-button', height: 'small' },
        'Button content'
      )
    );
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      { showDelay: 5, hideDelay: 5, content: buttonContent },
      children
    ));
    driver.mouseEnter();
    expect(driver.isShown()).toBeFalsy();

    return waitFor.assert(function () {
      return expect(driver.isShown()).toBeTruthy();
    }).then(function () {
      var buttonTestkit = (0, _testkit.buttonTestkitFactory)({
        wrapper: driver.getTooltipWrapper(),
        dataHook: dataHook
      });
      expect(buttonTestkit.getButtonTextContent()).toBe('Button content');
    });
  });

  it('should not override focus event', function () {
    var onFocus = jest.fn();
    var onFocusedChild = _react2.default.createElement(
      'div',
      { onFocus: onFocus },
      'foo children'
    );
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      onFocusedChild
    ));
    driver.focus();
    expect(onFocus).toBeCalled();
  });

  it('should not override blur event', function () {
    var onBlur = jest.fn();
    var onBluredChild = _react2.default.createElement(
      'div',
      { onBlur: onBlur },
      'foo children'
    );
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      onBluredChild
    ));
    driver.blur();
    expect(onBlur).toBeCalled();
  });

  it('should not override click event', function () {
    var onClick = jest.fn();
    var onClickedChild = _react2.default.createElement(
      'div',
      { onClick: onClick },
      'foo children'
    );
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      onClickedChild
    ));
    driver.click();
    expect(onClick).toBeCalled();
  });

  it('should not override mouse enter event', function () {
    var onMouseEnter = jest.fn();
    var onMouseEnteredChild = _react2.default.createElement(
      'div',
      { onMouseEnter: onMouseEnter },
      'foo children'
    );
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      onMouseEnteredChild
    ));
    driver.mouseEnter();
    expect(onMouseEnter).toBeCalled();
  });

  it('should not override mouse leave event', function () {
    var onMouseLeave = jest.fn();
    var onMouseLeavedChild = _react2.default.createElement(
      'div',
      { onMouseLeave: onMouseLeave },
      'foo children'
    );
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      onMouseLeavedChild
    ));
    driver.mouseLeave();
    expect(onMouseLeave).toBeCalled();
  });

  it('should support error theme', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({ theme: 'error' }, _props),
      children
    ));
    driver.mouseEnter();
    return waitFor.assert(function () {
      return expect(driver.hasErrorTheme()).toBeTruthy();
    });
  });

  it('should support dark theme', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({ theme: 'dark' }, _props),
      children
    ));
    driver.mouseEnter();
    return waitFor.assert(function () {
      return expect(driver.hasDarkTheme()).toBeTruthy();
    });
  });

  it('should support light theme', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({ theme: 'light' }, _props),
      children
    ));
    driver.mouseEnter();
    return waitFor.assert(function () {
      return expect(driver.hasLightTheme()).toBeTruthy();
    });
  });

  it('should have children', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      children
    ));
    expect(driver.getChildren()).toContain('foo children');
  });

  it('should have a content', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      children
    ));
    driver.mouseEnter();
    return waitFor.assert(function () {
      return expect(driver.getContent()).toEqual('<div>Some content</div>');
    });
  });

  it('should cancel mouse leave, when followed by mouse enter immediately', function () {
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _props,
      children
    ));
    driver.mouseEnter();
    driver.mouseLeave();
    driver.mouseEnter();

    return waitFor.assert(function () {
      return expect(driver.isShown()).toBe(true);
    });
  });

  it('should call onShow when tooltip is shown', function () {
    var onShow = jest.fn();
    var driver = createDriver(_react2.default.createElement(
      _Tooltip4.default,
      _extends({}, _props, { onShow: onShow }),
      children
    ));

    driver.mouseEnter();

    expect(onShow).not.toHaveBeenCalled();
    return waitFor.assert(function () {
      return expect(onShow).toHaveBeenCalled();
    });
  });

  describe('placement attribute', function () {
    it('should be top by default', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tooltip4.default,
        _extends({}, _props),
        children
      ));
      driver.mouseEnter();

      return waitFor.assert(function () {
        return expect(driver.getPlacement()).toEqual('top');
      });
    });

    ['top', 'bottom', 'left', 'right'].forEach(function (placement) {
      it('should be ' + placement, function () {
        var driver = createDriver(_react2.default.createElement(
          _Tooltip4.default,
          _extends({}, _extends({}, _props), { placement: placement }),
          children
        ));
        driver.mouseEnter();

        return waitFor.assert(function () {
          return expect(driver.getPlacement()).toBe(placement);
        });
      });
    });

    xit('show with delay and immediately hide', function () {
      var driver = createDriver(_react2.default.createElement(
        _Tooltip4.default,
        _extends({}, _props, { hideDelay: 0, showDelay: 50 }),
        children
      ));
      driver.mouseEnter();
      driver.mouseLeave();

      return waitFor.assertHold(function () {
        return expect(driver.isShown()).toBeFalsy();
      });
    });
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'myDataHook';
      var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          _Tooltip4.default,
          _extends({ dataHook: dataHook }, _props),
          children
        )
      )));
      var driver = (0, _testkit.backofficeTooltipTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
      driver.mouseEnter();
      expect(driver.isShown()).toBeFalsy();
      return waitFor.assert(function () {
        return expect(driver.isShown()).toBeTruthy();
      });
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(
        _Tooltip4.default,
        _extends({ dataHook: dataHook }, _props),
        children
      ));
      var driver = (0, _enzyme.backofficeTooltipTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
      driver.mouseEnter();
      expect(driver.isShown()).toBeFalsy();
      return waitFor.assert(function () {
        return expect(driver.isShown()).toBeTruthy();
      });
    });

    it.skip('should remove a tooltip immediately once the component is destroyed', function () {
      var dataHook = 'myDataHook';
      var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(
        _Tooltip4.default,
        _extends({ dataHook: dataHook }, _props, { hideDelay: 1000 }),
        children
      ));
      var driver = (0, _enzyme.backofficeTooltipTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
      driver.mouseEnter();
      return waitFor.assert(function () {
        return expect(driver.isShown()).toBeTruthy();
      }).then(function () {
        wrapper.unmount();
        expect(driver.isShown()).toBeFalsy();
      });
    });
  });
});

function waitFor(predicate, msg) {
  return (0, _waitForCond2.default)(predicate, 2000, msg);
}

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

waitFor.assertHold = function (fn) {
  return _waitForCond2.default.assertHold(fn, 500);
};