From 5e8440d650064f52b7110aff11d1b8e2ad834b1c Mon Sep 17 00:00:00 2001
From: Paul Gascou-Vaillancourt <paul.gascvail@gmail.com>
Date: Thu, 31 Oct 2024 08:17:50 -0400
Subject: [PATCH] Ensure todo counts are re-fetched upon mark all as done
Fixes the todo counts query name in the `updateCounts` to ensure counts
are properly re-fetched when marking all todos as done.
---
.../javascripts/todos/components/todos_app.vue | 2 +-
spec/frontend/todos/components/todos_app_spec.js | 13 +++++++++++++
2 files changed, 14 insertions(+), 1 deletion(-)
diff --git a/app/assets/javascripts/todos/components/todos_app.vue b/app/assets/javascripts/todos/components/todos_app.vue
index c7477509f3ff7..c9649e0e8ae91 100644
--- a/app/assets/javascripts/todos/components/todos_app.vue
+++ b/app/assets/javascripts/todos/components/todos_app.vue
@@ -145,7 +145,7 @@ export default {
this.queryFilterValues = { ...data };
},
updateCounts() {
- this.$apollo.queries.todosCount.refetch();
+ this.$apollo.queries.pendingTodosCount.refetch();
},
},
};
diff --git a/spec/frontend/todos/components/todos_app_spec.js b/spec/frontend/todos/components/todos_app_spec.js
index 955b91a2f5956..02b1e80fb7bc2 100644
--- a/spec/frontend/todos/components/todos_app_spec.js
+++ b/spec/frontend/todos/components/todos_app_spec.js
@@ -7,6 +7,7 @@ import waitForPromises from 'helpers/wait_for_promises';
import TodosApp from '~/todos/components/todos_app.vue';
import TodoItem from '~/todos/components/todo_item.vue';
import TodosFilterBar from '~/todos/components/todos_filter_bar.vue';
+import TodosMarkAllDoneButton from '~/todos/components/todos_mark_all_done_button.vue';
import getTodosQuery from '~/todos/components/queries/get_todos.query.graphql';
import { INSTRUMENT_TAB_LABELS, STATUS_BY_TAB } from '~/todos/constants';
import { mockTracking, unmockTracking } from 'jest/__helpers__/tracking_helper';
@@ -37,6 +38,7 @@ describe('TodosApp', () => {
const findTodoItems = () => wrapper.findAllComponents(TodoItem);
const findGlTabs = () => wrapper.findComponent(GlTabs);
const findFilterBar = () => wrapper.findComponent(TodosFilterBar);
+ const findMarkAllDoneButton = () => wrapper.findComponent(TodosMarkAllDoneButton);
const findPendingTodosCount = () => wrapper.findByTestId('pending-todos-count');
it('should have a tracking event for each tab', () => {
@@ -83,6 +85,17 @@ describe('TodosApp', () => {
expect(todosCountsQuerySuccessHandler).toHaveBeenLastCalledWith(filters);
});
+ it('re-fetches the pending todos count when mark all done button is clicked', async () => {
+ createComponent();
+ await waitForPromises();
+
+ expect(todosCountsQuerySuccessHandler).toHaveBeenCalledTimes(1);
+
+ findMarkAllDoneButton().vm.$emit('change');
+
+ expect(todosCountsQuerySuccessHandler).toHaveBeenCalledTimes(2);
+ });
+
it('shows the pending todos count once it has been fetched', async () => {
createComponent();
--
GitLab