1 files changed, 42 insertions, 15 deletions
diff --git a/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js b/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js
index fe08cf2c10a..2814b5ce357 100644
--- a/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import SidebarTodo from '~/alert_management/components/sidebar/sidebar_todo.vue';
-import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.graphql';
+import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.mutation.graphql';
 import mockAlerts from '../mocks/alerts.json';
 
 const mockAlert = mockAlerts[0];
@@ -34,6 +34,8 @@ describe('Alert Details Sidebar To Do', () => {
     wrapper.destroy();
   });
 
+  const findToDoButton = () => wrapper.find('[data-testid="alert-todo-button"]');
+
   describe('updating the alert to do', () => {
     const mockUpdatedMutationResult = {
       data: {
@@ -44,25 +46,27 @@ describe('Alert Details Sidebar To Do', () => {
       },
     };
 
-    beforeEach(() => {
-      mountComponent({
-        data: { alert: mockAlert },
-        sidebarCollapsed: false,
-        loading: false,
+    describe('adding a todo', () => {
+      beforeEach(() => {
+        mountComponent({
+          data: { alert: mockAlert },
+          sidebarCollapsed: false,
+          loading: false,
+        });
       });
-    });
 
-    it('renders a button for adding a To Do', () => {
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('[data-testid="alert-todo-button"]').text()).toBe('Add a To Do');
+      it('renders a button for adding a To-Do', async () => {
+        await wrapper.vm.$nextTick();
+
+        expect(findToDoButton().text()).toBe('Add a To-Do');
       });
-    });
 
-    it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', () => {
-      jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+      it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+
+        findToDoButton().trigger('click');
+        await wrapper.vm.$nextTick();
 
-      return wrapper.vm.$nextTick().then(() => {
-        wrapper.find('button').trigger('click');
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: AlertMarkTodo,
           variables: {
@@ -72,5 +76,28 @@ describe('Alert Details Sidebar To Do', () => {
         });
       });
     });
+    describe('removing a todo', () => {
+      beforeEach(() => {
+        mountComponent({
+          data: { alert: { ...mockAlert, todos: { nodes: [{ id: '1234' }] } } },
+          sidebarCollapsed: false,
+          loading: false,
+        });
+      });
+
+      it('renders a Mark As Done button when todo is present', async () => {
+        await wrapper.vm.$nextTick();
+
+        expect(findToDoButton().text()).toBe('Mark as done');
+      });
+
+      it('calls `$apollo.mutate` with `AlertMarkTodoDone` mutation and variables containing `id`', async () => {
+        jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
+
+        findToDoButton().trigger('click');
+        await wrapper.vm.$nextTick();
+        expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledTimes(1);
+      });
+    });
   });
 });