2019-12-04 20:38:33 +05:30
|
|
|
import { shallowMount } from '@vue/test-utils';
|
2020-01-01 13:55:28 +05:30
|
|
|
import $ from 'jquery';
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-01-01 13:55:28 +05:30
|
|
|
import { GlIcon } from '@gitlab/ui';
|
2020-03-13 15:44:24 +05:30
|
|
|
import ClusterFormDropdown from '~/create_cluster/components/cluster_form_dropdown.vue';
|
2019-12-04 20:38:33 +05:30
|
|
|
import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
|
|
|
|
import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
|
|
|
|
|
|
|
|
describe('ClusterFormDropdown', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
let wrapper;
|
2019-12-21 20:55:43 +05:30
|
|
|
const firstItem = { name: 'item 1', value: 1 };
|
|
|
|
const secondItem = { name: 'item 2', value: 2 };
|
|
|
|
const items = [firstItem, secondItem, { name: 'item 3', value: 3 }];
|
2019-12-04 20:38:33 +05:30
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper = shallowMount(ClusterFormDropdown);
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
2020-04-08 14:13:33 +05:30
|
|
|
afterEach(() => wrapper.destroy());
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2019-12-21 20:55:43 +05:30
|
|
|
describe('when initial value is provided', () => {
|
|
|
|
it('sets selectedItem to initial value', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ items, value: secondItem.value });
|
2020-03-13 15:44:24 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-21 20:55:43 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-12-04 20:38:33 +05:30
|
|
|
describe('when no item is selected', () => {
|
|
|
|
it('displays placeholder text', () => {
|
|
|
|
const placeholder = 'placeholder';
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ placeholder });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(placeholder);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when an item is selected', () => {
|
|
|
|
beforeEach(() => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ items });
|
2020-03-13 15:44:24 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
wrapper
|
|
|
|
.findAll('.js-dropdown-item')
|
2020-03-13 15:44:24 +05:30
|
|
|
.at(1)
|
|
|
|
.trigger('click');
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick();
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
|
2019-12-26 22:10:19 +05:30
|
|
|
it('emits input event with selected item', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(wrapper.emitted('input')[0]).toEqual([secondItem.value]);
|
2019-12-26 22:10:19 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when multiple items are selected', () => {
|
|
|
|
const value = [1];
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ items, multiple: true, value });
|
|
|
|
return wrapper.vm
|
2020-03-13 15:44:24 +05:30
|
|
|
.$nextTick()
|
|
|
|
.then(() => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper
|
|
|
|
.findAll('.js-dropdown-item')
|
2020-03-13 15:44:24 +05:30
|
|
|
.at(0)
|
|
|
|
.trigger('click');
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick();
|
2020-03-13 15:44:24 +05:30
|
|
|
})
|
|
|
|
.then(() => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper
|
|
|
|
.findAll('.js-dropdown-item')
|
2020-03-13 15:44:24 +05:30
|
|
|
.at(1)
|
|
|
|
.trigger('click');
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick();
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-26 22:10:19 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('emits input event with an array of selected items', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(wrapper.emitted('input')[1]).toEqual([[firstItem.value, secondItem.value]]);
|
2019-12-26 22:10:19 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when multiple items can be selected', () => {
|
|
|
|
beforeEach(() => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ items, multiple: true, value: firstItem.value });
|
|
|
|
return wrapper.vm.$nextTick();
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
|
2019-12-26 22:10:19 +05:30
|
|
|
it('displays a checked GlIcon next to the item', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(wrapper.find(GlIcon).is('.invisible')).toBe(false);
|
|
|
|
expect(wrapper.find(GlIcon).props('name')).toBe('mobile-issue-close');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when multiple values can be selected and initial value is null', () => {
|
|
|
|
it('emits input event with an array of a single selected item', () => {
|
|
|
|
wrapper.setProps({ items, multiple: true, value: null });
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
wrapper
|
|
|
|
.findAll('.js-dropdown-item')
|
|
|
|
.at(0)
|
|
|
|
.trigger('click');
|
|
|
|
|
|
|
|
expect(wrapper.emitted('input')[0]).toEqual([[firstItem.value]]);
|
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when an item is selected and has a custom label property', () => {
|
|
|
|
it('displays selected item custom label', () => {
|
|
|
|
const labelProperty = 'customLabel';
|
2019-12-26 22:10:19 +05:30
|
|
|
const label = 'Name';
|
|
|
|
const currentValue = 1;
|
|
|
|
const customLabelItems = [{ [labelProperty]: label, value: currentValue }];
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(label);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when loading', () => {
|
|
|
|
it('dropdown button isLoading', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ loading: true });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).props('isLoading')).toBe(true);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when loading and loadingText is provided', () => {
|
|
|
|
it('uses loading text as toggle button text', () => {
|
|
|
|
const loadingText = 'loading text';
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ loading: true, loadingText });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(loadingText);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when disabled', () => {
|
|
|
|
it('dropdown button isDisabled', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ disabled: true });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).props('isDisabled')).toBe(true);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when disabled and disabledText is provided', () => {
|
|
|
|
it('uses disabled text as toggle button text', () => {
|
|
|
|
const disabledText = 'disabled text';
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ disabled: true, disabledText });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).props('toggleText')).toBe(disabledText);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when has errors', () => {
|
|
|
|
it('sets border-danger class selector to dropdown toggle', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ hasErrors: true });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownButton).classes('border-danger')).toBe(true);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when has errors and an error message', () => {
|
|
|
|
it('displays error message', () => {
|
|
|
|
const errorMessage = 'error message';
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ hasErrors: true, errorMessage });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when no results are available', () => {
|
|
|
|
it('displays empty text', () => {
|
|
|
|
const emptyText = 'error message';
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ items: [], emptyText });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find('.js-empty-text').text()).toEqual(emptyText);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays search field placeholder', () => {
|
|
|
|
const searchFieldPlaceholder = 'Placeholder';
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ searchFieldPlaceholder });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(DropdownSearchInput).props('placeholderText')).toEqual(
|
|
|
|
searchFieldPlaceholder,
|
|
|
|
);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('it filters results by search query', () => {
|
2019-12-21 20:55:43 +05:30
|
|
|
const searchQuery = secondItem.name;
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
wrapper.setProps({ items });
|
|
|
|
wrapper.setData({ searchQuery });
|
2019-12-04 20:38:33 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.findAll('.js-dropdown-item').length).toEqual(1);
|
|
|
|
expect(wrapper.find('.js-dropdown-item').text()).toEqual(secondItem.name);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|
2020-01-01 13:55:28 +05:30
|
|
|
|
|
|
|
it('focuses dropdown search input when dropdown is displayed', () => {
|
2020-04-08 14:13:33 +05:30
|
|
|
const dropdownEl = wrapper.find('.dropdown').element;
|
2020-01-01 13:55:28 +05:30
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(false);
|
2020-01-01 13:55:28 +05:30
|
|
|
|
|
|
|
$(dropdownEl).trigger('shown.bs.dropdown');
|
|
|
|
|
2020-04-08 14:13:33 +05:30
|
|
|
return wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(true);
|
2020-03-13 15:44:24 +05:30
|
|
|
});
|
2020-01-01 13:55:28 +05:30
|
|
|
});
|
2019-12-04 20:38:33 +05:30
|
|
|
});
|