Select todo count with js-todos-count everywhere

app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue

@@ -52,7 +52,7 @@ export default {
   },
   methods: {
     updateToDoCount(add) {
-      const oldCount = parseInt(document.querySelector('.todos-count').innerText, 10);
+      const oldCount = parseInt(document.querySelector('.js-todos-count').innerText, 10);
       const count = add ? oldCount + 1 : oldCount - 1;
       const headerTodoEvent = new CustomEvent('todo:toggle', {
         detail: {

app/assets/javascripts/header.js

@@ -14,7 +14,7 @@ import Tracking from '~/tracking';
 export default function initTodoToggle() {
   $(document).on('todo:toggle', (e, count) => {
     const updatedCount = count || e?.detail?.count || 0;
-    const $todoPendingCount = $('.todos-count');
+    const $todoPendingCount = $('.js-todos-count');
 
     $todoPendingCount.text(highCountTrim(updatedCount));
     $todoPendingCount.toggleClass('hidden', updatedCount === 0);

spec/frontend/header_spec.js

@@ -4,7 +4,7 @@ import initTodoToggle, { initNavUserDropdownTracking } from '~/header';
 
 describe('Header', () => {
   describe('Todos notification', () => {
-    const todosPendingCount = '.todos-count';
+    const todosPendingCount = '.js-todos-count';
     const fixtureTemplate = 'issues/open-issue.html';
 
     function isTodosCountHidden() {