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

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Highlighter = require('./Highlighter');

var _Highlighter2 = _interopRequireDefault(_Highlighter);

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

var _Highlighter3 = require('./Highlighter.driver');

var _Highlighter4 = _interopRequireDefault(_Highlighter3);

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

var _index = require('../../testkit/index');

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

var _enzyme2 = require('enzyme');

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

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

  it('should show highlighted text', function () {
    var expectedResult = '<span><strong>Opt</strong><span>ion 1</span></span>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'Opt' },
      'Option 1'
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should show highlighted text on first children level', function () {
    var expectedResult = '<div><span><strong>Opt</strong><span>ion 1</span></span></div>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'Opt' },
      _react2.default.createElement(
        'div',
        null,
        'Option 1'
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should show highlighted text on second children level', function () {
    var expectedResult = '<span><span><span><strong>Opt</strong><span>ion</span></span></span></span>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'Opt' },
      _react2.default.createElement(
        'span',
        null,
        _react2.default.createElement(
          'span',
          null,
          'Option'
        )
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should show highlighted text on array of children', function () {
    var expectedResult = '<div><span><span><strong>Opt</strong><span>ion 1</span></span></span></div><div><span><span><strong>Opt</strong><span>ion 2</span></span></span></div>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'Opt' },
      _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'span',
          null,
          'Option 1'
        )
      ),
      _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'span',
          null,
          'Option 2'
        )
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should show highlighted text on array of different children type', function () {
    var expectedResult = '<span><strong>Opt</strong><span>ion 2</span></span><div><span><span><strong>Opt</strong><span>ion 1</span></span></span></div>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'Opt' },
      'Option 2',
      _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'span',
          null,
          'Option 1'
        )
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should show highlighted text on multiple match occurrences', function () {
    var expectedResult = '<aside><span><span>O</span><strong>p</strong><span>tion</span><strong>p</strong></span></aside>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'p' },
      _react2.default.createElement(
        'aside',
        null,
        'Optionp'
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should not be caseSensitive by default', function () {
    var expectedResult = '<aside><span><span>O</span><strong>p</strong><span>tion</span><strong>P</strong></span></aside>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'p' },
      _react2.default.createElement(
        'aside',
        null,
        'OptionP'
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should save styles of children', function () {
    var expectedResult = '<div class="option-class"><div><span><span>Arizona</span></span></div><div class="some-class"></div></div>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'p' },
      _react2.default.createElement(
        'div',
        { className: 'option-class' },
        _react2.default.createElement(
          'div',
          null,
          'Arizona'
        ),
        _react2.default.createElement('div', { className: 'some-class' })
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  it('should save dom structure of children', function () {
    var expectedResult = '<div class="option-class"><div><span><span><span><span>Arizona</span></span></span></span></div><div class="some-class"><div class="some-class-2"></div></div></div>';

    var wrapper = createDriver(_react2.default.createElement(
      _Highlighter2.default,
      { match: 'p' },
      _react2.default.createElement(
        'div',
        { className: 'option-class' },
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(
            'span',
            null,
            _react2.default.createElement(
              'span',
              null,
              'Arizona'
            )
          )
        ),
        _react2.default.createElement(
          'div',
          { className: 'some-class' },
          _react2.default.createElement('div', { className: 'some-class-2' })
        )
      )
    ));

    expect(wrapper.html()).toEqual(expectedResult);
  });

  describe('testkit', function () {
    it('should exist', function () {
      expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_Highlighter2.default, null), _index.highlighterTestkitFactory)).toBe(true);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      expect((0, _testkitSanity.isEnzymeTestkitExists)(_react2.default.createElement(_Highlighter2.default, null), _enzyme.highlighterTestkitFactory, _enzyme2.mount)).toBe(true);
    });
  });
});