debian-mirror-gitlab/spec/frontend/ide/components/file_templates/dropdown_spec.js

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

168 lines
4.7 KiB
JavaScript
Raw Normal View History

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
});
});
});