1 files changed, 38 insertions, 12 deletions

diff --git a/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js b/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js
index 74d88d9f34c..8820ec7ae63 100644
--- a/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js
+++ b/spec/frontend/boards/components/sidebar/board_sidebar_milestone_select_spec.js
@@ -1,8 +1,8 @@
+import { GlLoadingIcon, GlDropdown } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
 import { mockMilestone as TEST_MILESTONE } from 'jest/boards/mock_data';
-import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue';
 import BoardEditableItem from '~/boards/components/sidebar/board_editable_item.vue';
+import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue';
 import { createStore } from '~/boards/stores';
 import createFlash from '~/flash';
 
@@ -20,7 +20,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
     wrapper = null;
   });
 
-  const createWrapper = ({ milestone = null } = {}) => {
+  const createWrapper = ({ milestone = null, loading = false } = {}) => {
     store = createStore();
     store.state.issues = { [TEST_ISSUE.id]: { ...TEST_ISSUE, milestone } };
     store.state.activeId = TEST_ISSUE.id;
@@ -38,7 +38,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
       },
       mocks: {
         $apollo: {
-          loading: false,
+          loading,
         },
       },
     });
@@ -46,10 +46,42 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
 
   const findCollapsed = () => wrapper.find('[data-testid="collapsed-content"]');
   const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findBoardEditableItem = () => wrapper.find(BoardEditableItem);
   const findDropdownItem = () => wrapper.find('[data-testid="milestone-item"]');
   const findUnsetMilestoneItem = () => wrapper.find('[data-testid="no-milestone-item"]');
   const findNoMilestonesFoundItem = () => wrapper.find('[data-testid="no-milestones-found"]');
 
+  describe('when not editing', () => {
+    it('opens the milestone dropdown on clicking edit', async () => {
+      createWrapper();
+      wrapper.vm.$refs.dropdown.show = jest.fn();
+
+      await findBoardEditableItem().vm.$emit('open');
+
+      expect(wrapper.vm.$refs.dropdown.show).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when editing', () => {
+    beforeEach(() => {
+      createWrapper();
+      jest.spyOn(wrapper.vm.$refs.sidebarItem, 'collapse');
+    });
+
+    it('collapses BoardEditableItem on clicking edit', async () => {
+      await findBoardEditableItem().vm.$emit('close');
+
+      expect(wrapper.vm.$refs.sidebarItem.collapse).toHaveBeenCalledTimes(1);
+    });
+
+    it('collapses BoardEditableItem on hiding dropdown', async () => {
+      await findDropdown().vm.$emit('hide');
+
+      expect(wrapper.vm.$refs.sidebarItem.collapse).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it('renders "None" when no milestone is selected', () => {
     createWrapper();
 
@@ -63,12 +95,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
   });
 
   it('shows loader while Apollo is loading', async () => {
-    createWrapper({ milestone: TEST_MILESTONE });
-
-    expect(findLoader().exists()).toBe(false);
-
-    wrapper.vm.$apollo.loading = true;
-    await wrapper.vm.$nextTick();
+    createWrapper({ milestone: TEST_MILESTONE, loading: true });
 
     expect(findLoader().exists()).toBe(true);
   });
@@ -76,8 +103,7 @@ describe('~/boards/components/sidebar/board_sidebar_milestone_select.vue', () =>
   it('shows message when error or no milestones found', async () => {
     createWrapper();
 
-    wrapper.setData({ milestones: [] });
-    await wrapper.vm.$nextTick();
+    await wrapper.setData({ milestones: [] });
 
     expect(findNoMilestonesFoundItem().text()).toBe('No milestones found');
   });