Backport of multiple_assignees_feature [ci skip]

8 files changed, 307 insertions, 245 deletions

diff --git a/spec/javascripts/boards/boards_store_spec.js b/spec/javascripts/boards/boards_store_spec.js
index b55ff2f473a..5ea160b7790 100644
--- a/spec/javascripts/boards/boards_store_spec.js
+++ b/spec/javascripts/boards/boards_store_spec.js
@@ -8,14 +8,14 @@
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 
-require('~/lib/utils/url_utility');
-require('~/boards/models/issue');
-require('~/boards/models/label');
-require('~/boards/models/list');
-require('~/boards/models/user');
-require('~/boards/services/board_service');
-require('~/boards/stores/boards_store');
-require('./mock_data');
+import '~/lib/utils/url_utility';
+import '~/boards/models/issue';
+import '~/boards/models/label';
+import '~/boards/models/list';
+import '~/boards/models/assignee';
+import '~/boards/services/board_service';
+import '~/boards/stores/boards_store';
+import './mock_data';
 
 describe('Store', () => {
   beforeEach(() => {
@@ -212,7 +212,8 @@ describe('Store', () => {
         title: 'Testing',
         iid: 2,
         confidential: false,
-        labels: []
+        labels: [],
+        assignees: [],
       });
       const list = gl.issueBoards.BoardsStore.addList(listObj);
 
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index 1a5e9e9fd07..b1907ac3070 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -1,20 +1,20 @@
-/* global ListUser */
+/* global ListAssignee */
 /* global ListLabel */
 /* global listObj */
 /* global ListIssue */
 
 import Vue from 'vue';
 
-require('~/boards/models/issue');
-require('~/boards/models/label');
-require('~/boards/models/list');
-require('~/boards/models/user');
-require('~/boards/stores/boards_store');
-require('~/boards/components/issue_card_inner');
-require('./mock_data');
+import '~/boards/models/issue';
+import '~/boards/models/label';
+import '~/boards/models/list';
+import '~/boards/models/assignee';
+import '~/boards/stores/boards_store';
+import '~/boards/components/issue_card_inner';
+import './mock_data';
 
 describe('Issue card component', () => {
-  const user = new ListUser({
+  const user = new ListAssignee({
     id: 1,
     name: 'testing 123',
     username: 'test',
@@ -40,6 +40,7 @@ describe('Issue card component', () => {
       iid: 1,
       confidential: false,
       labels: [list.label],
+      assignees: [],
     });
 
     component = new Vue({
@@ -92,12 +93,12 @@ describe('Issue card component', () => {
   it('renders confidential icon', (done) => {
     component.issue.confidential = true;
 
-    setTimeout(() => {
+    Vue.nextTick(() => {
       expect(
         component.$el.querySelector('.confidential-icon'),
       ).not.toBeNull();
       done();
-    }, 0);
+    });
   });
 
   it('renders issue ID with #', () => {
@@ -109,34 +110,32 @@ describe('Issue card component', () => {
   describe('assignee', () => {
     it('does not render assignee', () => {
       expect(
-        component.$el.querySelector('.card-assignee'),
+        component.$el.querySelector('.card-assignee .avatar'),
       ).toBeNull();
     });
 
     describe('exists', () => {
       beforeEach((done) => {
-        component.issue.assignee = user;
+        component.issue.assignees = [user];
 
-        setTimeout(() => {
-          done();
-        }, 0);
+        Vue.nextTick(() => done());
       });
 
       it('renders assignee', () => {
         expect(
-          component.$el.querySelector('.card-assignee'),
+          component.$el.querySelector('.card-assignee .avatar'),
         ).not.toBeNull();
       });
 
       it('sets title', () => {
         expect(
-          component.$el.querySelector('.card-assignee').getAttribute('title'),
+          component.$el.querySelector('.card-assignee a').getAttribute('title'),
         ).toContain(`Assigned to ${user.name}`);
       });
 
       it('sets users path', () => {
         expect(
-          component.$el.querySelector('.card-assignee').getAttribute('href'),
+          component.$el.querySelector('.card-assignee a').getAttribute('href'),
         ).toBe('/test');
       });
 
@@ -148,6 +147,75 @@ describe('Issue card component', () => {
     });
   });
 
+  describe('multiple assignees', () => {
+    beforeEach((done) => {
+      component.issue.assignees = [
+        user,
+        new ListAssignee({
+          id: 2,
+          name: 'user2',
+          username: 'user2',
+          avatar: 'test_image',
+        }),
+        new ListAssignee({
+          id: 3,
+          name: 'user3',
+          username: 'user3',
+          avatar: 'test_image',
+        }),
+        new ListAssignee({
+          id: 4,
+          name: 'user4',
+          username: 'user4',
+          avatar: 'test_image',
+        })];
+
+      Vue.nextTick(() => done());
+    });
+
+    it('renders all four assignees', () => {
+      expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(4);
+    });
+
+    describe('more than four assignees', () => {
+      beforeEach((done) => {
+        component.issue.assignees.push(new ListAssignee({
+          id: 5,
+          name: 'user5',
+          username: 'user5',
+          avatar: 'test_image',
+        }));
+
+        Vue.nextTick(() => done());
+      });
+
+      it('renders more avatar counter', () => {
+        expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('+2');
+      });
+
+      it('renders three assignees', () => {
+        expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(3);
+      });
+
+      it('renders 99+ avatar counter', (done) => {
+        for (let i = 5; i < 104; i += 1) {
+          const u = new ListAssignee({
+            id: i,
+            name: 'name',
+            username: 'username',
+            avatar: 'test_image',
+          });
+          component.issue.assignees.push(u);
+        }
+
+        Vue.nextTick(() => {
+          expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('99+');
+          done();
+        });
+      });
+    });
+  });
+
   describe('labels', () => {
     it('does not render any', () => {
       expect(
@@ -159,9 +227,7 @@ describe('Issue card component', () => {
       beforeEach((done) => {
         component.issue.addLabel(label1);
 
-        setTimeout(() => {
-          done();
-        }, 0);
+        Vue.nextTick(() => done());
       });
 
       it('does not render list label', () => {
diff --git a/spec/javascripts/boards/issue_spec.js b/spec/javascripts/boards/issue_spec.js
index c96dfe94a4a..cd1497bc5e6 100644
--- a/spec/javascripts/boards/issue_spec.js
+++ b/spec/javascripts/boards/issue_spec.js
@@ -2,14 +2,15 @@
 /* global BoardService */
 /* global ListIssue */
 
-require('~/lib/utils/url_utility');
-require('~/boards/models/issue');
-require('~/boards/models/label');
-require('~/boards/models/list');
-require('~/boards/models/user');
-require('~/boards/services/board_service');
-require('~/boards/stores/boards_store');
-require('./mock_data');
+import Vue from 'vue';
+import '~/lib/utils/url_utility';
+import '~/boards/models/issue';
+import '~/boards/models/label';
+import '~/boards/models/list';
+import '~/boards/models/assignee';
+import '~/boards/services/board_service';
+import '~/boards/stores/boards_store';
+import './mock_data';
 
 describe('Issue model', () => {
   let issue;
@@ -27,7 +28,13 @@ describe('Issue model', () => {
         title: 'test',
         color: 'red',
         description: 'testing'
-      }]
+      }],
+      assignees: [{
+        id: 1,
+        name: 'name',
+        username: 'username',
+        avatar_url: 'http://avatar_url',
+      }],
     });
   });
 
@@ -80,6 +87,33 @@ describe('Issue model', () => {
     expect(issue.labels.length).toBe(0);
   });
 
+  it('adds assignee', () => {
+    issue.addAssignee({
+      id: 2,
+      name: 'Bruce Wayne',
+      username: 'batman',
+      avatar_url: 'http://batman',
+    });
+
+    expect(issue.assignees.length).toBe(2);
+  });
+
+  it('finds assignee', () => {
+    const assignee = issue.findAssignee(issue.assignees[0]);
+    expect(assignee).toBeDefined();
+  });
+
+  it('removes assignee', () => {
+    const assignee = issue.findAssignee(issue.assignees[0]);
+    issue.removeAssignee(assignee);
+    expect(issue.assignees.length).toBe(0);
+  });
+
+  it('removes all assignees', () => {
+    issue.removeAllAssignees();
+    expect(issue.assignees.length).toBe(0);
+  });
+
   it('sets position to infinity if no position is stored', () => {
     expect(issue.position).toBe(Infinity);
   });
@@ -90,9 +124,31 @@ describe('Issue model', () => {
       iid: 1,
       confidential: false,
       relative_position: 1,
-      labels: []
+      labels: [],
+      assignees: [],
     });
 
     expect(relativePositionIssue.position).toBe(1);
   });
+
+  describe('update', () => {
+    it('passes assignee ids when there are assignees', (done) => {
+      spyOn(Vue.http, 'patch').and.callFake((url, data) => {
+        expect(data.issue.assignee_ids).toEqual([1]);
+        done();
+      });
+
+      issue.update('url');
+    });
+
+    it('passes assignee ids of [0] when there are no assignees', (done) => {
+      spyOn(Vue.http, 'patch').and.callFake((url, data) => {
+        expect(data.issue.assignee_ids).toEqual([0]);
+        done();
+      });
+
+      issue.removeAllAssignees();
+      issue.update('url');
+    });
+  });
 });
diff --git a/spec/javascripts/boards/list_spec.js b/spec/javascripts/boards/list_spec.js
index 24a2da9f6b6..88a0e6855f4 100644
--- a/spec/javascripts/boards/list_spec.js
+++ b/spec/javascripts/boards/list_spec.js
@@ -8,14 +8,14 @@
 
 import Vue from 'vue';
 
-require('~/lib/utils/url_utility');
-require('~/boards/models/issue');
-require('~/boards/models/label');
-require('~/boards/models/list');
-require('~/boards/models/user');
-require('~/boards/services/board_service');
-require('~/boards/stores/boards_store');
-require('./mock_data');
+import '~/lib/utils/url_utility';
+import '~/boards/models/issue';
+import '~/boards/models/label';
+import '~/boards/models/list';
+import '~/boards/models/assignee';
+import '~/boards/services/board_service';
+import '~/boards/stores/boards_store';
+import './mock_data';
 
 describe('List model', () => {
   let list;
@@ -94,7 +94,8 @@ describe('List model', () => {
       title: 'Testing',
       iid: _.random(10000),
       confidential: false,
-      labels: [list.label, listDup.label]
+      labels: [list.label, listDup.label],
+      assignees: [],
     });
 
     list.issues.push(issue);
diff --git a/spec/javascripts/boards/mock_data.js b/spec/javascripts/boards/mock_data.js
index a4fa694eebe..a64c3964ee3 100644
--- a/spec/javascripts/boards/mock_data.js
+++ b/spec/javascripts/boards/mock_data.js
@@ -33,7 +33,8 @@ const BoardsMockData = {
         title: 'Testing',
         iid: 1,
         confidential: false,
-        labels: []
+        labels: [],
+        assignees: [],
       }],
       size: 1
     }
diff --git a/spec/javascripts/boards/modal_store_spec.js b/spec/javascripts/boards/modal_store_spec.js
index 80db816aff8..32e6d04df9f 100644
--- a/spec/javascripts/boards/modal_store_spec.js
+++ b/spec/javascripts/boards/modal_store_spec.js
@@ -1,10 +1,10 @@
 /* global ListIssue */
 
-require('~/boards/models/issue');
-require('~/boards/models/label');
-require('~/boards/models/list');
-require('~/boards/models/user');
-require('~/boards/stores/modal_store');
+import '~/boards/models/issue';
+import '~/boards/models/label';
+import '~/boards/models/list';
+import '~/boards/models/assignee';
+import '~/boards/stores/modal_store';
 
 describe('Modal store', () => {
   let issue;
@@ -21,12 +21,14 @@ describe('Modal store', () => {
       iid: 1,
       confidential: false,
       labels: [],
+      assignees: [],
     });
     issue2 = new ListIssue({
       title: 'Testing',
       iid: 2,
       confidential: false,
       labels: [],
+      assignees: [],
     });
     Store.store.issues.push(issue);
     Store.store.issues.push(issue2);
diff --git a/spec/javascripts/issuable_time_tracker_spec.js b/spec/javascripts/issuable_time_tracker_spec.js
index 0a830f25e29..8ff93c4f918 100644
--- a/spec/javascripts/issuable_time_tracker_spec.js
+++ b/spec/javascripts/issuable_time_tracker_spec.js
@@ -2,7 +2,7 @@
 
 import Vue from 'vue';
 
-require('~/issuable/time_tracking/components/time_tracker');
+import timeTracker from '~/sidebar/components/time_tracking/time_tracker';
 
 function initTimeTrackingComponent(opts) {
   setFixtures(`
@@ -16,187 +16,185 @@ function initTimeTrackingComponent(opts) {
     time_spent: opts.timeSpent,
     human_time_estimate: opts.timeEstimateHumanReadable,
     human_time_spent: opts.timeSpentHumanReadable,
-    docsUrl: '/help/workflow/time_tracking.md',
+    rootPath: '/',
   };
 
-  const TimeTrackingComponent = Vue.component('issuable-time-tracker');
+  const TimeTrackingComponent = Vue.extend(timeTracker);
   this.timeTracker = new TimeTrackingComponent({
     el: '#mock-container',
     propsData: this.initialData,
   });
 }
 
-((gl) => {
-  describe('Issuable Time Tracker', function() {
-    describe('Initialization', function() {
-      beforeEach(function() {
-        initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
-      });
+describe('Issuable Time Tracker', function() {
+  describe('Initialization', function() {
+    beforeEach(function() {
+      initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
+    });
 
-      it('should return something defined', function() {
-        expect(this.timeTracker).toBeDefined();
-      });
+    it('should return something defined', function() {
+      expect(this.timeTracker).toBeDefined();
+    });
 
-      it ('should correctly set timeEstimate', function(done) {
-        Vue.nextTick(() => {
-          expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate);
-          done();
-        });
+    it ('should correctly set timeEstimate', function(done) {
+      Vue.nextTick(() => {
+        expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate);
+        done();
       });
-      it ('should correctly set time_spent', function(done) {
-        Vue.nextTick(() => {
-          expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent);
-          done();
-        });
+    });
+    it ('should correctly set time_spent', function(done) {
+      Vue.nextTick(() => {
+        expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent);
+        done();
       });
     });
+  });
 
-    describe('Content Display', function() {
-      describe('Panes', function() {
-        describe('Comparison pane', function() {
-          beforeEach(function() {
-            initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' });
+  describe('Content Display', function() {
+    describe('Panes', function() {
+      describe('Comparison pane', function() {
+        beforeEach(function() {
+          initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' });
+        });
+
+        it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) {
+          Vue.nextTick(() => {
+            const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane');
+            expect(this.timeTracker.showComparisonState).toBe(true);
+            done();
           });
+        });
 
-          it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) {
+        describe('Remaining meter', function() {
+          it('should display the remaining meter with the correct width', function(done) {
             Vue.nextTick(() => {
-              const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane');
-              expect(this.timeTracker.showComparisonState).toBe(true);
+              const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width;
+              const correctWidth = '5%';
+
+              expect(meterWidth).toBe(correctWidth);
               done();
-            });
+            })
           });
 
-          describe('Remaining meter', function() {
-            it('should display the remaining meter with the correct width', function(done) {
-              Vue.nextTick(() => {
-                const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width;
-                const correctWidth = '5%';
-
-                expect(meterWidth).toBe(correctWidth);
-                done();
-              })
-            });
-
-            it('should display the remaining meter with the correct background color when within estimate', function(done) {
-              Vue.nextTick(() => {
-                const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .within_estimate .meter-fill');
-                expect(styledMeter.length).toBe(1);
-                done()
-              });
+          it('should display the remaining meter with the correct background color when within estimate', function(done) {
+            Vue.nextTick(() => {
+              const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .within_estimate .meter-fill');
+              expect(styledMeter.length).toBe(1);
+              done()
             });
+          });
 
-            it('should display the remaining meter with the correct background color when over estimate', function(done) {
-              this.timeTracker.time_estimate = 100000;
-              this.timeTracker.time_spent = 20000000;
-              Vue.nextTick(() => {
-                const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill');
-                expect(styledMeter.length).toBe(1);
-                done();
-              });
+          it('should display the remaining meter with the correct background color when over estimate', function(done) {
+            this.timeTracker.time_estimate = 100000;
+            this.timeTracker.time_spent = 20000000;
+            Vue.nextTick(() => {
+              const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill');
+              expect(styledMeter.length).toBe(1);
+              done();
             });
           });
         });
+      });
 
-        describe("Estimate only pane", function() {
-          beforeEach(function() {
-            initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '' });
-          });
+      describe("Estimate only pane", function() {
+        beforeEach(function() {
+          initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '' });
+        });
 
-          it('should display the human readable version of time estimated', function(done) {
-            Vue.nextTick(() => {
-              const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText;
-              const correctText = 'Estimated: 2h 46m';
+        it('should display the human readable version of time estimated', function(done) {
+          Vue.nextTick(() => {
+            const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText;
+            const correctText = 'Estimated: 2h 46m';
 
-              expect(estimateText).toBe(correctText);
-              done();
-            });
+            expect(estimateText).toBe(correctText);
+            done();
           });
         });
+      });
 
-        describe('Spent only pane', function() {
-          beforeEach(function() {
-            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
-          });
+      describe('Spent only pane', function() {
+        beforeEach(function() {
+          initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
+        });
 
-          it('should display the human readable version of time spent', function(done) {
-            Vue.nextTick(() => {
-              const spentText = this.timeTracker.$el.querySelector('.time-tracking-spend-only-pane').innerText;
-              const correctText = 'Spent: 1h 23m';
+        it('should display the human readable version of time spent', function(done) {
+          Vue.nextTick(() => {
+            const spentText = this.timeTracker.$el.querySelector('.time-tracking-spend-only-pane').innerText;
+            const correctText = 'Spent: 1h 23m';
 
-              expect(spentText).toBe(correctText);
-              done();
-            });
+            expect(spentText).toBe(correctText);
+            done();
           });
         });
+      });
 
-        describe('No time tracking pane', function() {
-          beforeEach(function() {
-            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0, timeEstimateHumanReadable: 0, timeSpentHumanReadable: 0 });
-          });
+      describe('No time tracking pane', function() {
+        beforeEach(function() {
+          initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' });
+        });
 
-          it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', function(done) {
-            Vue.nextTick(() => {
-              const $noTrackingPane = this.timeTracker.$el.querySelector('.time-tracking-no-tracking-pane');
-              const noTrackingText =$noTrackingPane.innerText;
-              const correctText = 'No estimate or time spent';
+        it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', function(done) {
+          Vue.nextTick(() => {
+            const $noTrackingPane = this.timeTracker.$el.querySelector('.time-tracking-no-tracking-pane');
+            const noTrackingText =$noTrackingPane.innerText;
+            const correctText = 'No estimate or time spent';
 
-              expect(this.timeTracker.showNoTimeTrackingState).toBe(true);
-              expect($noTrackingPane).toBeVisible();
-              expect(noTrackingText).toBe(correctText);
-              done();
-            });
+            expect(this.timeTracker.showNoTimeTrackingState).toBe(true);
+            expect($noTrackingPane).toBeVisible();
+            expect(noTrackingText).toBe(correctText);
+            done();
           });
         });
+      });
 
-        describe("Help pane", function() {
-          beforeEach(function() {
-            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 });
-          });
+      describe("Help pane", function() {
+        beforeEach(function() {
+          initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 });
+        });
 
-          it('should not show the "Help" pane by default', function(done) {
-            Vue.nextTick(() => {
-              const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
+        it('should not show the "Help" pane by default', function(done) {
+          Vue.nextTick(() => {
+            const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
 
-              expect(this.timeTracker.showHelpState).toBe(false);
-              expect($helpPane).toBeNull();
-              done();
-            });
+            expect(this.timeTracker.showHelpState).toBe(false);
+            expect($helpPane).toBeNull();
+            done();
           });
+        });
 
-          it('should show the "Help" pane when help button is clicked', function(done) {
-            Vue.nextTick(() => {
-              $(this.timeTracker.$el).find('.help-button').click();
+        it('should show the "Help" pane when help button is clicked', function(done) {
+          Vue.nextTick(() => {
+            $(this.timeTracker.$el).find('.help-button').click();
 
-              setTimeout(() => {
-                const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
-                expect(this.timeTracker.showHelpState).toBe(true);
-                expect($helpPane).toBeVisible();
-                done();
-              }, 10);
-            });
+            setTimeout(() => {
+              const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
+              expect(this.timeTracker.showHelpState).toBe(true);
+              expect($helpPane).toBeVisible();
+              done();
+            }, 10);
           });
+        });
 
-          it('should not show the "Help" pane when help button is clicked and then closed', function(done) {
-            Vue.nextTick(() => {
-              $(this.timeTracker.$el).find('.help-button').click();
+        it('should not show the "Help" pane when help button is clicked and then closed', function(done) {
+          Vue.nextTick(() => {
+            $(this.timeTracker.$el).find('.help-button').click();
 
-              setTimeout(() => {
+            setTimeout(() => {
 
-                $(this.timeTracker.$el).find('.close-help-button').click();
+              $(this.timeTracker.$el).find('.close-help-button').click();
 
-                setTimeout(() => {
-                  const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
+              setTimeout(() => {
+                const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
 
-                  expect(this.timeTracker.showHelpState).toBe(false);
-                  expect($helpPane).toBeNull();
+                expect(this.timeTracker.showHelpState).toBe(false);
+                expect($helpPane).toBeNull();
 
-                  done();
-                }, 1000);
+                done();
               }, 1000);
-            });
+            }, 1000);
           });
         });
       });
     });
   });
-})(window.gl || (window.gl = {}));
+});
diff --git a/spec/javascripts/subbable_resource_spec.js b/spec/javascripts/subbable_resource_spec.js
deleted file mode 100644
index 454386697f5..00000000000
--- a/spec/javascripts/subbable_resource_spec.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-disable max-len, arrow-parens, comma-dangle */
-
-require('~/subbable_resource');
-
-/*
-* Test that each rest verb calls the publish and subscribe function and passes the correct value back
-*
-*
-* */
-((global) => {
-  describe('Subbable Resource', function () {
-    describe('PubSub', function () {
-      beforeEach(function () {
-        this.MockResource = new global.SubbableResource('https://example.com');
-      });
-      it('should successfully add a single subscriber', function () {
-        const callback = () => {};
-        this.MockResource.subscribe(callback);
-
-        expect(this.MockResource.subscribers.length).toBe(1);
-        expect(this.MockResource.subscribers[0]).toBe(callback);
-      });
-
-      it('should successfully add multiple subscribers', function () {
-        const callbackOne = () => {};
-        const callbackTwo = () => {};
-        const callbackThree = () => {};
-
-        this.MockResource.subscribe(callbackOne);
-        this.MockResource.subscribe(callbackTwo);
-        this.MockResource.subscribe(callbackThree);
-
-        expect(this.MockResource.subscribers.length).toBe(3);
-      });
-
-      it('should successfully publish an update to a single subscriber', function () {
-        const state = { myprop: 1 };
-
-        const callbacks = {
-          one: (data) => expect(data.myprop).toBe(2),
-          two: (data) => expect(data.myprop).toBe(2),
-          three: (data) => expect(data.myprop).toBe(2)
-        };
-
-        const spyOne = spyOn(callbacks, 'one');
-        const spyTwo = spyOn(callbacks, 'two');
-        const spyThree = spyOn(callbacks, 'three');
-
-        this.MockResource.subscribe(callbacks.one);
-        this.MockResource.subscribe(callbacks.two);
-        this.MockResource.subscribe(callbacks.three);
-
-        state.myprop += 1;
-
-        this.MockResource.publish(state);
-
-        expect(spyOne).toHaveBeenCalled();
-        expect(spyTwo).toHaveBeenCalled();
-        expect(spyThree).toHaveBeenCalled();
-      });
-    });
-  });
-})(window.gl || (window.gl = {}));