107 lines
3.1 KiB
JavaScript
107 lines
3.1 KiB
JavaScript
|
import CreateItemDropdown from '~/create_item_dropdown';
|
||
|
|
|
||
|
|
const DROPDOWN_ITEM_DATA = [{
|
||
|
|
title: 'one',
|
||
|
|
id: 'one',
|
||
|
|
text: 'one',
|
||
|
|
}, {
|
||
|
|
title: 'two',
|
||
|
|
id: 'two',
|
||
|
|
text: 'two',
|
||
|
|
}, {
|
||
|
|
title: 'three',
|
||
|
|
id: 'three',
|
||
|
|
text: 'three',
|
||
|
|
}];
|
||
|
|
|
||
|
|
describe('CreateItemDropdown', () => {
|
||
|
|
preloadFixtures('static/create_item_dropdown.html.raw');
|
||
|
|
|
||
|
|
let $wrapperEl;
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
loadFixtures('static/create_item_dropdown.html.raw');
|
||
|
|
$wrapperEl = $('.js-create-item-dropdown-fixture-root');
|
||
|
|
|
||
|
|
// eslint-disable-next-line no-new
|
||
|
|
new CreateItemDropdown({
|
||
|
|
$dropdown: $wrapperEl.find('.js-dropdown-menu-toggle'),
|
||
|
|
defaultToggleLabel: 'All variables',
|
||
|
|
fieldName: 'variable[environment]',
|
||
|
|
getData: (term, callback) => {
|
||
|
|
callback(DROPDOWN_ITEM_DATA);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
$wrapperEl.remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should have a dropdown item for each piece of data', () => {
|
||
|
|
// Get the data in the dropdown
|
||
|
|
$('.js-dropdown-menu-toggle').click();
|
||
|
|
|
||
|
|
const $itemEls = $wrapperEl.find('.js-dropdown-content a');
|
||
|
|
expect($itemEls.length).toEqual(DROPDOWN_ITEM_DATA.length);
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('created items', () => {
|
||
|
|
const NEW_ITEM_TEXT = 'foobarbaz';
|
||
|
|
|
||
|
|
function createItemAndClearInput(text) {
|
||
|
|
// Filter for the new item
|
||
|
|
$wrapperEl.find('.dropdown-input-field')
|
||
|
|
.val(text)
|
||
|
|
.trigger('input');
|
||
|
|
|
||
|
|
// Create the new item
|
||
|
|
const $createButton = $wrapperEl.find('.js-dropdown-create-new-item');
|
||
|
|
$createButton.click();
|
||
|
|
|
||
|
|
// Clear out the filter
|
||
|
|
$wrapperEl.find('.dropdown-input-field')
|
||
|
|
.val('')
|
||
|
|
.trigger('input');
|
||
|
|
}
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
// Open the dropdown
|
||
|
|
$('.js-dropdown-menu-toggle').click();
|
||
|
|
|
||
|
|
// Filter for the new item
|
||
|
|
$wrapperEl.find('.dropdown-input-field')
|
||
|
|
.val(NEW_ITEM_TEXT)
|
||
|
|
.trigger('input');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('create new item button should include the filter text', () => {
|
||
|
|
expect($wrapperEl.find('.js-dropdown-create-new-item code').text()).toEqual(NEW_ITEM_TEXT);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should update the dropdown with the newly created item', () => {
|
||
|
|
// Create the new item
|
||
|
|
const $createButton = $wrapperEl.find('.js-dropdown-create-new-item');
|
||
|
|
$createButton.click();
|
||
|
|
|
||
|
|
expect($wrapperEl.find('.dropdown-toggle-text').text()).toEqual(NEW_ITEM_TEXT);
|
||
|
|
expect($wrapperEl.find('input[name="variable[environment]"]').val()).toEqual(NEW_ITEM_TEXT);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should include newly created item in dropdown list', () => {
|
||
|
|
createItemAndClearInput(NEW_ITEM_TEXT);
|
||
|
|
|
||
|
|
const $itemEls = $wrapperEl.find('.js-dropdown-content a');
|
||
|
|
expect($itemEls.length).toEqual(1 + DROPDOWN_ITEM_DATA.length);
|
||
|
|
expect($($itemEls.get(DROPDOWN_ITEM_DATA.length)).text()).toEqual(NEW_ITEM_TEXT);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not duplicate an item when trying to create an existing item', () => {
|
||
|
|
createItemAndClearInput(DROPDOWN_ITEM_DATA[0].text);
|
||
|
|
|
||
|
|
const $itemEls = $wrapperEl.find('.js-dropdown-content a');
|
||
|
|
expect($itemEls.length).toEqual(DROPDOWN_ITEM_DATA.length);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|