Do not register null when selecting multiple items

app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue

 <script>
+import { isNil } from 'lodash';
 import $ from 'jquery';
 import { GlIcon } from '@gitlab/ui';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
-const toArray = value => [].concat(value);
+const toArray = value => (isNil(value) ? [] : [].concat(value));
 const itemsProp = (items, prop) => items.map(item => item[prop]);
 const defaultSearchFn = (searchQuery, labelProp) => item =>
   item[labelProp].toLowerCase().indexOf(searchQuery) > -1;

spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js

@@ -7,22 +7,22 @@ import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 
 describe('ClusterFormDropdown', () => {
-  let vm;
+  let wrapper;
   const firstItem = { name: 'item 1', value: 1 };
   const secondItem = { name: 'item 2', value: 2 };
   const items = [firstItem, secondItem, { name: 'item 3', value: 3 }];
 
   beforeEach(() => {
-    vm = shallowMount(ClusterFormDropdown);
+    wrapper = shallowMount(ClusterFormDropdown);
   });
-  afterEach(() => vm.destroy());
+  afterEach(() => wrapper.destroy());
 
   describe('when initial value is provided', () => {
     it('sets selectedItem to initial value', () => {
-      vm.setProps({ items, value: secondItem.value });
+      wrapper.setProps({ items, value: secondItem.value });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
       });
     });
   });
@@ -31,28 +31,29 @@ describe('ClusterFormDropdown', () => {
     it('displays placeholder text', () => {
       const placeholder = 'placeholder';
 
-      vm.setProps({ placeholder });
+      wrapper.setProps({ placeholder });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).props('toggleText')).toEqual(placeholder);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(placeholder);
       });
     });
   });
 
   describe('when an item is selected', () => {
     beforeEach(() => {
-      vm.setProps({ items });
+      wrapper.setProps({ items });
 
-      return vm.vm.$nextTick().then(() => {
-        vm.findAll('.js-dropdown-item')
+      return wrapper.vm.$nextTick().then(() => {
+        wrapper
+          .findAll('.js-dropdown-item')
           .at(1)
           .trigger('click');
-        return vm.vm.$nextTick();
+        return wrapper.vm.$nextTick();
       });
     });
 
     it('emits input event with selected item', () => {
-      expect(vm.emitted('input')[0]).toEqual([secondItem.value]);
+      expect(wrapper.emitted('input')[0]).toEqual([secondItem.value]);
     });
   });
 
@@ -60,37 +61,54 @@ describe('ClusterFormDropdown', () => {
     const value = [1];
 
     beforeEach(() => {
-      vm.setProps({ items, multiple: true, value });
-      return vm.vm
+      wrapper.setProps({ items, multiple: true, value });
+      return wrapper.vm
         .$nextTick()
         .then(() => {
-          vm.findAll('.js-dropdown-item')
+          wrapper
+            .findAll('.js-dropdown-item')
             .at(0)
             .trigger('click');
-          return vm.vm.$nextTick();
+          return wrapper.vm.$nextTick();
         })
         .then(() => {
-          vm.findAll('.js-dropdown-item')
+          wrapper
+            .findAll('.js-dropdown-item')
             .at(1)
             .trigger('click');
-          return vm.vm.$nextTick();
+          return wrapper.vm.$nextTick();
         });
     });
 
     it('emits input event with an array of selected items', () => {
-      expect(vm.emitted('input')[1]).toEqual([[firstItem.value, secondItem.value]]);
+      expect(wrapper.emitted('input')[1]).toEqual([[firstItem.value, secondItem.value]]);
     });
   });
 
   describe('when multiple items can be selected', () => {
     beforeEach(() => {
-      vm.setProps({ items, multiple: true, value: firstItem.value });
-      return vm.vm.$nextTick();
+      wrapper.setProps({ items, multiple: true, value: firstItem.value });
+      return wrapper.vm.$nextTick();
     });
 
     it('displays a checked GlIcon next to the item', () => {
-      expect(vm.find(GlIcon).is('.invisible')).toBe(false);
-      expect(vm.find(GlIcon).props('name')).toBe('mobile-issue-close');
+      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]]);
+      });
     });
   });
 
@@ -101,20 +119,20 @@ describe('ClusterFormDropdown', () => {
       const currentValue = 1;
       const customLabelItems = [{ [labelProperty]: label, value: currentValue }];
 
-      vm.setProps({ labelProperty, items: customLabelItems, value: currentValue });
+      wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).props('toggleText')).toEqual(label);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(label);
       });
     });
   });
 
   describe('when loading', () => {
     it('dropdown button isLoading', () => {
-      vm.setProps({ loading: true });
+      wrapper.setProps({ loading: true });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).props('isLoading')).toBe(true);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).props('isLoading')).toBe(true);
       });
     });
   });
@@ -123,20 +141,20 @@ describe('ClusterFormDropdown', () => {
     it('uses loading text as toggle button text', () => {
       const loadingText = 'loading text';
 
-      vm.setProps({ loading: true, loadingText });
+      wrapper.setProps({ loading: true, loadingText });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).props('toggleText')).toEqual(loadingText);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).props('toggleText')).toEqual(loadingText);
       });
     });
   });
 
   describe('when disabled', () => {
     it('dropdown button isDisabled', () => {
-      vm.setProps({ disabled: true });
+      wrapper.setProps({ disabled: true });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).props('isDisabled')).toBe(true);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).props('isDisabled')).toBe(true);
       });
     });
   });
@@ -145,20 +163,20 @@ describe('ClusterFormDropdown', () => {
     it('uses disabled text as toggle button text', () => {
       const disabledText = 'disabled text';
 
-      vm.setProps({ disabled: true, disabledText });
+      wrapper.setProps({ disabled: true, disabledText });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).props('toggleText')).toBe(disabledText);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).props('toggleText')).toBe(disabledText);
       });
     });
   });
 
   describe('when has errors', () => {
     it('sets border-danger class selector to dropdown toggle', () => {
-      vm.setProps({ hasErrors: true });
+      wrapper.setProps({ hasErrors: true });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find(DropdownButton).classes('border-danger')).toBe(true);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(DropdownButton).classes('border-danger')).toBe(true);
       });
     });
   });
@@ -167,10 +185,10 @@ describe('ClusterFormDropdown', () => {
     it('displays error message', () => {
       const errorMessage = 'error message';
 
-      vm.setProps({ hasErrors: true, errorMessage });
+      wrapper.setProps({ hasErrors: true, errorMessage });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage);
       });
     });
   });
@@ -179,10 +197,10 @@ describe('ClusterFormDropdown', () => {
     it('displays empty text', () => {
       const emptyText = 'error message';
 
-      vm.setProps({ items: [], emptyText });
+      wrapper.setProps({ items: [], emptyText });
 
-      return vm.vm.$nextTick().then(() => {
-        expect(vm.find('.js-empty-text').text()).toEqual(emptyText);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.js-empty-text').text()).toEqual(emptyText);
       });
     });
   });
@@ -190,34 +208,36 @@ describe('ClusterFormDropdown', () => {
   it('displays search field placeholder', () => {
     const searchFieldPlaceholder = 'Placeholder';
 
-    vm.setProps({ searchFieldPlaceholder });
+    wrapper.setProps({ searchFieldPlaceholder });
 
-    return vm.vm.$nextTick().then(() => {
-      expect(vm.find(DropdownSearchInput).props('placeholderText')).toEqual(searchFieldPlaceholder);
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.find(DropdownSearchInput).props('placeholderText')).toEqual(
+        searchFieldPlaceholder,
+      );
     });
   });
 
   it('it filters results by search query', () => {
     const searchQuery = secondItem.name;
 
-    vm.setProps({ items });
-    vm.setData({ searchQuery });
+    wrapper.setProps({ items });
+    wrapper.setData({ searchQuery });
 
-    return vm.vm.$nextTick().then(() => {
-      expect(vm.findAll('.js-dropdown-item').length).toEqual(1);
-      expect(vm.find('.js-dropdown-item').text()).toEqual(secondItem.name);
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.findAll('.js-dropdown-item').length).toEqual(1);
+      expect(wrapper.find('.js-dropdown-item').text()).toEqual(secondItem.name);
     });
   });
 
   it('focuses dropdown search input when dropdown is displayed', () => {
-    const dropdownEl = vm.find('.dropdown').element;
+    const dropdownEl = wrapper.find('.dropdown').element;
 
-    expect(vm.find(DropdownSearchInput).props('focused')).toBe(false);
+    expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(false);
 
     $(dropdownEl).trigger('shown.bs.dropdown');
 
-    return vm.vm.$nextTick(() => {
-      expect(vm.find(DropdownSearchInput).props('focused')).toBe(true);
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.find(DropdownSearchInput).props('focused')).toBe(true);
     });
   });
 });