2 files changed, 82 insertions, 8 deletions
diff --git a/spec/frontend/issuable/bulk_update_sidebar/components/status_select_spec.js b/spec/frontend/issuable/bulk_update_sidebar/components/status_dropdown_spec.js
index 8ecbf41ce56..2f281cb88f9 100644
--- a/spec/frontend/issuable/bulk_update_sidebar/components/status_select_spec.js
+++ b/spec/frontend/issuable/bulk_update_sidebar/components/status_dropdown_spec.js
@@ -1,9 +1,9 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import StatusSelect from '~/issuable/bulk_update_sidebar/components/status_select.vue';
-import { ISSUE_STATUS_SELECT_OPTIONS } from '~/issuable/bulk_update_sidebar/constants';
+import StatusDropdown from '~/issuable/bulk_update_sidebar/components/status_dropdown.vue';
+import { statusDropdownOptions } from '~/issuable/bulk_update_sidebar/constants';
 
-describe('StatusSelect', () => {
+describe('SubscriptionsDropdown component', () => {
   let wrapper;
 
   const findDropdown = () => wrapper.findComponent(GlDropdown);
@@ -11,7 +11,7 @@ describe('StatusSelect', () => {
   const findHiddenInput = () => wrapper.find('input');
 
   function createComponent() {
-    wrapper = shallowMount(StatusSelect);
+    wrapper = shallowMount(StatusDropdown);
   }
 
   afterEach(() => {
@@ -45,14 +45,12 @@ describe('StatusSelect', () => {
 
     it('updates value of the hidden input', () => {
       expect(findHiddenInput().attributes('value')).toBe(
-        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].value,
+        statusDropdownOptions[selectItemAtIndex].value,
       );
     });
 
     it('updates the dropdown text prop', () => {
-      expect(findDropdown().props('text')).toBe(
-        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].text,
-      );
+      expect(findDropdown().props('text')).toBe(statusDropdownOptions[selectItemAtIndex].text);
     });
 
     it('sets dropdown item `is-checked` prop to `true`', () => {
diff --git a/spec/frontend/issuable/bulk_update_sidebar/components/subscriptions_dropdown_spec.js b/spec/frontend/issuable/bulk_update_sidebar/components/subscriptions_dropdown_spec.js
new file mode 100644
index 00000000000..56ef7a1ed39
--- /dev/null
+++ b/spec/frontend/issuable/bulk_update_sidebar/components/subscriptions_dropdown_spec.js
@@ -0,0 +1,76 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import SubscriptionsDropdown from '~/issuable/bulk_update_sidebar/components/subscriptions_dropdown.vue';
+import { subscriptionsDropdownOptions } from '~/issuable/bulk_update_sidebar/constants';
+
+describe('SubscriptionsDropdown component', () => {
+  let wrapper;
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findHiddenInput = () => wrapper.find('input');
+
+  function createComponent() {
+    wrapper = shallowMount(SubscriptionsDropdown);
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with no value selected', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('hidden input value is undefined', () => {
+      expect(findHiddenInput().attributes('value')).toBeUndefined();
+    });
+
+    it('renders default text', () => {
+      expect(findDropdown().props('text')).toBe(SubscriptionsDropdown.i18n.defaultDropdownText);
+    });
+
+    it('renders dropdown items with `is-checked` prop set to `false`', () => {
+      const dropdownItems = findAllDropdownItems();
+
+      expect(dropdownItems.at(0).props('isChecked')).toBe(false);
+      expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+    });
+  });
+
+  describe('when selecting a value', () => {
+    beforeEach(() => {
+      createComponent();
+      findAllDropdownItems().at(0).vm.$emit('click');
+    });
+
+    it('updates value of the hidden input', () => {
+      expect(findHiddenInput().attributes('value')).toBe(subscriptionsDropdownOptions[0].value);
+    });
+
+    it('updates the dropdown text prop', () => {
+      expect(findDropdown().props('text')).toBe(subscriptionsDropdownOptions[0].text);
+    });
+
+    it('sets dropdown item `is-checked` prop to `true`', () => {
+      const dropdownItems = findAllDropdownItems();
+
+      expect(dropdownItems.at(0).props('isChecked')).toBe(true);
+      expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+    });
+
+    describe('when selecting the value that is already selected', () => {
+      it('clears dropdown selection', async () => {
+        findAllDropdownItems().at(0).vm.$emit('click');
+        await nextTick();
+        const dropdownItems = findAllDropdownItems();
+
+        expect(dropdownItems.at(0).props('isChecked')).toBe(false);
+        expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+        expect(findDropdown().props('text')).toBe(SubscriptionsDropdown.i18n.defaultDropdownText);
+      });
+    });
+  });
+});