Add latest changes from gitlab-org/gitlab@master

2 files changed, 38 insertions, 9 deletions

diff --git a/spec/frontend/content_editor/components/toolbar_button_spec.js b/spec/frontend/content_editor/components/toolbar_button_spec.js
index 42fab2a5616..a49efa34017 100644
--- a/spec/frontend/content_editor/components/toolbar_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_button_spec.js
@@ -83,7 +83,7 @@ describe('content_editor/components/toolbar_button', () => {
       await findButton().trigger('click');
 
       expect(toggleFooSpy).toHaveBeenCalled();
-      expect(wrapper.emitted().click).toHaveLength(1);
+      expect(wrapper.emitted().execute).toHaveLength(1);
     });
 
     it('does not executes the content type command when executeCommand = false', async () => {
@@ -92,7 +92,7 @@ describe('content_editor/components/toolbar_button', () => {
       await findButton().trigger('click');
 
       expect(toggleFooSpy).not.toHaveBeenCalled();
-      expect(wrapper.emitted().click).toHaveLength(1);
+      expect(wrapper.emitted().execute).toHaveLength(1);
     });
   });
 });
diff --git a/spec/frontend/content_editor/components/top_toolbar_spec.js b/spec/frontend/content_editor/components/top_toolbar_spec.js
index e7cdb8d0967..8f47be3f489 100644
--- a/spec/frontend/content_editor/components/top_toolbar_spec.js
+++ b/spec/frontend/content_editor/components/top_toolbar_spec.js
@@ -1,12 +1,17 @@
 import { shallowMount } from '@vue/test-utils';
+import { mockTracking } from 'helpers/tracking_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import TopToolbar from '~/content_editor/components/top_toolbar.vue';
+import {
+  TOOLBAR_CONTROL_TRACKING_ACTION,
+  CONTENT_EDITOR_TRACKING_LABEL,
+} from '~/content_editor/constants';
 import { createContentEditor } from '~/content_editor/services/create_content_editor';
 
 describe('content_editor/components/top_toolbar', () => {
   let wrapper;
   let contentEditor;
-
+  let trackingSpy;
   const buildEditor = () => {
     contentEditor = createContentEditor({ renderMarkdown: () => true });
   };
@@ -22,6 +27,10 @@ describe('content_editor/components/top_toolbar', () => {
   };
 
   beforeEach(() => {
+    trackingSpy = mockTracking(undefined, null, jest.spyOn);
+  });
+
+  beforeEach(() => {
     buildEditor();
   });
 
@@ -29,7 +38,7 @@ describe('content_editor/components/top_toolbar', () => {
     wrapper.destroy();
   });
 
-  it.each`
+  describe.each`
     testId            | buttonProps
     ${'bold'}         | ${{ contentType: 'bold', iconName: 'bold', label: 'Bold text', editorCommand: 'toggleBold' }}
     ${'italic'}       | ${{ contentType: 'italic', iconName: 'italic', label: 'Italic text', editorCommand: 'toggleItalic' }}
@@ -37,11 +46,31 @@ describe('content_editor/components/top_toolbar', () => {
     ${'blockquote'}   | ${{ contentType: 'blockquote', iconName: 'quote', label: 'Insert a quote', editorCommand: 'toggleBlockquote' }}
     ${'bullet-list'}  | ${{ contentType: 'bulletList', iconName: 'list-bulleted', label: 'Add a bullet list', editorCommand: 'toggleBulletList' }}
     ${'ordered-list'} | ${{ contentType: 'orderedList', iconName: 'list-numbered', label: 'Add a numbered list', editorCommand: 'toggleOrderedList' }}
-  `('renders $testId button', ({ testId, buttonProps }) => {
-    buildWrapper();
-    expect(wrapper.findByTestId(testId).props()).toEqual({
-      ...buttonProps,
-      tiptapEditor: contentEditor.tiptapEditor,
+  `('given a $testId toolbar control', ({ testId, buttonProps }) => {
+    beforeEach(() => {
+      buildWrapper();
+    });
+
+    it('renders the toolbar control with the provided properties', () => {
+      expect(wrapper.findByTestId(testId).props()).toEqual({
+        ...buttonProps,
+        tiptapEditor: contentEditor.tiptapEditor,
+      });
+    });
+
+    it.each`
+      control         | eventData
+      ${'bold'}       | ${{ contentType: 'bold' }}
+      ${'blockquote'} | ${{ contentType: 'blockquote', value: 1 }}
+    `('tracks the execution of toolbar controls', ({ control, eventData }) => {
+      const { contentType, value } = eventData;
+      wrapper.findByTestId(control).vm.$emit('execute', eventData);
+
+      expect(trackingSpy).toHaveBeenCalledWith(undefined, TOOLBAR_CONTROL_TRACKING_ACTION, {
+        label: CONTENT_EDITOR_TRACKING_LABEL,
+        property: contentType,
+        value,
+      });
     });
   });
 });