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

A UI component library from AppNexus.

import _has from "lodash/has";
import assert from 'assert';
import React from 'react';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import { AccordionDumb as Accordion } from './Accordion';
import { ExpanderPanelDumb as ExpanderPanel } from '../ExpanderPanel/ExpanderPanel';
describe('Accordion', function () {
  common(Accordion, {
    exemptChildComponents: ['Header']
  });
  describe('props', function () {
    describe('Item', function () {
      it('renders ExpanderPanel components on it', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Header One"
        }, "One"), /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Header Two"
        }, "Two")));
        assert(wrapper.find(ExpanderPanel), 2);
      });
      it('Item as children', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Header One"
        }, "One"), /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Header Two"
        }, "Two")));
        assert.equal(wrapper.find('.lucid-Accordion-Item').length, 2);
      });
    });
    describe('Header', function () {
      it('Header as props', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Froyo"
        }, "Yolo fo sho"), /*#__PURE__*/React.createElement(Accordion.Item, null, "Broyoyo")));
        var firstItem = wrapper.find('.lucid-Accordion-Item').first();
        assert.equal(firstItem.find('.lucid-ExpanderPanel-header').first().text(), 'Froyo');
      });
      it('Header as children', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(Accordion.Item, null, /*#__PURE__*/React.createElement(Accordion.Header, null, "Froyo"), "Yolo fo sho"), /*#__PURE__*/React.createElement(Accordion.Item, null, "Broyoyo")));
        var firstItem = wrapper.find('.lucid-Accordion-Item').first();
        assert.equal(firstItem.find('.lucid-ExpanderPanel-header').first().text(), 'Froyo');
      });
    });
    describe('selectedIndex', function () {
      it('should have an expanded item when set via props', function () {
        var wrapper = mount( /*#__PURE__*/React.createElement(Accordion, {
          selectedIndex: 1
        }, /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Header Test"
        }, "test"), /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Header Test"
        }, "test"), /*#__PURE__*/React.createElement(Accordion.Item, {
          Header: "Header Test"
        }, "test")));
        assert(wrapper.find('.lucid-ExpanderPanel-content-is-expanded'), 1);
      });
    });
    describe('pass throughs', function () {
      it('passes through all props not defined in `propTypes` to the root element', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Accordion, {
          className: "wut",
          style: {
            marginRight: 10
          },
          foo: 1,
          bar: 2
        }));
        var rootProps = wrapper.find('.lucid-Accordion').props();
        assert(_has(rootProps, 'foo'), 'props missing "foo" prop');
        assert(_has(rootProps, 'bar'), 'props missing "bar" prop');
      });
      it('passes through Item className to the rendered item element', function () {
        var wrapper = shallow( /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(Accordion.Item, {
          className: "TestOne"
        }, "One"), /*#__PURE__*/React.createElement(Accordion.Item, {
          className: "TestTwo"
        }, "Two")));
        var itemsWrapper = wrapper.find('.lucid-Accordion-Item');
        assert.equal(itemsWrapper.find('.TestOne').length, 1, 'must find one item with className `TestOne`');
        assert.equal(itemsWrapper.find('.TestTwo').length, 1, 'must find one item with className `TestTwo`');
      });
    });
  });
});
describe('Accordion', function () {
  var wrapper;
  var onSelect = sinon.spy();
  var mountTestDiv;
  describe('user picks one of the items', function () {
    beforeEach(function () {
      mountTestDiv = document.createElement('div');
      document.body.appendChild(mountTestDiv);
      wrapper = mount( /*#__PURE__*/React.createElement(Accordion, {
        onSelect: onSelect
      }, /*#__PURE__*/React.createElement(Accordion.Item, {
        Header: "Header One"
      }, "One"), /*#__PURE__*/React.createElement(Accordion.Item, {
        Header: "Header Two",
        isDisabled: true
      }, "Two")), {
        attachTo: mountTestDiv
      });
    });
    afterEach(function () {
      onSelect.reset();
      wrapper && wrapper.unmount();
      mountTestDiv && mountTestDiv.parentNode.removeChild(mountTestDiv);
    });
    it('should call the function passed in as the `onSelect` prop', function () {
      var firstPanel = wrapper.find('.lucid-ExpanderPanel').at(0);
      firstPanel.find('.lucid-ExpanderPanel-header').first().simulate('click');
      firstPanel.find('.lucid-ExpanderPanel-icon').first().simulate('click');
      assert.equal(onSelect.callCount, 2, "onSelect called the wrong number of times, actual: ".concat(onSelect.callCount, ", expected: 2"));
    });
    it('should not call the function passed in as the `onSelect` prop when Item is disabled', function () {
      var secondPanel = wrapper.find('.lucid-ExpanderPanel').at(2);
      secondPanel.find('.lucid-ExpanderPanel-header').first().simulate('click');
      secondPanel.find('.lucid-ExpanderPanel-icon').first().simulate('click');
      expect(onSelect.callCount).toEqual(0);
    });
  });
});