120 lines
3.8 KiB
JavaScript
120 lines
3.8 KiB
JavaScript
import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
|
|
import { mount } from '@vue/test-utils';
|
|
import Vue, { nextTick } from 'vue';
|
|
import Vuex from 'vuex';
|
|
import CiEnvironmentsDropdown from '~/ci_variable_list/components/ci_environments_dropdown.vue';
|
|
|
|
Vue.use(Vuex);
|
|
|
|
describe('Ci environments dropdown', () => {
|
|
let wrapper;
|
|
let store;
|
|
|
|
const enterSearchTerm = (value) =>
|
|
wrapper.find('[data-testid="ci-environment-search"]').setValue(value);
|
|
|
|
const createComponent = (term) => {
|
|
store = new Vuex.Store({
|
|
getters: {
|
|
joinedEnvironments: () => ['dev', 'prod', 'staging'],
|
|
},
|
|
});
|
|
|
|
wrapper = mount(CiEnvironmentsDropdown, {
|
|
store,
|
|
propsData: {
|
|
value: term,
|
|
},
|
|
});
|
|
enterSearchTerm(term);
|
|
};
|
|
|
|
const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
|
|
const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
|
|
const findActiveIconByIndex = (index) => findDropdownItemByIndex(index).findComponent(GlIcon);
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
describe('No environments found', () => {
|
|
beforeEach(() => {
|
|
createComponent('stable');
|
|
});
|
|
|
|
it('renders create button with search term if environments do not contain search term', () => {
|
|
expect(findAllDropdownItems()).toHaveLength(2);
|
|
expect(findDropdownItemByIndex(1).text()).toBe('Create wildcard: stable');
|
|
});
|
|
|
|
it('renders empty results message', () => {
|
|
expect(findDropdownItemByIndex(0).text()).toBe('No matching results');
|
|
});
|
|
});
|
|
|
|
describe('Search term is empty', () => {
|
|
beforeEach(() => {
|
|
createComponent('');
|
|
});
|
|
|
|
it('renders all environments when search term is empty', () => {
|
|
expect(findAllDropdownItems()).toHaveLength(3);
|
|
expect(findDropdownItemByIndex(0).text()).toBe('dev');
|
|
expect(findDropdownItemByIndex(1).text()).toBe('prod');
|
|
expect(findDropdownItemByIndex(2).text()).toBe('staging');
|
|
});
|
|
|
|
it('should not display active checkmark on the inactive stage', () => {
|
|
expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('Environments found', () => {
|
|
beforeEach(async () => {
|
|
createComponent('prod');
|
|
await nextTick();
|
|
});
|
|
|
|
it('renders only the environment searched for', () => {
|
|
expect(findAllDropdownItems()).toHaveLength(1);
|
|
expect(findDropdownItemByIndex(0).text()).toBe('prod');
|
|
});
|
|
|
|
it('should not display create button', () => {
|
|
const environments = findAllDropdownItems().filter((env) => env.text().startsWith('Create'));
|
|
expect(environments).toHaveLength(0);
|
|
expect(findAllDropdownItems()).toHaveLength(1);
|
|
});
|
|
|
|
it('should not display empty results message', () => {
|
|
expect(wrapper.findComponent({ ref: 'noMatchingResults' }).exists()).toBe(false);
|
|
});
|
|
|
|
it('should display active checkmark if active', () => {
|
|
expect(findActiveIconByIndex(0).classes('gl-visibility-hidden')).toBe(false);
|
|
});
|
|
|
|
it('should clear the search term when showing the dropdown', () => {
|
|
wrapper.findComponent(GlDropdown).trigger('click');
|
|
|
|
expect(wrapper.find('[data-testid="ci-environment-search"]').text()).toBe('');
|
|
});
|
|
|
|
describe('Custom events', () => {
|
|
it('should emit selectEnvironment if an environment is clicked', () => {
|
|
findDropdownItemByIndex(0).vm.$emit('click');
|
|
expect(wrapper.emitted('selectEnvironment')).toEqual([['prod']]);
|
|
});
|
|
|
|
it('should emit createClicked if an environment is clicked', async () => {
|
|
createComponent('newscope');
|
|
|
|
await nextTick();
|
|
findDropdownItemByIndex(1).vm.$emit('click');
|
|
expect(wrapper.emitted('createClicked')).toEqual([['newscope']]);
|
|
});
|
|
});
|
|
});
|
|
});
|