diff --git a/app/assets/javascripts/todos/components/todos_app.vue b/app/assets/javascripts/todos/components/todos_app.vue index c7477509f3ff7a527974327fe5cf225975fb11f1..c9649e0e8ae9104cca8f3a8180a16de06cb9f4e5 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 955b91a2f5956bf1cd7aedadc427a3acce9331e8..02b1e80fb7bc2464ef3fae36ac2e9cca7938f14b 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();