wix-style-react/dist/es/src/TPA/Input/Input.spec.js

wix-style-react

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import Input from './Input';
import { tpaInputTestkitFactory as inputTestkitFactory } from '../../../testkit';
import { tpaInputTestkitFactory as enzymeInputTestkitFactory } from '../../../testkit/enzyme';
import { isEnzymeTestkitExists } from '../../../test/utils/testkit-sanity';
import { mount } from 'enzyme';

describe('Input', function () {
  var div = void 0;
  var dataHook = 'input-hook';

  var renderToDocument = function renderToDocument(component) {
    return div.appendChild(ReactTestUtils.renderIntoDocument(React.createElement(
      'div',
      null,
      component
    )));
  };

  beforeEach(function () {
    return div = document.createElement('div');
  });

  it('should exist', function () {
    var wrapper = renderToDocument(React.createElement(Input, { dataHook: dataHook }));
    var inputTestkit = inputTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
    expect(inputTestkit.exists()).toBeTruthy();
  });

  it('should contain default value', function () {
    var wrapper = renderToDocument(React.createElement(Input, { defaultValue: 'some default value', dataHook: dataHook }));

    var inputTestkit = inputTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
    expect(inputTestkit.getValue()).toEqual('some default value');
  });

  it('should return passed value', function () {
    var wrapper = renderToDocument(React.createElement(Input, { value: 'the value', onChange: function onChange() {}, dataHook: dataHook }));

    var inputTestkit = inputTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
    expect(inputTestkit.getValue()).toEqual('the value');
  });

  it('should have input class', function () {
    var wrapper = renderToDocument(React.createElement(Input, { styles: { locals: { input: 'input' } }, dataHook: dataHook }));

    var inputTestkit = inputTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
    expect(inputTestkit.hasClass('input')).toBeTruthy();
    expect(inputTestkit.hasClass('error')).toBeFalsy();
  });

  it('should be in error state', function () {
    var wrapper = renderToDocument(React.createElement(Input, {
      error: true,
      styles: { locals: { input: 'input', error: 'error' } },
      dataHook: dataHook
    }));

    var inputTestkit = inputTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
    expect(inputTestkit.hasClass('error')).toBeTruthy();
  });

  it('should be able to pass error class name', function () {
    var wrapper = renderToDocument(React.createElement(Input, {
      error: true,
      errorClassName: 'customErrorClassName',
      styles: { locals: { input: 'input', error: 'error' } },
      dataHook: dataHook
    }));

    var inputTestkit = inputTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
    expect(inputTestkit.hasClass('customErrorClassName')).toBeTruthy();
  });

  it('should be able to pass custom input css class name', function () {
    var wrapper = renderToDocument(React.createElement(Input, {
      error: true,
      inputClassName: 'customInputClassName',
      styles: { locals: { input: 'input', error: 'error' } },
      dataHook: dataHook
    }));

    var inputTestkit = inputTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
    expect(inputTestkit.hasClass('customInputClassName')).toBeTruthy();
  });

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