7 files changed, 112 insertions, 8 deletions
diff --git a/app/assets/javascripts/header.js.es6 b/app/assets/javascripts/header.js.es6
new file mode 100644
index 00000000000..0dd0cebf3a3
--- /dev/null
+++ b/app/assets/javascripts/header.js.es6
@@ -0,0 +1,14 @@
+document.addEventListener('todo:toggle', (event) => {
+  const todoPendingCount = document.querySelector('.todos-pending-count');
+  const count = event.detail.count;
+
+  if (todoPendingCount !== null) {
+    todoPendingCount.textContent = gl.text.addDelimiter(count);
+  }
+
+  if (count === 0 && !todoPendingCount.classList.contains('hidden')) {
+    todoPendingCount.classList.add('hidden');
+  } else if (count !== 0 && todoPendingCount.classList.contains('hidden')) {
+    todoPendingCount.classList.remove('hidden');
+  }
+});
diff --git a/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6 b/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6
new file mode 100644
index 00000000000..416edb674dd
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6
@@ -0,0 +1,11 @@
+/**
+ * CustomEvent support for IE
+ */
+window.CustomEvent = window.CustomEvent || function CustomEvent(event, params) {
+  const options = params || { bubbles: false, cancelable: false, detail: undefined };
+  const evt = document.createEvent('CustomEvent');
+  evt.initCustomEvent(event, options.bubbles, options.cancelable, options.detail);
+  return evt;
+};
+
+window.CustomEvent.prototype = window.CustomEvent.prototype || window.Event.prototype;
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index b1e844b7302..c6fbc508f38 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -84,7 +84,13 @@
     };
 
     Sidebar.prototype.todoUpdateDone = function(data, $btn, $btnText, $todoLoading) {
-      $(document).trigger('todo:toggle', data.count);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: data.count,
+        },
+      });
+
+      document.dispatchEvent(event);
 
       $btn.enable();
       $todoLoading.addClass('hidden');
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index 9790a44972d..d73d775074c 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -40,8 +40,12 @@
         .on('click', sidebarToggleSelector, () => this.toggleSidebar())
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
         .on('click', 'html, body', (e) => this.handleClickEvent(e))
-        .on('page:change', () => this.renderState())
-        .on('todo:toggle', (e, count) => this.updateTodoCount(count));
+        .on('page:change', () => this.renderState());
+
+      document.addEventListener('todo:toggle', (event) => {
+        this.updateTodoCount(event.detail.count);
+      });
+
       this.renderState();
     }
 
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
index d8713600030..d9c1a739ee4 100644
--- a/app/assets/javascripts/todos.js.es6
+++ b/app/assets/javascripts/todos.js.es6
@@ -101,7 +101,14 @@
     }
 
     updateBadges(data) {
-      $(document).trigger('todo:toggle', data.count);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: data.count,
+        },
+      });
+
+      document.dispatchEvent(event);
+
       $('.todos-pending .badge').text(data.count);
       return $('.todos-done .badge').text(data.done_count);
     }
diff --git a/spec/javascripts/dashboard_spec.js.es6 b/spec/javascripts/dashboard_spec.js.es6
index aadf6f518a8..3d2a9be401e 100644
--- a/spec/javascripts/dashboard_spec.js.es6
+++ b/spec/javascripts/dashboard_spec.js.es6
@@ -1,20 +1,27 @@
 /* eslint-disable no-new, padded-blocks */
 
 /*= require sidebar */
-/*= require jquery */
 /*= require js.cookie */
 /*= require lib/utils/text_utility */
+/* eslint-disable no-new */
 
 ((global) => {
   describe('Dashboard', () => {
     const fixtureTemplate = 'dashboard.html';
 
     function todosCountText() {
-      return $('.js-todos-count').text();
+      const countContainer = document.querySelector('.js-todos-count');
+
+      return countContainer !== null ? countContainer.textContent : '';
     }
 
     function triggerToggle(newCount) {
-      $(document).trigger('todo:toggle', newCount);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: newCount,
+        },
+      });
+      document.dispatchEvent(event);
     }
 
     fixture.preload(fixtureTemplate);
@@ -36,5 +43,4 @@
       expect(todosCountText()).toEqual('1,000,000');
     });
   });
-
 })(window.gl);
diff --git a/spec/javascripts/header_spec.js.es6 b/spec/javascripts/header_spec.js.es6
new file mode 100644
index 00000000000..33b0c979b59
--- /dev/null
+++ b/spec/javascripts/header_spec.js.es6
@@ -0,0 +1,56 @@
+/*= require header */
+/*= require lib/utils/text_utility */
+
+describe('Header', () => {
+  const fixtureTemplate = 'header.html';
+
+  const isTodosCountHidden = () => {
+    const countContainer = document.querySelector('.todos-pending-count');
+    return countContainer !== null ? countContainer.classList.contains('hidden') : null;
+  };
+
+  const triggerToggle = (newCount) => {
+    const event = new CustomEvent('todo:toggle', {
+      detail: {
+        count: newCount,
+      },
+    });
+
+    document.dispatchEvent(event);
+  };
+
+  fixture.preload(fixtureTemplate);
+  beforeEach(() => {
+    fixture.load(fixtureTemplate);
+  });
+
+  it('should update todos-pending-count after receiving the todo:toggle event', () => {
+    triggerToggle(5);
+    expect(document.querySelector('.todos-pending-count').textContent).toEqual('5');
+  });
+
+  it('should hide todos-pending-count when it is 0', () => {
+    triggerToggle(0);
+    expect(isTodosCountHidden()).toEqual(true);
+  });
+
+  it('should show todos-pending-count when it is more than 0', () => {
+    triggerToggle(10);
+    expect(isTodosCountHidden()).toEqual(false);
+  });
+
+  describe('when todos-pending-count is 1000', () => {
+    beforeEach(() => {
+      triggerToggle(1000);
+    });
+
+    it('should show todos-pending-count', () => {
+      expect(isTodosCountHidden()).toEqual(false);
+    });
+
+    it('should add delimiter to todos-pending-count', () => {
+      expect(document.querySelector('.todos-pending-count').textContent).toEqual('1,000');
+    });
+  });
+});
+