@yncoder/element-react/dist/npm/es5/src/switch/__test__/switch_test.js

Element UI for React

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _enzyme = require('enzyme');

var _src = require('../../../src');

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

var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};

test('Basic usage', function () {
  var switch1 = (0, _enzyme.mount)(_react2.default.createElement(_src.Switch, {
    value: true,
    onText: '',
    offText: '' }));

  expect(switch1.find('label.el-switch .el-switch__label').at(0).text()).toEqual('');
  expect(switch1.find('label.el-switch .el-switch__label').at(1).text()).toEqual('');
  expect(switch1.find('label.el-switch').hasClass('is-checked')).toEqual(true);

  // switch off
  switch1.find('input').simulate('change', { target: { value: false } });

  expect(switch1.find('label.el-switch .el-switch__label').at(0).text()).toEqual('');
  expect(switch1.find('label.el-switch .el-switch__label').at(1).text()).toEqual('');
  expect(switch1.find('label.el-switch').at(0).hasClass('is-checked')).toEqual(false);

  var switch2 = (0, _enzyme.mount)(_react2.default.createElement(_src.Switch, {
    value: true,
    onColor: '#13ce66',
    offColor: '#ff4949' }));

  expect(switch2.find('label.el-switch').at(0).hasClass('is-checked')).toEqual(true);
  expect(switch2.find('label.el-switch .el-switch__label').at(0).text()).toEqual('ON');
  expect(switch2.find('label.el-switch .el-switch__label').at(1).text()).toEqual('OFF');
  expect(switch2.find('label.el-switch .el-switch__label').at(0).prop('style').display).toEqual(undefined);
  expect(switch2.find('label.el-switch .el-switch__label').at(1).prop('style').display).toEqual('none');

  // switch off
  switch2.find('input[type="checkbox"]').simulate('change', { target: { value: false } });

  expect(switch2.find('label.el-switch').at(0).hasClass('is-checked')).toEqual(false);
  expect(switch2.find('label.el-switch .el-switch__label').at(0).text()).toEqual('ON');
  expect(switch2.find('label.el-switch .el-switch__label').at(1).text()).toEqual('OFF');
  expect(switch2.find('label.el-switch .el-switch__label').at(0).prop('style').display).toEqual('none');
  expect(switch2.find('label.el-switch .el-switch__label').at(1).prop('style').display).toEqual(undefined);
});

test('Extended value types', function () {
  var state = {
    value: 100
  };

  var testCallBack = function testCallBack(value) {
    state.value = value;
  };

  var component = (0, _enzyme.mount)(_react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _src.Tooltip,
      {
        placement: 'top',
        content: _react2.default.createElement(
          'div',
          null,
          'Switch value: ',
          state.value
        ) },
      _react2.default.createElement(_src.Switch, {
        value: state.value,
        onColor: '#13ce66',
        offColor: '#ff4949',
        onValue: 100,
        offValue: 0,
        onChange: testCallBack })
    )
  ));

  expect(component.find('label.el-switch.el-switch--wide').at(0).hasClass('is-checked')).toEqual(true);
  expect(component.find('div .el-switch__label').at(0).text()).toEqual('ON');
  expect(component.find('div .el-switch__label').at(1).text()).toEqual('OFF');
  expect(component.find('div .el-switch__label').at(0).prop('style').display).toEqual(undefined);
  expect(component.find('div .el-switch__label').at(1).prop('style').display).toEqual('none');
  expect(state.value).toBe(100);

  // switch off
  component.find('input[type="checkbox"]').simulate('change', { target: { value: false } });

  expect(component.find('label.el-switch.el-switch--wide').at(0).hasClass('is-checked')).toEqual(false);
  expect(component.find('div .el-switch__label').at(0).text()).toEqual('ON');
  expect(component.find('div .el-switch__label').at(1).text()).toEqual('OFF');
  expect(component.find('div .el-switch__label').at(0).prop('style').display).toEqual('none');
  expect(component.find('div .el-switch__label').at(1).prop('style').display).toEqual(undefined);
  expect(state.value).toBe(0);
});

test('Disabled', function () {
  var switch1 = (0, _enzyme.mount)(_react2.default.createElement(_src.Switch, {
    value: true,
    onText: '',
    offText: '',
    disabled: true }));

  expect(switch1.find('label.el-switch').at(0).hasClass('is-disabled')).toEqual(true);
  expect(switch1.find('input[type="checkbox"]').at(0).prop('disabled')).toEqual(true);

  var switch2 = (0, _enzyme.mount)(_react2.default.createElement(_src.Switch, {
    value: true,
    disabled: true }));

  expect(switch2.find('label.el-switch').at(0).hasClass('is-disabled')).toEqual(true);
  expect(switch2.find('input[type="checkbox"]').at(0).prop('disabled')).toEqual(true);
});

test('Focus', function () {
  var focusFn = jest.fn();
  var blurFn = jest.fn();
  var switch1 = (0, _enzyme.mount)(_react2.default.createElement(_src.Switch, {
    allowFocus: true,
    onFocus: focusFn,
    onBlur: blurFn
  }));

  expect(focusFn.mock.calls.length).toBe(0);
  expect(blurFn.mock.calls.length).toBe(0);

  switch1.find('input').simulate('focus');
  expect(focusFn.mock.calls.length).toBe(1);
  switch1.find('input').simulate('blur');
  expect(blurFn.mock.calls.length).toBe(1);
});