gitlab-org--gitlab-foss/spec/frontend/vue_shared/components/split_button_spec.js

118 lines
3 KiB
JavaScript
Raw Normal View History

import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import SplitButton from '~/vue_shared/components/split_button.vue';
const mockActionItems = [
{
eventName: 'concert',
title: 'professor',
description: 'very symphonic',
},
{
eventName: 'apocalypse',
title: 'captain',
description: 'warp drive',
},
];
describe('SplitButton', () => {
let wrapper;
const createComponent = propsData => {
wrapper = shallowMount(SplitButton, {
propsData,
});
};
const findDropdown = () => wrapper.find(GlDropdown);
const findDropdownItem = (index = 0) =>
findDropdown()
.findAll(GlDropdownItem)
.at(index);
const selectItem = index => {
findDropdownItem(index).vm.$emit('click');
return wrapper.vm.$nextTick();
};
const clickToggleButton = () => {
findDropdown().vm.$emit('click');
return wrapper.vm.$nextTick();
};
it('fails for empty actionItems', () => {
const actionItems = [];
expect(() => createComponent({ actionItems })).toThrow();
});
it('fails for single actionItems', () => {
const actionItems = [mockActionItems[0]];
expect(() => createComponent({ actionItems })).toThrow();
});
it('renders actionItems', () => {
createComponent({ actionItems: mockActionItems });
expect(wrapper.element).toMatchSnapshot();
});
describe('toggle button text', () => {
beforeEach(() => {
createComponent({ actionItems: mockActionItems });
});
it('defaults to first actionItems title', () => {
expect(findDropdown().props().text).toBe(mockActionItems[0].title);
});
it('changes to selected actionItems title', () =>
selectItem(1).then(() => {
expect(findDropdown().props().text).toBe(mockActionItems[1].title);
}));
});
describe('emitted event', () => {
let eventHandler;
let changeEventHandler;
beforeEach(() => {
createComponent({ actionItems: mockActionItems });
});
const addEventHandler = ({ eventName }) => {
eventHandler = jest.fn();
wrapper.vm.$once(eventName, () => eventHandler());
};
const addChangeEventHandler = () => {
changeEventHandler = jest.fn();
wrapper.vm.$once('change', item => changeEventHandler(item));
};
it('defaults to first actionItems event', () => {
addEventHandler(mockActionItems[0]);
return clickToggleButton().then(() => {
expect(eventHandler).toHaveBeenCalled();
});
});
it('changes to selected actionItems event', () =>
selectItem(1)
.then(() => addEventHandler(mockActionItems[1]))
.then(clickToggleButton)
.then(() => {
expect(eventHandler).toHaveBeenCalled();
}));
it('change to selected actionItem emits change event', () => {
addChangeEventHandler();
return selectItem(1).then(() => {
expect(changeEventHandler).toHaveBeenCalledWith(mockActionItems[1]);
});
});
});
});