Add latest changes from gitlab-org/gitlab@master

3 files changed, 109 insertions, 9 deletions

diff --git a/spec/frontend/batch_comments/components/preview_dropdown_spec.js b/spec/frontend/batch_comments/components/preview_dropdown_spec.js
new file mode 100644
index 00000000000..41be04d0b7e
--- /dev/null
+++ b/spec/frontend/batch_comments/components/preview_dropdown_spec.js
@@ -0,0 +1,71 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
+
+Vue.use(Vuex);
+
+let wrapper;
+
+const toggleActiveFileByHash = jest.fn();
+const scrollToDraft = jest.fn();
+
+function factory({ viewDiffsFileByFile = false, draftsCount = 1, sortedDrafts = [] } = {}) {
+  const store = new Vuex.Store({
+    modules: {
+      diffs: {
+        namespaced: true,
+        actions: {
+          toggleActiveFileByHash,
+        },
+        state: {
+          viewDiffsFileByFile,
+        },
+      },
+      batchComments: {
+        namespaced: true,
+        actions: { scrollToDraft },
+        getters: { draftsCount: () => draftsCount, sortedDrafts: () => sortedDrafts },
+      },
+    },
+  });
+
+  wrapper = shallowMountExtended(PreviewDropdown, {
+    store,
+  });
+}
+
+describe('Batch comments preview dropdown', () => {
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('clicking draft', () => {
+    it('it toggles active file when viewDiffsFileByFile is true', async () => {
+      factory({
+        viewDiffsFileByFile: true,
+        sortedDrafts: [{ id: 1, file_hash: 'hash' }],
+      });
+
+      wrapper.findByTestId('preview-item').vm.$emit('click');
+
+      await Vue.nextTick();
+
+      expect(toggleActiveFileByHash).toHaveBeenCalledWith(expect.anything(), 'hash');
+      expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1, file_hash: 'hash' });
+    });
+
+    it('calls scrollToDraft', async () => {
+      factory({
+        viewDiffsFileByFile: false,
+        sortedDrafts: [{ id: 1 }],
+      });
+
+      wrapper.findByTestId('preview-item').vm.$emit('click');
+
+      await Vue.nextTick();
+
+      expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1 });
+    });
+  });
+});
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,
+      });
     });
   });
 });