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

A UI component library from AppNexus.

import _includes from "lodash/includes";
import React from 'react';
import { mount, shallow } from 'enzyme';
import assert from 'assert';
import sinon from 'sinon';
import { common, controls } from '../../util/generic-tests';
import Button from './Button';
describe('Button', function () {
  common(Button);
  controls(Button, {
    callbackName: 'onClick',
    controlSelector: '.lucid-Button',
    eventType: 'click'
  });
  describe('text', function () {
    it('should allow children as content', function () {
      var text = 'Hello';
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, null, text));
      assert.equal(wrapper.text(), text);
    });
  });
  describe('isDisabled', function () {
    it('should not be disabled by default', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, null));
      assert.equal(wrapper.find('button').prop('disabled'), false);
    });
    it('should show a disabled button', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, {
        isDisabled: true
      }));
      assert.equal(wrapper.find('button').prop('disabled'), true);
    });
  });
  describe('css classes', function () {
    // TODO: make this a generic test
    it('should have the Button class', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, null));
      var classNames = wrapper.find('button').prop('className').split(' ');
      assert(_includes(classNames, 'lucid-Button'), "'".concat(classNames, "' should include 'lucid-Button'"));
    });
    it('should have a button with the "active" class when active is true', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, {
        isActive: true
      }));
      var classNames = wrapper.find('button').prop('className').split(' ');
      assert(_includes(classNames, 'lucid-Button-is-active'), "'".concat(classNames, "' should include 'lucid-Button-is-active'"));
    });
    it('should have a button with the "has-only-icon" class when hasOnlyIcon is true', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, {
        hasOnlyIcon: true
      }));
      assert(wrapper.hasClass('lucid-Button-has-only-icon'));
    });
  });
  describe('type', function () {
    it('should be a button type by default', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, null));
      assert.equal(wrapper.find('button').prop('type'), 'button');
    });
    it('should passthrough button type property', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(Button, {
        type: "submit"
      }));
      assert.equal(wrapper.find('button').prop('type'), 'submit');
    });
  });
});
describe('Button', function () {
  describe('click', function () {
    it('should call the onClick handler when clicked', function () {
      var onButtonClick = sinon.spy();
      var wrapper = mount( /*#__PURE__*/React.createElement(Button, {
        onClick: onButtonClick
      }));
      wrapper.find('button').simulate('click');
      assert(onButtonClick.calledOnce);
    });
  });
});