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

wix-style-react

import React from 'react';
import Highlighter from './Highlighter';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import highlighterDriverFactory from './Highlighter.driver';
import { isTestkitExists, isEnzymeTestkitExists } from '../../test/utils/testkit-sanity';
import { highlighterTestkitFactory } from '../../testkit/index';
import { highlighterTestkitFactory as enzymeHighlighterTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';

describe('Highlighter', function () {
  var createDriver = createDriverFactory(highlighterDriverFactory);

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

    var wrapper = createDriver(React.createElement(
      Highlighter,
      { 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(React.createElement(
      Highlighter,
      { match: 'Opt' },
      React.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(React.createElement(
      Highlighter,
      { match: 'Opt' },
      React.createElement(
        'span',
        null,
        React.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(React.createElement(
      Highlighter,
      { match: 'Opt' },
      React.createElement(
        'div',
        null,
        React.createElement(
          'span',
          null,
          'Option 1'
        )
      ),
      React.createElement(
        'div',
        null,
        React.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(React.createElement(
      Highlighter,
      { match: 'Opt' },
      'Option 2',
      React.createElement(
        'div',
        null,
        React.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(React.createElement(
      Highlighter,
      { match: 'p' },
      React.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(React.createElement(
      Highlighter,
      { match: 'p' },
      React.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(React.createElement(
      Highlighter,
      { match: 'p' },
      React.createElement(
        'div',
        { className: 'option-class' },
        React.createElement(
          'div',
          null,
          'Arizona'
        ),
        React.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(React.createElement(
      Highlighter,
      { match: 'p' },
      React.createElement(
        'div',
        { className: 'option-class' },
        React.createElement(
          'div',
          null,
          React.createElement(
            'span',
            null,
            React.createElement(
              'span',
              null,
              'Arizona'
            )
          )
        ),
        React.createElement(
          'div',
          { className: 'some-class' },
          React.createElement('div', { className: 'some-class-2' })
        )
      )
    ));

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

  describe('testkit', function () {
    it('should exist', function () {
      expect(isTestkitExists(React.createElement(Highlighter, null), highlighterTestkitFactory)).toBe(true);
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      expect(isEnzymeTestkitExists(React.createElement(Highlighter, null), enzymeHighlighterTestkitFactory, mount)).toBe(true);
    });
  });
});