2019-12-21 20:55:43 +05:30
|
|
|
import { GlLoadingIcon } from '@gitlab/ui';
|
2022-04-04 11:22:00 +05:30
|
|
|
import { shallowMount } from '@vue/test-utils';
|
|
|
|
import Vue, { nextTick } from 'vue';
|
2021-03-11 19:13:27 +05:30
|
|
|
import $ from 'jquery';
|
|
|
|
import Vuex from 'vuex';
|
2019-12-21 20:55:43 +05:30
|
|
|
import Dropdown from '~/ide/components/file_templates/dropdown.vue';
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
Vue.use(Vuex);
|
2019-12-21 20:55:43 +05:30
|
|
|
|
|
|
|
describe('IDE file templates dropdown component', () => {
|
|
|
|
let wrapper;
|
|
|
|
let element;
|
|
|
|
let fetchTemplateTypesMock;
|
|
|
|
|
|
|
|
const defaultProps = {
|
|
|
|
label: 'label',
|
|
|
|
};
|
|
|
|
|
|
|
|
const findItemButtons = () => wrapper.findAll('button');
|
|
|
|
const findSearch = () => wrapper.find('input[type="search"]');
|
|
|
|
const triggerDropdown = () => $(element).trigger('show.bs.dropdown');
|
|
|
|
|
|
|
|
const createComponent = ({ props, state } = {}) => {
|
|
|
|
fetchTemplateTypesMock = jest.fn();
|
|
|
|
const fakeStore = new Vuex.Store({
|
|
|
|
modules: {
|
|
|
|
fileTemplates: {
|
|
|
|
namespaced: true,
|
|
|
|
state: {
|
|
|
|
templates: [],
|
|
|
|
isLoading: false,
|
|
|
|
...state,
|
|
|
|
},
|
|
|
|
actions: {
|
|
|
|
fetchTemplateTypes: fetchTemplateTypesMock,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
wrapper = shallowMount(Dropdown, {
|
|
|
|
propsData: {
|
|
|
|
...defaultProps,
|
|
|
|
...props,
|
|
|
|
},
|
|
|
|
store: fakeStore,
|
|
|
|
});
|
|
|
|
|
|
|
|
({ element } = wrapper);
|
|
|
|
};
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('calls clickItem on click', async () => {
|
2019-12-21 20:55:43 +05:30
|
|
|
const itemData = { name: 'test.yml ' };
|
|
|
|
createComponent({ props: { data: [itemData] } });
|
|
|
|
const item = findItemButtons().at(0);
|
|
|
|
item.trigger('click');
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
expect(wrapper.emitted().click[0][0]).toBe(itemData);
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('renders dropdown title', () => {
|
|
|
|
const title = 'Test title';
|
|
|
|
createComponent({ props: { title } });
|
|
|
|
|
|
|
|
expect(wrapper.find('.dropdown-title').text()).toContain(title);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('in async mode', () => {
|
|
|
|
const defaultAsyncProps = { ...defaultProps, isAsyncData: true };
|
|
|
|
|
|
|
|
it('calls `fetchTemplateTypes` on dropdown event', () => {
|
|
|
|
createComponent({ props: defaultAsyncProps });
|
|
|
|
|
|
|
|
triggerDropdown();
|
|
|
|
|
|
|
|
expect(fetchTemplateTypesMock).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not call `fetchTemplateTypes` on dropdown event if destroyed', () => {
|
|
|
|
createComponent({ props: defaultAsyncProps });
|
|
|
|
wrapper.destroy();
|
|
|
|
|
|
|
|
triggerDropdown();
|
|
|
|
|
|
|
|
expect(fetchTemplateTypesMock).not.toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows loader when isLoading is true', () => {
|
|
|
|
createComponent({ props: defaultAsyncProps, state: { isLoading: true } });
|
|
|
|
|
2022-08-27 11:52:29 +05:30
|
|
|
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('renders templates', () => {
|
|
|
|
const templates = [{ name: 'file-1' }, { name: 'file-2' }];
|
|
|
|
createComponent({
|
|
|
|
props: { ...defaultAsyncProps, data: [{ name: 'should-never-appear ' }] },
|
|
|
|
state: {
|
|
|
|
templates,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
const items = findItemButtons();
|
|
|
|
|
2021-03-08 18:12:59 +05:30
|
|
|
expect(items.wrappers.map((x) => x.text())).toEqual(templates.map((x) => x.name));
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('searches template data', async () => {
|
2019-12-21 20:55:43 +05:30
|
|
|
const templates = [{ name: 'match 1' }, { name: 'other' }, { name: 'match 2' }];
|
|
|
|
const matches = ['match 1', 'match 2'];
|
|
|
|
createComponent({
|
|
|
|
props: { ...defaultAsyncProps, data: matches, searchable: true },
|
|
|
|
state: { templates },
|
|
|
|
});
|
|
|
|
findSearch().setValue('match');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
const items = findItemButtons();
|
2019-12-21 20:55:43 +05:30
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
expect(items.length).toBe(matches.length);
|
|
|
|
expect(items.wrappers.map((x) => x.text())).toEqual(matches);
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('does not render input when `searchable` is true & `showLoading` is true', () => {
|
|
|
|
createComponent({
|
|
|
|
props: { ...defaultAsyncProps, searchable: true },
|
|
|
|
state: { isLoading: true },
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(findSearch().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('in sync mode', () => {
|
|
|
|
it('renders props data', () => {
|
|
|
|
const data = [{ name: 'file-1' }, { name: 'file-2' }];
|
|
|
|
createComponent({
|
|
|
|
props: { data },
|
|
|
|
state: {
|
|
|
|
templates: [{ name: 'should-never-appear ' }],
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const items = findItemButtons();
|
|
|
|
|
|
|
|
expect(items.length).toBe(data.length);
|
2021-03-08 18:12:59 +05:30
|
|
|
expect(items.wrappers.map((x) => x.text())).toEqual(data.map((x) => x.name));
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('renders input when `searchable` is true', () => {
|
|
|
|
createComponent({ props: { searchable: true } });
|
|
|
|
|
|
|
|
expect(findSearch().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
it('searches data', async () => {
|
2019-12-21 20:55:43 +05:30
|
|
|
const data = [{ name: 'match 1' }, { name: 'other' }, { name: 'match 2' }];
|
|
|
|
const matches = ['match 1', 'match 2'];
|
|
|
|
createComponent({ props: { searchable: true, data } });
|
|
|
|
findSearch().setValue('match');
|
2022-04-04 11:22:00 +05:30
|
|
|
await nextTick();
|
|
|
|
const items = findItemButtons();
|
2019-12-21 20:55:43 +05:30
|
|
|
|
2022-04-04 11:22:00 +05:30
|
|
|
expect(items.length).toBe(matches.length);
|
|
|
|
expect(items.wrappers.map((x) => x.text())).toEqual(matches);
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|