Add latest changes from gitlab-org/gitlab@13-3-stable-ee

6 files changed, 194 insertions, 9 deletions

diff --git a/spec/frontend/boards/components/board_column_spec.js b/spec/frontend/boards/components/board_column_spec.js
index 6853fe2559d..c06b7aceaad 100644
--- a/spec/frontend/boards/components/board_column_spec.js
+++ b/spec/frontend/boards/components/board_column_spec.js
@@ -2,14 +2,13 @@ import Vue from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 
+import { TEST_HOST } from 'helpers/test_constants';
+import { listObj } from 'jest/boards/mock_data';
 import Board from '~/boards/components/board_column.vue';
 import List from '~/boards/models/list';
 import { ListType } from '~/boards/constants';
 import axios from '~/lib/utils/axios_utils';
 
-import { TEST_HOST } from 'helpers/test_constants';
-import { listObj } from 'jest/boards/mock_data';
-
 describe('Board Column Component', () => {
   let wrapper;
   let axiosMock;
diff --git a/spec/frontend/boards/components/board_form_spec.js b/spec/frontend/boards/components/board_form_spec.js
index 94f607698d7..b1d277863e8 100644
--- a/spec/frontend/boards/components/board_form_spec.js
+++ b/spec/frontend/boards/components/board_form_spec.js
@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils';
 
+import { TEST_HOST } from 'jest/helpers/test_constants';
 import boardsStore from '~/boards/stores/boards_store';
 import boardForm from '~/boards/components/board_form.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-import { TEST_HOST } from 'jest/helpers/test_constants';
 
 describe('board_form.vue', () => {
   let wrapper;
diff --git a/spec/frontend/boards/components/board_list_header_spec.js b/spec/frontend/boards/components/board_list_header_spec.js
index 95673da1c56..76a3d5e71c8 100644
--- a/spec/frontend/boards/components/board_list_header_spec.js
+++ b/spec/frontend/boards/components/board_list_header_spec.js
@@ -2,14 +2,13 @@ import Vue from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 
+import { TEST_HOST } from 'helpers/test_constants';
+import { listObj } from 'jest/boards/mock_data';
 import BoardListHeader from '~/boards/components/board_list_header.vue';
 import List from '~/boards/models/list';
 import { ListType } from '~/boards/constants';
 import axios from '~/lib/utils/axios_utils';
 
-import { TEST_HOST } from 'helpers/test_constants';
-import { listObj } from 'jest/boards/mock_data';
-
 describe('Board List Header Component', () => {
   let wrapper;
   let axiosMock;
diff --git a/spec/frontend/boards/components/board_settings_sidebar_spec.js b/spec/frontend/boards/components/board_settings_sidebar_spec.js
new file mode 100644
index 00000000000..f39adc0fc49
--- /dev/null
+++ b/spec/frontend/boards/components/board_settings_sidebar_spec.js
@@ -0,0 +1,159 @@
+import '~/boards/models/list';
+import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
+import Vuex from 'vuex';
+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 sidebarEventHub from '~/sidebar/event_hub';
+import { inactiveId } from '~/boards/constants';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('BoardSettingsSidebar', () => {
+  let wrapper;
+  let mock;
+  let storeActions;
+  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,
+    });
+
+    wrapper = shallowMount(BoardSettingsSidebar, {
+      store,
+      localVue,
+    });
+  };
+  const findLabel = () => wrapper.find(GlLabel);
+  const findDrawer = () => wrapper.find(GlDrawer);
+
+  beforeEach(() => {
+    boardsStore.create();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    wrapper.destroy();
+  });
+
+  it('finds a GlDrawer component', () => {
+    createComponent();
+
+    expect(findDrawer().exists()).toBe(true);
+  });
+
+  describe('on close', () => {
+    it('calls closeSidebar', async () => {
+      const spy = jest.fn();
+      createComponent({ activeId: inactiveId }, { setActiveId: spy });
+
+      findDrawer().vm.$emit('close');
+
+      await wrapper.vm.$nextTick();
+
+      expect(storeActions.setActiveId).toHaveBeenCalledWith(
+        expect.anything(),
+        inactiveId,
+        undefined,
+      );
+    });
+
+    it('calls closeSidebar on sidebar.closeAll event', async () => {
+      createComponent({ activeId: inactiveId }, { setActiveId: jest.fn() });
+
+      sidebarEventHub.$emit('sidebar.closeAll');
+
+      await wrapper.vm.$nextTick();
+
+      expect(storeActions.setActiveId).toHaveBeenCalledWith(
+        expect.anything(),
+        inactiveId,
+        undefined,
+      );
+    });
+  });
+
+  describe('when activeId is zero', () => {
+    it('renders GlDrawer with open false', () => {
+      createComponent();
+
+      expect(findDrawer().props('open')).toBe(false);
+    });
+  });
+
+  describe('when activeId is greater than zero', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      boardsStore.addList({
+        id: listId,
+        label: { title: labelTitle, color: labelColor },
+        list_type: 'label',
+      });
+    });
+
+    afterEach(() => {
+      boardsStore.removeList(listId);
+    });
+
+    it('renders GlDrawer with open false', () => {
+      createComponent({ activeId: 1 });
+
+      expect(findDrawer().props('open')).toBe(true);
+    });
+  });
+
+  describe('when activeId is in boardsStore', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      boardsStore.addList({
+        id: listId,
+        label: { title: labelTitle, color: labelColor },
+        list_type: 'label',
+      });
+
+      createComponent({ activeId: listId });
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('renders label title', () => {
+      expect(findLabel().props('title')).toBe(labelTitle);
+    });
+
+    it('renders label background color', () => {
+      expect(findLabel().props('backgroundColor')).toBe(labelColor);
+    });
+  });
+
+  describe('when activeId is not in boardsStore', () => {
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      boardsStore.addList({ id: listId, label: { title: labelTitle, color: labelColor } });
+
+      createComponent({ activeId: inactiveId });
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('does not render GlLabel', () => {
+      expect(findLabel().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/boards/components/boards_selector_spec.js b/spec/frontend/boards/components/boards_selector_spec.js
index b1ae86c2d3f..f2d4de238d1 100644
--- a/spec/frontend/boards/components/boards_selector_spec.js
+++ b/spec/frontend/boards/components/boards_selector_spec.js
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
-import { GlDropdown, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlLoadingIcon } from '@gitlab/ui';
 import { TEST_HOST } from 'spec/test_constants';
 import BoardsSelector from '~/boards/components/boards_selector.vue';
 import boardsStore from '~/boards/stores/boards_store';
@@ -103,7 +103,7 @@ describe('BoardsSelector', () => {
     });
 
     // Emits gl-dropdown show event to simulate the dropdown is opened at initialization time
-    wrapper.find(GlDropdown).vm.$emit('show');
+    wrapper.find(GlDeprecatedDropdown).vm.$emit('show');
   });
 
   afterEach(() => {
diff --git a/spec/frontend/boards/components/sidebar/remove_issue_spec.js b/spec/frontend/boards/components/sidebar/remove_issue_spec.js
new file mode 100644
index 00000000000..a33e4046724
--- /dev/null
+++ b/spec/frontend/boards/components/sidebar/remove_issue_spec.js
@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+
+import RemoveIssue from '~/boards/components/sidebar/remove_issue.vue';
+
+describe('boards sidebar remove issue', () => {
+  let wrapper;
+
+  const findButton = () => wrapper.find(GlButton);
+
+  const createComponent = propsData => {
+    wrapper = shallowMount(RemoveIssue, {
+      propsData: {
+        issue: {},
+        list: {},
+        ...propsData,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders remove button', () => {
+    expect(findButton().exists()).toBe(true);
+  });
+});