1 files changed, 140 insertions, 0 deletions
diff --git a/spec/frontend/boards/components/board_content_sidebar_spec.js b/spec/frontend/boards/components/board_content_sidebar_spec.js
new file mode 100644
index 00000000000..7f949739891
--- /dev/null
+++ b/spec/frontend/boards/components/board_content_sidebar_spec.js
@@ -0,0 +1,140 @@
+import { GlDrawer } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { stubComponent } from 'helpers/stub_component';
+import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
+import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue';
+import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue';
+import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue';
+import BoardSidebarSubscription from '~/boards/components/sidebar/board_sidebar_subscription.vue';
+import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
+import { ISSUABLE } from '~/boards/constants';
+import { mockIssue, mockIssueGroupPath, mockIssueProjectPath } from '../mock_data';
+
+describe('BoardContentSidebar', () => {
+  let wrapper;
+  let store;
+
+  const createStore = ({ mockGetters = {}, mockActions = {} } = {}) => {
+    store = new Vuex.Store({
+      state: {
+        sidebarType: ISSUABLE,
+        issues: { [mockIssue.id]: { ...mockIssue, epic: null } },
+        activeId: mockIssue.id,
+        issuableType: 'issue',
+      },
+      getters: {
+        activeBoardItem: () => {
+          return { ...mockIssue, epic: null };
+        },
+        groupPathForActiveIssue: () => mockIssueGroupPath,
+        projectPathForActiveIssue: () => mockIssueProjectPath,
+        isSidebarOpen: () => true,
+        ...mockGetters,
+      },
+      actions: mockActions,
+    });
+  };
+
+  const createComponent = () => {
+    /*
+      Dynamically imported components (in our case ee imports)
+      aren't stubbed automatically in VTU v1:
+      https://github.com/vuejs/vue-test-utils/issues/1279.
+
+      This requires us to additionally mock apollo or vuex stores.
+    */
+    wrapper = shallowMount(BoardContentSidebar, {
+      provide: {
+        canUpdate: true,
+        rootPath: '/',
+        groupId: 1,
+      },
+      store,
+      stubs: {
+        GlDrawer: stubComponent(GlDrawer, {
+          template: '<div><slot name="header"></slot><slot></slot></div>',
+        }),
+      },
+      mocks: {
+        $apollo: {
+          queries: {
+            participants: {
+              loading: false,
+            },
+            currentIteration: {
+              loading: false,
+            },
+            iterations: {
+              loading: false,
+            },
+          },
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createStore();
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('confirms we render GlDrawer', () => {
+    expect(wrapper.find(GlDrawer).exists()).toBe(true);
+  });
+
+  it('does not render GlDrawer when isSidebarOpen is false', () => {
+    createStore({ mockGetters: { isSidebarOpen: () => false } });
+    createComponent();
+
+    expect(wrapper.find(GlDrawer).exists()).toBe(false);
+  });
+
+  it('applies an open attribute', () => {
+    expect(wrapper.find(GlDrawer).props('open')).toBe(true);
+  });
+
+  it('renders BoardSidebarLabelsSelect', () => {
+    expect(wrapper.find(BoardSidebarLabelsSelect).exists()).toBe(true);
+  });
+
+  it('renders BoardSidebarTitle', () => {
+    expect(wrapper.find(BoardSidebarTitle).exists()).toBe(true);
+  });
+
+  it('renders BoardSidebarDueDate', () => {
+    expect(wrapper.find(BoardSidebarDueDate).exists()).toBe(true);
+  });
+
+  it('renders BoardSidebarSubscription', () => {
+    expect(wrapper.find(BoardSidebarSubscription).exists()).toBe(true);
+  });
+
+  it('renders BoardSidebarMilestoneSelect', () => {
+    expect(wrapper.find(BoardSidebarMilestoneSelect).exists()).toBe(true);
+  });
+
+  describe('when we emit close', () => {
+    let toggleBoardItem;
+
+    beforeEach(() => {
+      toggleBoardItem = jest.fn();
+      createStore({ mockActions: { toggleBoardItem } });
+      createComponent();
+    });
+
+    it('calls toggleBoardItem with correct parameters', async () => {
+      wrapper.find(GlDrawer).vm.$emit('close');
+
+      expect(toggleBoardItem).toHaveBeenCalledTimes(1);
+      expect(toggleBoardItem).toHaveBeenCalledWith(expect.any(Object), {
+        boardItem: { ...mockIssue, epic: null },
+        sidebarType: ISSUABLE,
+      });
+    });
+  });
+});