Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc42

26 files changed, 1492 insertions, 495 deletions

diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
index 1bf757ea312..bab928318ce 100644
--- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
+++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap
@@ -40,6 +40,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
             tag="div"
           >
             <gl-button-stub
+              aria-label="Copy URL"
               buttontextclasses=""
               category="primary"
               class="d-inline-flex"
@@ -82,6 +83,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = `
             tag="div"
           >
             <gl-button-stub
+              aria-label="Copy URL"
               buttontextclasses=""
               category="primary"
               class="d-inline-flex"
diff --git a/spec/frontend/vue_shared/components/alert_details_table_spec.js b/spec/frontend/vue_shared/components/alert_details_table_spec.js
index 49b82cb4d4e..03b04a92bdf 100644
--- a/spec/frontend/vue_shared/components/alert_details_table_spec.js
+++ b/spec/frontend/vue_shared/components/alert_details_table_spec.js
@@ -75,45 +75,62 @@ describe('AlertDetails', () => {
     });
 
     describe('with table data', () => {
-      beforeEach(mountComponent);
-
-      it('renders a table', () => {
-        expect(findTableComponent().exists()).toBe(true);
-      });
-
-      it('renders a cell based on alert data', () => {
-        expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
-      });
-
-      it('should show allowed alert fields', () => {
-        const fields = findTableKeys();
-
-        expect(findTableField(fields, 'Iid').exists()).toBe(true);
-        expect(findTableField(fields, 'Title').exists()).toBe(true);
-        expect(findTableField(fields, 'Severity').exists()).toBe(true);
-        expect(findTableField(fields, 'Status').exists()).toBe(true);
-        expect(findTableField(fields, 'Hosts').exists()).toBe(true);
-        expect(findTableField(fields, 'Environment').exists()).toBe(true);
+      describe('default', () => {
+        beforeEach(mountComponent);
+
+        it('renders a table', () => {
+          expect(findTableComponent().exists()).toBe(true);
+        });
+
+        it('renders a cell based on alert data', () => {
+          expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
+        });
+
+        it('should show allowed alert fields', () => {
+          const fields = findTableKeys();
+          ['Iid', 'Title', 'Severity', 'Status', 'Hosts', 'Environment'].forEach((field) => {
+            expect(findTableField(fields, field).exists()).toBe(true);
+          });
+        });
+
+        it('should not show disallowed alert fields', () => {
+          const fields = findTableKeys();
+          ['Typename', 'Todos', 'Notes', 'Assignees'].forEach((field) => {
+            expect(findTableField(fields, field).exists()).toBe(false);
+          });
+        });
       });
 
-      it('should not show disallowed alert fields', () => {
-        const fields = findTableKeys();
+      describe('environment', () => {
+        it('should display only the name for the environment', () => {
+          mountComponent();
+          expect(findTableFieldValueByKey('Environment').text()).toBe(environmentName);
+        });
 
-        expect(findTableField(fields, 'Typename').exists()).toBe(false);
-        expect(findTableField(fields, 'Todos').exists()).toBe(false);
-        expect(findTableField(fields, 'Notes').exists()).toBe(false);
-        expect(findTableField(fields, 'Assignees').exists()).toBe(false);
-      });
+        it('should not display the environment row if there is not data', () => {
+          environmentData = { name: null, path: null };
+          mountComponent();
 
-      it('should display only the name for the environment', () => {
-        expect(findTableFieldValueByKey('Environment').text()).toBe(environmentName);
+          expect(findTableFieldValueByKey('Environment').text()).toBeFalsy();
+        });
       });
 
-      it('should not display the environment row if there is not data', () => {
-        environmentData = { name: null, path: null };
-        mountComponent();
-
-        expect(findTableFieldValueByKey('Environment').text()).toBeFalsy();
+      describe('status', () => {
+        it('should show the translated status for the default statuses', () => {
+          mountComponent();
+          expect(findTableFieldValueByKey('Status').text()).toBe('Triggered');
+        });
+
+        it('should show the translated status for provided statuses', () => {
+          const translatedStatus = 'Test';
+          mountComponent({ statuses: { TRIGGERED: translatedStatus } });
+          expect(findTableFieldValueByKey('Status').text()).toBe(translatedStatus);
+        });
+
+        it('should show the provided status if value is not defined in statuses', () => {
+          mountComponent({ statuses: {} });
+          expect(findTableFieldValueByKey('Status').text()).toBe('TRIGGERED');
+        });
       });
     });
   });
diff --git a/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap b/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap
index 023895099b1..06753044e93 100644
--- a/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap
+++ b/spec/frontend/vue_shared/components/blob_viewers/__snapshots__/simple_viewer_spec.js.snap
@@ -1,87 +1,88 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Blob Simple Viewer component rendering matches the snapshot 1`] = `
-<div
-  class="file-content code js-syntax-highlight"
-  data-qa-selector="file_content"
->
+<div>
   <div
-    class="line-numbers"
+    class="file-content code js-syntax-highlight"
   >
-    <a
-      class="diff-line-num js-line-number"
-      data-line-number="1"
-      href="#LC1"
-      id="L1"
+    <div
+      class="line-numbers"
     >
-      <gl-icon-stub
-        name="link"
-        size="12"
-      />
+      <a
+        class="diff-line-num js-line-number"
+        data-line-number="1"
+        href="#LC1"
+        id="L1"
+      >
+        <gl-icon-stub
+          name="link"
+          size="12"
+        />
+        
+        1
       
-      1
-    
-    </a>
-    <a
-      class="diff-line-num js-line-number"
-      data-line-number="2"
-      href="#LC2"
-      id="L2"
-    >
-      <gl-icon-stub
-        name="link"
-        size="12"
-      />
+      </a>
+      <a
+        class="diff-line-num js-line-number"
+        data-line-number="2"
+        href="#LC2"
+        id="L2"
+      >
+        <gl-icon-stub
+          name="link"
+          size="12"
+        />
+        
+        2
       
-      2
-    
-    </a>
-    <a
-      class="diff-line-num js-line-number"
-      data-line-number="3"
-      href="#LC3"
-      id="L3"
-    >
-      <gl-icon-stub
-        name="link"
-        size="12"
-      />
+      </a>
+      <a
+        class="diff-line-num js-line-number"
+        data-line-number="3"
+        href="#LC3"
+        id="L3"
+      >
+        <gl-icon-stub
+          name="link"
+          size="12"
+        />
+        
+        3
       
-      3
-    
-    </a>
-  </div>
-   
-  <div
-    class="blob-content"
-  >
-    <pre
-      class="code highlight"
+      </a>
+    </div>
+     
+    <div
+      class="blob-content"
     >
-      <code
-        data-blob-hash="foo-bar"
+      <pre
+        class="code highlight"
       >
-        <span
-          id="LC1"
+        <code
+          data-blob-hash="foo-bar"
         >
-          First
-        </span>
-        
+          <span
+            id="LC1"
+          >
+            First
+          </span>
+          
 
-        <span
-          id="LC2"
-        >
-          Second
-        </span>
-        
+          <span
+            id="LC2"
+          >
+            Second
+          </span>
+          
 
-        <span
-          id="LC3"
-        >
-          Third
-        </span>
-      </code>
-    </pre>
+          <span
+            id="LC3"
+          >
+            Third
+          </span>
+        </code>
+      </pre>
+    </div>
   </div>
 </div>
 `;
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 9a0616343fe..46d4edad891 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
@@ -1,20 +1,31 @@
 import { shallowMount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
 import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
 
 describe('Blob Simple Viewer component', () => {
   let wrapper;
   const contentMock = `<span id="LC1">First</span>\n<span id="LC2">Second</span>\n<span id="LC3">Third</span>`;
   const blobHash = 'foo-bar';
 
-  function createComponent(content = contentMock) {
+  function createComponent(
+    content = contentMock,
+    isRawContent = false,
+    isRefactorFlagEnabled = false,
+  ) {
     wrapper = shallowMount(SimpleViewer, {
       provide: {
         blobHash,
+        glFeatures: {
+          refactorBlobViewer: isRefactorFlagEnabled,
+        },
       },
       propsData: {
         content,
         type: 'text',
+        fileName: 'test.js',
+        isRawContent,
       },
     });
   }
@@ -83,4 +94,32 @@ describe('Blob Simple Viewer component', () => {
       });
     });
   });
+
+  describe('Vue refactoring to use Source Editor', () => {
+    const findEditorLite = () => wrapper.find(EditorLite);
+
+    it.each`
+      doesRender    | condition                                          | isRawContent | isRefactorFlagEnabled
+      ${'Does not'} | ${'rawContent is not specified'}                   | ${false}     | ${true}
+      ${'Does not'} | ${'feature flag is disabled is not specified'}     | ${true}      | ${false}
+      ${'Does not'} | ${'both, the FF and rawContent are not specified'} | ${false}     | ${false}
+      ${'Does'}     | ${'both, the FF and rawContent are specified'}     | ${true}      | ${true}
+    `(
+      '$doesRender render Editor Lite component in readonly mode when $condition',
+      async ({ isRawContent, isRefactorFlagEnabled } = {}) => {
+        createComponent('raw content', isRawContent, isRefactorFlagEnabled);
+        await waitForPromises();
+
+        if (isRawContent && isRefactorFlagEnabled) {
+          expect(findEditorLite().exists()).toBe(true);
+
+          expect(findEditorLite().props('value')).toBe('raw content');
+          expect(findEditorLite().props('fileName')).toBe('test.js');
+          expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true });
+        } else {
+          expect(findEditorLite().exists()).toBe(false);
+        }
+      },
+    );
+  });
 });
diff --git a/spec/frontend/vue_shared/components/delete_label_modal_spec.js b/spec/frontend/vue_shared/components/delete_label_modal_spec.js
new file mode 100644
index 00000000000..3905690dab4
--- /dev/null
+++ b/spec/frontend/vue_shared/components/delete_label_modal_spec.js
@@ -0,0 +1,64 @@
+import { GlModal } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
+import { TEST_HOST } from 'helpers/test_constants';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import DeleteLabelModal from '~/vue_shared/components/delete_label_modal.vue';
+
+const MOCK_MODAL_DATA = {
+  labelName: 'label 1',
+  subjectName: 'GitLab Org',
+  destroyPath: `${TEST_HOST}/1`,
+};
+
+describe('vue_shared/components/delete_label_modal', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = extendedWrapper(
+      mount(DeleteLabelModal, {
+        propsData: {
+          selector: '.js-test-btn',
+        },
+        stubs: {
+          GlModal: stubComponent(GlModal, {
+            template:
+              '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+          }),
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findModal = () => wrapper.find(GlModal);
+  const findPrimaryModalButton = () => wrapper.findByTestId('delete-button');
+
+  describe('template', () => {
+    describe('when modal data is set', () => {
+      beforeEach(() => {
+        createComponent();
+        wrapper.vm.labelName = MOCK_MODAL_DATA.labelName;
+        wrapper.vm.subjectName = MOCK_MODAL_DATA.subjectName;
+        wrapper.vm.destroyPath = MOCK_MODAL_DATA.destroyPath;
+      });
+
+      it('renders GlModal', () => {
+        expect(findModal().exists()).toBe(true);
+      });
+
+      it('displays the label name and subject name', () => {
+        expect(findModal().text()).toContain(
+          `${MOCK_MODAL_DATA.labelName} will be permanently deleted from ${MOCK_MODAL_DATA.subjectName}. This cannot be undone`,
+        );
+      });
+
+      it('passes the destroyPath to the button', () => {
+        expect(findPrimaryModalButton().attributes('href')).toBe(MOCK_MODAL_DATA.destroyPath);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/deprecated_modal_spec.js b/spec/frontend/vue_shared/components/deprecated_modal_spec.js
deleted file mode 100644
index b9793ce2d80..00000000000
--- a/spec/frontend/vue_shared/components/deprecated_modal_spec.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-
-const modalComponent = Vue.extend(DeprecatedModal);
-
-describe('DeprecatedModal', () => {
-  let vm;
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('props', () => {
-    describe('without primaryButtonLabel', () => {
-      beforeEach(() => {
-        vm = mountComponent(modalComponent, {
-          primaryButtonLabel: null,
-        });
-      });
-
-      it('does not render a primary button', () => {
-        expect(vm.$el.querySelector('.js-primary-button')).toBeNull();
-      });
-    });
-
-    describe('with id', () => {
-      describe('does not render a primary button', () => {
-        beforeEach(() => {
-          vm = mountComponent(modalComponent, {
-            id: 'my-modal',
-          });
-        });
-
-        it('assigns the id to the modal', () => {
-          expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull();
-        });
-
-        it('does not show the modal immediately', () => {
-          expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show');
-        });
-
-        it('does not show a backdrop', () => {
-          expect(vm.$el.querySelector('modal-backdrop')).toBeNull();
-        });
-      });
-    });
-
-    it('works with data-toggle="modal"', () => {
-      setFixtures(`
-        <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
-        <div id="modal-container"></div>
-      `);
-
-      const modalContainer = document.getElementById('modal-container');
-      const modalButton = document.getElementById('modal-button');
-      vm = mountComponent(
-        modalComponent,
-        {
-          id: 'my-modal',
-        },
-        modalContainer,
-      );
-      const modalElement = vm.$el.querySelector('#my-modal');
-
-      expect(modalElement).not.toHaveClass('show');
-
-      modalButton.click();
-
-      expect(modalElement).toHaveClass('show');
-    });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/ensure_data_spec.js b/spec/frontend/vue_shared/components/ensure_data_spec.js
new file mode 100644
index 00000000000..eef8b452f5f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/ensure_data_spec.js
@@ -0,0 +1,145 @@
+import { GlEmptyState } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import { mount } from '@vue/test-utils';
+import ensureData from '~/ensure_data';
+
+const mockData = { message: 'Hello there' };
+const defaultOptions = {
+  parseData: () => mockData,
+  data: mockData,
+};
+
+const MockChildComponent = {
+  inject: ['message'],
+  render(createElement) {
+    return createElement('h1', this.message);
+  },
+};
+
+const MockParentComponent = {
+  components: {
+    MockChildComponent,
+  },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    otherProp: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  render(createElement) {
+    return createElement('div', [this.message, createElement(MockChildComponent)]);
+  },
+};
+
+describe('EnsureData', () => {
+  let wrapper;
+
+  function findEmptyState() {
+    return wrapper.findComponent(GlEmptyState);
+  }
+
+  function findChild() {
+    return wrapper.findComponent(MockChildComponent);
+  }
+  function findParent() {
+    return wrapper.findComponent(MockParentComponent);
+  }
+
+  function createComponent(options = defaultOptions) {
+    return mount(ensureData(MockParentComponent, options));
+  }
+
+  beforeEach(() => {
+    Sentry.captureException = jest.fn();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    Sentry.captureException.mockClear();
+  });
+
+  describe('when parseData throws', () => {
+    it('should render GlEmptyState', () => {
+      wrapper = createComponent({
+        parseData: () => {
+          throw new Error();
+        },
+      });
+
+      expect(findParent().exists()).toBe(false);
+      expect(findChild().exists()).toBe(false);
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it('should not log to Sentry when shouldLog=false (default)', () => {
+      wrapper = createComponent({
+        parseData: () => {
+          throw new Error();
+        },
+      });
+
+      expect(Sentry.captureException).not.toHaveBeenCalled();
+    });
+
+    it('should log to Sentry when shouldLog=true', () => {
+      const error = new Error('Error!');
+      wrapper = createComponent({
+        parseData: () => {
+          throw error;
+        },
+        shouldLog: true,
+      });
+
+      expect(Sentry.captureException).toHaveBeenCalledWith(error);
+    });
+  });
+
+  describe('when parseData succeeds', () => {
+    it('should render MockParentComponent and MockChildComponent', () => {
+      wrapper = createComponent();
+
+      expect(findEmptyState().exists()).toBe(false);
+      expect(findParent().exists()).toBe(true);
+      expect(findChild().exists()).toBe(true);
+    });
+
+    it('enables user to provide data to child components', () => {
+      wrapper = createComponent();
+
+      const childComponent = findChild();
+      expect(childComponent.text()).toBe(mockData.message);
+    });
+
+    it('enables user to override provide data', () => {
+      const message = 'Another message';
+      wrapper = createComponent({ ...defaultOptions, provide: { message } });
+
+      const childComponent = findChild();
+      expect(childComponent.text()).toBe(message);
+    });
+
+    it('enables user to pass props to parent component', () => {
+      wrapper = createComponent();
+
+      expect(findParent().props()).toMatchObject(mockData);
+    });
+
+    it('enables user to override props data', () => {
+      const props = { message: 'Another message', otherProp: true };
+      wrapper = createComponent({ ...defaultOptions, props });
+
+      expect(findParent().props()).toMatchObject(props);
+    });
+
+    it('should not log to Sentry when shouldLog=true', () => {
+      wrapper = createComponent({ ...defaultOptions, shouldLog: true });
+
+      expect(Sentry.captureException).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
index 7606b3bd91c..c24528ba4d2 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
@@ -3,6 +3,8 @@ import { mockLabels } from 'jest/vue_shared/components/sidebar/labels_select_vue
 import Api from '~/api';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 import BranchToken from '~/vue_shared/components/filtered_search_bar/tokens/branch_token.vue';
+import EmojiToken from '~/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue';
+import EpicToken from '~/vue_shared/components/filtered_search_bar/tokens/epic_token.vue';
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
 
@@ -59,6 +61,21 @@ export const mockMilestones = [
   mockEscapedMilestone,
 ];
 
+export const mockEpics = [
+  { iid: 1, id: 1, title: 'Foo' },
+  { iid: 2, id: 2, title: 'Bar' },
+];
+
+export const mockEmoji1 = {
+  name: 'thumbsup',
+};
+
+export const mockEmoji2 = {
+  name: 'star',
+};
+
+export const mockEmojis = [mockEmoji1, mockEmoji2];
+
 export const mockBranchToken = {
   type: 'source_branch',
   icon: 'branch',
@@ -103,6 +120,28 @@ export const mockMilestoneToken = {
   fetchMilestones: () => Promise.resolve({ data: mockMilestones }),
 };
 
+export const mockEpicToken = {
+  type: 'epic_iid',
+  icon: 'clock',
+  title: 'Epic',
+  unique: true,
+  symbol: '&',
+  token: EpicToken,
+  operators: [{ value: '=', description: 'is', default: 'true' }],
+  fetchEpics: () => Promise.resolve({ data: mockEpics }),
+  fetchSingleEpic: () => Promise.resolve({ data: mockEpics[0] }),
+};
+
+export const mockReactionEmojiToken = {
+  type: 'my_reaction_emoji',
+  icon: 'thumb-up',
+  title: 'My-Reaction',
+  unique: true,
+  token: EmojiToken,
+  operators: [{ value: '=', description: 'is', default: 'true' }],
+  fetchEmojis: () => Promise.resolve(mockEmojis),
+};
+
 export const mockMembershipToken = {
   type: 'with_inherited_permissions',
   icon: 'group',
@@ -168,6 +207,14 @@ export const tokenValuePlain = {
   value: { data: 'foo' },
 };
 
+export const tokenValueEpic = {
+  type: 'epic_iid',
+  value: {
+    operator: '=',
+    data: '"foo"::&42',
+  },
+};
+
 export const mockHistoryItems = [
   [tokenValueAuthor, tokenValueLabel, tokenValueMilestone, 'duo'],
   [tokenValueAuthor, 'si'],
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
new file mode 100644
index 00000000000..231f2f01428
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js
@@ -0,0 +1,217 @@
+import {
+  GlFilteredSearchToken,
+  GlFilteredSearchSuggestion,
+  GlFilteredSearchTokenSegment,
+  GlDropdownDivider,
+} from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+
+import {
+  DEFAULT_LABEL_NONE,
+  DEFAULT_LABEL_ANY,
+} from '~/vue_shared/components/filtered_search_bar/constants';
+import EmojiToken from '~/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue';
+
+import { mockReactionEmojiToken, mockEmojis } from '../mock_data';
+
+jest.mock('~/flash');
+const GlEmoji = { template: '<img/>' };
+const defaultStubs = {
+  Portal: true,
+  GlFilteredSearchSuggestionList: {
+    template: '<div></div>',
+    methods: {
+      getValue: () => '=',
+    },
+  },
+  GlEmoji,
+};
+
+function createComponent(options = {}) {
+  const {
+    config = mockReactionEmojiToken,
+    value = { data: '' },
+    active = false,
+    stubs = defaultStubs,
+  } = options;
+  return mount(EmojiToken, {
+    propsData: {
+      config,
+      value,
+      active,
+    },
+    provide: {
+      portalName: 'fake target',
+      alignSuggestions: function fakeAlignSuggestions() {},
+      suggestionsListClass: 'custom-class',
+    },
+    stubs,
+  });
+}
+
+describe('EmojiToken', () => {
+  let mock;
+  let wrapper;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.restore();
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    beforeEach(async () => {
+      wrapper = createComponent({ value: { data: mockEmojis[0].name } });
+
+      wrapper.setData({
+        emojis: mockEmojis,
+      });
+
+      await wrapper.vm.$nextTick();
+    });
+
+    describe('currentValue', () => {
+      it('returns lowercase string for `value.data`', () => {
+        expect(wrapper.vm.currentValue).toBe(mockEmojis[0].name);
+      });
+    });
+
+    describe('activeEmoji', () => {
+      it('returns object for currently present `value.data`', () => {
+        expect(wrapper.vm.activeEmoji).toEqual(mockEmojis[0]);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    describe('fetchEmojiBySearchTerm', () => {
+      it('calls `config.fetchEmojis` with provided searchTerm param', () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEmojis');
+
+        wrapper.vm.fetchEmojiBySearchTerm('foo');
+
+        expect(wrapper.vm.config.fetchEmojis).toHaveBeenCalledWith('foo');
+      });
+
+      it('sets response to `emojis` when request is successful', () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEmojis').mockResolvedValue(mockEmojis);
+
+        wrapper.vm.fetchEmojiBySearchTerm('foo');
+
+        return waitForPromises().then(() => {
+          expect(wrapper.vm.emojis).toEqual(mockEmojis);
+        });
+      });
+
+      it('calls `createFlash` with flash error message when request fails', () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEmojis').mockRejectedValue({});
+
+        wrapper.vm.fetchEmojiBySearchTerm('foo');
+
+        return waitForPromises().then(() => {
+          expect(createFlash).toHaveBeenCalledWith('There was a problem fetching emojis.');
+        });
+      });
+
+      it('sets `loading` to false when request completes', () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEmojis').mockRejectedValue({});
+
+        wrapper.vm.fetchEmojiBySearchTerm('foo');
+
+        return waitForPromises().then(() => {
+          expect(wrapper.vm.loading).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe('template', () => {
+    const defaultEmojis = [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY];
+
+    beforeEach(async () => {
+      wrapper = createComponent({
+        value: { data: `"${mockEmojis[0].name}"` },
+      });
+
+      wrapper.setData({
+        emojis: mockEmojis,
+      });
+
+      await wrapper.vm.$nextTick();
+    });
+
+    it('renders gl-filtered-search-token component', () => {
+      expect(wrapper.find(GlFilteredSearchToken).exists()).toBe(true);
+    });
+
+    it('renders token item when value is selected', () => {
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+
+      expect(tokenSegments).toHaveLength(3); // My Reaction, =, "thumbsup"
+      expect(tokenSegments.at(2).find(GlEmoji).attributes('data-name')).toEqual('thumbsup');
+    });
+
+    it('renders provided defaultEmojis as suggestions', async () => {
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockReactionEmojiToken, defaultEmojis },
+        stubs: { Portal: true, GlEmoji },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(defaultEmojis.length);
+      defaultEmojis.forEach((emoji, index) => {
+        expect(suggestions.at(index).text()).toBe(emoji.text);
+      });
+    });
+
+    it('does not render divider when no defaultEmojis', async () => {
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockReactionEmojiToken, defaultEmojis: [] },
+        stubs: { Portal: true, GlEmoji },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
+      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
+    });
+
+    it('renders `DEFAULT_LABEL_NONE` and `DEFAULT_LABEL_ANY` as default suggestions', async () => {
+      wrapper = createComponent({
+        active: true,
+        config: { ...mockReactionEmojiToken },
+        stubs: { Portal: true, GlEmoji },
+      });
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const suggestionsSegment = tokenSegments.at(2);
+      suggestionsSegment.vm.$emit('activate');
+      await wrapper.vm.$nextTick();
+
+      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+
+      expect(suggestions).toHaveLength(2);
+      expect(suggestions.at(0).text()).toBe(DEFAULT_LABEL_NONE.text);
+      expect(suggestions.at(1).text()).toBe(DEFAULT_LABEL_ANY.text);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js
new file mode 100644
index 00000000000..0c3f9e1363f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js
@@ -0,0 +1,180 @@
+import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
+import createFlash from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+
+import EpicToken from '~/vue_shared/components/filtered_search_bar/tokens/epic_token.vue';
+
+import { mockEpicToken, mockEpics } from '../mock_data';
+
+jest.mock('~/flash');
+
+const defaultStubs = {
+  Portal: true,
+  GlFilteredSearchSuggestionList: {
+    template: '<div></div>',
+    methods: {
+      getValue: () => '=',
+    },
+  },
+};
+
+function createComponent(options = {}) {
+  const {
+    config = mockEpicToken,
+    value = { data: '' },
+    active = false,
+    stubs = defaultStubs,
+  } = options;
+  return mount(EpicToken, {
+    propsData: {
+      config,
+      value,
+      active,
+    },
+    provide: {
+      portalName: 'fake target',
+      alignSuggestions: function fakeAlignSuggestions() {},
+      suggestionsListClass: 'custom-class',
+    },
+    stubs,
+  });
+}
+
+describe('EpicToken', () => {
+  let mock;
+  let wrapper;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    mock.restore();
+    wrapper.destroy();
+  });
+
+  describe('computed', () => {
+    beforeEach(async () => {
+      wrapper = createComponent({
+        data: {
+          epics: mockEpics,
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+    });
+
+    describe('currentValue', () => {
+      it.each`
+        data                                             | id
+        ${`${mockEpics[0].title}::&${mockEpics[0].iid}`} | ${mockEpics[0].iid}
+        ${mockEpics[0].iid}                              | ${mockEpics[0].iid}
+        ${'foobar'}                                      | ${'foobar'}
+      `('$data returns $id', async ({ data, id }) => {
+        wrapper.setProps({ value: { data } });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.currentValue).toBe(id);
+      });
+    });
+
+    describe('activeEpic', () => {
+      it('returns object for currently present `value.data`', async () => {
+        wrapper.setProps({
+          value: { data: `${mockEpics[0].iid}` },
+        });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.vm.activeEpic).toEqual(mockEpics[0]);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('fetchEpicsBySearchTerm', () => {
+      it('calls `config.fetchEpics` with provided searchTerm param', () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEpics');
+
+        wrapper.vm.fetchEpicsBySearchTerm('foo');
+
+        expect(wrapper.vm.config.fetchEpics).toHaveBeenCalledWith('foo');
+      });
+
+      it('sets response to `epics` when request is successful', async () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEpics').mockResolvedValue({
+          data: mockEpics,
+        });
+
+        wrapper.vm.fetchEpicsBySearchTerm();
+
+        await waitForPromises();
+
+        expect(wrapper.vm.epics).toEqual(mockEpics);
+      });
+
+      it('calls `createFlash` with flash error message when request fails', async () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEpics').mockRejectedValue({});
+
+        wrapper.vm.fetchEpicsBySearchTerm('foo');
+
+        await waitForPromises();
+
+        expect(createFlash).toHaveBeenCalledWith({
+          message: 'There was a problem fetching epics.',
+        });
+      });
+
+      it('sets `loading` to false when request completes', async () => {
+        jest.spyOn(wrapper.vm.config, 'fetchEpics').mockRejectedValue({});
+
+        wrapper.vm.fetchEpicsBySearchTerm('foo');
+
+        await waitForPromises();
+
+        expect(wrapper.vm.loading).toBe(false);
+      });
+    });
+
+    describe('fetchSingleEpic', () => {
+      it('calls `config.fetchSingleEpic` with provided iid param', async () => {
+        jest.spyOn(wrapper.vm.config, 'fetchSingleEpic');
+
+        wrapper.vm.fetchSingleEpic(1);
+
+        expect(wrapper.vm.config.fetchSingleEpic).toHaveBeenCalledWith(1);
+
+        await waitForPromises();
+
+        expect(wrapper.vm.epics).toEqual([mockEpics[0]]);
+      });
+    });
+  });
+
+  describe('template', () => {
+    beforeEach(async () => {
+      wrapper = createComponent({
+        value: { data: `${mockEpics[0].iid}` },
+        data: { epics: mockEpics },
+      });
+
+      await wrapper.vm.$nextTick();
+    });
+
+    it('renders gl-filtered-search-token component', () => {
+      expect(wrapper.find(GlFilteredSearchToken).exists()).toBe(true);
+    });
+
+    it('renders token item when value is selected', () => {
+      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+
+      expect(tokenSegments).toHaveLength(3);
+      expect(tokenSegments.at(2).text()).toBe(`${mockEpics[0].title}::&${mockEpics[0].iid}`);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
index 7676ce10ce0..8528c062426 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js
@@ -118,6 +118,22 @@ describe('LabelToken', () => {
       wrapper = createComponent();
     });
 
+    describe('getLabelName', () => {
+      it('returns value of `name` or `title` property present in provided label param', () => {
+        let mockLabel = {
+          title: 'foo',
+        };
+
+        expect(wrapper.vm.getLabelName(mockLabel)).toBe(mockLabel.title);
+
+        mockLabel = {
+          name: 'foo',
+        };
+
+        expect(wrapper.vm.getLabelName(mockLabel)).toBe(mockLabel.name);
+      });
+    });
+
     describe('fetchLabelBySearchTerm', () => {
       it('calls `config.fetchLabels` with provided searchTerm param', () => {
         jest.spyOn(wrapper.vm.config, 'fetchLabels');
diff --git a/spec/frontend/vue_shared/components/gl_toggle_vuex_spec.js b/spec/frontend/vue_shared/components/gl_toggle_vuex_spec.js
deleted file mode 100644
index ac670b622b1..00000000000
--- a/spec/frontend/vue_shared/components/gl_toggle_vuex_spec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { GlToggle } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import GlToggleVuex from '~/vue_shared/components/gl_toggle_vuex.vue';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('GlToggleVuex component', () => {
-  let wrapper;
-  let store;
-
-  const findButton = () => wrapper.find('button');
-
-  const createWrapper = (props = {}) => {
-    wrapper = mount(GlToggleVuex, {
-      localVue,
-      store,
-      propsData: {
-        stateProperty: 'toggleState',
-        ...props,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    store = new Vuex.Store({
-      state: {
-        toggleState: false,
-      },
-      actions: {
-        setToggleState: ({ commit }, { key, value }) => commit('setToggleState', { key, value }),
-      },
-      mutations: {
-        setToggleState: (state, { key, value }) => {
-          state[key] = value;
-        },
-      },
-    });
-    createWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('renders gl-toggle', () => {
-    expect(wrapper.find(GlToggle).exists()).toBe(true);
-  });
-
-  it('properly computes default value for setAction', () => {
-    expect(wrapper.props('setAction')).toBe('setToggleState');
-  });
-
-  describe('without a store module', () => {
-    it('calls action with new value when value changes', () => {
-      jest.spyOn(store, 'dispatch');
-
-      findButton().trigger('click');
-      expect(store.dispatch).toHaveBeenCalledWith('setToggleState', {
-        key: 'toggleState',
-        value: true,
-      });
-    });
-
-    it('updates store property when value changes', () => {
-      findButton().trigger('click');
-      expect(store.state.toggleState).toBe(true);
-    });
-  });
-
-  describe('with a store module', () => {
-    beforeEach(() => {
-      store = new Vuex.Store({
-        modules: {
-          someModule: {
-            namespaced: true,
-            state: {
-              toggleState: false,
-            },
-            actions: {
-              setToggleState: ({ commit }, { key, value }) =>
-                commit('setToggleState', { key, value }),
-            },
-            mutations: {
-              setToggleState: (state, { key, value }) => {
-                state[key] = value;
-              },
-            },
-          },
-        },
-      });
-
-      createWrapper({
-        storeModule: 'someModule',
-      });
-    });
-
-    it('calls action with new value when value changes', () => {
-      jest.spyOn(store, 'dispatch');
-
-      findButton().trigger('click');
-      expect(store.dispatch).toHaveBeenCalledWith('someModule/setToggleState', {
-        key: 'toggleState',
-        value: true,
-      });
-    });
-
-    it('updates store property when value changes', () => {
-      findButton().trigger('click');
-      expect(store.state.someModule.toggleState).toBe(true);
-    });
-  });
-});
diff --git a/spec/frontend/vue_shared/components/help_popover_spec.js b/spec/frontend/vue_shared/components/help_popover_spec.js
index baf80a8a04e..30c6fa04032 100644
--- a/spec/frontend/vue_shared/components/help_popover_spec.js
+++ b/spec/frontend/vue_shared/components/help_popover_spec.js
@@ -27,7 +27,6 @@ describe('HelpPopover', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('renders a link button with an icon question', () => {
@@ -35,17 +34,12 @@ describe('HelpPopover', () => {
       icon: 'question',
       variant: 'link',
     });
-    expect(findQuestionButton().attributes().tabindex).toBe('0');
   });
 
   it('renders popover that uses the question button as target', () => {
     expect(findPopover().props().target()).toBe(findQuestionButton().vm.$el);
   });
 
-  it('triggers popover on hover and focus', () => {
-    expect(findPopover().props().triggers).toBe('hover focus');
-  });
-
   it('allows rendering title with HTML tags', () => {
     expect(findPopover().find('strong').exists()).toBe(true);
   });
@@ -54,6 +48,14 @@ describe('HelpPopover', () => {
     expect(findPopover().find('b').exists()).toBe(true);
   });
 
+  describe('without title', () => {
+    it('does not render title', () => {
+      buildWrapper({ title: null });
+
+      expect(findPopover().find('span').exists()).toBe(false);
+    });
+  });
+
   it('binds other popover options to the popover instance', () => {
     const placement = 'bottom';
 
diff --git a/spec/frontend/vue_shared/components/lib/utils/props_utils_spec.js b/spec/frontend/vue_shared/components/lib/utils/props_utils_spec.js
new file mode 100644
index 00000000000..f1c9fbb00c9
--- /dev/null
+++ b/spec/frontend/vue_shared/components/lib/utils/props_utils_spec.js
@@ -0,0 +1,91 @@
+import { propsUnion } from '~/vue_shared/components/lib/utils/props_utils';
+
+describe('propsUnion', () => {
+  const stringRequired = {
+    type: String,
+    required: true,
+  };
+
+  const stringOptional = {
+    type: String,
+    required: false,
+  };
+
+  const numberOptional = {
+    type: Number,
+    required: false,
+  };
+
+  const booleanRequired = {
+    type: Boolean,
+    required: true,
+  };
+
+  const FooComponent = {
+    props: { foo: stringRequired },
+  };
+
+  const BarComponent = {
+    props: { bar: numberOptional },
+  };
+
+  const FooBarComponent = {
+    props: {
+      foo: stringRequired,
+      bar: numberOptional,
+    },
+  };
+
+  const FooOptionalComponent = {
+    props: {
+      foo: stringOptional,
+    },
+  };
+
+  const QuxComponent = {
+    props: {
+      foo: booleanRequired,
+      qux: stringRequired,
+    },
+  };
+
+  it('returns an empty object given no components', () => {
+    expect(propsUnion([])).toEqual({});
+  });
+
+  it('merges non-overlapping props', () => {
+    expect(propsUnion([FooComponent, BarComponent])).toEqual({
+      ...FooComponent.props,
+      ...BarComponent.props,
+    });
+  });
+
+  it('merges overlapping props', () => {
+    expect(propsUnion([FooComponent, BarComponent, FooBarComponent])).toEqual({
+      ...FooComponent.props,
+      ...BarComponent.props,
+      ...FooBarComponent.props,
+    });
+  });
+
+  it.each`
+    components
+    ${[FooComponent, FooOptionalComponent]}
+    ${[FooOptionalComponent, FooComponent]}
+  `('prefers required props over non-required props', ({ components }) => {
+    expect(propsUnion(components)).toEqual(FooComponent.props);
+  });
+
+  it('throws if given props with conflicting types', () => {
+    expect(() => propsUnion([FooComponent, QuxComponent])).toThrow(/incompatible prop types/);
+  });
+
+  it.each`
+    components
+    ${[{ props: ['foo', 'bar'] }]}
+    ${[{ props: { foo: String, bar: Number } }]}
+    ${[{ props: { foo: {}, bar: {} } }]}
+  `('throw if given a non-verbose props object', ({ components }) => {
+    expect(() => propsUnion(components)).toThrow(/expected verbose prop/);
+  });
+});
diff --git a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
index 5364e2d5f52..ba2450b56c9 100644
--- a/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js
@@ -1,5 +1,6 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import ApplySuggestion from '~/vue_shared/components/markdown/apply_suggestion.vue';
 import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
 
@@ -16,17 +17,14 @@ const DEFAULT_PROPS = {
 describe('Suggestion Diff component', () => {
   let wrapper;
 
-  const createComponent = (props, glFeatures = {}) => {
+  const createComponent = (props) => {
     wrapper = shallowMount(SuggestionDiffHeader, {
       propsData: {
         ...DEFAULT_PROPS,
         ...props,
       },
-      provide: {
-        glFeatures: {
-          batchSuggestions: true,
-          ...glFeatures,
-        },
+      directives: {
+        GlTooltip: createMockDirective(),
       },
     });
   };
@@ -211,18 +209,6 @@ describe('Suggestion Diff component', () => {
     });
   });
 
-  describe('batchSuggestions feature flag is set to false', () => {
-    beforeEach(() => {
-      createComponent({}, { batchSuggestions: false });
-    });
-
-    it('disables add to batch buttons but keeps apply suggestion enabled', () => {
-      expect(findApplyButton().exists()).toBe(true);
-      expect(findAddToBatchButton().exists()).toBe(false);
-      expect(findApplyButton().attributes('disabled')).not.toBe('true');
-    });
-  });
-
   describe('canApply is set to false', () => {
     beforeEach(() => {
       createComponent({ canApply: false });
@@ -236,15 +222,23 @@ describe('Suggestion Diff component', () => {
   });
 
   describe('tooltip message for apply button', () => {
+    const findTooltip = () => getBinding(findApplyButton().element, 'gl-tooltip');
+
     it('renders correct tooltip message when button is applicable', () => {
       createComponent();
-      expect(wrapper.vm.tooltipMessage).toBe('This also resolves this thread');
+      const tooltip = findTooltip();
+
+      expect(tooltip.modifiers.viewport).toBe(true);
+      expect(tooltip.value).toBe('This also resolves this thread');
     });
 
     it('renders the inapplicable reason in the tooltip when button is not applicable', () => {
       const inapplicableReason = 'lorem';
       createComponent({ canApply: false, inapplicableReason });
-      expect(wrapper.vm.tooltipMessage).toBe(inapplicableReason);
+      const tooltip = findTooltip();
+
+      expect(tooltip.modifiers.viewport).toBe(true);
+      expect(tooltip.value).toBe(inapplicableReason);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/markdown/toolbar_spec.js b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
index e7c31014bfc..eddc4033a65 100644
--- a/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
@@ -1,35 +1,75 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import toolbar from '~/vue_shared/components/markdown/toolbar.vue';
+import { mount } from '@vue/test-utils';
+import { isExperimentVariant } from '~/experimentation/utils';
+import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
+import { INVITE_MEMBERS_IN_COMMENT } from '~/invite_members/constants';
+import Toolbar from '~/vue_shared/components/markdown/toolbar.vue';
+
+jest.mock('~/experimentation/utils', () => ({ isExperimentVariant: jest.fn() }));
 
 describe('toolbar', () => {
-  let vm;
-  const Toolbar = Vue.extend(toolbar);
-  const props = {
-    markdownDocsPath: '',
+  let wrapper;
+
+  const createMountedWrapper = (props = {}) => {
+    wrapper = mount(Toolbar, {
+      propsData: { markdownDocsPath: '', ...props },
+      stubs: { 'invite-members-trigger': true },
+    });
   };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    isExperimentVariant.mockReset();
   });
 
   describe('user can attach file', () => {
     beforeEach(() => {
-      vm = mountComponent(Toolbar, props);
+      createMountedWrapper();
     });
 
     it('should render uploading-container', () => {
-      expect(vm.$el.querySelector('.uploading-container')).not.toBeNull();
+      expect(wrapper.vm.$el.querySelector('.uploading-container')).not.toBeNull();
     });
   });
 
   describe('user cannot attach file', () => {
     beforeEach(() => {
-      vm = mountComponent(Toolbar, { ...props, canAttachFile: false });
+      createMountedWrapper({ canAttachFile: false });
     });
 
     it('should not render uploading-container', () => {
-      expect(vm.$el.querySelector('.uploading-container')).toBeNull();
+      expect(wrapper.vm.$el.querySelector('.uploading-container')).toBeNull();
+    });
+  });
+
+  describe('user can invite member', () => {
+    const findInviteLink = () => wrapper.find(InviteMembersTrigger);
+
+    beforeEach(() => {
+      isExperimentVariant.mockReturnValue(true);
+      createMountedWrapper();
+    });
+
+    it('should render the invite members trigger', () => {
+      expect(findInviteLink().exists()).toBe(true);
+    });
+
+    it('should have correct props', () => {
+      expect(findInviteLink().props().displayText).toBe('Invite Member');
+      expect(findInviteLink().props().trackExperiment).toBe(INVITE_MEMBERS_IN_COMMENT);
+      expect(findInviteLink().props().triggerSource).toBe(INVITE_MEMBERS_IN_COMMENT);
+    });
+  });
+
+  describe('user can not invite member', () => {
+    const findInviteLink = () => wrapper.find(InviteMembersTrigger);
+
+    beforeEach(() => {
+      isExperimentVariant.mockReturnValue(false);
+      createMountedWrapper();
+    });
+
+    it('should render the invite members trigger', () => {
+      expect(findInviteLink().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/recaptcha_eventhub_spec.js b/spec/frontend/vue_shared/components/recaptcha_eventhub_spec.js
deleted file mode 100644
index d86d627886f..00000000000
--- a/spec/frontend/vue_shared/components/recaptcha_eventhub_spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { eventHub, callbackName } from '~/vue_shared/components/recaptcha_eventhub';
-
-describe('reCAPTCHA event hub', () => {
-  // the following test case currently crashes
-  // see https://gitlab.com/gitlab-org/gitlab/issues/29192#note_217840035
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('throws an error for overriding the callback', () => {
-    expect(() => {
-      window[callbackName] = 'something';
-    }).toThrow();
-  });
-
-  it('triggering callback emits a submit event', () => {
-    const eventHandler = jest.fn();
-    eventHub.$once('submit', eventHandler);
-
-    window[callbackName]();
-
-    expect(eventHandler).toHaveBeenCalled();
-  });
-});
diff --git a/spec/frontend/vue_shared/components/recaptcha_modal_spec.js b/spec/frontend/vue_shared/components/recaptcha_modal_spec.js
deleted file mode 100644
index 8ab65efd388..00000000000
--- a/spec/frontend/vue_shared/components/recaptcha_modal_spec.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import { eventHub } from '~/vue_shared/components/recaptcha_eventhub';
-
-import RecaptchaModal from '~/vue_shared/components/recaptcha_modal.vue';
-
-describe('RecaptchaModal', () => {
-  const recaptchaFormId = 'recaptcha-form';
-  const recaptchaHtml = `<form id="${recaptchaFormId}"></form>`;
-
-  let wrapper;
-
-  const findRecaptchaForm = () => wrapper.find(`#${recaptchaFormId}`).element;
-
-  beforeEach(() => {
-    wrapper = shallowMount(RecaptchaModal, {
-      propsData: {
-        html: recaptchaHtml,
-      },
-    });
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('submits the form if event hub emits submit event', () => {
-    const form = findRecaptchaForm();
-    jest.spyOn(form, 'submit').mockImplementation();
-
-    eventHub.$emit('submit');
-
-    expect(form.submit).toHaveBeenCalled();
-  });
-});
diff --git a/spec/frontend/vue_shared/components/registry/registry_search_spec.js b/spec/frontend/vue_shared/components/registry/registry_search_spec.js
index 28bdb275756..f5ef5b3d443 100644
--- a/spec/frontend/vue_shared/components/registry/registry_search_spec.js
+++ b/spec/frontend/vue_shared/components/registry/registry_search_spec.js
@@ -1,5 +1,6 @@
 import { GlSorting, GlSortingItem, GlFilteredSearch } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 import component from '~/vue_shared/components/registry/registry_search.vue';
 
 describe('Registry Search', () => {
@@ -12,8 +13,18 @@ describe('Registry Search', () => {
   const defaultProps = {
     filter: [],
     sorting: { sort: 'asc', orderBy: 'name' },
-    tokens: ['foo'],
-    sortableFields: [{ label: 'name', orderBy: 'name' }, { label: 'baz' }],
+    tokens: [{ type: 'foo' }],
+    sortableFields: [
+      { label: 'name', orderBy: 'name' },
+      { label: 'baz', orderBy: 'bar' },
+    ],
+  };
+
+  const defaultQueryChangedPayload = {
+    foo: '',
+    orderBy: 'name',
+    search: [],
+    sort: 'asc',
   };
 
   const mountComponent = (propsData = defaultProps) => {
@@ -55,20 +66,22 @@ describe('Registry Search', () => {
       expect(wrapper.emitted('filter:changed')).toEqual([['foo']]);
     });
 
-    it('emits filter:submit on submit event', () => {
+    it('emits filter:submit and query:changed on submit event', () => {
       mountComponent();
 
       findFilteredSearch().vm.$emit('submit');
       expect(wrapper.emitted('filter:submit')).toEqual([[]]);
+      expect(wrapper.emitted('query:changed')).toEqual([[defaultQueryChangedPayload]]);
     });
 
-    it('emits filter:changed and filter:submit on clear event', () => {
+    it('emits filter:changed, filter:submit and query:changed on clear event', () => {
       mountComponent();
 
       findFilteredSearch().vm.$emit('clear');
 
       expect(wrapper.emitted('filter:changed')).toEqual([[[]]]);
       expect(wrapper.emitted('filter:submit')).toEqual([[]]);
+      expect(wrapper.emitted('query:changed')).toEqual([[defaultQueryChangedPayload]]);
     });
 
     it('binds tokens prop', () => {
@@ -90,15 +103,47 @@ describe('Registry Search', () => {
 
       findPackageListSorting().vm.$emit('sortDirectionChange');
       expect(wrapper.emitted('sorting:changed')).toEqual([[{ sort: 'desc' }]]);
+      expect(wrapper.emitted('query:changed')).toEqual([
+        [{ ...defaultQueryChangedPayload, sort: 'desc' }],
+      ]);
     });
 
     it('on sort item click emits sorting:changed event ', () => {
       mountComponent();
 
-      findSortingItems().at(0).vm.$emit('click');
+      findSortingItems().at(1).vm.$emit('click');
 
       expect(wrapper.emitted('sorting:changed')).toEqual([
-        [{ orderBy: defaultProps.sortableFields[0].orderBy }],
+        [{ orderBy: defaultProps.sortableFields[1].orderBy }],
+      ]);
+      expect(wrapper.emitted('query:changed')).toEqual([
+        [{ ...defaultQueryChangedPayload, orderBy: 'bar' }],
+      ]);
+    });
+  });
+
+  describe('query string calculation', () => {
+    const filter = [
+      { type: FILTERED_SEARCH_TERM, value: { data: 'one' } },
+      { type: FILTERED_SEARCH_TERM, value: { data: 'two' } },
+      { type: 'typeOne', value: { data: 'value_one' } },
+      { type: 'typeTwo', value: { data: 'value_two' } },
+    ];
+
+    it('aggregates the filter in the correct object', () => {
+      mountComponent({ ...defaultProps, filter });
+
+      findFilteredSearch().vm.$emit('submit');
+
+      expect(wrapper.emitted('query:changed')).toEqual([
+        [
+          {
+            ...defaultQueryChangedPayload,
+            search: ['one', 'two'],
+            typeOne: 'value_one',
+            typeTwo: 'value_two',
+          },
+        ],
       ]);
     });
   });
diff --git a/spec/frontend/vue_shared/components/remove_member_modal_spec.js b/spec/frontend/vue_shared/components/remove_member_modal_spec.js
index 78fe6d53eee..ce9de28d53c 100644
--- a/spec/frontend/vue_shared/components/remove_member_modal_spec.js
+++ b/spec/frontend/vue_shared/components/remove_member_modal_spec.js
@@ -1,13 +1,25 @@
-import { GlFormCheckbox, GlModal } from '@gitlab/ui';
+import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import OncallSchedulesList from '~/vue_shared/components/oncall_schedules_list.vue';
 import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue';
 
+const mockSchedules = JSON.stringify({
+  schedules: [
+    {
+      id: 1,
+      name: 'Schedule 1',
+    },
+  ],
+  name: 'User1',
+});
+
 describe('RemoveMemberModal', () => {
   const memberPath = '/gitlab-org/gitlab-test/-/project_members/90';
   let wrapper;
 
   const findForm = () => wrapper.find({ ref: 'form' });
-  const findGlModal = () => wrapper.find(GlModal);
+  const findGlModal = () => wrapper.findComponent(GlModal);
+  const findOnCallSchedulesList = () => wrapper.findComponent(OncallSchedulesList);
 
   afterEach(() => {
     wrapper.destroy();
@@ -15,26 +27,43 @@ describe('RemoveMemberModal', () => {
   });
 
   describe.each`
-    state                          | isAccessRequest | actionText               | checkboxTestDescription                                            | checkboxExpected | message
-    ${'removing a member'}         | ${'false'}      | ${'Remove member'}       | ${'shows a checkbox to allow removal from related issues and MRs'} | ${true}          | ${'Are you sure you want to remove Jane Doe from the Gitlab Org / Gitlab Test project?'}
-    ${'denying an access request'} | ${'true'}       | ${'Deny access request'} | ${'does not show a checkbox'}                                      | ${false}         | ${"Are you sure you want to deny Jane Doe's request to join the Gitlab Org / Gitlab Test project?"}
+    state                          | memberType         | isAccessRequest | isInvite   | actionText               | removeSubMembershipsCheckboxExpected | unassignIssuablesCheckboxExpected | message                                                                                                           | onCallSchedules
+    ${'removing a group member'}   | ${'GroupMember'}   | ${false}        | ${'false'} | ${'Remove member'}       | ${true}                              | ${true}                           | ${'Are you sure you want to remove Jane Doe from the Gitlab Org / Gitlab Test project?'}                          | ${`{}`}
+    ${'removing a project member'} | ${'ProjectMember'} | ${false}        | ${'false'} | ${'Remove member'}       | ${false}                             | ${true}                           | ${'Are you sure you want to remove Jane Doe from the Gitlab Org / Gitlab Test project?'}                          | ${mockSchedules}
+    ${'denying an access request'} | ${'ProjectMember'} | ${true}         | ${'false'} | ${'Deny access request'} | ${false}                             | ${false}                          | ${"Are you sure you want to deny Jane Doe's request to join the Gitlab Org / Gitlab Test project?"}               | ${`{}`}
+    ${'revoking invite'}           | ${'ProjectMember'} | ${false}        | ${'true'}  | ${'Revoke invite'}       | ${false}                             | ${false}                          | ${'Are you sure you want to revoke the invitation for foo@bar.com to join the Gitlab Org / Gitlab Test project?'} | ${mockSchedules}
   `(
     'when $state',
-    ({ actionText, isAccessRequest, message, checkboxTestDescription, checkboxExpected }) => {
+    ({
+      actionText,
+      memberType,
+      isAccessRequest,
+      isInvite,
+      message,
+      removeSubMembershipsCheckboxExpected,
+      unassignIssuablesCheckboxExpected,
+      onCallSchedules,
+    }) => {
       beforeEach(() => {
         wrapper = shallowMount(RemoveMemberModal, {
           data() {
             return {
               modalData: {
                 isAccessRequest,
+                isInvite,
                 message,
                 memberPath,
+                memberType,
+                onCallSchedules,
               },
             };
           },
         });
       });
 
+      const parsedSchedules = JSON.parse(onCallSchedules);
+      const isPartOfOncallSchedules = Boolean(isAccessRequest && parsedSchedules.schedules?.length);
+
       it(`has the title ${actionText}`, () => {
         expect(findGlModal().attributes('title')).toBe(actionText);
       });
@@ -47,8 +76,24 @@ describe('RemoveMemberModal', () => {
         expect(wrapper.find('[data-testid=modal-message]').text()).toBe(message);
       });
 
-      it(`${checkboxTestDescription}`, () => {
-        expect(wrapper.find(GlFormCheckbox).exists()).toBe(checkboxExpected);
+      it(`shows ${
+        removeSubMembershipsCheckboxExpected ? 'a' : 'no'
+      } checkbox to remove direct memberships of subgroups/projects`, () => {
+        expect(wrapper.find('[name=remove_sub_memberships]').exists()).toBe(
+          removeSubMembershipsCheckboxExpected,
+        );
+      });
+
+      it(`shows ${
+        unassignIssuablesCheckboxExpected ? 'a' : 'no'
+      } checkbox to allow removal from related issues and MRs`, () => {
+        expect(wrapper.find('[name=unassign_issuables]').exists()).toBe(
+          unassignIssuablesCheckboxExpected,
+        );
+      });
+
+      it(`shows ${isPartOfOncallSchedules ? 'all' : 'no'} related on-call schedules`, () => {
+        expect(findOnCallSchedulesList().exists()).toBe(isPartOfOncallSchedules);
       });
 
       it('submits the form when the modal is submitted', () => {
diff --git a/spec/frontend/vue_shared/components/runner_instructions/mock_data.js b/spec/frontend/vue_shared/components/runner_instructions/mock_data.js
index 01f7f3d49c7..bc1545014d7 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/mock_data.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/mock_data.js
@@ -98,9 +98,21 @@ export const mockGraphqlInstructions = {
   data: {
     runnerSetup: {
       installInstructions:
-        "# Download the binary for your system\nsudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64\n\n# Give it permissions to execute\nsudo chmod +x /usr/local/bin/gitlab-runner\n\n# Create a GitLab CI user\nsudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash\n\n# Install and run as service\nsudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner\nsudo gitlab-runner start\n",
+        '# Install and run as service\nsudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner\nsudo gitlab-runner start',
       registerInstructions:
-        'sudo gitlab-runner register --url http://192.168.1.81:3000/ --registration-token GE5gsjeep_HAtBf9s3Yz',
+        'sudo gitlab-runner register --url http://gdk.test:3000/ --registration-token $REGISTRATION_TOKEN',
+      __typename: 'RunnerSetup',
+    },
+  },
+};
+
+export const mockGraphqlInstructionsWindows = {
+  data: {
+    runnerSetup: {
+      installInstructions:
+        '# Windows runner, then run\n.gitlab-runner.exe install\n.gitlab-runner.exe start',
+      registerInstructions:
+        './gitlab-runner.exe register --url http://gdk.test:3000/ --registration-token $REGISTRATION_TOKEN',
       __typename: 'RunnerSetup',
     },
   },
diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
new file mode 100644
index 00000000000..4033c943b82
--- /dev/null
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js
@@ -0,0 +1,184 @@
+import { GlAlert, GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import getRunnerPlatformsQuery from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql';
+import getRunnerSetupInstructionsQuery from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql';
+import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
+
+import {
+  mockGraphqlRunnerPlatforms,
+  mockGraphqlInstructions,
+  mockGraphqlInstructionsWindows,
+} from './mock_data';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('RunnerInstructionsModal component', () => {
+  let wrapper;
+  let fakeApollo;
+  let runnerPlatformsHandler;
+  let runnerSetupInstructionsHandler;
+
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findPlatformButtons = () => wrapper.findAllByTestId('platform-button');
+  const findArchitectureDropdownItems = () => wrapper.findAllByTestId('architecture-dropdown-item');
+  const findBinaryInstructions = () => wrapper.findByTestId('binary-instructions');
+  const findRegisterCommand = () => wrapper.findByTestId('register-command');
+
+  const createComponent = () => {
+    const requestHandlers = [
+      [getRunnerPlatformsQuery, runnerPlatformsHandler],
+      [getRunnerSetupInstructionsQuery, runnerSetupInstructionsHandler],
+    ];
+
+    fakeApollo = createMockApollo(requestHandlers);
+
+    wrapper = extendedWrapper(
+      shallowMount(RunnerInstructionsModal, {
+        propsData: {
+          modalId: 'runner-instructions-modal',
+        },
+        localVue,
+        apolloProvider: fakeApollo,
+      }),
+    );
+  };
+
+  beforeEach(async () => {
+    runnerPlatformsHandler = jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms);
+    runnerSetupInstructionsHandler = jest.fn().mockResolvedValue(mockGraphqlInstructions);
+
+    createComponent();
+
+    await nextTick();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should not show alert', () => {
+    expect(findAlert().exists()).toBe(false);
+  });
+
+  it('should contain a number of platforms buttons', () => {
+    expect(runnerPlatformsHandler).toHaveBeenCalledWith({});
+
+    const buttons = findPlatformButtons();
+
+    expect(buttons).toHaveLength(mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes.length);
+  });
+
+  it('should contain a number of dropdown items for the architecture options', () => {
+    expect(findArchitectureDropdownItems()).toHaveLength(
+      mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes[0].architectures.nodes.length,
+    );
+  });
+
+  describe('should display default instructions', () => {
+    const { installInstructions, registerInstructions } = mockGraphqlInstructions.data.runnerSetup;
+
+    it('runner instructions are requested', () => {
+      expect(runnerSetupInstructionsHandler).toHaveBeenCalledWith({
+        platform: 'linux',
+        architecture: 'amd64',
+      });
+    });
+
+    it('binary instructions are shown', () => {
+      const instructions = findBinaryInstructions().text();
+
+      expect(instructions).toBe(installInstructions);
+    });
+
+    it('register command is shown', () => {
+      const instructions = findRegisterCommand().text();
+
+      expect(instructions).toBe(registerInstructions);
+    });
+  });
+
+  describe('after a platform and architecture are selected', () => {
+    const {
+      installInstructions,
+      registerInstructions,
+    } = mockGraphqlInstructionsWindows.data.runnerSetup;
+
+    beforeEach(async () => {
+      runnerSetupInstructionsHandler.mockResolvedValue(mockGraphqlInstructionsWindows);
+
+      findPlatformButtons().at(2).vm.$emit('click'); // another option, happens to be windows
+      await nextTick();
+
+      findArchitectureDropdownItems().at(1).vm.$emit('click'); // another option
+      await nextTick();
+    });
+
+    it('runner instructions are requested', () => {
+      expect(runnerSetupInstructionsHandler).toHaveBeenCalledWith({
+        platform: 'windows',
+        architecture: '386',
+      });
+    });
+
+    it('other binary instructions are shown', () => {
+      const instructions = findBinaryInstructions().text();
+
+      expect(instructions).toBe(installInstructions);
+    });
+
+    it('register command is shown', () => {
+      const command = findRegisterCommand().text();
+
+      expect(command).toBe(registerInstructions);
+    });
+  });
+
+  describe('when apollo is loading', () => {
+    it('should show a skeleton loader', async () => {
+      createComponent();
+      expect(findSkeletonLoader().exists()).toBe(true);
+      expect(findGlLoadingIcon().exists()).toBe(false);
+
+      await nextTick(); // wait for platforms
+
+      expect(findGlLoadingIcon().exists()).toBe(true);
+    });
+
+    it('once loaded, should not show a loading state', async () => {
+      createComponent();
+
+      await nextTick(); // wait for platforms
+      await nextTick(); // wait for architectures
+
+      expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findGlLoadingIcon().exists()).toBe(false);
+    });
+  });
+
+  describe('when instructions cannot be loaded', () => {
+    beforeEach(async () => {
+      runnerSetupInstructionsHandler.mockRejectedValue();
+
+      createComponent();
+
+      await waitForPromises();
+    });
+
+    it('should show alert', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('should not show instructions', () => {
+      expect(findBinaryInstructions().exists()).toBe(false);
+      expect(findRegisterCommand().exists()).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
index 48db60bfd33..23f8d6afcb5 100644
--- a/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
+++ b/spec/frontend/vue_shared/components/runner_instructions/runner_instructions_spec.js
@@ -1,113 +1,41 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueApollo from 'vue-apollo';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import getRunnerPlatforms from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_platforms.query.graphql';
-import getRunnerSetupInstructions from '~/vue_shared/components/runner_instructions/graphql/queries/get_runner_setup.query.graphql';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import RunnerInstructions from '~/vue_shared/components/runner_instructions/runner_instructions.vue';
-
-import { mockGraphqlRunnerPlatforms, mockGraphqlInstructions } from './mock_data';
-
-const projectPath = 'gitlab-org/gitlab';
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 
 describe('RunnerInstructions component', () => {
   let wrapper;
-  let fakeApollo;
-
-  const findModalButton = () => wrapper.find('[data-testid="show-modal-button"]');
-  const findPlatformButtons = () => wrapper.findAll('[data-testid="platform-button"]');
-  const findArchitectureDropdownItems = () =>
-    wrapper.findAll('[data-testid="architecture-dropdown-item"]');
-  const findBinaryInstructionsSection = () => wrapper.find('[data-testid="binary-instructions"]');
-  const findRunnerInstructionsSection = () => wrapper.find('[data-testid="runner-instructions"]');
 
-  beforeEach(async () => {
-    const requestHandlers = [
-      [getRunnerPlatforms, jest.fn().mockResolvedValue(mockGraphqlRunnerPlatforms)],
-      [getRunnerSetupInstructions, jest.fn().mockResolvedValue(mockGraphqlInstructions)],
-    ];
+  const findModalButton = () => wrapper.findByTestId('show-modal-button');
+  const findModal = () => wrapper.findComponent(RunnerInstructionsModal);
 
-    fakeApollo = createMockApollo(requestHandlers);
+  const createComponent = () => {
+    wrapper = extendedWrapper(shallowMount(RunnerInstructions));
+  };
 
-    wrapper = shallowMount(RunnerInstructions, {
-      provide: {
-        projectPath,
-      },
-      localVue,
-      apolloProvider: fakeApollo,
-    });
-
-    await wrapper.vm.$nextTick();
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   it('should show the "Show Runner installation instructions" button', () => {
-    const button = findModalButton();
-
-    expect(button.exists()).toBe(true);
-    expect(button.text()).toBe('Show Runner installation instructions');
-  });
-
-  it('should contain a number of platforms buttons', () => {
-    const buttons = findPlatformButtons();
-
-    expect(buttons).toHaveLength(mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes.length);
-  });
-
-  it('should contain a number of dropdown items for the architecture options', () => {
-    const platformButton = findPlatformButtons().at(0);
-    platformButton.vm.$emit('click');
-
-    return wrapper.vm.$nextTick(() => {
-      const dropdownItems = findArchitectureDropdownItems();
-
-      expect(dropdownItems).toHaveLength(
-        mockGraphqlRunnerPlatforms.data.runnerPlatforms.nodes[0].architectures.nodes.length,
-      );
-    });
+    expect(findModalButton().exists()).toBe(true);
+    expect(findModalButton().text()).toBe('Show Runner installation instructions');
   });
 
-  it('should display the binary installation instructions for a selected architecture', async () => {
-    const platformButton = findPlatformButtons().at(0);
-    platformButton.vm.$emit('click');
-
-    await wrapper.vm.$nextTick();
-
-    const dropdownItem = findArchitectureDropdownItems().at(0);
-    dropdownItem.vm.$emit('click');
-
-    await wrapper.vm.$nextTick();
-
-    const runner = findBinaryInstructionsSection();
-
-    expect(runner.text()).toMatch('sudo chmod +x /usr/local/bin/gitlab-runner');
-    expect(runner.text()).toMatch(
-      `sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash`,
-    );
-    expect(runner.text()).toMatch(
-      'sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner',
-    );
-    expect(runner.text()).toMatch('sudo gitlab-runner start');
+  it('should not render the modal once mounted', () => {
+    expect(findModal().exists()).toBe(false);
   });
 
-  it('should display the runner register instructions for a selected architecture', async () => {
-    const platformButton = findPlatformButtons().at(0);
-    platformButton.vm.$emit('click');
-
-    await wrapper.vm.$nextTick();
-
-    const dropdownItem = findArchitectureDropdownItems().at(0);
-    dropdownItem.vm.$emit('click');
-
-    await wrapper.vm.$nextTick();
+  it('should render the modal once clicked', async () => {
+    findModalButton().vm.$emit('click');
 
-    const runner = findRunnerInstructionsSection();
+    await nextTick();
 
-    expect(runner.text()).toMatch(mockGraphqlInstructions.data.runnerSetup.registerInstructions);
+    expect(findModal().exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/vue_shared/components/sidebar/copyable_field_spec.js b/spec/frontend/vue_shared/components/sidebar/copyable_field_spec.js
new file mode 100644
index 00000000000..b99b1a66b79
--- /dev/null
+++ b/spec/frontend/vue_shared/components/sidebar/copyable_field_spec.js
@@ -0,0 +1,74 @@
+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
+
+describe('SidebarCopyableField', () => {
+  let wrapper;
+
+  const defaultProps = {
+    value: 'Gl-1',
+    name: 'Reference',
+  };
+
+  const createComponent = (propsData = defaultProps) => {
+    wrapper = shallowMount(CopyableField, {
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+
+  describe('template', () => {
+    describe('when `isLoading` prop is `false`', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders copyable field', () => {
+        expect(wrapper.text()).toContain('Reference: Gl-1');
+      });
+
+      it('renders ClipboardButton with correct props', () => {
+        const clipboardButton = findClipboardButton();
+
+        expect(clipboardButton.exists()).toBe(true);
+        expect(clipboardButton.props('title')).toBe(`Copy ${defaultProps.name}`);
+        expect(clipboardButton.props('text')).toBe(defaultProps.value);
+      });
+
+      it('does not render loading icon', () => {
+        expect(findLoadingIcon().exists()).toBe(false);
+      });
+    });
+
+    describe('when `isLoading` prop is `true`', () => {
+      beforeEach(() => {
+        createComponent({ ...defaultProps, isLoading: true });
+      });
+
+      it('renders loading icon', () => {
+        expect(findLoadingIcon().exists()).toBe(true);
+        expect(findLoadingIcon().props('label')).toBe('Loading Reference');
+      });
+
+      it('does not render clipboard button', () => {
+        expect(findClipboardButton().exists()).toBe(false);
+      });
+    });
+
+    describe('with `clipboardTooltipText` prop', () => {
+      it('sets ClipboardButton `title` prop to `clipboardTooltipText` value', () => {
+        const mockClipboardTooltipText = 'Copy my custom value';
+        createComponent({ ...defaultProps, clipboardTooltipText: mockClipboardTooltipText });
+
+        expect(findClipboardButton().props('title')).toBe(mockClipboardTooltipText);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/url_sync_spec.js b/spec/frontend/vue_shared/components/url_sync_spec.js
new file mode 100644
index 00000000000..86bbc146c5f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/url_sync_spec.js
@@ -0,0 +1,97 @@
+import { shallowMount } from '@vue/test-utils';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { historyPushState } from '~/lib/utils/common_utils';
+import { mergeUrlParams } from '~/lib/utils/url_utility';
+import UrlSyncComponent from '~/vue_shared/components/url_sync.vue';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  mergeUrlParams: jest.fn((query, url) => `urlParams: ${query} ${url}`),
+}));
+
+jest.mock('~/lib/utils/common_utils', () => ({
+  historyPushState: jest.fn(),
+}));
+
+describe('url sync component', () => {
+  let wrapper;
+  const mockQuery = { group_id: '5014437163714', project_ids: ['5014437608314'] };
+  const TEST_HOST = 'http://testhost/';
+
+  setWindowLocation(TEST_HOST);
+
+  const findButton = () => wrapper.find('button');
+
+  const createComponent = ({ query = mockQuery, scopedSlots, slots } = {}) => {
+    wrapper = shallowMount(UrlSyncComponent, {
+      propsData: { query },
+      scopedSlots,
+      slots,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const expectUrlSync = (query, times, mergeUrlParamsReturnValue) => {
+    expect(mergeUrlParams).toHaveBeenCalledTimes(times);
+    expect(mergeUrlParams).toHaveBeenCalledWith(query, TEST_HOST, { spreadArrays: true });
+
+    expect(historyPushState).toHaveBeenCalledTimes(times);
+    expect(historyPushState).toHaveBeenCalledWith(mergeUrlParamsReturnValue);
+  };
+
+  describe('with query as a props', () => {
+    it('immediately syncs the query to the URL', () => {
+      createComponent();
+
+      expectUrlSync(mockQuery, 1, mergeUrlParams.mock.results[0].value);
+    });
+
+    describe('when the query is modified', () => {
+      const newQuery = { foo: true };
+
+      it('updates the URL with the new query', async () => {
+        createComponent();
+        // using setProps to test the watcher
+        await wrapper.setProps({ query: newQuery });
+
+        expectUrlSync(mockQuery, 2, mergeUrlParams.mock.results[1].value);
+      });
+    });
+  });
+
+  describe('with scoped slot', () => {
+    const scopedSlots = {
+      default: `
+        <button @click="props.updateQuery({bar: 'baz'})">Update Query </button>
+        `,
+    };
+
+    it('renders the scoped slot', () => {
+      createComponent({ query: null, scopedSlots });
+
+      expect(findButton().exists()).toBe(true);
+    });
+
+    it('syncs the url with the scoped slots function', () => {
+      createComponent({ query: null, scopedSlots });
+
+      findButton().trigger('click');
+
+      expectUrlSync({ bar: 'baz' }, 1, mergeUrlParams.mock.results[0].value);
+    });
+  });
+
+  describe('with slot', () => {
+    const slots = {
+      default: '<button>Normal Slot</button>',
+    };
+
+    it('renders the default slot', () => {
+      createComponent({ query: null, slots });
+
+      expect(findButton().exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
index 184a1e458b5..87fe8619f28 100644
--- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
@@ -1,4 +1,4 @@
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf, GlIcon } from '@gitlab/ui';
+import { GlSkeletonLoader, GlSprintf, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { AVAILABILITY_STATUS } from '~/set_status_modal/utils';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
@@ -52,7 +52,7 @@ describe('User Popover Component', () => {
   };
 
   describe('when user is loading', () => {
-    it('displays skeleton loaders', () => {
+    it('displays skeleton loader', () => {
       createWrapper({
         user: {
           name: null,
@@ -65,7 +65,7 @@ describe('User Popover Component', () => {
         },
       });
 
-      expect(wrapper.findAll(GlSkeletonLoading)).toHaveLength(4);
+      expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
     });
   });