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

A UI component library from AppNexus.

import _last from "lodash/last";
import _forEach from "lodash/forEach";
import _noop from "lodash/noop";
import React from 'react';
import { common, controls } from '../../util/generic-tests';
import { shallow, mount } from 'enzyme';
import assert from 'assert';
import sinon from 'sinon';
import Checkbox from './Checkbox';
describe('Checkbox', function () {
  common(Checkbox);
  controls(Checkbox, {
    callbackName: 'onSelect',
    controlSelector: '.lucid-Checkbox-native',
    eventType: 'click'
  });
  describe('props', function () {
    describe('isDisabled', function () {
      it('should set `disabled` attribute to true', function () {
        var trueWrapper = mount( /*#__PURE__*/React.createElement(Checkbox, {
          isDisabled: true
        }));
        assert.equal(trueWrapper.find('.lucid-Checkbox-native').prop('disabled'), true);
      });
      it('should set `disabled` attribute to false', function () {
        var falseWrapper = mount( /*#__PURE__*/React.createElement(Checkbox, {
          isDisabled: false
        }));
        assert.equal(falseWrapper.find('.lucid-Checkbox-native').prop('disabled'), false);
      });
    });
    describe('isSelected', function () {
      it('should set `checked` attribute to true', function () {
        var trueWrapper = mount( /*#__PURE__*/React.createElement(Checkbox, {
          isSelected: true
        }));
        assert.equal(trueWrapper.find('.lucid-Checkbox-native').prop('checked'), true);
      });
      it('should set `checked` attribute to false', function () {
        var falseWrapper = mount( /*#__PURE__*/React.createElement(Checkbox, {
          isSelected: false
        }));
        assert.equal(falseWrapper.find('.lucid-Checkbox-native').prop('checked'), false);
      });
    });
    describe('isIndeterminate', function () {
      it('should set the top-level classname `&-is-selected`', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Checkbox, {
          isIndeterminate: true
        }));
        assert(wrapper.hasClass('lucid-Checkbox-is-selected'));
      });
      it('should not contain a `span.&-visualization-checkmark`', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Checkbox, {
          isIndeterminate: true
        }));
        assert.equal(wrapper.find('span.lucid-Checkbox-visualization-checkmark').length, 0);
      });
      it('should contain a `span.&-visualization-indeterminate`', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Checkbox, {
          isIndeterminate: true
        }));
        assert.equal(wrapper.find('span.lucid-Checkbox-visualization-indeterminate').length, 1);
      });
      it('should contain a `span.&-visualization-indeterminate-line`', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Checkbox, {
          isIndeterminate: true
        }));
        assert.equal(wrapper.find('span.lucid-Checkbox-visualization-indeterminate-line').length, 1);
      });
    });
  });
  describe('pass throughs', function () {
    it('passes through all props not defined in `propTypes` to the native input', function () {
      var wrapper = mount( /*#__PURE__*/React.createElement(Checkbox, {
        className: "mert",
        isDisabled: false,
        isSelected: false,
        checked: true,
        style: {
          color: 'purple'
        },
        onSelect: _noop,
        foo: 1,
        bar: 2,
        baz: 3,
        qux: 4
      }));
      var nativeWrapper = wrapper.find('.lucid-Checkbox-native');
      assert.equal(nativeWrapper.prop('foo'), 1);
      assert.equal(nativeWrapper.prop('bar'), 2);
      assert.equal(nativeWrapper.prop('baz'), 3);
      assert.equal(nativeWrapper.prop('qux'), 4);
      assert.equal(nativeWrapper.prop('checked'), false); // `checked` should not pass through
    });
  });
  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');
    });
  });
});

function simulateEvent(reactElement, selector, event) {
  mount(reactElement).find(selector).simulate(event);
}

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

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

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