lucid-ui/lib/components/Switch/Switch.spec.js

A UI component library from AppNexus.

import _last from "lodash/last";
import _includes from "lodash/includes";
import _keys from "lodash/keys";
import _noop from "lodash/noop";
import _forEach from "lodash/forEach";
import assert from 'assert';
import React from 'react';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import { common, controls } from '../../util/generic-tests';
import Switch from './Switch';
describe('Switch', function () {
  common(Switch);
  controls(Switch, {
    callbackName: 'onSelect',
    controlSelector: '.lucid-Switch-native',
    eventType: 'click'
  });
  var booleanValues = [true, false];
  describe('props', function () {
    describe('isDisabled', function () {
      it('sets the `disabled` attribute of the native check box element.', function () {
        _forEach(booleanValues, function (testValue) {
          var wrapper = shallow( /*#__PURE__*/React.createElement(Switch, {
            isDisabled: testValue
          }));
          assert.equal(wrapper.find('input[type="checkbox"]').prop('disabled'), testValue);
        });
      });
    });
    describe('isSelected', function () {
      it('sets the `checked` attribute of the native check box element.', function () {
        _forEach(booleanValues, function (testValue) {
          var wrapper = shallow( /*#__PURE__*/React.createElement(Switch, {
            isSelected: testValue
          }));
          assert.equal(wrapper.find('input[type="checkbox"]').prop('checked'), testValue);
        });
      });
    });
    describe('pass throughs', function () {
      it('passes through all props not defined in `propTypes` to the native input.', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(Switch, {
          className: "wut",
          isDisabled: true,
          isSelected: true,
          style: {
            fontWeight: 'bold'
          },
          onSelect: _noop,
          foo: 1,
          bar: 2,
          baz: 3,
          qux: 4,
          quux: 5
        }));

        var nativeProps = _keys(wrapper.find('input[type="checkbox"]').props()); // It should pass `foo`, `bar`, `baz`, `qux`, and `quux` through
        // to the native input.


        _forEach(['foo', 'bar', 'baz', 'qux', 'quux'], function (prop) {
          assert(_includes(nativeProps, prop));
        });
      });
    });
  });
});
describe('Switch', function () {
  function simulateEvent(reactElement, selector, event) {
    mount(reactElement).find(selector).simulate(event);
  }

  function verifyArgumentsWhenFalse(event) {
    _forEach(['', '-native', '-visualization-container', '-visualization-handle'], function (classSubString) {
      var onSelect = sinon.spy();
      simulateEvent( /*#__PURE__*/React.createElement(Switch, {
        isSelected: false,
        onSelect: onSelect
      }), ".lucid-Switch".concat(classSubString), event);
      assert.equal(onSelect.args[0][0], true);
      assert(_last(onSelect.args[0]).event);
    });
  }

  function verifyArgumentsWhenTrue(event) {
    _forEach(['', '-native', '-visualization-container', '-visualization-handle'], function (classSubString) {
      var onSelect = sinon.spy();
      simulateEvent( /*#__PURE__*/React.createElement(Switch, {
        isSelected: true,
        onSelect: onSelect
      }), ".lucid-Switch".concat(classSubString), event);
      assert.equal(onSelect.args[0][0], false);
      assert(_last(onSelect.args[0]).event);
    });
  }

  function verifyOnSelect(event) {
    _forEach(['', '-native', '-visualization-container', '-visualization-handle'], function (classSubString) {
      var onSelect = sinon.spy();
      simulateEvent( /*#__PURE__*/React.createElement(Switch, {
        onSelect: onSelect
      }), ".lucid-Switch".concat(classSubString), event);
      assert(onSelect.calledOnce);
    });
  }

  describe('user clicks on the rendered control', function () {
    it('calls the function passed in as the `onSelect` prop...', function () {
      verifyOnSelect('click');
    });
    it('...and when `isSelected` is true passes along false as the first argument and a React synthetic event as the second argument.', function () {
      verifyArgumentsWhenTrue('click');
    });
    it('...and when `isSelected` is false passes along true as the first argument and a React synthetic event as the second argument.', function () {
      verifyArgumentsWhenFalse('click');
    });
  });
  describe('user taps on the rendered control', function () {
    it('calls the function passed in as the `onSelect` prop...', function () {
      verifyOnSelect('touchend');
    });
    it('...and when `isSelected` is true passes along false as the first argument and a React synthetic event as the second argument.', function () {
      verifyArgumentsWhenTrue('touchend');
    });
    it('...and when `isSelected` is false passes along true as the first argument and a React synthetic event as the second argument.', function () {
      verifyArgumentsWhenFalse('touchend');
    });
  });
});