Merge branch...

Merge branch '344311-make-badges-in-app-assets-javascripts-pages-dashboard-todos-index-todos-js-pajamas-compliant' into 'master'

Todos: Replaces badge selector with a js- prefixed class

See merge request gitlab-org/gitlab!77171

app/assets/javascripts/pages/dashboard/todos/index/todos.js

@@ -172,8 +172,12 @@ export default class Todos {
 
   updateBadges(data) {
     $(document).trigger('todo:toggle', data.count);
-    document.querySelector('.js-todos-pending .badge').innerHTML = addDelimiter(data.count);
-    document.querySelector('.js-todos-done .badge').innerHTML = addDelimiter(data.done_count);
+    document.querySelector('.js-todos-pending .js-todos-badge').innerHTML = addDelimiter(
+      data.count,
+    );
+    document.querySelector('.js-todos-done .js-todos-badge').innerHTML = addDelimiter(
+      data.done_count,
+    );
   }
 
   goToTodoUrl(e) {

app/views/dashboard/todos/index.html.haml

@@ -13,10 +13,10 @@
     = gl_tabs_nav({ class: 'gl-flex-grow-1 gl-border-0' }) do
       = gl_tab_link_to todos_filter_path(state: 'pending'), item_active: params[:state].blank? || params[:state] == 'pending', class: "js-todos-pending" do
         = _("To Do")
-        = gl_tab_counter_badge number_with_delimiter(todos_pending_count)
+        = gl_tab_counter_badge(number_with_delimiter(todos_pending_count), { class: 'js-todos-badge' })
       = gl_tab_link_to todos_filter_path(state: 'done'), item_active: params[:state] == 'done', class: "js-todos-done" do
         = _("Done")
-        = gl_tab_counter_badge number_with_delimiter(todos_done_count)
+        = gl_tab_counter_badge(number_with_delimiter(todos_done_count), { class: 'js-todos-badge' })
 
     .nav-controls
       - if @allowed_todos.any?(&:pending?)

spec/frontend/pages/dashboard/todos/index/todos_spec.js

@@ -94,13 +94,13 @@ describe('Todos', () => {
       });
 
       it('updates pending text', () => {
-        expect(document.querySelector('.js-todos-pending .badge').innerHTML).toEqual(
+        expect(document.querySelector('.js-todos-pending .js-todos-badge').innerHTML).toEqual(
           addDelimiter(TEST_COUNT_BIG),
         );
       });
 
       it('updates done text', () => {
-        expect(document.querySelector('.js-todos-done .badge').innerHTML).toEqual(
+        expect(document.querySelector('.js-todos-done .js-todos-badge').innerHTML).toEqual(
           addDelimiter(TEST_DONE_COUNT_BIG),
         );
       });