Add latest changes from gitlab-org/gitlab@master

15 files changed, 338 insertions, 224 deletions

diff --git a/spec/frontend/blob/components/blob_header_filepath_spec.js b/spec/frontend/blob/components/blob_header_filepath_spec.js
index 3a53208f357..43057353051 100644
--- a/spec/frontend/blob/components/blob_header_filepath_spec.js
+++ b/spec/frontend/blob/components/blob_header_filepath_spec.js
@@ -4,9 +4,8 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import { Blob as MockBlob } from './mock_data';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 
-const mockHumanReadableSize = 'a lot';
 jest.mock('~/lib/utils/number_utils', () => ({
-  numberToHumanSize: jest.fn(() => mockHumanReadableSize),
+  numberToHumanSize: jest.fn(() => 'a lot'),
 }));
 
 describe('Blob Header Filepath', () => {
@@ -57,7 +56,7 @@ describe('Blob Header Filepath', () => {
     it('renders filesize in a human-friendly format', () => {
       createComponent();
       expect(numberToHumanSize).toHaveBeenCalled();
-      expect(wrapper.vm.blobSize).toBe(mockHumanReadableSize);
+      expect(wrapper.vm.blobSize).toBe('a lot');
     });
 
     it('renders a slot and prepends its contents to the existing one', () => {
diff --git a/spec/frontend/helpers/dom_shims/index.js b/spec/frontend/helpers/dom_shims/index.js
index ed1c708c444..d18bb94c107 100644
--- a/spec/frontend/helpers/dom_shims/index.js
+++ b/spec/frontend/helpers/dom_shims/index.js
@@ -4,6 +4,7 @@ import './element_scroll_to';
 import './form_element';
 import './get_client_rects';
 import './inner_text';
+import './mutation_observer';
 import './window_scroll_to';
 import './scroll_by';
 import './size_properties';
diff --git a/spec/frontend/helpers/dom_shims/mutation_observer.js b/spec/frontend/helpers/dom_shims/mutation_observer.js
new file mode 100644
index 00000000000..68c494f19ea
--- /dev/null
+++ b/spec/frontend/helpers/dom_shims/mutation_observer.js
@@ -0,0 +1,7 @@
+/* eslint-disable class-methods-use-this */
+class MutationObserverStub {
+  disconnect() {}
+  observe() {}
+}
+
+global.MutationObserver = MutationObserverStub;
diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js
index 129180bb46e..bd7cb842e98 100644
--- a/spec/frontend/ide/components/commit_sidebar/form_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js
@@ -69,24 +69,19 @@ describe('IDE commit form', () => {
       });
     });
 
-    it('collapses if lastCommitMsg is set to empty and current view is not commit view', () => {
+    it('collapses if lastCommitMsg is set to empty and current view is not commit view', async () => {
       store.state.lastCommitMsg = 'abc';
       store.state.currentActivityView = leftSidebarViews.edit.name;
+      await vm.$nextTick();
 
-      return vm
-        .$nextTick()
-        .then(() => {
-          // if commit message is set, form is uncollapsed
-          expect(vm.isCompact).toBe(false);
+      // if commit message is set, form is uncollapsed
+      expect(vm.isCompact).toBe(false);
 
-          store.state.lastCommitMsg = '';
+      store.state.lastCommitMsg = '';
+      await vm.$nextTick();
 
-          return vm.$nextTick();
-        })
-        .then(() => {
-          // collapsed when set to empty
-          expect(vm.isCompact).toBe(true);
-        });
+      // collapsed when set to empty
+      expect(vm.isCompact).toBe(true);
     });
   });
 
diff --git a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js
index f23823ccad6..4e7fee81d66 100644
--- a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js
+++ b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js
@@ -4,6 +4,7 @@ import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 import { groups, initialState, metricsData, metricsWithData } from './mock_data';
+import { setHTMLFixture } from 'helpers/fixtures';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -25,6 +26,8 @@ describe('MetricEmbed', () => {
   }
 
   beforeEach(() => {
+    setHTMLFixture('<div class="layout-page"></div>');
+
     actions = {
       setInitialState: jest.fn(),
       setShowErrorBanner: jest.fn(),
diff --git a/spec/frontend/pipelines/graph/graph_component_spec.js b/spec/frontend/pipelines/graph/graph_component_spec.js
index a9b06eab3fa..9731ce3f8a6 100644
--- a/spec/frontend/pipelines/graph/graph_component_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_spec.js
@@ -7,6 +7,7 @@ import linkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines
 import graphJSON from './mock_data';
 import linkedPipelineJSON from './linked_pipelines_mock_data';
 import PipelinesMediator from '~/pipelines/pipeline_details_mediator';
+import { setHTMLFixture } from 'helpers/fixtures';
 
 describe('graph component', () => {
   const store = new PipelineStore();
@@ -15,6 +16,10 @@ describe('graph component', () => {
 
   let wrapper;
 
+  beforeEach(() => {
+    setHTMLFixture('<div class="layout-page"></div>');
+  });
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
diff --git a/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap
index 19767aefd1a..d8ec9c3ca4d 100644
--- a/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap
+++ b/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap
@@ -19,7 +19,7 @@ exports[`Registry Project Empty state to match the default snapshot 1`] = `
   </p>
    
   <h5>
-    Quick Start
+    CLI Commands
   </h5>
    
   <p
diff --git a/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js b/spec/frontend/registry/explorer/components/cli_commands_spec.js
index 0c3baefbc58..6f1cbf9d255 100644
--- a/spec/frontend/registry/explorer/components/quickstart_dropdown_spec.js
+++ b/spec/frontend/registry/explorer/components/cli_commands_spec.js
@@ -3,7 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import * as getters from '~/registry/explorer/stores/getters';
-import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
+import QuickstartDropdown from '~/registry/explorer/components/cli_commands.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 import {
@@ -19,7 +19,7 @@ import {
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe('quickstart_dropdown', () => {
+describe('cli_commands', () => {
   let wrapper;
   let store;
 
diff --git a/spec/frontend/registry/explorer/components/project_policy_alert_spec.js b/spec/frontend/registry/explorer/components/project_policy_alert_spec.js
deleted file mode 100644
index 89c37e55398..00000000000
--- a/spec/frontend/registry/explorer/components/project_policy_alert_spec.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import Vuex from 'vuex';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlSprintf, GlAlert, GlLink } from '@gitlab/ui';
-import * as dateTimeUtils from '~/lib/utils/datetime_utility';
-import component from '~/registry/explorer/components/project_policy_alert.vue';
-import {
-  EXPIRATION_POLICY_ALERT_TITLE,
-  EXPIRATION_POLICY_ALERT_PRIMARY_BUTTON,
-} from '~/registry/explorer/constants';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('Project Policy Alert', () => {
-  let wrapper;
-  let store;
-
-  const defaultState = {
-    config: {
-      expirationPolicy: {
-        enabled: true,
-      },
-      settingsPath: 'foo',
-      expirationPolicyHelpPagePath: 'bar',
-    },
-    images: [],
-    isLoading: false,
-  };
-
-  const findAlert = () => wrapper.find(GlAlert);
-  const findLink = () => wrapper.find(GlLink);
-
-  const createComponent = (state = defaultState) => {
-    store = new Vuex.Store({
-      state,
-    });
-    wrapper = shallowMount(component, {
-      localVue,
-      store,
-      stubs: {
-        GlSprintf,
-      },
-    });
-  };
-
-  const documentationExpectation = () => {
-    it('contain a documentation link', () => {
-      createComponent();
-      expect(findLink().attributes('href')).toBe(defaultState.config.expirationPolicyHelpPagePath);
-      expect(findLink().text()).toBe('documentation');
-    });
-  };
-
-  beforeEach(() => {
-    jest.spyOn(dateTimeUtils, 'approximateDuration').mockReturnValue('1 day');
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('is hidden', () => {
-    it('when expiration policy does not exist', () => {
-      createComponent({ config: {} });
-      expect(findAlert().exists()).toBe(false);
-    });
-
-    it('when expiration policy exist but is disabled', () => {
-      createComponent({
-        ...defaultState,
-        config: {
-          expirationPolicy: {
-            enabled: false,
-          },
-        },
-      });
-      expect(findAlert().exists()).toBe(false);
-    });
-  });
-
-  describe('is visible', () => {
-    it('when expiration policy exists and is enabled', () => {
-      createComponent();
-      expect(findAlert().exists()).toBe(true);
-    });
-  });
-
-  describe('full info alert', () => {
-    beforeEach(() => {
-      createComponent({ ...defaultState, images: [1] });
-    });
-
-    it('has a primary button', () => {
-      const alert = findAlert();
-      expect(alert.props('primaryButtonText')).toBe(EXPIRATION_POLICY_ALERT_PRIMARY_BUTTON);
-      expect(alert.props('primaryButtonLink')).toBe(defaultState.config.settingsPath);
-    });
-
-    it('has a title', () => {
-      const alert = findAlert();
-      expect(alert.props('title')).toBe(EXPIRATION_POLICY_ALERT_TITLE);
-    });
-
-    it('has the full message', () => {
-      expect(findAlert().html()).toContain('<strong>1 day</strong>');
-    });
-
-    documentationExpectation();
-  });
-
-  describe('compact info alert', () => {
-    beforeEach(() => {
-      createComponent({ ...defaultState, images: [] });
-    });
-
-    it('does not have a button', () => {
-      const alert = findAlert();
-      expect(alert.props('primaryButtonText')).toBe(null);
-    });
-
-    it('does not have a title', () => {
-      const alert = findAlert();
-      expect(alert.props('title')).toBe(null);
-    });
-
-    it('has the short message', () => {
-      expect(findAlert().html()).not.toContain('<strong>1 day</strong>');
-    });
-
-    documentationExpectation();
-  });
-});
diff --git a/spec/frontend/registry/explorer/components/registry_header_spec.js b/spec/frontend/registry/explorer/components/registry_header_spec.js
new file mode 100644
index 00000000000..9ce2b505e44
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/registry_header_spec.js
@@ -0,0 +1,221 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import Component from '~/registry/explorer/components/registry_header.vue';
+import {
+  CONTAINER_REGISTRY_TITLE,
+  LIST_INTRO_TEXT,
+  EXPIRATION_POLICY_DISABLED_MESSAGE,
+  EXPIRATION_POLICY_DISABLED_TEXT,
+  EXPIRATION_POLICY_WILL_RUN_IN,
+} from '~/registry/explorer/constants';
+
+jest.mock('~/lib/utils/datetime_utility', () => ({
+  approximateDuration: jest.fn(),
+  calculateRemainingMilliseconds: jest.fn(),
+}));
+
+describe('registry_header', () => {
+  let wrapper;
+
+  const findHeader = () => wrapper.find('[data-testid="header"]');
+  const findTitle = () => wrapper.find('[data-testid="title"]');
+  const findCommandsSlot = () => wrapper.find('[data-testid="commands-slot"]');
+  const findInfoArea = () => wrapper.find('[data-testid="info-area"]');
+  const findIntroText = () => wrapper.find('[data-testid="default-intro"]');
+  const findSubHeader = () => wrapper.find('[data-testid="subheader"]');
+  const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]');
+  const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]');
+  const findDisabledExpirationPolicyMessage = () =>
+    wrapper.find('[data-testid="expiration-disabled-message"]');
+
+  const mountComponent = (propsData, slots) => {
+    wrapper = shallowMount(Component, {
+      stubs: {
+        GlSprintf,
+      },
+      propsData,
+      slots,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('header', () => {
+    it('exists', () => {
+      mountComponent();
+      expect(findHeader().exists()).toBe(true);
+    });
+
+    it('contains the title of the page', () => {
+      mountComponent();
+      const title = findTitle();
+      expect(title.exists()).toBe(true);
+      expect(title.text()).toBe(CONTAINER_REGISTRY_TITLE);
+    });
+
+    it('has a commands slot', () => {
+      mountComponent(null, { commands: 'baz' });
+      expect(findCommandsSlot().text()).toBe('baz');
+    });
+  });
+
+  describe('subheader', () => {
+    describe('when there are no images', () => {
+      it('is hidden ', () => {
+        mountComponent();
+        expect(findSubHeader().exists()).toBe(false);
+      });
+    });
+
+    describe('when there are images', () => {
+      it('is visible', () => {
+        mountComponent({ imagesCount: 1 });
+        expect(findSubHeader().exists()).toBe(true);
+      });
+
+      describe('sub header parts', () => {
+        describe('images count', () => {
+          it('exists', () => {
+            mountComponent({ imagesCount: 1 });
+            expect(findImagesCountSubHeader().exists()).toBe(true);
+          });
+
+          it('when there is one image', () => {
+            mountComponent({ imagesCount: 1 });
+            expect(findImagesCountSubHeader().text()).toMatchInterpolatedText('1 Image repository');
+          });
+
+          it('when there is more than one image', () => {
+            mountComponent({ imagesCount: 3 });
+            expect(findImagesCountSubHeader().text()).toMatchInterpolatedText(
+              '3 Image repositories',
+            );
+          });
+        });
+
+        describe('expiration policy', () => {
+          it('when is disabled', () => {
+            mountComponent({
+              expirationPolicy: { enabled: false },
+              expirationPolicyHelpPagePath: 'foo',
+              imagesCount: 1,
+            });
+            const text = findExpirationPolicySubHeader();
+            expect(text.exists()).toBe(true);
+            expect(text.text()).toMatchInterpolatedText(EXPIRATION_POLICY_DISABLED_TEXT);
+          });
+
+          it('when is enabled', () => {
+            mountComponent({
+              expirationPolicy: { enabled: true },
+              expirationPolicyHelpPagePath: 'foo',
+              imagesCount: 1,
+            });
+            const text = findExpirationPolicySubHeader();
+            expect(text.exists()).toBe(true);
+            expect(text.text()).toMatchInterpolatedText(EXPIRATION_POLICY_WILL_RUN_IN);
+          });
+          it('when the expiration policy is completely disabled', () => {
+            mountComponent({
+              expirationPolicy: { enabled: true },
+              expirationPolicyHelpPagePath: 'foo',
+              imagesCount: 1,
+              hideExpirationPolicyData: true,
+            });
+            const text = findExpirationPolicySubHeader();
+            expect(text.exists()).toBe(false);
+          });
+        });
+      });
+    });
+  });
+
+  describe('info area', () => {
+    it('exists', () => {
+      mountComponent();
+      expect(findInfoArea().exists()).toBe(true);
+    });
+
+    describe('default message', () => {
+      beforeEach(() => {
+        mountComponent({ helpPagePath: 'bar' });
+      });
+
+      it('exists', () => {
+        expect(findIntroText().exists()).toBe(true);
+      });
+
+      it('has the correct copy', () => {
+        expect(findIntroText().text()).toMatchInterpolatedText(LIST_INTRO_TEXT);
+      });
+
+      it('has the correct link', () => {
+        expect(
+          findIntroText()
+            .find(GlLink)
+            .attributes('href'),
+        ).toBe('bar');
+      });
+    });
+
+    describe('expiration policy info message', () => {
+      describe('when there are no images', () => {
+        it('is hidden', () => {
+          mountComponent();
+          expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
+        });
+      });
+
+      describe('when there are images', () => {
+        describe('when expiration policy is disabled', () => {
+          beforeEach(() => {
+            mountComponent({
+              expirationPolicy: { enabled: false },
+              expirationPolicyHelpPagePath: 'foo',
+              imagesCount: 1,
+            });
+          });
+          it('message exist', () => {
+            expect(findDisabledExpirationPolicyMessage().exists()).toBe(true);
+          });
+          it('has the correct copy', () => {
+            expect(findDisabledExpirationPolicyMessage().text()).toMatchInterpolatedText(
+              EXPIRATION_POLICY_DISABLED_MESSAGE,
+            );
+          });
+
+          it('has the correct link', () => {
+            expect(
+              findDisabledExpirationPolicyMessage()
+                .find(GlLink)
+                .attributes('href'),
+            ).toBe('foo');
+          });
+        });
+
+        describe('when expiration policy is enabled', () => {
+          it('message does not exist', () => {
+            mountComponent({
+              expirationPolicy: { enabled: true },
+              imagesCount: 1,
+            });
+            expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
+          });
+        });
+        describe('when the expiration policy is completely disabled', () => {
+          it('message does not exist', () => {
+            mountComponent({
+              expirationPolicy: { enabled: true },
+              imagesCount: 1,
+              hideExpirationPolicyData: true,
+            });
+            expect(findDisabledExpirationPolicyMessage().exists()).toBe(false);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index 97742b9e9b3..c8d5e5bbd3c 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -3,10 +3,10 @@ import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitla
 import Tracking from '~/tracking';
 import waitForPromises from 'helpers/wait_for_promises';
 import component from '~/registry/explorer/pages/list.vue';
-import QuickstartDropdown from '~/registry/explorer/components/quickstart_dropdown.vue';
+import CliCommands from '~/registry/explorer/components/cli_commands.vue';
 import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue';
 import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
-import ProjectPolicyAlert from '~/registry/explorer/components/project_policy_alert.vue';
+import RegistryHeader from '~/registry/explorer/components/registry_header.vue';
 import ImageList from '~/registry/explorer/components/image_list.vue';
 import { createStore } from '~/registry/explorer/stores/';
 import {
@@ -32,14 +32,14 @@ describe('List Page', () => {
 
   const findDeleteModal = () => wrapper.find(GlModal);
   const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
-  const findImagesList = () => wrapper.find({ ref: 'imagesList' });
 
   const findEmptyState = () => wrapper.find(GlEmptyState);
 
-  const findQuickStartDropdown = () => wrapper.find(QuickstartDropdown);
+  const findCliCommands = () => wrapper.find(CliCommands);
   const findProjectEmptyState = () => wrapper.find(ProjectEmptyState);
   const findGroupEmptyState = () => wrapper.find(GroupEmptyState);
-  const findProjectPolicyAlert = () => wrapper.find(ProjectPolicyAlert);
+  const findRegistryHeader = () => wrapper.find(RegistryHeader);
+
   const findDeleteAlert = () => wrapper.find(GlAlert);
   const findImageList = () => wrapper.find(ImageList);
   const findListHeader = () => wrapper.find('[data-testid="listHeader"]');
@@ -53,6 +53,7 @@ describe('List Page', () => {
         GlModal,
         GlEmptyState,
         GlSprintf,
+        RegistryHeader,
       },
       mocks: {
         $toast,
@@ -76,21 +77,6 @@ describe('List Page', () => {
     wrapper.destroy();
   });
 
-  describe('Expiration policy notification', () => {
-    beforeEach(() => {
-      mountComponent();
-    });
-    it('shows up on project page', () => {
-      expect(findProjectPolicyAlert().exists()).toBe(true);
-    });
-    it('does show up on group page', () => {
-      store.commit(SET_INITIAL_STATE, { isGroupPage: true });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findProjectPolicyAlert().exists()).toBe(false);
-      });
-    });
-  });
-
   describe('API calls', () => {
     it.each`
       imageList                  | name         | called
@@ -109,6 +95,11 @@ describe('List Page', () => {
     );
   });
 
+  it('contains registry header', () => {
+    mountComponent();
+    expect(findRegistryHeader().exists()).toBe(true);
+  });
+
   describe('connection error', () => {
     const config = {
       characterError: true,
@@ -139,7 +130,7 @@ describe('List Page', () => {
 
     it('should not show the loading or default state', () => {
       expect(findSkeletonLoader().exists()).toBe(false);
-      expect(findImagesList().exists()).toBe(false);
+      expect(findImageList().exists()).toBe(false);
     });
   });
 
@@ -156,11 +147,11 @@ describe('List Page', () => {
     });
 
     it('imagesList is not visible', () => {
-      expect(findImagesList().exists()).toBe(false);
+      expect(findImageList().exists()).toBe(false);
     });
 
-    it('quick start is not visible', () => {
-      expect(findQuickStartDropdown().exists()).toBe(false);
+    it('cli commands is not visible', () => {
+      expect(findCliCommands().exists()).toBe(false);
     });
   });
 
@@ -171,8 +162,8 @@ describe('List Page', () => {
       return waitForPromises();
     });
 
-    it('quick start is not visible', () => {
-      expect(findQuickStartDropdown().exists()).toBe(false);
+    it('cli commands is not visible', () => {
+      expect(findCliCommands().exists()).toBe(false);
     });
 
     it('project empty state is visible', () => {
@@ -193,8 +184,8 @@ describe('List Page', () => {
         expect(findGroupEmptyState().exists()).toBe(true);
       });
 
-      it('quick start is not visible', () => {
-        expect(findQuickStartDropdown().exists()).toBe(false);
+      it('cli commands is not visible', () => {
+        expect(findCliCommands().exists()).toBe(false);
       });
 
       it('list header is not visible', () => {
@@ -210,7 +201,7 @@ describe('List Page', () => {
       });
 
       it('quick start is visible', () => {
-        expect(findQuickStartDropdown().exists()).toBe(true);
+        expect(findCliCommands().exists()).toBe(true);
       });
 
       it('list component is visible', () => {
diff --git a/spec/frontend/test_setup.js b/spec/frontend/test_setup.js
index e216f49630f..49eae715a45 100644
--- a/spec/frontend/test_setup.js
+++ b/spec/frontend/test_setup.js
@@ -43,15 +43,6 @@ Object.assign(global, {
   preloadFixtures() {},
 });
 
-Object.assign(global, {
-  MutationObserver() {
-    return {
-      disconnect() {},
-      observe() {},
-    };
-  },
-});
-
 // custom-jquery-matchers was written for an old Jest version, we need to make it compatible
 Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
   // Don't override existing Jest matcher
@@ -69,12 +60,6 @@ expect.extend(customMatchers);
 // Tech debt issue TBD
 testUtilsConfig.logModifiedComponents = false;
 
-// Basic stub for MutationObserver
-global.MutationObserver = () => ({
-  disconnect: () => {},
-  observe: () => {},
-});
-
 Object.assign(global, {
   requestIdleCallback(cb) {
     const start = Date.now();
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js
new file mode 100644
index 00000000000..4d223efe9b4
--- /dev/null
+++ b/spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js
@@ -0,0 +1,47 @@
+import {
+  generateToolbarItem,
+  addCustomEventListener,
+} from '~/vue_shared/components/rich_content_editor/editor_service';
+
+describe('Editor Service', () => {
+  describe('generateToolbarItem', () => {
+    const config = {
+      icon: 'bold',
+      command: 'some-command',
+      tooltip: 'Some Tooltip',
+      event: 'some-event',
+    };
+    const generatedItem = generateToolbarItem(config);
+
+    it('generates the correct command', () => {
+      expect(generatedItem.options.command).toBe(config.command);
+    });
+
+    it('generates the correct tooltip', () => {
+      expect(generatedItem.options.tooltip).toBe(config.tooltip);
+    });
+
+    it('generates the correct event', () => {
+      expect(generatedItem.options.event).toBe(config.event);
+    });
+
+    it('generates a divider when isDivider is set to true', () => {
+      const isDivider = true;
+
+      expect(generateToolbarItem({ isDivider })).toBe('divider');
+    });
+  });
+
+  describe('addCustomEventListener', () => {
+    const mockInstance = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } };
+    const event = 'someCustomEvent';
+    const handler = jest.fn();
+
+    it('registers an event type on the instance and adds an event handler', () => {
+      addCustomEventListener(mockInstance, event, handler);
+
+      expect(mockInstance.eventManager.addEventType).toHaveBeenCalledWith(event);
+      expect(mockInstance.eventManager.listen).toHaveBeenCalledWith(event, handler);
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
index 549d89171c6..fc9c3424db3 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
@@ -5,8 +5,16 @@ import {
   EDITOR_TYPES,
   EDITOR_HEIGHT,
   EDITOR_PREVIEW_STYLE,
+  CUSTOM_EVENTS,
 } from '~/vue_shared/components/rich_content_editor/constants';
 
+import { addCustomEventListener } from '~/vue_shared/components/rich_content_editor/editor_service';
+
+jest.mock('~/vue_shared/components/rich_content_editor/editor_service', () => ({
+  ...jest.requireActual('~/vue_shared/components/rich_content_editor/editor_service'),
+  addCustomEventListener: jest.fn(),
+}));
+
 describe('Rich Content Editor', () => {
   let wrapper;
 
@@ -56,4 +64,17 @@ describe('Rich Content Editor', () => {
       expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown);
     });
   });
+
+  describe('when editor is loaded', () => {
+    it('adds the CUSTOM_EVENTS.openAddImageModal custom event listener', () => {
+      const mockInstance = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } };
+      findEditor().vm.$emit('load', mockInstance);
+
+      expect(addCustomEventListener).toHaveBeenCalledWith(
+        mockInstance,
+        CUSTOM_EVENTS.openAddImageModal,
+        wrapper.vm.onOpenAddImageModal,
+      );
+    });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js
deleted file mode 100644
index 7605cc6a22c..00000000000
--- a/spec/frontend/vue_shared/components/rich_content_editor/toolbar_service_spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { generateToolbarItem } from '~/vue_shared/components/rich_content_editor/toolbar_service';
-
-describe('Toolbar Service', () => {
-  const config = {
-    icon: 'bold',
-    command: 'some-command',
-    tooltip: 'Some Tooltip',
-    event: 'some-event',
-  };
-  const generatedItem = generateToolbarItem(config);
-
-  it('generates the correct command', () => {
-    expect(generatedItem.options.command).toBe(config.command);
-  });
-
-  it('generates the correct tooltip', () => {
-    expect(generatedItem.options.tooltip).toBe(config.tooltip);
-  });
-
-  it('generates the correct event', () => {
-    expect(generatedItem.options.event).toBe(config.event);
-  });
-
-  it('generates a divider when isDivider is set to true', () => {
-    const isDivider = true;
-
-    expect(generateToolbarItem({ isDivider })).toBe('divider');
-  });
-});