2 files changed, 231 insertions, 66 deletions

diff --git a/spec/javascripts/boards/components/board_spec.js b/spec/javascripts/boards/components/board_spec.js
index 683783334c6..ccb657e0df1 100644
--- a/spec/javascripts/boards/components/board_spec.js
+++ b/spec/javascripts/boards/components/board_spec.js
@@ -5,21 +5,16 @@ import { mockBoardService } from '../mock_data';
 
 describe('Board component', () => {
   let vm;
-  let el;
 
-  beforeEach(done => {
-    loadFixtures('boards/show.html');
-
-    el = document.createElement('div');
+  const createComponent = ({ gon = {}, collapsed = false, listType = 'backlog' } = {}) => {
+    if (Object.prototype.hasOwnProperty.call(gon, 'current_user_id')) {
+      window.gon = gon;
+    } else {
+      window.gon = {};
+    }
+    const el = document.createElement('div');
     document.body.appendChild(el);
 
-    gl.boardService = mockBoardService({
-      boardsEndpoint: '/',
-      listsEndpoint: '/',
-      bulkUpdatePath: '/',
-      boardId: 1,
-    });
-
     vm = new Board({
       propsData: {
         boardId: '1',
@@ -30,94 +25,244 @@ describe('Board component', () => {
           id: 1,
           position: 0,
           title: 'test',
-          list_type: 'backlog',
+          list_type: listType,
+          collapsed,
         }),
       },
     }).$mount(el);
+  };
+
+  const setUpTests = (done, opts = {}) => {
+    loadFixtures('boards/show.html');
+
+    gl.boardService = mockBoardService({
+      boardsEndpoint: '/',
+      listsEndpoint: '/',
+      bulkUpdatePath: '/',
+      boardId: 1,
+    });
+
+    createComponent(opts);
 
     Vue.nextTick(done);
-  });
+  };
+
+  const cleanUpTests = spy => {
+    if (spy) {
+      spy.calls.reset();
+    }
 
-  afterEach(() => {
     vm.$destroy();
 
     // remove the component from the DOM
     document.querySelector('.board').remove();
 
-    localStorage.removeItem(`boards.${vm.boardId}.${vm.list.type}.expanded`);
-  });
+    localStorage.removeItem(`${vm.uniqueKey}.expanded`);
+  };
 
-  it('board is expandable when list type is backlog', () => {
-    expect(vm.$el.classList.contains('is-expandable')).toBe(true);
-  });
+  describe('List', () => {
+    beforeEach(() => {
+      gl.boardService = mockBoardService({
+        boardsEndpoint: '/',
+        listsEndpoint: '/',
+        bulkUpdatePath: '/',
+        boardId: 1,
+      });
+    });
+
+    it('board is expandable when list type is closed', () => {
+      expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
+    });
+
+    it('board is expandable when list type is label', () => {
+      expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
+    });
 
-  it('board is expandable when list type is closed', () => {
-    expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
+    it('board is not expandable when list type is blank', () => {
+      expect(new List({ id: 1, list_type: 'blank' }).isExpandable).toBe(false);
+    });
   });
 
-  it('board is expandable when list type is label', () => {
-    expect(new List({ id: 1, list_type: 'closed' }).isExpandable).toBe(true);
+  describe('when clicking the header', () => {
+    beforeEach(done => {
+      setUpTests(done);
+    });
+
+    afterEach(() => {
+      cleanUpTests();
+    });
+
+    it('does not collapse', done => {
+      vm.list.isExpanded = true;
+      vm.$el.querySelector('.board-header').click();
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 
-  it('board is not expandable when list type is blank', () => {
-    expect(new List({ id: 1, list_type: 'blank' }).isExpandable).toBe(false);
+  describe('when clicking the collapse icon', () => {
+    beforeEach(done => {
+      setUpTests(done);
+    });
+
+    afterEach(() => {
+      cleanUpTests();
+    });
+
+    it('collapses', done => {
+      Vue.nextTick()
+        .then(() => {
+          vm.$el.querySelector('.board-title-caret').click();
+        })
+        .then(() => {
+          expect(vm.$el.classList.contains('is-collapsed')).toBe(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 
-  it('does not collapse when clicking header', done => {
-    vm.list.isExpanded = true;
-    vm.$el.querySelector('.board-header').click();
+  describe('when clicking the expand icon', () => {
+    beforeEach(done => {
+      setUpTests(done);
+    });
 
-    Vue.nextTick(() => {
-      expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
+    afterEach(() => {
+      cleanUpTests();
+    });
+
+    it('expands', done => {
+      vm.list.isExpanded = false;
 
-      done();
+      Vue.nextTick()
+        .then(() => {
+          vm.$el.querySelector('.board-title-caret').click();
+        })
+        .then(() => {
+          expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
-  it('collapses when clicking the collapse icon', done => {
-    vm.list.isExpanded = true;
+  describe('when collapsed is false', () => {
+    beforeEach(done => {
+      setUpTests(done);
+    });
 
-    Vue.nextTick()
-      .then(() => {
-        vm.$el.querySelector('.board-title-caret').click();
-      })
-      .then(() => {
-        expect(vm.$el.classList.contains('is-collapsed')).toBe(true);
-        done();
-      })
-      .catch(done.fail);
+    afterEach(() => {
+      cleanUpTests();
+    });
+
+    it('is expanded when collapsed is false', () => {
+      expect(vm.list.isExpanded).toBe(true);
+      expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
+    });
   });
 
-  it('expands when clicking the expand icon', done => {
-    vm.list.isExpanded = false;
+  describe('when list type is blank', () => {
+    beforeEach(done => {
+      setUpTests(done, { listType: 'blank' });
+    });
+
+    afterEach(() => {
+      cleanUpTests();
+    });
+
+    it('does not render add issue button when list type is blank', done => {
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.issue-count-badge-add-button')).toBeNull();
 
-    Vue.nextTick()
-      .then(() => {
-        vm.$el.querySelector('.board-title-caret').click();
-      })
-      .then(() => {
-        expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
         done();
-      })
-      .catch(done.fail);
+      });
+    });
   });
 
-  it('is expanded when created', () => {
-    expect(vm.list.isExpanded).toBe(true);
-    expect(vm.$el.classList.contains('is-collapsed')).toBe(false);
+  describe('when list type is backlog', () => {
+    beforeEach(done => {
+      setUpTests(done);
+    });
+
+    afterEach(() => {
+      cleanUpTests();
+    });
+
+    it('board is expandable', () => {
+      expect(vm.$el.classList.contains('is-expandable')).toBe(true);
+    });
   });
 
-  it('does render add issue button', () => {
-    expect(vm.$el.querySelector('.issue-count-badge-add-button')).not.toBeNull();
+  describe('when logged in', () => {
+    let spy;
+
+    beforeEach(done => {
+      spy = spyOn(List.prototype, 'update');
+      setUpTests(done, { gon: { current_user_id: 1 } });
+    });
+
+    afterEach(() => {
+      cleanUpTests(spy);
+    });
+
+    it('calls list update', done => {
+      Vue.nextTick()
+        .then(() => {
+          vm.$el.querySelector('.board-title-caret').click();
+        })
+        .then(() => {
+          expect(vm.list.update).toHaveBeenCalledTimes(1);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 
-  it('does not render add issue button when list type is blank', done => {
-    vm.list.type = 'blank';
+  describe('when logged out', () => {
+    let spy;
+    beforeEach(done => {
+      spy = spyOn(List.prototype, 'update');
+      setUpTests(done, { collapsed: false });
+    });
+
+    afterEach(() => {
+      cleanUpTests(spy);
+    });
 
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.issue-count-badge-add-button')).toBeNull();
+    // can only be one or the other cant toggle window.gon.current_user_id states.
+    it('clicking on the caret does not call list update', done => {
+      Vue.nextTick()
+        .then(() => {
+          vm.$el.querySelector('.board-title-caret').click();
+        })
+        .then(() => {
+          expect(vm.list.update).toHaveBeenCalledTimes(0);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('sets expanded to be the opposite of its value when toggleExpanded is called', done => {
+      const expanded = true;
+      vm.list.isExpanded = expanded;
+      vm.toggleExpanded();
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.list.isExpanded).toBe(!expanded);
+          expect(localStorage.getItem(`${vm.uniqueKey}.expanded`)).toBe(String(!expanded));
+        })
+        .then(done)
+        .catch(done.fail);
+    });
 
-      done();
+    it('does render add issue button', () => {
+      expect(vm.$el.querySelector('.issue-count-badge-add-button')).not.toBeNull();
     });
   });
 });
diff --git a/spec/javascripts/boards/list_spec.js b/spec/javascripts/boards/list_spec.js
index 15c9ff6dfb4..d01c37437ad 100644
--- a/spec/javascripts/boards/list_spec.js
+++ b/spec/javascripts/boards/list_spec.js
@@ -1,5 +1,7 @@
 /* global List */
+/* global ListAssignee */
 /* global ListIssue */
+/* global ListLabel */
 
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
@@ -174,18 +176,29 @@ describe('List model', () => {
         Promise.resolve({
           data: {
             id: 42,
+            subscribed: false,
+            assignable_labels_endpoint: '/issue/42/labels',
+            toggle_subscription_endpoint: '/issue/42/subscriptions',
+            issue_sidebar_endpoint: '/issue/42/sidebar_info',
           },
         }),
       );
     });
 
     it('adds new issue to top of list', done => {
+      const user = new ListAssignee({
+        id: 1,
+        name: 'testing 123',
+        username: 'test',
+        avatar: 'test_image',
+      });
+
       list.issues.push(
         new ListIssue({
           title: 'Testing',
           id: _.random(10000),
           confidential: false,
-          labels: [list.label],
+          labels: [new ListLabel(list.label)],
           assignees: [],
         }),
       );
@@ -193,8 +206,9 @@ describe('List model', () => {
         title: 'new issue',
         id: _.random(10000),
         confidential: false,
-        labels: [list.label],
-        assignees: [],
+        labels: [new ListLabel(list.label)],
+        assignees: [user],
+        subscribed: false,
       });
 
       list
@@ -202,6 +216,12 @@ describe('List model', () => {
         .then(() => {
           expect(list.issues.length).toBe(2);
           expect(list.issues[0]).toBe(dummyIssue);
+          expect(list.issues[0].subscribed).toBe(false);
+          expect(list.issues[0].assignableLabelsEndpoint).toBe('/issue/42/labels');
+          expect(list.issues[0].toggleSubscriptionEndpoint).toBe('/issue/42/subscriptions');
+          expect(list.issues[0].sidebarInfoEndpoint).toBe('/issue/42/sidebar_info');
+          expect(list.issues[0].labels).toBe(dummyIssue.labels);
+          expect(list.issues[0].assignees).toBe(dummyIssue.assignees);
         })
         .then(done)
         .catch(done.fail);