import _, { forEach, has } from 'lodash';
import React from 'react';
import { shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import { SplitButtonDumb as SplitButton } from './SplitButton';
describe('SplitButton', () => {
common(SplitButton);
describe('props', () => {
describe('root pass throughs', () => {
let wrapper: any;
const defaultProps = SplitButton.defaultProps;
beforeEach(() => {
const props = {
...defaultProps,
children: One,
direction: 'up' as any,
kind: 'danger' as any,
size: 'small' as any,
type: 'button',
className: 'wut',
style: { marginRight: 10 },
initialState: { test: true },
callbackId: 1,
'data-testid': 10,
};
wrapper = shallow();
});
afterEach(() => {
wrapper.unmount();
});
it('passes through props not defined in `propTypes` to the root element.', () => {
const rootProps = wrapper.find('.lucid-SplitButton').props();
expect(wrapper.first().prop(['className'])).toContain('wut');
expect(wrapper.first().prop(['style'])).toMatchObject({
marginRight: 10,
});
expect(wrapper.first().prop(['data-testid'])).toBe(10);
// 'className', 'direction' and 'onSelect' are plucked from the pass through object
// but still appears becuase each one is also directly added to the root element as a prop
forEach(
['className', 'data-testid', 'direction', 'onSelect', 'children'],
(prop) => {
expect(has(rootProps, prop)).toBe(true);
}
);
});
it('omits the props defined in `propTypes` (plus, in addition, `initialState`, and `callbackId`) from the root element', () => {
const rootProps = wrapper.find('.lucid-SplitButton').props();
// Note that the SplitButton root element is not a DOM Element
// It is a DropMenu, so it should probably not omit `callbackId`
// However, that is the way that it has been working for years,
// so I did not modify it when I removed `omitProps` - NJY 18 Apr 22.
forEach(
['DropMenu', 'kind', 'size', 'type', 'initialState', 'callbackId'],
(prop) => {
expect(has(rootProps, prop)).toBe(false);
}
);
});
});
});
describe('click handlers', () => {
const handleClick = jest.fn();
const handleOtherClick = jest.fn();
const params = {
event: {
stopPropagation: jest.fn(),
},
};
const wrapper = shallow(
);
beforeEach(() => {
handleClick.mockClear();
handleOtherClick.mockClear();
params.event.stopPropagation.mockClear();
});
describe('primary button', () => {
it('should trigger `handleClick`', () => {
const primaryButtonWrapper = wrapper.find('Button').at(0);
primaryButtonWrapper.simulate('click', params);
expect(params.event.stopPropagation).toBeCalled();
expect(handleClick).toBeCalled();
expect(handleOtherClick).not.toBeCalled();
expect(handleClick.mock.calls[0][0]).toMatchSnapshot();
});
it('should not trigger `handleClick` when the dropdown button is clicked', () => {
const dropdownButtonWrapper = wrapper.find('Button').at(1);
dropdownButtonWrapper.simulate('click', params);
expect(params.event.stopPropagation).not.toBeCalled();
expect(handleClick).not.toBeCalled();
expect(handleOtherClick).not.toBeCalled();
});
});
describe('secondary buttons', () => {
it('should call the click handler for the second button when it is selected', () => {
wrapper.simulate('select', 0, { event: {} });
expect(handleClick).not.toBeCalled();
expect(handleOtherClick.mock.calls[0][0]).toMatchSnapshot();
});
it('should call the click handler for the third button when it is selected', () => {
wrapper.simulate('select', 1, { event: {} });
expect(handleClick).not.toBeCalled();
expect(handleOtherClick.mock.calls[0][0]).toMatchSnapshot();
});
it('should not trigger a handler for a button without an `onClick`', () => {
wrapper.simulate('select', 2, { event: {} });
expect(handleClick).not.toBeCalled();
expect(handleOtherClick).not.toBeCalled();
});
it('should not call the click handler for the second button when an invalid index is selected', () => {
wrapper.simulate('select', 3, { event: {} });
expect(handleClick).not.toBeCalled();
expect(handleOtherClick).not.toBeCalled();
});
});
});
});