debian-mirror-gitlab/spec/frontend/vue_shared/components/split_button_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

116 lines
3 KiB
JavaScript
Raw Normal View History

2021-01-03 14:25:43 +05:30
import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
2019-12-26 22:10:19 +05:30
import { shallowMount } from '@vue/test-utils';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2019-12-26 22:10:19 +05:30
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;
2021-03-08 18:12:59 +05:30
const createComponent = (propsData) => {
2019-12-26 22:10:19 +05:30
wrapper = shallowMount(SplitButton, {
propsData,
});
};
2021-01-03 14:25:43 +05:30
const findDropdown = () => wrapper.find(GlDropdown);
2021-03-08 18:12:59 +05:30
const findDropdownItem = (index = 0) => findDropdown().findAll(GlDropdownItem).at(index);
2022-04-04 11:22:00 +05:30
const selectItem = async (index) => {
2019-12-26 22:10:19 +05:30
findDropdownItem(index).vm.$emit('click');
2022-04-04 11:22:00 +05:30
await nextTick();
2019-12-26 22:10:19 +05:30
};
2022-04-04 11:22:00 +05:30
const clickToggleButton = async () => {
2019-12-26 22:10:19 +05:30
findDropdown().vm.$emit('click');
2022-04-04 11:22:00 +05:30
await nextTick();
2019-12-26 22:10:19 +05:30
};
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;
2020-03-13 15:44:24 +05:30
let changeEventHandler;
2019-12-26 22:10:19 +05:30
beforeEach(() => {
createComponent({ actionItems: mockActionItems });
});
const addEventHandler = ({ eventName }) => {
eventHandler = jest.fn();
wrapper.vm.$once(eventName, () => eventHandler());
};
2020-03-13 15:44:24 +05:30
const addChangeEventHandler = () => {
changeEventHandler = jest.fn();
2021-03-08 18:12:59 +05:30
wrapper.vm.$once('change', (item) => changeEventHandler(item));
2020-03-13 15:44:24 +05:30
};
2019-12-26 22:10:19 +05:30
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();
}));
2020-03-13 15:44:24 +05:30
it('change to selected actionItem emits change event', () => {
addChangeEventHandler();
return selectItem(1).then(() => {
expect(changeEventHandler).toHaveBeenCalledWith(mockActionItems[1]);
});
});
2019-12-26 22:10:19 +05:30
});
});