Add latest changes from gitlab-org/gitlab@14-3-stable-eev14.3.0-rc42

2 files changed, 71 insertions, 6 deletions

diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index bb79b43205b..c3a51c51de0 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -10,6 +10,7 @@ import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import CommentForm from '~/notes/components/comment_form.vue';
+import CommentTypeDropdown from '~/notes/components/comment_type_dropdown.vue';
 import * as constants from '~/notes/constants';
 import eventHub from '~/notes/event_hub';
 import { COMMENT_FORM } from '~/notes/i18n';
@@ -33,8 +34,8 @@ describe('issue_comment_form component', () => {
   const findAddToReviewButton = () => wrapper.findByTestId('add-to-review-button');
   const findAddCommentNowButton = () => wrapper.findByTestId('add-comment-now-button');
   const findConfidentialNoteCheckbox = () => wrapper.findByTestId('confidential-note-checkbox');
-  const findCommentGlDropdown = () => wrapper.findByTestId('comment-button');
-  const findCommentButton = () => findCommentGlDropdown().find('button');
+  const findCommentTypeDropdown = () => wrapper.findComponent(CommentTypeDropdown);
+  const findCommentButton = () => findCommentTypeDropdown().find('button');
   const findErrorAlerts = () => wrapper.findAllComponents(GlAlert).wrappers;
 
   async function clickCommentButton({ waitForComponent = true, waitForNetwork = true } = {}) {
@@ -381,7 +382,7 @@ describe('issue_comment_form component', () => {
       it('should render comment button as disabled', () => {
         mountComponent();
 
-        expect(findCommentGlDropdown().props('disabled')).toBe(true);
+        expect(findCommentTypeDropdown().props('disabled')).toBe(true);
       });
 
       it('should enable comment button if it has note', async () => {
@@ -389,7 +390,7 @@ describe('issue_comment_form component', () => {
 
         await wrapper.setData({ note: 'Foo' });
 
-        expect(findCommentGlDropdown().props('disabled')).toBe(false);
+        expect(findCommentTypeDropdown().props('disabled')).toBe(false);
       });
 
       it('should update buttons texts when it has note', () => {
@@ -624,7 +625,7 @@ describe('issue_comment_form component', () => {
       it('when no drafts exist, should not render', () => {
         mountComponent();
 
-        expect(findCommentGlDropdown().exists()).toBe(true);
+        expect(findCommentTypeDropdown().exists()).toBe(true);
         expect(findAddToReviewButton().exists()).toBe(false);
         expect(findAddCommentNowButton().exists()).toBe(false);
       });
@@ -637,7 +638,7 @@ describe('issue_comment_form component', () => {
         it('should render', () => {
           mountComponent();
 
-          expect(findCommentGlDropdown().exists()).toBe(false);
+          expect(findCommentTypeDropdown().exists()).toBe(false);
           expect(findAddToReviewButton().exists()).toBe(true);
           expect(findAddCommentNowButton().exists()).toBe(true);
         });
diff --git a/spec/frontend/notes/components/comment_type_dropdown_spec.js b/spec/frontend/notes/components/comment_type_dropdown_spec.js
new file mode 100644
index 00000000000..5e1cb813369
--- /dev/null
+++ b/spec/frontend/notes/components/comment_type_dropdown_spec.js
@@ -0,0 +1,64 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CommentTypeDropdown from '~/notes/components/comment_type_dropdown.vue';
+import * as constants from '~/notes/constants';
+import { COMMENT_FORM } from '~/notes/i18n';
+
+describe('CommentTypeDropdown component', () => {
+  let wrapper;
+
+  const findCommentGlDropdown = () => wrapper.findComponent(GlDropdown);
+  const findCommentDropdownOption = () => wrapper.findAllComponents(GlDropdownItem).at(0);
+  const findDiscussionDropdownOption = () => wrapper.findAllComponents(GlDropdownItem).at(1);
+
+  const mountComponent = ({ props = {} } = {}) => {
+    wrapper = extendedWrapper(
+      mount(CommentTypeDropdown, {
+        propsData: {
+          noteableDisplayName: 'issue',
+          noteType: constants.COMMENT,
+          ...props,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('Should label action button "Comment" and correct dropdown item checked when selected', () => {
+    mountComponent({ props: { noteType: constants.COMMENT } });
+
+    expect(findCommentGlDropdown().props()).toMatchObject({ text: COMMENT_FORM.comment });
+    expect(findCommentDropdownOption().props()).toMatchObject({ isChecked: true });
+    expect(findDiscussionDropdownOption().props()).toMatchObject({ isChecked: false });
+  });
+
+  it('Should label action button "Start Thread" and correct dropdown item option checked when selected', () => {
+    mountComponent({ props: { noteType: constants.DISCUSSION } });
+
+    expect(findCommentGlDropdown().props()).toMatchObject({ text: COMMENT_FORM.startThread });
+    expect(findCommentDropdownOption().props()).toMatchObject({ isChecked: false });
+    expect(findDiscussionDropdownOption().props()).toMatchObject({ isChecked: true });
+  });
+
+  it('Should emit `change` event when clicking on an alternate dropdown option', () => {
+    mountComponent({ props: { noteType: constants.DISCUSSION } });
+
+    findCommentDropdownOption().vm.$emit('click');
+    findDiscussionDropdownOption().vm.$emit('click');
+
+    expect(wrapper.emitted('change')[0]).toEqual([constants.COMMENT]);
+    expect(wrapper.emitted('change').length).toEqual(1);
+  });
+
+  it('Should emit `click` event when clicking on the action button', () => {
+    mountComponent({ props: { noteType: constants.DISCUSSION } });
+
+    findCommentGlDropdown().vm.$emit('click');
+
+    expect(wrapper.emitted('click').length > 0).toBe(true);
+  });
+});