Add latest changes from gitlab-org/gitlab@master

19 files changed, 1643 insertions, 46 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);
+        }
+      });
+    });
+  });
+});
diff --git a/spec/models/snippet_spec.rb b/spec/models/snippet_spec.rb
index cb7b9961880..87ace7b51f4 100644
--- a/spec/models/snippet_spec.rb
+++ b/spec/models/snippet_spec.rb
@@ -601,10 +601,23 @@ describe Snippet do
         expect(snippet.create_repository).to be_nil
       end
 
-      it 'does not track snippet repository' do
-        expect do
-          snippet.create_repository
-        end.not_to change(SnippetRepository, :count)
+      context 'when snippet_repository exists' do
+        it 'does not create a new snippet repository' do
+          expect do
+            snippet.create_repository
+          end.not_to change(SnippetRepository, :count)
+        end
+      end
+
+      context 'when snippet_repository does not exist' do
+        it 'creates a snippet_repository' do
+          snippet.snippet_repository.destroy
+          snippet.reload
+
+          expect do
+            snippet.create_repository
+          end.to change(SnippetRepository, :count).by(1)
+        end
       end
     end
   end
diff --git a/spec/requests/api/graphql/mutations/snippets/update_spec.rb b/spec/requests/api/graphql/mutations/snippets/update_spec.rb
index 820c97e8341..1035e3346e1 100644
--- a/spec/requests/api/graphql/mutations/snippets/update_spec.rb
+++ b/spec/requests/api/graphql/mutations/snippets/update_spec.rb
@@ -91,7 +91,7 @@ describe 'Updating a Snippet' do
 
   describe 'PersonalSnippet' do
     it_behaves_like 'graphql update actions' do
-      let_it_be(:snippet) do
+      let(:snippet) do
         create(:personal_snippet,
                :private,
                file_name: original_file_name,
@@ -104,7 +104,7 @@ describe 'Updating a Snippet' do
 
   describe 'ProjectSnippet' do
     let_it_be(:project) { create(:project, :private) }
-    let_it_be(:snippet) do
+    let(:snippet) do
       create(:project_snippet,
              :private,
              project: project,
diff --git a/spec/requests/api/project_snippets_spec.rb b/spec/requests/api/project_snippets_spec.rb
index ba5de430f7d..e018a4643db 100644
--- a/spec/requests/api/project_snippets_spec.rb
+++ b/spec/requests/api/project_snippets_spec.rb
@@ -278,13 +278,13 @@ describe API::ProjectSnippets do
 
   describe 'PUT /projects/:project_id/snippets/:id/' do
     let(:visibility_level) { Snippet::PUBLIC }
-    let(:snippet) { create(:project_snippet, author: admin, visibility_level: visibility_level, project: project) }
+    let(:snippet) { create(:project_snippet, :repository, author: admin, visibility_level: visibility_level, project: project) }
 
     it 'updates snippet' do
       new_content = 'New content'
       new_description = 'New description'
 
-      put api("/projects/#{snippet.project.id}/snippets/#{snippet.id}/", admin), params: { code: new_content, description: new_description, visibility: 'private' }
+      update_snippet(params: { code: new_content, description: new_description, visibility: 'private' })
 
       expect(response).to have_gitlab_http_status(:ok)
       snippet.reload
@@ -297,7 +297,7 @@ describe API::ProjectSnippets do
       new_content = 'New content'
       new_description = 'New description'
 
-      put api("/projects/#{snippet.project.id}/snippets/#{snippet.id}/", admin), params: { content: new_content, description: new_description }
+      update_snippet(params: { content: new_content, description: new_description })
 
       expect(response).to have_gitlab_http_status(:ok)
       snippet.reload
@@ -306,21 +306,21 @@ describe API::ProjectSnippets do
     end
 
     it 'returns 400 when both code and content parameters specified' do
-      put api("/projects/#{snippet.project.id}/snippets/1234", admin), params: { code: 'some content', content: 'other content' }
+      update_snippet(params: { code: 'some content', content: 'other content' })
 
       expect(response).to have_gitlab_http_status(:bad_request)
       expect(json_response['error']).to eq('code, content are mutually exclusive')
     end
 
     it 'returns 404 for invalid snippet id' do
-      put api("/projects/#{snippet.project.id}/snippets/1234", admin), params: { title: 'foo' }
+      update_snippet(snippet_id: '1234', params: { title: 'foo' })
 
       expect(response).to have_gitlab_http_status(:not_found)
       expect(json_response['message']).to eq('404 Snippet Not Found')
     end
 
     it 'returns 400 for missing parameters' do
-      put api("/projects/#{project.id}/snippets/1234", admin)
+      update_snippet
 
       expect(response).to have_gitlab_http_status(:bad_request)
     end
@@ -328,16 +328,16 @@ describe API::ProjectSnippets do
     it 'returns 400 for empty code field' do
       new_content = ''
 
-      put api("/projects/#{snippet.project.id}/snippets/#{snippet.id}/", admin), params: { code: new_content }
+      update_snippet(params: { code: new_content })
 
       expect(response).to have_gitlab_http_status(:bad_request)
     end
 
-    context 'when the snippet is spam' do
-      def update_snippet(snippet_params = {})
-        put api("/projects/#{snippet.project.id}/snippets/#{snippet.id}", admin), params: snippet_params
-      end
+    it_behaves_like 'update with repository actions' do
+      let(:snippet_without_repo) { create(:project_snippet, author: admin, project: project, visibility_level: visibility_level) }
+    end
 
+    context 'when the snippet is spam' do
       before do
         allow_next_instance_of(Spam::AkismetService) do |instance|
           allow(instance).to receive(:spam?).and_return(true)
@@ -348,7 +348,7 @@ describe API::ProjectSnippets do
         let(:visibility_level) { Snippet::PRIVATE }
 
         it 'creates the snippet' do
-          expect { update_snippet(title: 'Foo') }
+          expect { update_snippet(params: { title: 'Foo' }) }
             .to change { snippet.reload.title }.to('Foo')
         end
       end
@@ -357,12 +357,12 @@ describe API::ProjectSnippets do
         let(:visibility_level) { Snippet::PUBLIC }
 
         it 'rejects the snippet' do
-          expect { update_snippet(title: 'Foo') }
+          expect { update_snippet(params: { title: 'Foo' }) }
             .not_to change { snippet.reload.title }
         end
 
         it 'creates a spam log' do
-          expect { update_snippet(title: 'Foo') }
+          expect { update_snippet(params: { title: 'Foo' }) }
             .to log_spam(title: 'Foo', user_id: admin.id, noteable_type: 'ProjectSnippet')
         end
       end
@@ -371,7 +371,7 @@ describe API::ProjectSnippets do
         let(:visibility_level) { Snippet::PRIVATE }
 
         it 'rejects the snippet' do
-          expect { update_snippet(title: 'Foo', visibility: 'public') }
+          expect { update_snippet(params: { title: 'Foo', visibility: 'public' }) }
             .not_to change { snippet.reload.title }
 
           expect(response).to have_gitlab_http_status(:bad_request)
@@ -379,7 +379,7 @@ describe API::ProjectSnippets do
         end
 
         it 'creates a spam log' do
-          expect { update_snippet(title: 'Foo', visibility: 'public') }
+          expect { update_snippet(params: { title: 'Foo', visibility: 'public' }) }
             .to log_spam(title: 'Foo', user_id: admin.id, noteable_type: 'ProjectSnippet')
         end
       end
@@ -390,6 +390,10 @@ describe API::ProjectSnippets do
         let(:request) { put api("/projects/#{project_no_snippets.id}/snippets/123", admin), params: { description: 'foo' } }
       end
     end
+
+    def update_snippet(snippet_id: snippet.id, params: {})
+      put api("/projects/#{snippet.project.id}/snippets/#{snippet_id}", admin), params: params
+    end
   end
 
   describe 'DELETE /projects/:project_id/snippets/:id/' do
diff --git a/spec/requests/api/snippets_spec.rb b/spec/requests/api/snippets_spec.rb
index d399c2b3f1c..627611c10ce 100644
--- a/spec/requests/api/snippets_spec.rb
+++ b/spec/requests/api/snippets_spec.rb
@@ -301,7 +301,7 @@ describe API::Snippets do
     let(:visibility_level) { Snippet::PUBLIC }
     let(:other_user) { create(:user) }
     let(:snippet) do
-      create(:personal_snippet, author: user, visibility_level: visibility_level)
+      create(:personal_snippet, :repository, author: user, visibility_level: visibility_level)
     end
 
     shared_examples 'snippet updates' do
@@ -309,7 +309,7 @@ describe API::Snippets do
         new_content = 'New content'
         new_description = 'New description'
 
-        put api("/snippets/#{snippet.id}", user), params: { content: new_content, description: new_description, visibility: 'internal' }
+        update_snippet(params: { content: new_content, description: new_description, visibility: 'internal' })
 
         expect(response).to have_gitlab_http_status(:ok)
         snippet.reload
@@ -332,30 +332,30 @@ describe API::Snippets do
     it_behaves_like 'snippet updates'
 
     it 'returns 404 for invalid snippet id' do
-      put api("/snippets/1234", user), params: { title: 'foo' }
+      update_snippet(snippet_id: '1234', params: { title: 'Foo' })
 
       expect(response).to have_gitlab_http_status(:not_found)
       expect(json_response['message']).to eq('404 Snippet Not Found')
     end
 
     it "returns 404 for another user's snippet" do
-      put api("/snippets/#{snippet.id}", other_user), params: { title: 'fubar' }
+      update_snippet(requester: other_user, params: { title: 'foobar' })
 
       expect(response).to have_gitlab_http_status(:not_found)
       expect(json_response['message']).to eq('404 Snippet Not Found')
     end
 
     it 'returns 400 for missing parameters' do
-      put api("/snippets/1234", user)
+      update_snippet
 
       expect(response).to have_gitlab_http_status(:bad_request)
     end
 
-    context 'when the snippet is spam' do
-      def update_snippet(snippet_params = {})
-        put api("/snippets/#{snippet.id}", user), params: snippet_params
-      end
+    it_behaves_like 'update with repository actions' do
+      let(:snippet_without_repo) { create(:personal_snippet, author: user, visibility_level: visibility_level) }
+    end
 
+    context 'when the snippet is spam' do
       before do
         allow_next_instance_of(Spam::AkismetService) do |instance|
           allow(instance).to receive(:spam?).and_return(true)
@@ -366,7 +366,7 @@ describe API::Snippets do
         let(:visibility_level) { Snippet::PRIVATE }
 
         it 'updates the snippet' do
-          expect { update_snippet(title: 'Foo') }
+          expect { update_snippet(params: { title: 'Foo' }) }
             .to change { snippet.reload.title }.to('Foo')
         end
       end
@@ -375,7 +375,7 @@ describe API::Snippets do
         let(:visibility_level) { Snippet::PUBLIC }
 
         it 'rejects the shippet' do
-          expect { update_snippet(title: 'Foo') }
+          expect { update_snippet(params: { title: 'Foo' }) }
             .not_to change { snippet.reload.title }
 
           expect(response).to have_gitlab_http_status(:bad_request)
@@ -383,7 +383,7 @@ describe API::Snippets do
         end
 
         it 'creates a spam log' do
-          expect { update_snippet(title: 'Foo') }.to log_spam(title: 'Foo', user_id: user.id, noteable_type: 'PersonalSnippet')
+          expect { update_snippet(params: { title: 'Foo' }) }.to log_spam(title: 'Foo', user_id: user.id, noteable_type: 'PersonalSnippet')
         end
       end
 
@@ -391,16 +391,20 @@ describe API::Snippets do
         let(:visibility_level) { Snippet::PRIVATE }
 
         it 'rejects the snippet' do
-          expect { update_snippet(title: 'Foo', visibility: 'public') }
+          expect { update_snippet(params: { title: 'Foo', visibility: 'public' }) }
             .not_to change { snippet.reload.title }
         end
 
         it 'creates a spam log' do
-          expect { update_snippet(title: 'Foo', visibility: 'public') }
+          expect { update_snippet(params: { title: 'Foo', visibility: 'public' }) }
             .to log_spam(title: 'Foo', user_id: user.id, noteable_type: 'PersonalSnippet')
         end
       end
     end
+
+    def update_snippet(snippet_id: snippet.id, params: {}, requester: user)
+      put api("/snippets/#{snippet_id}", requester), params: params
+    end
   end
 
   describe 'DELETE /snippets/:id' do
diff --git a/spec/services/snippets/update_service_spec.rb b/spec/services/snippets/update_service_spec.rb
index 4858a0512ad..2c70cce767d 100644
--- a/spec/services/snippets/update_service_spec.rb
+++ b/spec/services/snippets/update_service_spec.rb
@@ -16,14 +16,9 @@ describe Snippets::UpdateService do
       }
     end
     let(:updater) { user }
+    let(:service) { Snippets::UpdateService.new(project, updater, options) }
 
-    subject do
-      described_class.new(
-        project,
-        updater,
-        options
-      ).execute(snippet)
-    end
+    subject { service.execute(snippet) }
 
     shared_examples 'a service that updates a snippet' do
       it 'updates a snippet with the provided attributes' do
@@ -98,9 +93,109 @@ describe Snippets::UpdateService do
       end
     end
 
+    shared_examples 'creates repository and creates file' do
+      it 'creates repository' do
+        expect(snippet.repository).not_to exist
+
+        subject
+
+        expect(snippet.repository).to exist
+      end
+
+      it 'commits the files to the repository' do
+        subject
+
+        expect(snippet.blobs.count).to eq 1
+
+        blob = snippet.repository.blob_at('master', options[:file_name])
+
+        expect(blob.data).to eq options[:content]
+      end
+
+      context 'when the repository does not exist' do
+        it 'does not try to commit file' do
+          allow(snippet).to receive(:repository_exists?).and_return(false)
+
+          expect(service).not_to receive(:create_commit)
+
+          subject
+        end
+      end
+
+      context 'when feature flag is disabled' do
+        before do
+          stub_feature_flags(version_snippets: false)
+        end
+
+        it 'does not create repository' do
+          subject
+
+          expect(snippet.repository).not_to exist
+        end
+
+        it 'does not try to commit file' do
+          expect(service).not_to receive(:create_commit)
+
+          subject
+        end
+      end
+
+      it 'returns error when the commit action fails' do
+        allow_next_instance_of(SnippetRepository) do |instance|
+          allow(instance).to receive(:multi_files_action).and_raise(SnippetRepository::CommitError)
+        end
+
+        response = subject
+
+        expect(response).to be_error
+        expect(response.payload[:snippet].errors.full_messages).to eq ['Error updating the snippet']
+      end
+    end
+
+    shared_examples 'updates repository content' do
+      it 'commit the files to the repository' do
+        blob = snippet.blobs.first
+        options[:file_name] = blob.path + '_new'
+
+        expect(blob.data).not_to eq(options[:content])
+
+        subject
+
+        blob = snippet.blobs.first
+
+        expect(blob.path).to eq(options[:file_name])
+        expect(blob.data).to eq(options[:content])
+      end
+
+      it 'returns error when the commit action fails' do
+        allow(snippet.snippet_repository).to receive(:multi_files_action).and_raise(SnippetRepository::CommitError)
+
+        response = subject
+
+        expect(response).to be_error
+        expect(response.payload[:snippet].errors.full_messages).to eq ['Error updating the snippet']
+      end
+
+      it 'returns error if snippet does not have a snippet_repository' do
+        allow(snippet).to receive(:snippet_repository).and_return(nil)
+
+        expect(subject).to be_error
+      end
+
+      context 'when the repository does not exist' do
+        it 'does not try to commit file' do
+          allow(snippet).to receive(:repository_exists?).and_return(false)
+
+          expect(service).not_to receive(:create_commit)
+
+          subject
+        end
+      end
+    end
+
     context 'when Project Snippet' do
       let_it_be(:project) { create(:project) }
-      let!(:snippet) { create(:project_snippet, author: user, project: project) }
+      let!(:snippet) { create(:project_snippet, :repository, author: user, project: project) }
 
       before do
         project.add_developer(user)
@@ -109,15 +204,29 @@ describe Snippets::UpdateService do
       it_behaves_like 'a service that updates a snippet'
       it_behaves_like 'public visibility level restrictions apply'
       it_behaves_like 'snippet update data is tracked'
+      it_behaves_like 'updates repository content'
+
+      context 'when snippet does not have a repository' do
+        let!(:snippet) { create(:project_snippet, author: user, project: project) }
+
+        it_behaves_like 'creates repository and creates file'
+      end
     end
 
     context 'when PersonalSnippet' do
       let(:project) { nil }
-      let!(:snippet) { create(:personal_snippet, author: user) }
+      let!(:snippet) { create(:personal_snippet, :repository, author: user) }
 
       it_behaves_like 'a service that updates a snippet'
       it_behaves_like 'public visibility level restrictions apply'
       it_behaves_like 'snippet update data is tracked'
+      it_behaves_like 'updates repository content'
+
+      context 'when snippet does not have a repository' do
+        let!(:snippet) { create(:personal_snippet, author: user, project: project) }
+
+        it_behaves_like 'creates repository and creates file'
+      end
     end
   end
 end
diff --git a/spec/support/shared_examples/requests/snippet_shared_examples.rb b/spec/support/shared_examples/requests/snippet_shared_examples.rb
new file mode 100644
index 00000000000..f2df97a35d9
--- /dev/null
+++ b/spec/support/shared_examples/requests/snippet_shared_examples.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+RSpec.shared_examples 'update with repository actions' do
+  context 'when the repository exists' do
+    it 'commits the changes to the repository' do
+      existing_blob = snippet.blobs.first
+      new_file_name = existing_blob.path + '_new'
+      new_content = 'New content'
+
+      update_snippet(params: { content: new_content, file_name: new_file_name })
+
+      aggregate_failures do
+        expect(response).to have_gitlab_http_status(:ok)
+        expect(snippet.repository.blob_at('master', existing_blob.path)).to be_nil
+
+        blob = snippet.repository.blob_at('master', new_file_name)
+        expect(blob).not_to be_nil
+        expect(blob.data).to eq(new_content)
+      end
+    end
+  end
+
+  context 'when the repository does not exist' do
+    let(:snippet) { snippet_without_repo }
+
+    it 'creates the repository' do
+      update_snippet(snippet_id: snippet.id, params: { title: 'foo' })
+
+      expect(snippet.repository).to exist
+    end
+
+    it 'commits the file to the repository' do
+      content = 'New Content'
+      file_name = 'file_name.rb'
+
+      update_snippet(snippet_id: snippet.id, params: { content: content, file_name: file_name })
+
+      blob = snippet.repository.blob_at('master', file_name)
+      expect(blob).not_to be_nil
+      expect(blob.data).to eq content
+    end
+  end
+end