2023-04-23 21:23:45 +05:30
|
|
|
import { GlDisclosureDropdown } from '@gitlab/ui';
|
2023-06-20 00:43:36 +05:30
|
|
|
import { mountExtended } from 'helpers/vue_test_utils_helper';
|
|
|
|
|
2023-04-23 21:23:45 +05:30
|
|
|
import HookTestDropdown from '~/webhooks/components/test_dropdown.vue';
|
|
|
|
|
|
|
|
const mockItems = [
|
|
|
|
{
|
|
|
|
text: 'Foo',
|
|
|
|
href: '#foo',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
describe('HookTestDropdown', () => {
|
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
const findDisclosure = () => wrapper.findComponent(GlDisclosureDropdown);
|
|
|
|
|
|
|
|
const createComponent = (props) => {
|
2023-06-20 00:43:36 +05:30
|
|
|
wrapper = mountExtended(HookTestDropdown, {
|
2023-04-23 21:23:45 +05:30
|
|
|
propsData: {
|
|
|
|
items: mockItems,
|
|
|
|
...props,
|
|
|
|
},
|
2023-06-20 00:43:36 +05:30
|
|
|
attachTo: document.body,
|
2023-04-23 21:23:45 +05:30
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
it('passes the expected props to GlDisclosureDropdown', () => {
|
|
|
|
const size = 'small';
|
|
|
|
createComponent({ size });
|
|
|
|
|
|
|
|
expect(findDisclosure().props()).toMatchObject({
|
|
|
|
items: mockItems.map((item) => ({
|
|
|
|
text: item.text,
|
|
|
|
})),
|
|
|
|
size,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('clicking on an item', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
createComponent();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('triggers @rails/ujs data-method=post handling', () => {
|
|
|
|
const railsEventPromise = new Promise((resolve) => {
|
|
|
|
document.addEventListener('click', ({ target }) => {
|
|
|
|
expect(target.tagName).toBe('A');
|
|
|
|
expect(target.dataset.method).toBe('post');
|
|
|
|
expect(target.getAttribute('href')).toBe(mockItems[0].href);
|
|
|
|
resolve();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2023-06-20 00:43:36 +05:30
|
|
|
wrapper.findByTestId('disclosure-dropdown-item').find('a').trigger('click');
|
2023-04-23 21:23:45 +05:30
|
|
|
|
|
|
|
return railsEventPromise;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|