Add latest changes from gitlab-org/gitlab@master

13 files changed, 1425 insertions, 1 deletions

diff --git a/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js
index 17ea78b5826..ce3f289eb6e 100644
--- a/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/blob_viewers/rich_viewer_spec.js
@@ -1,14 +1,19 @@
 import { shallowMount } from '@vue/test-utils';
 import RichViewer from '~/vue_shared/components/blob_viewers/rich_viewer.vue';
+import { handleBlobRichViewer } from '~/blob/viewer';
+
+jest.mock('~/blob/viewer');
 
 describe('Blob Rich Viewer component', () => {
   let wrapper;
   const content = '<h1 id="markdown">Foo Bar</h1>';
+  const defaultType = 'markdown';
 
-  function createComponent() {
+  function createComponent(type = defaultType) {
     wrapper = shallowMount(RichViewer, {
       propsData: {
         content,
+        type,
       },
     });
   }
@@ -24,4 +29,8 @@ describe('Blob Rich Viewer component', () => {
   it('renders the passed content without transformations', () => {
     expect(wrapper.html()).toContain(content);
   });
+
+  it('queries for advanced viewer', () => {
+    expect(handleBlobRichViewer).toHaveBeenCalledWith(expect.anything(), defaultType);
+  });
 });
diff --git a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
index d12bfc5c686..79195aa1350 100644
--- a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
@@ -10,6 +10,7 @@ describe('Blob Simple Viewer component', () => {
     wrapper = shallowMount(SimpleViewer, {
       propsData: {
         content,
+        type: 'text',
       },
     });
   }
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
new file mode 100644
index 00000000000..d996f48f9cc
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js
@@ -0,0 +1,55 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { GlIcon } from '@gitlab/ui';
+import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue';
+
+import labelSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+
+import { mockConfig } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const createComponent = (initialState = mockConfig) => {
+  const store = new Vuex.Store(labelSelectModule());
+
+  store.dispatch('setInitialState', initialState);
+
+  return shallowMount(DropdownButton, {
+    localVue,
+    store,
+  });
+};
+
+describe('DropdownButton', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('template', () => {
+    it('renders component container element', () => {
+      expect(wrapper.is('gl-button-stub')).toBe(true);
+    });
+
+    it('renders button text element', () => {
+      const dropdownTextEl = wrapper.find('.dropdown-toggle-text');
+
+      expect(dropdownTextEl.exists()).toBe(true);
+      expect(dropdownTextEl.text()).toBe('Label');
+    });
+
+    it('renders chevron icon element', () => {
+      const iconEl = wrapper.find(GlIcon);
+
+      expect(iconEl.exists()).toBe(true);
+      expect(iconEl.props('name')).toBe('chevron-down');
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
new file mode 100644
index 00000000000..9bc01d8723f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js
@@ -0,0 +1,223 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { GlButton, GlIcon, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue';
+
+import labelSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+
+import { mockConfig, mockSuggestedColors } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const createComponent = (initialState = mockConfig) => {
+  const store = new Vuex.Store(labelSelectModule());
+
+  store.dispatch('setInitialState', initialState);
+
+  return shallowMount(DropdownContentsCreateView, {
+    localVue,
+    store,
+  });
+};
+
+describe('DropdownContentsCreateView', () => {
+  let wrapper;
+  const colors = Object.keys(mockSuggestedColors).map(color => ({
+    [color]: mockSuggestedColors[color],
+  }));
+
+  beforeEach(() => {
+    gon.suggested_label_colors = mockSuggestedColors;
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    describe('disableCreate', () => {
+      it('returns `true` when label title and color is not defined', () => {
+        expect(wrapper.vm.disableCreate).toBe(true);
+      });
+
+      it('returns `true` when `labelCreateInProgress` is true', () => {
+        wrapper.setData({
+          labelTitle: 'Foo',
+          selectedColor: '#ff0000',
+        });
+        wrapper.vm.$store.dispatch('requestCreateLabel');
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.disableCreate).toBe(true);
+        });
+      });
+
+      it('returns `false` when label title and color is defined and create request is not already in progress', () => {
+        wrapper.setData({
+          labelTitle: 'Foo',
+          selectedColor: '#ff0000',
+        });
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.disableCreate).toBe(false);
+        });
+      });
+    });
+
+    describe('suggestedColors', () => {
+      it('returns array of color objects containing color code and name', () => {
+        colors.forEach((color, index) => {
+          expect(wrapper.vm.suggestedColors[index]).toEqual(expect.objectContaining(color));
+        });
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('getColorCode', () => {
+      it('returns color code from color object', () => {
+        expect(wrapper.vm.getColorCode(colors[0])).toBe(Object.keys(colors[0]).pop());
+      });
+    });
+
+    describe('getColorName', () => {
+      it('returns color name from color object', () => {
+        expect(wrapper.vm.getColorName(colors[0])).toBe(Object.values(colors[0]).pop());
+      });
+    });
+
+    describe('handleColorClick', () => {
+      it('sets provided `color` param to `selectedColor` prop', () => {
+        wrapper.vm.handleColorClick(colors[0]);
+
+        expect(wrapper.vm.selectedColor).toBe(Object.keys(colors[0]).pop());
+      });
+    });
+
+    describe('handleCreateClick', () => {
+      it('calls action `createLabel` with object containing `labelTitle` & `selectedColor`', () => {
+        jest.spyOn(wrapper.vm, 'createLabel').mockImplementation();
+        wrapper.setData({
+          labelTitle: 'Foo',
+          selectedColor: '#ff0000',
+        });
+
+        wrapper.vm.handleCreateClick();
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.createLabel).toHaveBeenCalledWith(
+            expect.objectContaining({
+              title: 'Foo',
+              color: '#ff0000',
+            }),
+          );
+        });
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class "labels-select-contents-create"', () => {
+      expect(wrapper.attributes('class')).toContain('labels-select-contents-create');
+    });
+
+    it('renders dropdown back button element', () => {
+      const backBtnEl = wrapper
+        .find('.dropdown-title')
+        .findAll(GlButton)
+        .at(0);
+
+      expect(backBtnEl.exists()).toBe(true);
+      expect(backBtnEl.attributes('aria-label')).toBe('Go back');
+      expect(backBtnEl.find(GlIcon).props('name')).toBe('arrow-left');
+    });
+
+    it('renders dropdown title element', () => {
+      const headerEl = wrapper.find('.dropdown-title > span');
+
+      expect(headerEl.exists()).toBe(true);
+      expect(headerEl.text()).toBe('Create label');
+    });
+
+    it('renders dropdown close button element', () => {
+      const closeBtnEl = wrapper
+        .find('.dropdown-title')
+        .findAll(GlButton)
+        .at(1);
+
+      expect(closeBtnEl.exists()).toBe(true);
+      expect(closeBtnEl.attributes('aria-label')).toBe('Close');
+      expect(closeBtnEl.find(GlIcon).props('name')).toBe('close');
+    });
+
+    it('renders label title input element', () => {
+      const titleInputEl = wrapper.find('.dropdown-input').find(GlFormInput);
+
+      expect(titleInputEl.exists()).toBe(true);
+      expect(titleInputEl.attributes('placeholder')).toBe('Name new label');
+      expect(titleInputEl.attributes('autofocus')).toBe('true');
+    });
+
+    it('renders color block element for all suggested colors', () => {
+      const colorBlocksEl = wrapper.find('.dropdown-content').findAll(GlLink);
+
+      colorBlocksEl.wrappers.forEach((colorBlock, index) => {
+        expect(colorBlock.attributes('style')).toContain('background-color');
+        expect(colorBlock.attributes('title')).toBe(Object.values(colors[index]).pop());
+      });
+    });
+
+    it('renders color input element', () => {
+      wrapper.setData({
+        selectedColor: '#ff0000',
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        const colorPreviewEl = wrapper.find(
+          '.color-input-container > .dropdown-label-color-preview',
+        );
+        const colorInputEl = wrapper.find('.color-input-container').find(GlFormInput);
+
+        expect(colorPreviewEl.exists()).toBe(true);
+        expect(colorPreviewEl.attributes('style')).toContain('background-color');
+        expect(colorInputEl.exists()).toBe(true);
+        expect(colorInputEl.attributes('placeholder')).toBe('Use custom color #FF0000');
+        expect(colorInputEl.attributes('value')).toBe('#ff0000');
+      });
+    });
+
+    it('renders create button element', () => {
+      const createBtnEl = wrapper
+        .find('.dropdown-actions')
+        .findAll(GlButton)
+        .at(0);
+
+      expect(createBtnEl.exists()).toBe(true);
+      expect(createBtnEl.text()).toContain('Create');
+    });
+
+    it('shows gl-loading-icon within create button element when `labelCreateInProgress` is `true`', () => {
+      wrapper.vm.$store.dispatch('requestCreateLabel');
+
+      return wrapper.vm.$nextTick(() => {
+        const loadingIconEl = wrapper.find('.dropdown-actions').find(GlLoadingIcon);
+
+        expect(loadingIconEl.exists()).toBe(true);
+        expect(loadingIconEl.isVisible()).toBe(true);
+      });
+    });
+
+    it('renders cancel button element', () => {
+      const cancelBtnEl = wrapper
+        .find('.dropdown-actions')
+        .findAll(GlButton)
+        .at(1);
+
+      expect(cancelBtnEl.exists()).toBe(true);
+      expect(cancelBtnEl.text()).toContain('Cancel');
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
new file mode 100644
index 00000000000..487b917852e
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js
@@ -0,0 +1,265 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { GlButton, GlLoadingIcon, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
+import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue';
+
+import defaultState from '~/vue_shared/components/sidebar/labels_select_vue/store/state';
+import mutations from '~/vue_shared/components/sidebar/labels_select_vue/store/mutations';
+import * as actions from '~/vue_shared/components/sidebar/labels_select_vue/store/actions';
+import * as getters from '~/vue_shared/components/sidebar/labels_select_vue/store/getters';
+
+import { mockConfig, mockLabels, mockRegularLabel } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const createComponent = (initialState = mockConfig) => {
+  const store = new Vuex.Store({
+    getters,
+    mutations,
+    state: {
+      ...defaultState(),
+      footerCreateLabelTitle: 'Create label',
+      footerManageLabelTitle: 'Manage labels',
+    },
+    actions: {
+      ...actions,
+      fetchLabels: jest.fn(),
+    },
+  });
+
+  store.dispatch('setInitialState', initialState);
+  store.dispatch('receiveLabelsSuccess', mockLabels);
+
+  return shallowMount(DropdownContentsLabelsView, {
+    localVue,
+    store,
+  });
+};
+
+describe('DropdownContentsLabelsView', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    describe('visibleLabels', () => {
+      it('returns matching labels filtered with `searchKey`', () => {
+        wrapper.setData({
+          searchKey: 'bug',
+        });
+
+        expect(wrapper.vm.visibleLabels.length).toBe(1);
+        expect(wrapper.vm.visibleLabels[0].title).toBe('Bug');
+      });
+
+      it('returns all labels when `searchKey` is empty', () => {
+        wrapper.setData({
+          searchKey: '',
+        });
+
+        expect(wrapper.vm.visibleLabels.length).toBe(mockLabels.length);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('getDropdownLabelBoxStyle', () => {
+      it('returns an object containing `backgroundColor` based on provided `label` param', () => {
+        expect(wrapper.vm.getDropdownLabelBoxStyle(mockRegularLabel)).toEqual(
+          expect.objectContaining({
+            backgroundColor: mockRegularLabel.color,
+          }),
+        );
+      });
+    });
+
+    describe('isLabelSelected', () => {
+      it('returns true when provided `label` param is one of the selected labels', () => {
+        expect(wrapper.vm.isLabelSelected(mockRegularLabel)).toBe(true);
+      });
+
+      it('returns false when provided `label` param is not one of the selected labels', () => {
+        expect(wrapper.vm.isLabelSelected(mockLabels[2])).toBe(false);
+      });
+    });
+
+    describe('handleKeyDown', () => {
+      it('decreases `currentHighlightItem` value by 1 when Up arrow key is pressed', () => {
+        wrapper.setData({
+          currentHighlightItem: 1,
+        });
+
+        wrapper.vm.handleKeyDown({
+          keyCode: UP_KEY_CODE,
+        });
+
+        expect(wrapper.vm.currentHighlightItem).toBe(0);
+      });
+
+      it('increases `currentHighlightItem` value by 1 when Down arrow key is pressed', () => {
+        wrapper.setData({
+          currentHighlightItem: 1,
+        });
+
+        wrapper.vm.handleKeyDown({
+          keyCode: DOWN_KEY_CODE,
+        });
+
+        expect(wrapper.vm.currentHighlightItem).toBe(2);
+      });
+
+      it('calls action `updateSelectedLabels` with currently highlighted label when Enter key is pressed', () => {
+        jest.spyOn(wrapper.vm, 'updateSelectedLabels').mockImplementation();
+        wrapper.setData({
+          currentHighlightItem: 1,
+        });
+
+        wrapper.vm.handleKeyDown({
+          keyCode: ENTER_KEY_CODE,
+        });
+
+        expect(wrapper.vm.updateSelectedLabels).toHaveBeenCalledWith([
+          {
+            ...mockLabels[1],
+            set: true,
+          },
+        ]);
+      });
+
+      it('calls action `toggleDropdownContents` when Esc key is pressed', () => {
+        jest.spyOn(wrapper.vm, 'toggleDropdownContents').mockImplementation();
+        wrapper.setData({
+          currentHighlightItem: 1,
+        });
+
+        wrapper.vm.handleKeyDown({
+          keyCode: ESC_KEY_CODE,
+        });
+
+        expect(wrapper.vm.toggleDropdownContents).toHaveBeenCalled();
+      });
+
+      it('calls action `scrollIntoViewIfNeeded` in next tick when any key is pressed', () => {
+        jest.spyOn(wrapper.vm, 'scrollIntoViewIfNeeded').mockImplementation();
+        wrapper.setData({
+          currentHighlightItem: 1,
+        });
+
+        wrapper.vm.handleKeyDown({
+          keyCode: DOWN_KEY_CODE,
+        });
+
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.vm.scrollIntoViewIfNeeded).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('handleLabelClick', () => {
+      it('calls action `updateSelectedLabels` with provided `label` param', () => {
+        jest.spyOn(wrapper.vm, 'updateSelectedLabels').mockImplementation();
+
+        wrapper.vm.handleLabelClick(mockRegularLabel);
+
+        expect(wrapper.vm.updateSelectedLabels).toHaveBeenCalledWith([mockRegularLabel]);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `labels-select-contents-list`', () => {
+      expect(wrapper.attributes('class')).toContain('labels-select-contents-list');
+    });
+
+    it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', () => {
+      wrapper.vm.$store.dispatch('requestLabels');
+
+      return wrapper.vm.$nextTick(() => {
+        const loadingIconEl = wrapper.find(GlLoadingIcon);
+
+        expect(loadingIconEl.exists()).toBe(true);
+        expect(loadingIconEl.attributes('class')).toContain('labels-fetch-loading');
+      });
+    });
+
+    it('renders dropdown title element', () => {
+      const titleEl = wrapper.find('.dropdown-title > span');
+
+      expect(titleEl.exists()).toBe(true);
+      expect(titleEl.text()).toBe('Assign labels');
+    });
+
+    it('renders dropdown close button element', () => {
+      const closeButtonEl = wrapper.find('.dropdown-title').find(GlButton);
+
+      expect(closeButtonEl.exists()).toBe(true);
+      expect(closeButtonEl.find(GlIcon).exists()).toBe(true);
+      expect(closeButtonEl.find(GlIcon).props('name')).toBe('close');
+    });
+
+    it('renders label search input element', () => {
+      const searchInputEl = wrapper.find(GlSearchBoxByType);
+
+      expect(searchInputEl.exists()).toBe(true);
+      expect(searchInputEl.attributes('autofocus')).toBe('true');
+    });
+
+    it('renders label elements for all labels', () => {
+      const labelsEl = wrapper.findAll('.dropdown-content li');
+      const labelItemEl = labelsEl.at(0).find(GlLink);
+
+      expect(labelsEl.length).toBe(mockLabels.length);
+      expect(labelItemEl.exists()).toBe(true);
+      expect(labelItemEl.find(GlIcon).props('name')).toBe('mobile-issue-close');
+      expect(labelItemEl.find('.dropdown-label-box').attributes('style')).toBe(
+        'background-color: rgb(186, 218, 85);',
+      );
+      expect(labelItemEl.find(GlLink).text()).toContain(mockLabels[0].title);
+    });
+
+    it('renders label element with "is-focused" when value of `currentHighlightItem` is more than -1', () => {
+      wrapper.setData({
+        currentHighlightItem: 0,
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        const labelsEl = wrapper.findAll('.dropdown-content li');
+        const labelItemEl = labelsEl.at(0).find(GlLink);
+
+        expect(labelItemEl.attributes('class')).toContain('is-focused');
+      });
+    });
+
+    it('renders element containing "No matching results" when `searchKey` does not match with any label', () => {
+      wrapper.setData({
+        searchKey: 'abc',
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        const noMatchEl = wrapper.find('.dropdown-content li');
+
+        expect(noMatchEl.exists()).toBe(true);
+        expect(noMatchEl.text()).toContain('No matching results');
+      });
+    });
+
+    it('renders footer list items', () => {
+      const createLabelBtn = wrapper.find('.dropdown-footer').find(GlButton);
+      const manageLabelsLink = wrapper.find('.dropdown-footer').find(GlLink);
+
+      expect(createLabelBtn.exists()).toBe(true);
+      expect(createLabelBtn.text()).toBe('Create label');
+      expect(manageLabelsLink.exists()).toBe(true);
+      expect(manageLabelsLink.text()).toBe('Manage labels');
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_spec.js
new file mode 100644
index 00000000000..bb462acf11c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_spec.js
@@ -0,0 +1,54 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import DropdownContents from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue';
+
+import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+
+import { mockConfig } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const createComponent = (initialState = mockConfig) => {
+  const store = new Vuex.Store(labelsSelectModule());
+
+  store.dispatch('setInitialState', initialState);
+
+  return shallowMount(DropdownContents, {
+    localVue,
+    store,
+  });
+};
+
+describe('DropdownContent', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    describe('dropdownContentsView', () => {
+      it('returns string "dropdown-contents-create-view" when `showDropdownContentsCreateView` prop is `true`', () => {
+        wrapper.vm.$store.dispatch('toggleDropdownContentsCreateView');
+
+        expect(wrapper.vm.dropdownContentsView).toBe('dropdown-contents-create-view');
+      });
+
+      it('returns string "dropdown-contents-labels-view" when `showDropdownContentsCreateView` prop is `false`', () => {
+        expect(wrapper.vm.dropdownContentsView).toBe('dropdown-contents-labels-view');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component container element with class `labels-select-dropdown-contents`', () => {
+      expect(wrapper.attributes('class')).toContain('labels-select-dropdown-contents');
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
new file mode 100644
index 00000000000..c1d9be7393c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js
@@ -0,0 +1,61 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue';
+
+import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+
+import { mockConfig } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const createComponent = (initialState = mockConfig) => {
+  const store = new Vuex.Store(labelsSelectModule());
+
+  store.dispatch('setInitialState', initialState);
+
+  return shallowMount(DropdownTitle, {
+    localVue,
+    store,
+    propsData: {
+      labelsSelectInProgress: false,
+    },
+  });
+};
+
+describe('DropdownTitle', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('template', () => {
+    it('renders component container element with string "Labels"', () => {
+      expect(wrapper.text()).toContain('Labels');
+    });
+
+    it('renders edit link', () => {
+      const editBtnEl = wrapper.find(GlButton);
+
+      expect(editBtnEl.exists()).toBe(true);
+      expect(editBtnEl.text()).toBe('Edit');
+    });
+
+    it('renders loading icon element when `labelsSelectInProgress` prop is true', () => {
+      wrapper.setProps({
+        labelsSelectInProgress: true,
+      });
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_spec.js
new file mode 100644
index 00000000000..70311f8235f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_spec.js
@@ -0,0 +1,84 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import { GlLabel } from '@gitlab/ui';
+import DropdownValue from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue';
+
+import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+
+import { mockConfig, mockRegularLabel, mockScopedLabel } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const createComponent = (initialState = mockConfig, slots = {}) => {
+  const store = new Vuex.Store(labelsSelectModule());
+
+  store.dispatch('setInitialState', initialState);
+
+  return shallowMount(DropdownValue, {
+    localVue,
+    store,
+    slots,
+  });
+};
+
+describe('DropdownValue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('methods', () => {
+    describe('labelFilterUrl', () => {
+      it('returns a label filter URL based on provided label param', () => {
+        expect(wrapper.vm.labelFilterUrl(mockRegularLabel)).toBe(
+          '/gitlab-org/my-project/issues?label_name[]=Foo%20Label',
+        );
+      });
+    });
+
+    describe('scopedLabel', () => {
+      it('returns `true` when provided label param is a scoped label', () => {
+        expect(wrapper.vm.scopedLabel(mockScopedLabel)).toBe(true);
+      });
+
+      it('returns `false` when provided label param is a regular label', () => {
+        expect(wrapper.vm.scopedLabel(mockRegularLabel)).toBe(false);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders class `has-labels` on component container element when `selectedLabels` is not empty', () => {
+      expect(wrapper.attributes('class')).toContain('has-labels');
+    });
+
+    it('renders element containing `None` when `selectedLabels` is empty', () => {
+      const wrapperNoLabels = createComponent(
+        {
+          ...mockConfig,
+          selectedLabels: [],
+        },
+        {
+          default: 'None',
+        },
+      );
+      const noneEl = wrapperNoLabels.find('span.text-secondary');
+
+      expect(noneEl.exists()).toBe(true);
+      expect(noneEl.text()).toBe('None');
+
+      wrapperNoLabels.destroy();
+    });
+
+    it('renders labels when `selectedLabels` is not empty', () => {
+      expect(wrapper.findAll(GlLabel).length).toBe(2);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
new file mode 100644
index 00000000000..126fd5438c4
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
@@ -0,0 +1,127 @@
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+import LabelsSelectRoot from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
+import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue';
+import DropdownValue from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue';
+import DropdownValueCollapsed from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
+import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue';
+import DropdownContents from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue';
+
+import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+
+import { mockConfig } from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const createComponent = (config = mockConfig, slots = {}) =>
+  shallowMount(LabelsSelectRoot, {
+    localVue,
+    slots,
+    store: new Vuex.Store(labelsSelectModule()),
+    propsData: config,
+  });
+
+describe('LabelsSelectRoot', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('methods', () => {
+    describe('handleVuexActionDispatch', () => {
+      it('calls `handleDropdownClose` when params `action.type` is `toggleDropdownContents` and state has `showDropdownButton` & `showDropdownContents` props `false`', () => {
+        jest.spyOn(wrapper.vm, 'handleDropdownClose').mockImplementation();
+
+        wrapper.vm.handleVuexActionDispatch(
+          { type: 'toggleDropdownContents' },
+          {
+            showDropdownButton: false,
+            showDropdownContents: false,
+            labels: [{ id: 1 }, { id: 2, touched: true }],
+          },
+        );
+
+        expect(wrapper.vm.handleDropdownClose).toHaveBeenCalledWith(
+          expect.arrayContaining([
+            {
+              id: 2,
+              touched: true,
+            },
+          ]),
+        );
+      });
+    });
+
+    describe('handleDropdownClose', () => {
+      it('emits `updateSelectedLabels` & `onDropdownClose` events on component when provided `labels` param is not empty', () => {
+        wrapper.vm.handleDropdownClose([{ id: 1 }, { id: 2 }]);
+
+        expect(wrapper.emitted().updateSelectedLabels).toBeTruthy();
+        expect(wrapper.emitted().onDropdownClose).toBeTruthy();
+      });
+
+      it('emits only `onDropdownClose` event on component when provided `labels` param is empty', () => {
+        wrapper.vm.handleDropdownClose([]);
+
+        expect(wrapper.emitted().updateSelectedLabels).toBeFalsy();
+        expect(wrapper.emitted().onDropdownClose).toBeTruthy();
+      });
+    });
+
+    describe('handleCollapsedValueClick', () => {
+      it('emits `toggleCollapse` event on component', () => {
+        wrapper.vm.handleCollapsedValueClick();
+
+        expect(wrapper.emitted().toggleCollapse).toBeTruthy();
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders component with classes `labels-select-wrapper position-relative`', () => {
+      expect(wrapper.attributes('class')).toContain('labels-select-wrapper position-relative');
+    });
+
+    it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', () => {
+      expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
+    });
+
+    it('renders `dropdown-title` component', () => {
+      expect(wrapper.find(DropdownTitle).exists()).toBe(true);
+    });
+
+    it('renders `dropdown-value` component with slot when `showDropdownButton` prop is `false`', () => {
+      const wrapperDropdownValue = createComponent(mockConfig, {
+        default: 'None',
+      });
+
+      const valueComp = wrapperDropdownValue.find(DropdownValue);
+
+      expect(valueComp.exists()).toBe(true);
+      expect(valueComp.text()).toBe('None');
+
+      wrapperDropdownValue.destroy();
+    });
+
+    it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', () => {
+      wrapper.vm.$store.dispatch('toggleDropdownButton');
+
+      expect(wrapper.find(DropdownButton).exists()).toBe(true);
+    });
+
+    it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', () => {
+      wrapper.vm.$store.dispatch('toggleDropdownContents');
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find(DropdownContents).exists()).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js
new file mode 100644
index 00000000000..a863cddbaee
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js
@@ -0,0 +1,66 @@
+export const mockRegularLabel = {
+  id: 26,
+  title: 'Foo Label',
+  description: 'Foobar',
+  color: '#BADA55',
+  textColor: '#FFFFFF',
+};
+
+export const mockScopedLabel = {
+  id: 27,
+  title: 'Foo::Bar',
+  description: 'Foobar',
+  color: '#0033CC',
+  textColor: '#FFFFFF',
+};
+
+export const mockLabels = [
+  mockRegularLabel,
+  mockScopedLabel,
+  {
+    id: 28,
+    title: 'Bug',
+    description: 'Label for bugs',
+    color: '#FF0000',
+    textColor: '#FFFFFF',
+  },
+];
+
+export const mockConfig = {
+  allowLabelEdit: true,
+  allowLabelCreate: true,
+  allowScopedLabels: true,
+  labelsListTitle: 'Assign labels',
+  labelsCreateTitle: 'Create label',
+  dropdownOnly: false,
+  selectedLabels: [mockRegularLabel, mockScopedLabel],
+  labelsSelectInProgress: false,
+  labelsFetchPath: '/gitlab-org/my-project/-/labels.json',
+  labelsManagePath: '/gitlab-org/my-project/-/labels',
+  labelsFilterBasePath: '/gitlab-org/my-project/issues',
+  scopedLabelsDocumentationPath: '/help/user/project/labels.md#scoped-labels-premium',
+};
+
+export const mockSuggestedColors = {
+  '#0033CC': 'UA blue',
+  '#428BCA': 'Moderate blue',
+  '#44AD8E': 'Lime green',
+  '#A8D695': 'Feijoa',
+  '#5CB85C': 'Slightly desaturated green',
+  '#69D100': 'Bright green',
+  '#004E00': 'Very dark lime green',
+  '#34495E': 'Very dark desaturated blue',
+  '#7F8C8D': 'Dark grayish cyan',
+  '#A295D6': 'Slightly desaturated blue',
+  '#5843AD': 'Dark moderate blue',
+  '#8E44AD': 'Dark moderate violet',
+  '#FFECDB': 'Very pale orange',
+  '#AD4363': 'Dark moderate pink',
+  '#D10069': 'Strong pink',
+  '#CC0033': 'Strong red',
+  '#FF0000': 'Pure red',
+  '#D9534F': 'Soft red',
+  '#D1D100': 'Strong yellow',
+  '#F0AD4E': 'Soft orange',
+  '#AD8D43': 'Dark moderate orange',
+};
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
new file mode 100644
index 00000000000..6e2363ba96f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js
@@ -0,0 +1,276 @@
+import MockAdapter from 'axios-mock-adapter';
+
+import defaultState from '~/vue_shared/components/sidebar/labels_select_vue/store/state';
+import * as types from '~/vue_shared/components/sidebar/labels_select_vue/store/mutation_types';
+import * as actions from '~/vue_shared/components/sidebar/labels_select_vue/store/actions';
+
+import testAction from 'helpers/vuex_action_helper';
+import axios from '~/lib/utils/axios_utils';
+
+describe('LabelsSelect Actions', () => {
+  let state;
+  const mockInitialState = {
+    labels: [],
+    selectedLabels: [],
+  };
+
+  beforeEach(() => {
+    state = Object.assign({}, defaultState());
+  });
+
+  describe('setInitialState', () => {
+    it('sets initial store state', done => {
+      testAction(
+        actions.setInitialState,
+        mockInitialState,
+        state,
+        [{ type: types.SET_INITIAL_STATE, payload: mockInitialState }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('toggleDropdownButton', () => {
+    it('toggles dropdown button', done => {
+      testAction(
+        actions.toggleDropdownButton,
+        {},
+        state,
+        [{ type: types.TOGGLE_DROPDOWN_BUTTON }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('toggleDropdownContents', () => {
+    it('toggles dropdown contents', done => {
+      testAction(
+        actions.toggleDropdownContents,
+        {},
+        state,
+        [{ type: types.TOGGLE_DROPDOWN_CONTENTS }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('toggleDropdownContentsCreateView', () => {
+    it('toggles dropdown create view', done => {
+      testAction(
+        actions.toggleDropdownContentsCreateView,
+        {},
+        state,
+        [{ type: types.TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestLabels', () => {
+    it('sets value of `state.labelsFetchInProgress` to `true`', done => {
+      testAction(actions.requestLabels, {}, state, [{ type: types.REQUEST_LABELS }], [], done);
+    });
+  });
+
+  describe('receiveLabelsSuccess', () => {
+    it('sets provided labels to `state.labels`', done => {
+      const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+
+      testAction(
+        actions.receiveLabelsSuccess,
+        labels,
+        state,
+        [{ type: types.RECEIVE_SET_LABELS_SUCCESS, payload: labels }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveLabelsFailure', () => {
+    beforeEach(() => {
+      setFixtures('<div class="flash-container"></div>');
+    });
+
+    it('sets value `state.labelsFetchInProgress` to `false`', done => {
+      testAction(
+        actions.receiveLabelsFailure,
+        {},
+        state,
+        [{ type: types.RECEIVE_SET_LABELS_FAILURE }],
+        [],
+        done,
+      );
+    });
+
+    it('shows flash error', () => {
+      actions.receiveLabelsFailure({ commit: () => {} });
+
+      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
+        'Error fetching labels.',
+      );
+    });
+  });
+
+  describe('fetchLabels', () => {
+    let mock;
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      state.labelsFetchPath = 'labels.json';
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('on success', () => {
+      it('dispatches `requestLabels` & `receiveLabelsSuccess` actions', done => {
+        const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+        mock.onGet(/labels.json/).replyOnce(200, labels);
+
+        testAction(
+          actions.fetchLabels,
+          {},
+          state,
+          [],
+          [{ type: 'requestLabels' }, { type: 'receiveLabelsSuccess', payload: labels }],
+          done,
+        );
+      });
+    });
+
+    describe('on failure', () => {
+      it('dispatches `requestLabels` & `receiveLabelsFailure` actions', done => {
+        mock.onGet(/labels.json/).replyOnce(500, {});
+
+        testAction(
+          actions.fetchLabels,
+          {},
+          state,
+          [],
+          [{ type: 'requestLabels' }, { type: 'receiveLabelsFailure' }],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('requestCreateLabel', () => {
+    it('sets value `state.labelCreateInProgress` to `true`', done => {
+      testAction(
+        actions.requestCreateLabel,
+        {},
+        state,
+        [{ type: types.REQUEST_CREATE_LABEL }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveCreateLabelSuccess', () => {
+    it('sets value `state.labelCreateInProgress` to `false`', done => {
+      testAction(
+        actions.receiveCreateLabelSuccess,
+        {},
+        state,
+        [{ type: types.RECEIVE_CREATE_LABEL_SUCCESS }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveCreateLabelFailure', () => {
+    beforeEach(() => {
+      setFixtures('<div class="flash-container"></div>');
+    });
+
+    it('sets value `state.labelCreateInProgress` to `false`', done => {
+      testAction(
+        actions.receiveCreateLabelFailure,
+        {},
+        state,
+        [{ type: types.RECEIVE_CREATE_LABEL_FAILURE }],
+        [],
+        done,
+      );
+    });
+
+    it('shows flash error', () => {
+      actions.receiveCreateLabelFailure({ commit: () => {} });
+
+      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
+        'Error creating label.',
+      );
+    });
+  });
+
+  describe('createLabel', () => {
+    let mock;
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+      state.labelsManagePath = 'labels.json';
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('on success', () => {
+      it('dispatches `requestCreateLabel`, `receiveCreateLabelSuccess` & `toggleDropdownContentsCreateView` actions', done => {
+        const label = { id: 1 };
+        mock.onPost(/labels.json/).replyOnce(200, label);
+
+        testAction(
+          actions.createLabel,
+          {},
+          state,
+          [],
+          [
+            { type: 'requestCreateLabel' },
+            { type: 'receiveCreateLabelSuccess' },
+            { type: 'toggleDropdownContentsCreateView' },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('on failure', () => {
+      it('dispatches `requestCreateLabel` & `receiveCreateLabelFailure` actions', done => {
+        mock.onPost(/labels.json/).replyOnce(500, {});
+
+        testAction(
+          actions.createLabel,
+          {},
+          state,
+          [],
+          [{ type: 'requestCreateLabel' }, { type: 'receiveCreateLabelFailure' }],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('updateSelectedLabels', () => {
+    it('updates `state.labels` based on provided `labels` param', done => {
+      const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+
+      testAction(
+        actions.updateSelectedLabels,
+        labels,
+        state,
+        [{ type: types.UPDATE_SELECTED_LABELS, payload: { labels } }],
+        [],
+        done,
+      );
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
new file mode 100644
index 00000000000..bfceaa0828b
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/getters_spec.js
@@ -0,0 +1,31 @@
+import * as getters from '~/vue_shared/components/sidebar/labels_select_vue/store/getters';
+
+describe('LabelsSelect Getters', () => {
+  describe('dropdownButtonText', () => {
+    it('returns string "Label" when state.labels has no selected labels', () => {
+      const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+
+      expect(getters.dropdownButtonText({ labels })).toBe('Label');
+    });
+
+    it('returns label title when state.labels has only 1 label', () => {
+      const labels = [{ id: 1, title: 'Foobar', set: true }];
+
+      expect(getters.dropdownButtonText({ labels })).toBe('Foobar');
+    });
+
+    it('returns first label title and remaining labels count when state.labels has more than 1 label', () => {
+      const labels = [{ id: 1, title: 'Foo', set: true }, { id: 2, title: 'Bar', set: true }];
+
+      expect(getters.dropdownButtonText({ labels })).toBe('Foo +1 more');
+    });
+  });
+
+  describe('selectedLabelsList', () => {
+    it('returns array of IDs of all labels within `state.selectedLabels`', () => {
+      const selectedLabels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+
+      expect(getters.selectedLabelsList({ selectedLabels })).toEqual([1, 2, 3, 4]);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
new file mode 100644
index 00000000000..f6ca98fcc71
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/mutations_spec.js
@@ -0,0 +1,172 @@
+import mutations from '~/vue_shared/components/sidebar/labels_select_vue/store/mutations';
+import * as types from '~/vue_shared/components/sidebar/labels_select_vue/store/mutation_types';
+
+describe('LabelsSelect Mutations', () => {
+  describe(`${types.SET_INITIAL_STATE}`, () => {
+    it('initializes provided props to store state', () => {
+      const state = {};
+      mutations[types.SET_INITIAL_STATE](state, {
+        labels: 'foo',
+      });
+
+      expect(state.labels).toEqual('foo');
+    });
+  });
+
+  describe(`${types.TOGGLE_DROPDOWN_BUTTON}`, () => {
+    it('toggles value of `state.showDropdownButton`', () => {
+      const state = {
+        showDropdownButton: false,
+      };
+      mutations[types.TOGGLE_DROPDOWN_BUTTON](state);
+
+      expect(state.showDropdownButton).toBe(true);
+    });
+  });
+
+  describe(`${types.TOGGLE_DROPDOWN_CONTENTS}`, () => {
+    it('toggles value of `state.showDropdownButton` when `state.dropdownOnly` is false', () => {
+      const state = {
+        dropdownOnly: false,
+        showDropdownButton: false,
+      };
+      mutations[types.TOGGLE_DROPDOWN_CONTENTS](state);
+
+      expect(state.showDropdownButton).toBe(true);
+    });
+
+    it('toggles value of `state.showDropdownContents`', () => {
+      const state = {
+        showDropdownContents: false,
+      };
+      mutations[types.TOGGLE_DROPDOWN_CONTENTS](state);
+
+      expect(state.showDropdownContents).toBe(true);
+    });
+
+    it('sets value of `state.showDropdownContentsCreateView` to `false` when `showDropdownContents` is true', () => {
+      const state = {
+        showDropdownContents: false,
+        showDropdownContentsCreateView: true,
+      };
+      mutations[types.TOGGLE_DROPDOWN_CONTENTS](state);
+
+      expect(state.showDropdownContentsCreateView).toBe(false);
+    });
+  });
+
+  describe(`${types.TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW}`, () => {
+    it('toggles value of `state.showDropdownContentsCreateView`', () => {
+      const state = {
+        showDropdownContentsCreateView: false,
+      };
+      mutations[types.TOGGLE_DROPDOWN_CONTENTS_CREATE_VIEW](state);
+
+      expect(state.showDropdownContentsCreateView).toBe(true);
+    });
+  });
+
+  describe(`${types.REQUEST_LABELS}`, () => {
+    it('sets value of `state.labelsFetchInProgress` to true', () => {
+      const state = {
+        labelsFetchInProgress: false,
+      };
+      mutations[types.REQUEST_LABELS](state);
+
+      expect(state.labelsFetchInProgress).toBe(true);
+    });
+  });
+
+  describe(`${types.RECEIVE_SET_LABELS_SUCCESS}`, () => {
+    const selectedLabels = [{ id: 2 }, { id: 4 }];
+    const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+
+    it('sets value of `state.labelsFetchInProgress` to false', () => {
+      const state = {
+        selectedLabels,
+        labelsFetchInProgress: true,
+      };
+      mutations[types.RECEIVE_SET_LABELS_SUCCESS](state, labels);
+
+      expect(state.labelsFetchInProgress).toBe(false);
+    });
+
+    it('sets provided `labels` to `state.labels` along with `set` prop based on `state.selectedLabels`', () => {
+      const selectedLabelIds = selectedLabels.map(label => label.id);
+      const state = {
+        selectedLabels,
+        labelsFetchInProgress: true,
+      };
+      mutations[types.RECEIVE_SET_LABELS_SUCCESS](state, labels);
+
+      state.labels.forEach(label => {
+        if (selectedLabelIds.includes(label.id)) {
+          expect(label.set).toBe(true);
+        }
+      });
+    });
+  });
+
+  describe(`${types.RECEIVE_SET_LABELS_FAILURE}`, () => {
+    it('sets value of `state.labelsFetchInProgress` to false', () => {
+      const state = {
+        labelsFetchInProgress: true,
+      };
+      mutations[types.RECEIVE_SET_LABELS_FAILURE](state);
+
+      expect(state.labelsFetchInProgress).toBe(false);
+    });
+  });
+
+  describe(`${types.REQUEST_CREATE_LABEL}`, () => {
+    it('sets value of `state.labelCreateInProgress` to true', () => {
+      const state = {
+        labelCreateInProgress: false,
+      };
+      mutations[types.REQUEST_CREATE_LABEL](state);
+
+      expect(state.labelCreateInProgress).toBe(true);
+    });
+  });
+
+  describe(`${types.RECEIVE_CREATE_LABEL_SUCCESS}`, () => {
+    it('sets value of `state.labelCreateInProgress` to false', () => {
+      const state = {
+        labelCreateInProgress: false,
+      };
+      mutations[types.RECEIVE_CREATE_LABEL_SUCCESS](state);
+
+      expect(state.labelCreateInProgress).toBe(false);
+    });
+  });
+
+  describe(`${types.RECEIVE_CREATE_LABEL_FAILURE}`, () => {
+    it('sets value of `state.labelCreateInProgress` to false', () => {
+      const state = {
+        labelCreateInProgress: false,
+      };
+      mutations[types.RECEIVE_CREATE_LABEL_FAILURE](state);
+
+      expect(state.labelCreateInProgress).toBe(false);
+    });
+  });
+
+  describe(`${types.UPDATE_SELECTED_LABELS}`, () => {
+    const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+
+    it('updates `state.labels` to include `touched` and `set` props based on provided `labels` param', () => {
+      const updatedLabelIds = [2, 4];
+      const state = {
+        labels,
+      };
+      mutations[types.UPDATE_SELECTED_LABELS](state, { labels });
+
+      state.labels.forEach(label => {
+        if (updatedLabelIds.includes(label.id)) {
+          expect(label.touched).toBe(true);
+          expect(label.set).toBe(true);
+        }
+      });
+    });
+  });
+});