1 files changed, 12 insertions, 27 deletions

diff --git a/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js b/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js
index 17abf409717..90c0e2d7827 100644
--- a/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js
+++ b/spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js
@@ -8,9 +8,9 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc
 
 describe('ClusterFormDropdown', () => {
   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 }];
+  const firstItem = { name: 'item 1', value: '1' };
+  const secondItem = { name: 'item 2', value: '2' };
+  const items = [firstItem, secondItem, { name: 'item 3', value: '3' }];
 
   beforeEach(() => {
     wrapper = shallowMount(ClusterFormDropdown);
@@ -44,10 +44,7 @@ describe('ClusterFormDropdown', () => {
       wrapper.setProps({ items });
 
       return wrapper.vm.$nextTick().then(() => {
-        wrapper
-          .findAll('.js-dropdown-item')
-          .at(1)
-          .trigger('click');
+        wrapper.findAll('.js-dropdown-item').at(1).trigger('click');
         return wrapper.vm.$nextTick();
       });
     });
@@ -58,24 +55,18 @@ describe('ClusterFormDropdown', () => {
   });
 
   describe('when multiple items are selected', () => {
-    const value = [1];
+    const value = ['1'];
 
     beforeEach(() => {
       wrapper.setProps({ items, multiple: true, value });
       return wrapper.vm
         .$nextTick()
         .then(() => {
-          wrapper
-            .findAll('.js-dropdown-item')
-            .at(0)
-            .trigger('click');
+          wrapper.findAll('.js-dropdown-item').at(0).trigger('click');
           return wrapper.vm.$nextTick();
         })
         .then(() => {
-          wrapper
-            .findAll('.js-dropdown-item')
-            .at(1)
-            .trigger('click');
+          wrapper.findAll('.js-dropdown-item').at(1).trigger('click');
           return wrapper.vm.$nextTick();
         });
     });
@@ -102,10 +93,7 @@ describe('ClusterFormDropdown', () => {
       wrapper.setProps({ items, multiple: true, value: null });
 
       return wrapper.vm.$nextTick().then(() => {
-        wrapper
-          .findAll('.js-dropdown-item')
-          .at(0)
-          .trigger('click');
+        wrapper.findAll('.js-dropdown-item').at(0).trigger('click');
 
         expect(wrapper.emitted('input')[0]).toEqual([[firstItem.value]]);
       });
@@ -116,7 +104,7 @@ describe('ClusterFormDropdown', () => {
     it('displays selected item custom label', () => {
       const labelProperty = 'customLabel';
       const label = 'Name';
-      const currentValue = 1;
+      const currentValue = '1';
       const customLabelItems = [{ [labelProperty]: label, value: currentValue }];
 
       wrapper.setProps({ labelProperty, items: customLabelItems, value: currentValue });
@@ -128,12 +116,9 @@ describe('ClusterFormDropdown', () => {
   });
 
   describe('when loading', () => {
-    it('dropdown button isLoading', () => {
-      wrapper.setProps({ loading: true });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(DropdownButton).props('isLoading')).toBe(true);
-      });
+    it('dropdown button isLoading', async () => {
+      await wrapper.setProps({ loading: true });
+      expect(wrapper.find(DropdownButton).props('isLoading')).toBe(true);
     });
   });