Add todo toggle event

8 files changed, 198 insertions, 2 deletions

diff --git a/spec/features/todos/todos_spec.rb b/spec/features/todos/todos_spec.rb
index bf93c1d1251..230543cd175 100644
--- a/spec/features/todos/todos_spec.rb
+++ b/spec/features/todos/todos_spec.rb
@@ -132,7 +132,6 @@ describe 'Dashboard Todos', feature: true do
         end
 
         it 'shows "All done" message!' do
-          within('.todos-pending-count') { expect(page).to have_content '0' }
           expect(page).to have_content 'To do 0'
           expect(page).to have_content "You're all done!"
           expect(page).not_to have_selector('.gl-pagination')
diff --git a/spec/javascripts/dashboard_spec.js.es6 b/spec/javascripts/dashboard_spec.js.es6
new file mode 100644
index 00000000000..8021145d8e8
--- /dev/null
+++ b/spec/javascripts/dashboard_spec.js.es6
@@ -0,0 +1,38 @@
+/*= require sidebar */
+/*= require jquery */
+/*= require jquery.cookie */
+/*= require lib/utils/text_utility */
+
+((global) => {
+  describe('Dashboard', () => {
+    const fixtureTemplate = 'dashboard.html';
+
+    function todosCountText() {
+      return $('.js-todos-count').text();
+    }
+
+    function triggerToggle(newCount) {
+      $(document).trigger('todo:toggle', newCount);
+    }
+
+    fixture.preload(fixtureTemplate);
+    beforeEach(() => {
+      fixture.load(fixtureTemplate);
+      new global.Sidebar();
+    });
+
+    it('should update todos-count after receiving the todo:toggle event', () => {
+      triggerToggle(5);
+      expect(todosCountText()).toEqual('5');
+    });
+
+    it('should display todos-count with delimiter', () => {
+      triggerToggle(1000);
+      expect(todosCountText()).toEqual('1,000');
+
+      triggerToggle(1000000);
+      expect(todosCountText()).toEqual('1,000,000');
+    });
+  });
+
+})(window.gl);
diff --git a/spec/javascripts/fixtures/dashboard.html.haml b/spec/javascripts/fixtures/dashboard.html.haml
new file mode 100644
index 00000000000..32446acfd60
--- /dev/null
+++ b/spec/javascripts/fixtures/dashboard.html.haml
@@ -0,0 +1,45 @@
+%ul.nav.nav-sidebar
+  %li.home.active
+    %a.dashboard-shortcuts-projects
+      %span
+        Projects
+  %li
+    %a
+      %span
+        Todos
+        %span.count.js-todos-count
+        1
+  %li
+    %a.dashboard-shortcuts-activity
+      %span
+        Activity
+  %li
+    %a
+      %span
+        Groups
+  %li
+    %a
+      %span
+        Milestones
+  %li
+    %a.dashboard-shortcuts-issues
+      %span
+        Issues
+        %span
+        1
+  %li
+    %a.dashboard-shortcuts-merge_requests
+      %span
+        Merge Requests
+  %li
+    %a
+      %span
+        Snippets
+  %li
+    %a
+      %span
+        Help
+  %li
+    %a
+      %span
+        Profile Settings
diff --git a/spec/javascripts/fixtures/header.html.haml b/spec/javascripts/fixtures/header.html.haml
new file mode 100644
index 00000000000..4db2ef604de
--- /dev/null
+++ b/spec/javascripts/fixtures/header.html.haml
@@ -0,0 +1,35 @@
+%header.navbar.navbar-fixed-top.navbar-gitlab.nav_header_class
+  .container-fluid
+    .header-content
+      %button.side-nav-toggle
+      %span.sr-only
+        Toggle navigation
+        %i.fa.fa-bars
+      %button.navbar-toggle
+        %span.sr-only
+        Toggle navigation
+        %i.fa.fa-ellipsis-v
+      .navbar-collapse.collapse
+        %ui.nav.navbar-nav
+          %li.hidden-sm.hidden-xs
+          %li.visible-sm.visible-xs
+          %li
+            %a
+              %i.fa.fa-bell.fa-fw
+              %span.badge.todos-pending-count
+          %li
+            %a
+              %i.fa.fa-plus.fa-fw
+          %li.header-user.dropdown
+            %a
+              %img
+              %span.caret
+            .dropdown-menu-nav
+            .dropdown-menu-align-right
+              %ul
+                %li
+                  %a.profile-link
+                %li
+                  %a
+                %li.divider
+                %li.sign-out-link
diff --git a/spec/javascripts/fixtures/right_sidebar.html.haml b/spec/javascripts/fixtures/right_sidebar.html.haml
index 95efaff4b69..d48b77cf0ce 100644
--- a/spec/javascripts/fixtures/right_sidebar.html.haml
+++ b/spec/javascripts/fixtures/right_sidebar.html.haml
@@ -5,6 +5,10 @@
     %div.block.issuable-sidebar-header
       %a.gutter-toggle.pull-right.js-sidebar-toggle
         %i.fa.fa-angle-double-left
+      %button.btn.btn-default.issuable-header-btn.pull-right.js-issuable-todo{ type: "button", data: { todo_text: "Add Todo", mark_text: "Mark Done", issuable_id: "1", issuable_type: "issue", url: "/todos" }}
+        %span.js-issuable-todo-text
+          Add Todo
+        %i.fa.fa-spin.fa-spinner.js-issuable-todo-loading.hidden
 
     %form.issuable-context-form
       %div.block.labels
diff --git a/spec/javascripts/fixtures/todos.json b/spec/javascripts/fixtures/todos.json
new file mode 100644
index 00000000000..62c2387d515
--- /dev/null
+++ b/spec/javascripts/fixtures/todos.json
@@ -0,0 +1,4 @@
+{
+    "count": 1,
+    "delete_path": "/dashboard/todos/1"
+}
\ No newline at end of file
diff --git a/spec/javascripts/header_spec.js b/spec/javascripts/header_spec.js
new file mode 100644
index 00000000000..b9d023a9aae
--- /dev/null
+++ b/spec/javascripts/header_spec.js
@@ -0,0 +1,54 @@
+/*= require header */
+/*= require lib/utils/text_utility */
+/*= require jquery */
+
+(function() {
+
+  describe('Header', function() {
+    var todosPendingCount = '.todos-pending-count';
+    var fixtureTemplate = 'header.html';
+
+    function isTodosCountHidden() {
+      return $(todosPendingCount).hasClass('hidden');
+    }
+
+    function triggerToggle(newCount) {
+      $(document).trigger('todo:toggle', newCount);
+    }
+
+    fixture.preload(fixtureTemplate);
+    beforeEach(function() {
+      fixture.load(fixtureTemplate);
+    });
+
+    it('should update todos-pending-count after receiving the todo:toggle event', function() {
+      triggerToggle(5);
+      expect($(todosPendingCount).text()).toEqual('5');
+    });
+
+    it('should hide todos-pending-count when it is 0', function() {
+      triggerToggle(0);
+      expect(isTodosCountHidden()).toEqual(true);
+    });
+
+    it('should show todos-pending-count when it is more than 0', function() {
+      triggerToggle(10);
+      expect(isTodosCountHidden()).toEqual(false);
+    });
+
+    describe('when todos-pending-count is 1000', function() {
+      beforeEach(function() {
+        triggerToggle(1000);
+      });
+
+      it('should show todos-pending-count', function() {
+        expect(isTodosCountHidden()).toEqual(false);
+      });
+
+      it('should add delimiter to todos-pending-count', function() {
+        expect($(todosPendingCount).text()).toEqual('1,000');
+      });
+    });
+  });
+
+}).call(this);
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index c937a4706f7..9c7f44c6427 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -3,6 +3,8 @@
 /*= require jquery */
 /*= require jquery.cookie */
 
+/*= require extensions/jquery.js */
+
 (function() {
   var $aside, $icon, $labelsIcon, $page, $toggle, assertSidebarState;
 
@@ -55,12 +57,27 @@
       $labelsIcon.click();
       return assertSidebarState('expanded');
     });
-    return it('should collapse when the icon arrow clicked while it is floating on page', function() {
+    it('should collapse when the icon arrow clicked while it is floating on page', function() {
       $labelsIcon.click();
       assertSidebarState('expanded');
       $toggle.click();
       return assertSidebarState('collapsed');
     });
+
+    it('should broadcast todo:toggle event when add todo clicked', function() {
+      spyOn(jQuery, 'ajax').and.callFake(function() {
+        var d = $.Deferred();
+        var response = fixture.load('todos.json');
+        d.resolve(response);
+        return d.promise();
+      });
+
+      var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
+
+      $('.js-issuable-todo').click();
+
+      expect(todoToggleSpy.calls.count()).toEqual(1);
+    })
   });
 
 }).call(this);