Append bubble_menu to bubble_menu component names

Append a bubble_menu suffix to all bubble menu Vue components
to distinguish them from other Vue components with similar
names

app/assets/javascripts/content_editor/components/content_editor.vue

@@ -4,10 +4,10 @@ import { createContentEditor } from '../services/create_content_editor';
 import ContentEditorAlert from './content_editor_alert.vue';
 import ContentEditorProvider from './content_editor_provider.vue';
 import EditorStateObserver from './editor_state_observer.vue';
-import FormattingBubbleMenu from './bubble_menus/formatting.vue';
-import CodeBlockBubbleMenu from './bubble_menus/code_block.vue';
-import LinkBubbleMenu from './bubble_menus/link.vue';
-import MediaBubbleMenu from './bubble_menus/media.vue';
+import FormattingBubbleMenu from './bubble_menus/formatting_bubble_menu.vue';
+import CodeBlockBubbleMenu from './bubble_menus/code_block_bubble_menu.vue';
+import LinkBubbleMenu from './bubble_menus/link_bubble_menu.vue';
+import MediaBubbleMenu from './bubble_menus/media_bubble_menu.vue';
 import TopToolbar from './top_toolbar.vue';
 import LoadingIndicator from './loading_indicator.vue';
 

spec/frontend/content_editor/components/bubble_menus/code_block_spec.js → spec/frontend/content_editor/components/bubble_menus/code_block_bubble_menu_spec.js

@@ -9,7 +9,7 @@ import {
 import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
-import CodeBlockBubbleMenu from '~/content_editor/components/bubble_menus/code_block.vue';
+import CodeBlockBubbleMenu from '~/content_editor/components/bubble_menus/code_block_bubble_menu.vue';
 import eventHubFactory from '~/helpers/event_hub_factory';
 import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight';
 import Diagram from '~/content_editor/extensions/diagram';
@@ -18,7 +18,7 @@ import { createTestEditor, emitEditorEvent } from '../../test_utils';
 
 const createFakeEvent = () => ({ preventDefault: jest.fn(), stopPropagation: jest.fn() });
 
-describe('content_editor/components/bubble_menus/code_block', () => {
+describe('content_editor/components/bubble_menus/code_block_bubble_menu', () => {
   let wrapper;
   let tiptapEditor;
   let contentEditor;

spec/frontend/content_editor/components/bubble_menus/formatting_spec.js → spec/frontend/content_editor/components/bubble_menus/formatting_bubble_menu_spec.js

 import { BubbleMenu } from '@tiptap/vue-2';
 import { mockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import FormattingBubbleMenu from '~/content_editor/components/bubble_menus/formatting.vue';
+import FormattingBubbleMenu from '~/content_editor/components/bubble_menus/formatting_bubble_menu.vue';
 
 import {
   BUBBLE_MENU_TRACKING_ACTION,
@@ -9,7 +9,7 @@ import {
 } from '~/content_editor/constants';
 import { createTestEditor } from '../../test_utils';
 
-describe('content_editor/components/bubble_menus/formatting', () => {
+describe('content_editor/components/bubble_menus/formatting_bubble_menu', () => {
   let wrapper;
   let trackingSpy;
   let tiptapEditor;

spec/frontend/content_editor/components/bubble_menus/link_spec.js → spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js

 import { GlLink, GlForm } from '@gitlab/ui';
 import { BubbleMenu } from '@tiptap/vue-2';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import LinkBubbleMenu from '~/content_editor/components/bubble_menus/link.vue';
+import LinkBubbleMenu from '~/content_editor/components/bubble_menus/link_bubble_menu.vue';
 import eventHubFactory from '~/helpers/event_hub_factory';
 import Link from '~/content_editor/extensions/link';
 import { createTestEditor, emitEditorEvent } from '../../test_utils';
 
 const createFakeEvent = () => ({ preventDefault: jest.fn(), stopPropagation: jest.fn() });
 
-describe('content_editor/components/bubble_menus/link', () => {
+describe('content_editor/components/bubble_menus/link_bubble_menu', () => {
   let wrapper;
   let tiptapEditor;
   let contentEditor;

spec/frontend/content_editor/components/bubble_menus/media_spec.js → spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js

 import { GlLink, GlForm } from '@gitlab/ui';
 import { BubbleMenu } from '@tiptap/vue-2';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
-import MediaBubbleMenu from '~/content_editor/components/bubble_menus/media.vue';
+import MediaBubbleMenu from '~/content_editor/components/bubble_menus/media_bubble_menu.vue';
 import eventHubFactory from '~/helpers/event_hub_factory';
 import Image from '~/content_editor/extensions/image';
 import Audio from '~/content_editor/extensions/audio';
@@ -33,7 +33,7 @@ describe.each`
   ${'audio'} | ${PROJECT_WIKI_ATTACHMENT_AUDIO_HTML} | ${'test-file.mp3'} | ${TIPTAP_AUDIO_HTML}
   ${'video'} | ${PROJECT_WIKI_ATTACHMENT_VIDEO_HTML} | ${'test-file.mp4'} | ${TIPTAP_VIDEO_HTML}
 `(
-  'content_editor/components/bubble_menus/media ($mediaType)',
+  'content_editor/components/bubble_menus/media_bubble_menu ($mediaType)',
   ({ mediaType, mediaHTML, filePath, mediaOutputHTML }) => {
     let wrapper;
     let tiptapEditor;

spec/frontend/content_editor/components/content_editor_spec.js

@@ -4,7 +4,10 @@ import ContentEditor from '~/content_editor/components/content_editor.vue';
 import ContentEditorAlert from '~/content_editor/components/content_editor_alert.vue';
 import ContentEditorProvider from '~/content_editor/components/content_editor_provider.vue';
 import EditorStateObserver from '~/content_editor/components/editor_state_observer.vue';
-import FormattingBubbleMenu from '~/content_editor/components/bubble_menus/formatting.vue';
+import FormattingBubbleMenu from '~/content_editor/components/bubble_menus/formatting_bubble_menu.vue';
+import CodeBlockBubbleMenu from '~/content_editor/components/bubble_menus/code_block_bubble_menu.vue';
+import LinkBubbleMenu from '~/content_editor/components/bubble_menus/link_bubble_menu.vue';
+import MediaBubbleMenu from '~/content_editor/components/bubble_menus/media_bubble_menu.vue';
 import TopToolbar from '~/content_editor/components/top_toolbar.vue';
 import LoadingIndicator from '~/content_editor/components/loading_indicator.vue';
 import { emitEditorEvent } from '../test_utils';
@@ -115,10 +118,16 @@ describe('ContentEditor', () => {
     expect(wrapper.findComponent(LoadingIndicator).exists()).toBe(true);
   });
 
-  it('renders formatting bubble menu', () => {
+  it.each`
+    name            | component
+    ${'formatting'} | ${FormattingBubbleMenu}
+    ${'link'}       | ${LinkBubbleMenu}
+    ${'media'}      | ${MediaBubbleMenu}
+    ${'codeBlock'}  | ${CodeBlockBubbleMenu}
+  `('renders formatting bubble menu', ({ component }) => {
     createWrapper();
 
-    expect(wrapper.findComponent(FormattingBubbleMenu).exists()).toBe(true);
+    expect(wrapper.findComponent(component).exists()).toBe(true);
   });
 
   it.each`