Fix tasklist header counts in Test Cases

Fixes a bug where marking/unmarking task list items
in test cases didn't update the counts in Test Case
header section.

Changelog: fixed
EE: true

ee/app/assets/javascripts/test_case_show/components/test_case_show_root.vue

@@ -50,6 +50,7 @@ export default {
   data() {
     return {
       testCase: {},
+      taskCompletionStatus: {},
       editTestCaseFormVisible: false,
       testCaseSaveInProgress: false,
       testCaseStateChangeInProgress: false,
@@ -103,6 +104,9 @@ export default {
           this.testCaseStateChangeInProgress = false;
         });
     },
+    handleTaskListUpdateSuccess() {
+      this.$apollo.queries.taskCompletionStatus.refetch();
+    },
     handleTaskListUpdateFailure() {
       this.taskListUpdateFailed = true;
     },
@@ -159,10 +163,11 @@ export default {
       :edit-form-visible="editTestCaseFormVisible"
       :description-preview-path="descriptionPreviewPath"
       :description-help-path="descriptionHelpPath"
-      :task-completion-status="testCase.taskCompletionStatus"
+      :task-completion-status="taskCompletionStatus"
       :task-list-update-path="updatePath"
       :task-list-lock-version="lockVersion"
       @edit-issuable="handleEditTestCase"
+      @task-list-update-success="handleTaskListUpdateSuccess"
       @task-list-update-failure="handleTaskListUpdateFailure"
     >
       <template #status-badge>

ee/app/assets/javascripts/test_case_show/mixins/test_case_graphql.js

@@ -6,6 +6,7 @@ import { s__ } from '~/locale';
 import markTestCaseTodoDone from '../queries/mark_test_case_todo_done.mutation.graphql';
 import moveTestCase from '../queries/move_test_case.mutation.graphql';
 import projectTestCase from '../queries/project_test_case.query.graphql';
+import projectTestCaseTaskList from '../queries/test_case_tasklist.query.graphql';
 import updateTestCase from '../queries/update_test_case.mutation.graphql';
 
 export default {
@@ -34,6 +35,26 @@ export default {
         throw error;
       },
     },
+    taskCompletionStatus: {
+      query: projectTestCaseTaskList,
+      variables() {
+        return {
+          projectPath: this.projectFullPath,
+          testCaseId: this.testCaseId,
+        };
+      },
+      update(data) {
+        return data.project?.issue?.taskCompletionStatus;
+      },
+      error(error) {
+        createFlash({
+          message: s__('TestCases|Something went wrong while updating the test case.'),
+          captureError: true,
+          error,
+        });
+        throw error;
+      },
+    },
   },
   data() {
     return {

ee/app/assets/javascripts/test_case_show/queries/test_case.fragment.graphql

@@ -35,8 +35,4 @@ fragment TestCase on Issue {
       state
     }
   }
-  taskCompletionStatus {
-    count
-    completedCount
-  }
 }

ee/app/assets/javascripts/test_case_show/queries/test_case_tasklist.query.graphql

+query projectTestCaseTaskList($projectPath: ID!, $testCaseId: String) {
+  project(fullPath: $projectPath) {
+    __typename
+    issue(iid: $testCaseId) {
+      __typename
+      id
+      taskCompletionStatus {
+        __typename
+        count
+        completedCount
+      }
+    }
+  }
+}

ee/spec/frontend/test_case_show/components/test_case_show_root_spec.js

@@ -28,6 +28,9 @@ const createComponent = ({ testCase, testCaseQueryLoading = false } = {}) =>
             loading: testCaseQueryLoading,
             refetch: jest.fn(),
           },
+          taskCompletionStatus: {
+            refetch: jest.fn(),
+          },
         },
       },
     },
@@ -303,12 +306,18 @@ describe('TestCaseShowRoot', () => {
         issuable: mockTestCase,
         enableEdit: canEditTestCase,
         editFormVisible: editTestCaseFormVisible,
-        taskCompletionStatus: mockTestCase.taskCompletionStatus,
+        taskCompletionStatus: {},
         taskListUpdatePath: updatePath,
         taskListLockVersion: lockVersion,
       });
     });
 
+    it('refetches taskCompletionStatus when issuable-show emits `task-list-update-success` event', async () => {
+      await wrapper.find(IssuableShow).vm.$emit('task-list-update-success');
+
+      expect(wrapper.vm.$apollo.queries.taskCompletionStatus.refetch).toHaveBeenCalled();
+    });
+
     it('does not render issuable-show when `testCaseLoading` prop is false and `testCaseLoadFailed` prop is true', async () => {
       wrapper.setData({
         testCaseLoading: false,