1 files changed, 67 insertions, 18 deletions

diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js
index 137a0a7326d..a1f1d47ab90 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -1,5 +1,5 @@
-import { GlDropdownItem, GlModal } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import WorkItemActions from '~/work_items/components/work_item_actions.vue';
 
 describe('WorkItemActions component', () => {
@@ -7,12 +7,19 @@ describe('WorkItemActions component', () => {
   let glModalDirective;
 
   const findModal = () => wrapper.findComponent(GlModal);
-  const findDeleteButton = () => wrapper.findComponent(GlDropdownItem);
+  const findConfidentialityToggleButton = () =>
+    wrapper.findByTestId('confidentiality-toggle-action');
+  const findDeleteButton = () => wrapper.findByTestId('delete-action');
 
-  const createComponent = ({ canDelete = true } = {}) => {
+  const createComponent = ({
+    canUpdate = true,
+    canDelete = true,
+    isConfidential = false,
+    isParentConfidential = false,
+  } = {}) => {
     glModalDirective = jest.fn();
-    wrapper = shallowMount(WorkItemActions, {
-      propsData: { workItemId: '123', canDelete },
+    wrapper = shallowMountExtended(WorkItemActions, {
+      propsData: { workItemId: '123', canUpdate, canDelete, isConfidential, isParentConfidential },
       directives: {
         glModal: {
           bind(_, { value }) {
@@ -34,27 +41,69 @@ describe('WorkItemActions component', () => {
     expect(findModal().props('visible')).toBe(false);
   });
 
-  it('shows confirm modal when clicking Delete work item', () => {
+  it('renders dropdown actions', () => {
     createComponent();
 
-    findDeleteButton().vm.$emit('click');
-
-    expect(glModalDirective).toHaveBeenCalled();
+    expect(findConfidentialityToggleButton().exists()).toBe(true);
+    expect(findDeleteButton().exists()).toBe(true);
   });
 
-  it('emits event when clicking OK button', () => {
-    createComponent();
+  describe('toggle confidentiality action', () => {
+    it.each`
+      isConfidential | buttonText
+      ${true}        | ${'Turn off confidentiality'}
+      ${false}       | ${'Turn on confidentiality'}
+    `(
+      'renders confidentiality toggle button with text "$buttonText"',
+      ({ isConfidential, buttonText }) => {
+        createComponent({ isConfidential });
+
+        expect(findConfidentialityToggleButton().text()).toBe(buttonText);
+      },
+    );
+
+    it('emits `toggleWorkItemConfidentiality` event when clicked', () => {
+      createComponent();
 
-    findModal().vm.$emit('ok');
+      findConfidentialityToggleButton().vm.$emit('click');
 
-    expect(wrapper.emitted('deleteWorkItem')).toEqual([[]]);
+      expect(wrapper.emitted('toggleWorkItemConfidentiality')[0]).toEqual([true]);
+    });
+
+    it.each`
+      props                             | propName                  | value
+      ${{ isParentConfidential: true }} | ${'isParentConfidential'} | ${true}
+      ${{ canUpdate: false }}           | ${'canUpdate'}            | ${false}
+    `('does not render when $propName is $value', ({ props }) => {
+      createComponent(props);
+
+      expect(findConfidentialityToggleButton().exists()).toBe(false);
+    });
   });
 
-  it('does not render when canDelete is false', () => {
-    createComponent({
-      canDelete: false,
+  describe('delete action', () => {
+    it('shows confirm modal when clicked', () => {
+      createComponent();
+
+      findDeleteButton().vm.$emit('click');
+
+      expect(glModalDirective).toHaveBeenCalled();
+    });
+
+    it('emits event when clicking OK button', () => {
+      createComponent();
+
+      findModal().vm.$emit('ok');
+
+      expect(wrapper.emitted('deleteWorkItem')).toEqual([[]]);
     });
 
-    expect(wrapper.html()).toBe('');
+    it('does not render when canDelete is false', () => {
+      createComponent({
+        canDelete: false,
+      });
+
+      expect(wrapper.findByTestId('delete-action').exists()).toBe(false);
+    });
   });
 });