1 files changed, 36 insertions, 16 deletions

diff --git a/spec/frontend/issues/show/components/task_list_item_actions_spec.js b/spec/frontend/issues/show/components/task_list_item_actions_spec.js
index 93cb7b5ae16..b2e57bf49d0 100644
--- a/spec/frontend/issues/show/components/task_list_item_actions_spec.js
+++ b/spec/frontend/issues/show/components/task_list_item_actions_spec.js
@@ -1,5 +1,6 @@
-import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlDisclosureDropdown } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TYPE_EPIC, TYPE_INCIDENT, TYPE_ISSUE } from '~/issues/constants';
 import TaskListItemActions from '~/issues/show/components/task_list_item_actions.vue';
 import eventHub from '~/issues/show/event_hub';
 
@@ -9,26 +10,24 @@ describe('TaskListItemActions component', () => {
   let wrapper;
 
   const findGlDisclosureDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
-  const findConvertToTaskItem = () => wrapper.findAllComponents(GlDisclosureDropdownItem).at(0);
-  const findDeleteItem = () => wrapper.findAllComponents(GlDisclosureDropdownItem).at(1);
+  const findConvertToTaskItem = () => wrapper.findByTestId('convert');
+  const findDeleteItem = () => wrapper.findByTestId('delete');
 
-  const mountComponent = () => {
+  const mountComponent = ({ issuableType = TYPE_ISSUE } = {}) => {
     const li = document.createElement('li');
     li.dataset.sourcepos = '3:1-3:10';
     li.appendChild(document.createElement('div'));
     document.body.appendChild(li);
 
-    wrapper = shallowMount(TaskListItemActions, {
-      provide: { canUpdate: true },
+    wrapper = shallowMountExtended(TaskListItemActions, {
+      provide: { canUpdate: true, issuableType },
       attachTo: document.querySelector('div'),
     });
   };
 
-  beforeEach(() => {
+  it('renders dropdown', () => {
     mountComponent();
-  });
 
-  it('renders dropdown', () => {
     expect(findGlDisclosureDropdown().props()).toMatchObject({
       category: 'tertiary',
       icon: 'ellipsis_v',
@@ -38,15 +37,36 @@ describe('TaskListItemActions component', () => {
     });
   });
 
-  it('emits event when `Convert to task` dropdown item is clicked', () => {
-    findConvertToTaskItem().vm.$emit('action');
+  describe('"Convert to task" dropdown item', () => {
+    describe.each`
+      issuableType     | exists
+      ${TYPE_EPIC}     | ${false}
+      ${TYPE_INCIDENT} | ${true}
+      ${TYPE_ISSUE}    | ${true}
+    `(`when $issuableType`, ({ issuableType, exists }) => {
+      it(`${exists ? 'renders' : 'does not render'}`, () => {
+        mountComponent({ issuableType });
 
-    expect(eventHub.$emit).toHaveBeenCalledWith('convert-task-list-item', '3:1-3:10');
+        expect(findConvertToTaskItem().exists()).toBe(exists);
+      });
+    });
   });
 
-  it('emits event when `Delete` dropdown item is clicked', () => {
-    findDeleteItem().vm.$emit('action');
+  describe('events', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('emits event when `Convert to task` dropdown item is clicked', () => {
+      findConvertToTaskItem().vm.$emit('action');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('convert-task-list-item', '3:1-3:10');
+    });
 
-    expect(eventHub.$emit).toHaveBeenCalledWith('delete-task-list-item', '3:1-3:10');
+    it('emits event when `Delete` dropdown item is clicked', () => {
+      findDeleteItem().vm.$emit('action');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('delete-task-list-item', '3:1-3:10');
+    });
   });
 });