From ea04d1ab3a77f737181ddf84de840330158bbf89 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Thu, 18 Jan 2018 02:02:21 -0600 Subject: Fix duplicate item in protected branch/tag dropdown Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/42157 Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/41989 --- spec/javascripts/create_item_dropdown_spec.js | 106 +++++++++++++++++++++ .../fixtures/create_item_dropdown.html.haml | 13 +++ 2 files changed, 119 insertions(+) create mode 100644 spec/javascripts/create_item_dropdown_spec.js create mode 100644 spec/javascripts/fixtures/create_item_dropdown.html.haml (limited to 'spec') diff --git a/spec/javascripts/create_item_dropdown_spec.js b/spec/javascripts/create_item_dropdown_spec.js new file mode 100644 index 00000000000..c8b00a4f553 --- /dev/null +++ b/spec/javascripts/create_item_dropdown_spec.js @@ -0,0 +1,106 @@ +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); + }); + }); +}); diff --git a/spec/javascripts/fixtures/create_item_dropdown.html.haml b/spec/javascripts/fixtures/create_item_dropdown.html.haml new file mode 100644 index 00000000000..d4d91b93caf --- /dev/null +++ b/spec/javascripts/fixtures/create_item_dropdown.html.haml @@ -0,0 +1,13 @@ +.js-create-item-dropdown-fixture-root + %input{ name: 'variable[environment]', type: 'hidden' } + = dropdown_tag('some label', + options: { toggle_class: 'js-dropdown-menu-toggle', + content_class: 'js-dropdown-content', + filter: true, + dropdown_class: "dropdown-menu-selectable", + footer_content: true }) do + %ul.dropdown-footer-list + %li + %button{ class: "dropdown-create-new-item-button js-dropdown-create-new-item" } + Create wildcard + %code -- cgit v1.2.3