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

wix-style-react

var _this = this;

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

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

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import tooltipDriverFactory from './Tooltip.driver';
import Tooltip from './Tooltip';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { buttonTestkitFactory, backofficeTooltipTestkitFactory as tooltipTestkitFactory } from '../../../testkit';
import { backofficeTooltipTestkitFactory as enzymeTooltipTestkitFactory } from '../../../testkit/enzyme';
import { mount } from 'enzyme';
import Button from '../Button';
import waitForCond from 'wait-for-cond';
import { rangePolyfill } from '../../../testkit/polyfills';
import { createRendererWithDriver, cleanup } from '../../../test/utils/react';
import { eventually } from '../../../test/utils/unit';

describe('Tooltip', function () {
  var render = createRendererWithDriver(tooltipDriverFactory);
  var createDriver = createDriverFactory(tooltipDriverFactory);
  var _props = {
    showDelay: 5,
    hideDelay: 5,
    content: React.createElement(
      'div',
      null,
      'Some content'
    )
  };
  var children = React.createElement(
    'div',
    null,
    'foo children'
  );

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

  afterEach(function () {
    rangePolyfill.uninstall();
    cleanup();
  });

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

  it('should show a tooltip once hovering', function () {
    var driver = createDriver(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _extends({}, _props, { showTrigger: 'focus', hideTrigger: 'blur' }),
      React.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(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _extends({}, _extends({}, _props, { showTrigger: 'custom', hideTrigger: 'custom' }), {
        active: true
      }),
      React.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(React.createElement(
      Tooltip,
      _extends({}, _props, { showTrigger: 'focus', hideTrigger: 'blur' }),
      React.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(React.createElement(
              Tooltip,
              props,
              children
            )), driver = _render.driver, rerender = _render.rerender;

            driver.mouseEnter();

            expect(driver.isShown()).toBeFalsy();
            rerender(React.createElement(
              Tooltip,
              _extends({}, props, { active: true }),
              children
            ));

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

          case 7:

            rerender(React.createElement(
              Tooltip,
              _extends({}, props, { active: false }),
              children
            ));

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

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

  it('should test inner component', function () {
    var dataHook = 'button_data_hook';
    var buttonContent = React.createElement(
      'div',
      null,
      'Custom Content...\xA0',
      React.createElement(
        Button,
        { dataHook: dataHook, id: 'inner-button', height: 'small' },
        'Button content'
      )
    );
    var driver = createDriver(React.createElement(
      Tooltip,
      { 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 = 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 = React.createElement(
      'div',
      { onFocus: onFocus },
      'foo children'
    );
    var driver = createDriver(React.createElement(
      Tooltip,
      _props,
      onFocusedChild
    ));
    driver.focus();
    expect(onFocus).toBeCalled();
  });

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

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

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

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

  it('should support error theme', function () {
    var driver = createDriver(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _extends({ theme: 'light' }, _props),
      children
    ));
    driver.mouseEnter();
    return waitFor.assert(function () {
      return expect(driver.hasLightTheme()).toBeTruthy();
    });
  });

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

  it('should have a content', function () {
    var driver = createDriver(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _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(React.createElement(
      Tooltip,
      _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(React.createElement(
        Tooltip,
        _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(React.createElement(
          Tooltip,
          _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(React.createElement(
        Tooltip,
        _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(ReactTestUtils.renderIntoDocument(React.createElement(
        'div',
        null,
        React.createElement(
          Tooltip,
          _extends({ dataHook: dataHook }, _props),
          children
        )
      )));
      var driver = tooltipTestkitFactory({ 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 = mount(React.createElement(
        Tooltip,
        _extends({ dataHook: dataHook }, _props),
        children
      ));
      var driver = enzymeTooltipTestkitFactory({ 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 = mount(React.createElement(
        Tooltip,
        _extends({ dataHook: dataHook }, _props, { hideDelay: 1000 }),
        children
      ));
      var driver = enzymeTooltipTestkitFactory({ 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 waitForCond(predicate, 2000, msg);
}

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

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