Task collapsing and test updates

src/app/board/column/column.component.html

@@ -11,7 +11,7 @@
     {{ columnData.name }}
 
     <span class="badge" title="Tasks in Column">
-        {{ columnData.ownTask && columnData.ownTask.length }}
+        {{ columnData.ownTask && columnData.ownTask.length || 0 }}
     </span>
 
     <span class="icon icon-angle-double-up"
@@ -33,7 +33,8 @@
         [task]="task" [boards]="boards"
         [add-task]="getShowModalFunction()"
         [edit-task]="getShowModalFunction(task.id)"
-        [remove-task]="getRemoveTaskFunction(task.id)"></tb-task>
+        [remove-task]="getRemoveTaskFunction(task.id)"
+        [collapse]="collapseTasks"></tb-task>
 </div>
 
 <tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>

src/app/board/task/task.component.html

@@ -4,15 +4,17 @@
     <h4>
         <span class="icon"
             [style.color]="getTextColor(taskData.color)"
-            [ngClass]="{ 'icon-minus-squared-alt': !collapseTasks,
+            [ngClass]="{ 'icon-minus-squared-alt': !isCollapsed,
-            'icon-plus-squared-alt': collapseTasks }"
+            'icon-plus-squared-alt': isCollapsed }"
-            title="Collapse Task"></span>
+            title="{{ isCollapsed ? 'Expand' : 'Collapse' }} Task"
+            (click)="isCollapsed = !isCollapsed"></span>
         {{ taskData.title }}
         <span *ngIf="taskData.points > 0" class="badge right" title="Points">
             {{ taskData.points }}</span>
     </h4>
 
-    <div class="description" [innerHTML]="getTaskDescription()"></div>
+    <div class="description" *ngIf="!isCollapsed"
+        [innerHTML]="getTaskDescription()"></div>
 
     <div class="stats">
         <span *ngIf="userOptions.show_assignee">

src/app/board/task/task.component.ts

@@ -39,6 +39,7 @@ export class TaskDisplay implements OnInit {
     @Input('add-task') addTask: Function;
     @Input('edit-task') editTask: Function;
     @Input('remove-task') removeTask: Function;
+    @Input('collapse') isCollapsed: boolean;
 
     @Input('boards')
     set boards(boards: Array<Board>) {
@@ -51,6 +52,8 @@ export class TaskDisplay implements OnInit {
                 private boardService: BoardService,
                 private modal: ModalService,
                 private notes: NotificationsService) {
+        this.contextMenuItems = [];
+
         auth.userChanged.subscribe(() => {
             this.userOptions = auth.userOptions;
         });
@@ -117,7 +120,6 @@ export class TaskDisplay implements OnInit {
         this.boardsList.forEach((board: Board) => {
             if (board.name !== this.activeBoard.name) {
                 menuText += '<option value="board.id">' + board.name + '</option>';
-
             }
         });
 

test/app/board/board.component.spec.js

@@ -15,7 +15,7 @@ describe('BoardDisplay', () => {
                                  AuthServiceMock, BoardServiceMock);
     });
 
-    it('sets the title when contstructed', () => {
+    it('sets the title when constructed', () => {
         expect(title.getTitle()).to.equal('TaskBoard - Kanban App');
     });
 

test/app/board/column/column.component.spec.js

@@ -0,0 +1,23 @@
+/* global expect ElementRefMock AuthServiceMock NotificationsServiceMock StringsServiceMock BoardServiceMock ModalServiceMock */
+var path = '../../../../build/board/column/',
+    ColumnDisplay = require(path + 'column.component.js').ColumnDisplay;
+
+describe('ColumnDisplay', () => {
+    var column,
+        modalService;
+
+    beforeEach(() => {
+        modalService = new ModalServiceMock();
+
+        column = new ColumnDisplay(ElementRefMock, AuthServiceMock,
+                                   new NotificationsServiceMock(),
+                                   modalService, StringsServiceMock,
+                                   BoardServiceMock);
+    });
+
+    it('has a context menu', () => {
+        expect(column.contextMenuItems).to.be.an('array');
+        expect(column.contextMenuItems.length).to.equal(1);
+    });
+});
+

test/app/board/task/task.component.spec.js

@@ -0,0 +1,23 @@
+/* global expect AuthServiceMock SanitizerMock NotificationsServiceMock BoardServiceMock ModalServiceMock */
+var path = '../../../../build/board/task/',
+    TaskDisplay = require(path + 'task.component.js').TaskDisplay;
+
+describe('TaskDisplay', () => {
+    var task,
+        modalService;
+
+    beforeEach(() => {
+        modalService = new ModalServiceMock();
+
+        task = new TaskDisplay(AuthServiceMock, SanitizerMock,
+                               BoardServiceMock, modalService,
+                               new NotificationsServiceMock());
+    });
+
+    it('has a context menu', () => {
+        expect(task.contextMenuItems).to.be.an('array');
+        expect(task.contextMenuItems.length).to.equal(0);
+    });
+});
+
+

test/app/mocks.js

@@ -420,7 +420,7 @@ global.BoardServiceMock = {
             data: [ '', [] ]
         });
     },
-    activeBoardChanged: RxJs.Observable.of({})
+    activeBoardChanged: RxJs.Observable.of({ columns: [] })
 };
 
 global.HttpMock = {