1 files changed, 91 insertions, 83 deletions
diff --git a/spec/frontend/boards/components/board_settings_sidebar_spec.js b/spec/frontend/boards/components/board_settings_sidebar_spec.js
index f39adc0fc49..12c9431f2d4 100644
--- a/spec/frontend/boards/components/board_settings_sidebar_spec.js
+++ b/spec/frontend/boards/components/board_settings_sidebar_spec.js
@@ -6,8 +6,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlDrawer, GlLabel } from '@gitlab/ui';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
 import boardsStore from '~/boards/stores/boards_store';
+import { createStore } from '~/boards/stores';
 import sidebarEventHub from '~/sidebar/event_hub';
-import { inactiveId } from '~/boards/constants';
+import { inactiveId, LIST } from '~/boards/constants';
 
 const localVue = createLocalVue();
 
@@ -16,19 +17,12 @@ localVue.use(Vuex);
 describe('BoardSettingsSidebar', () => {
   let wrapper;
   let mock;
-  let storeActions;
+  let store;
   const labelTitle = 'test';
   const labelColor = '#FFFF';
   const listId = 1;
 
-  const createComponent = (state = { activeId: inactiveId }, actions = {}) => {
-    storeActions = actions;
-
-    const store = new Vuex.Store({
-      state,
-      actions: storeActions,
-    });
-
+  const createComponent = () => {
     wrapper = shallowMount(BoardSettingsSidebar, {
       store,
       localVue,
@@ -38,6 +32,9 @@ describe('BoardSettingsSidebar', () => {
   const findDrawer = () => wrapper.find(GlDrawer);
 
   beforeEach(() => {
+    store = createStore();
+    store.state.activeId = inactiveId;
+    store.state.sidebarType = LIST;
     boardsStore.create();
   });
 
@@ -46,114 +43,125 @@ describe('BoardSettingsSidebar', () => {
     wrapper.destroy();
   });
 
-  it('finds a GlDrawer component', () => {
-    createComponent();
+  describe('when sidebarType is "list"', () => {
+    it('finds a GlDrawer component', () => {
+      createComponent();
 
-    expect(findDrawer().exists()).toBe(true);
-  });
+      expect(findDrawer().exists()).toBe(true);
+    });
 
-  describe('on close', () => {
-    it('calls closeSidebar', async () => {
-      const spy = jest.fn();
-      createComponent({ activeId: inactiveId }, { setActiveId: spy });
+    describe('on close', () => {
+      it('closes the sidebar', async () => {
+        createComponent();
 
-      findDrawer().vm.$emit('close');
+        findDrawer().vm.$emit('close');
 
-      await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
 
-      expect(storeActions.setActiveId).toHaveBeenCalledWith(
-        expect.anything(),
-        inactiveId,
-        undefined,
-      );
-    });
+        expect(wrapper.find(GlDrawer).exists()).toBe(false);
+      });
 
-    it('calls closeSidebar on sidebar.closeAll event', async () => {
-      createComponent({ activeId: inactiveId }, { setActiveId: jest.fn() });
+      it('closes the sidebar when emitting the correct event', async () => {
+        createComponent();
 
-      sidebarEventHub.$emit('sidebar.closeAll');
+        sidebarEventHub.$emit('sidebar.closeAll');
 
-      await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
 
-      expect(storeActions.setActiveId).toHaveBeenCalledWith(
-        expect.anything(),
-        inactiveId,
-        undefined,
-      );
+        expect(wrapper.find(GlDrawer).exists()).toBe(false);
+      });
     });
-  });
 
-  describe('when activeId is zero', () => {
-    it('renders GlDrawer with open false', () => {
-      createComponent();
+    describe('when activeId is zero', () => {
+      it('renders GlDrawer with open false', () => {
+        createComponent();
 
-      expect(findDrawer().props('open')).toBe(false);
+        expect(findDrawer().props('open')).toBe(false);
+      });
     });
-  });
 
-  describe('when activeId is greater than zero', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
+    describe('when activeId is greater than zero', () => {
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
+
+        boardsStore.addList({
+          id: listId,
+          label: { title: labelTitle, color: labelColor },
+          list_type: 'label',
+        });
+        store.state.activeId = 1;
+        store.state.sidebarType = LIST;
+      });
 
-      boardsStore.addList({
-        id: listId,
-        label: { title: labelTitle, color: labelColor },
-        list_type: 'label',
+      afterEach(() => {
+        boardsStore.removeList(listId);
       });
-    });
 
-    afterEach(() => {
-      boardsStore.removeList(listId);
+      it('renders GlDrawer with open false', () => {
+        createComponent();
+
+        expect(findDrawer().props('open')).toBe(true);
+      });
     });
 
-    it('renders GlDrawer with open false', () => {
-      createComponent({ activeId: 1 });
+    describe('when activeId is in boardsStore', () => {
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
 
-      expect(findDrawer().props('open')).toBe(true);
-    });
-  });
+        boardsStore.addList({
+          id: listId,
+          label: { title: labelTitle, color: labelColor },
+          list_type: 'label',
+        });
 
-  describe('when activeId is in boardsStore', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
+        store.state.activeId = listId;
+        store.state.sidebarType = LIST;
 
-      boardsStore.addList({
-        id: listId,
-        label: { title: labelTitle, color: labelColor },
-        list_type: 'label',
+        createComponent();
       });
 
-      createComponent({ activeId: listId });
-    });
+      afterEach(() => {
+        mock.restore();
+      });
 
-    afterEach(() => {
-      mock.restore();
-    });
+      it('renders label title', () => {
+        expect(findLabel().props('title')).toBe(labelTitle);
+      });
 
-    it('renders label title', () => {
-      expect(findLabel().props('title')).toBe(labelTitle);
+      it('renders label background color', () => {
+        expect(findLabel().props('backgroundColor')).toBe(labelColor);
+      });
     });
 
-    it('renders label background color', () => {
-      expect(findLabel().props('backgroundColor')).toBe(labelColor);
-    });
-  });
+    describe('when activeId is not in boardsStore', () => {
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
 
-  describe('when activeId is not in boardsStore', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
+        boardsStore.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
+
+        store.state.activeId = inactiveId;
 
-      boardsStore.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
+        createComponent();
+      });
+
+      afterEach(() => {
+        mock.restore();
+      });
 
-      createComponent({ activeId: inactiveId });
+      it('does not render GlLabel', () => {
+        expect(findLabel().exists()).toBe(false);
+      });
     });
+  });
 
-    afterEach(() => {
-      mock.restore();
+  describe('when sidebarType is not List', () => {
+    beforeEach(() => {
+      store.state.sidebarType = '';
+      createComponent();
     });
 
-    it('does not render GlLabel', () => {
-      expect(findLabel().exists()).toBe(false);
+    it('does not render GlDrawer', () => {
+      expect(findDrawer().exists()).toBe(false);
     });
   });
 });