Add specs for multiple assignees issue board cards

spec/javascripts/boards/issue_card_spec.js

@@ -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,76 @@ describe('Issue card component', () => {
     });
   });
 
+  describe('multiple assignees', () => {
+    beforeEach((done) => {
+      component.issue.assignees = [
+        user,
+        new ListUser({
+          id: 2,
+          name: 'user2',
+          username: 'user2',
+          avatar: 'test_image',
+        }),
+        new ListUser({
+          id: 3,
+          name: 'user3',
+          username: 'user3',
+          avatar: 'test_image',
+        }),
+        new ListUser({
+          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 ListUser({
+          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++) {
+          const u = new ListUser({
+            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 +228,7 @@ describe('Issue card component', () => {
       beforeEach((done) => {
         component.issue.addLabel(label1);
 
-        setTimeout(() => {
-          done();
-        }, 0);
+        Vue.nextTick(() => done());
       });
 
       it('does not render list label', () => {

spec/javascripts/boards/issue_spec.js

@@ -27,7 +27,8 @@ describe('Issue model', () => {
         title: 'test',
         color: 'red',
         description: 'testing'
-      }]
+      }],
+      assignees: [],
     });
   });
 
@@ -90,7 +91,8 @@ describe('Issue model', () => {
       iid: 1,
       confidential: false,
       relative_position: 1,
-      labels: []
+      labels: [],
+      assignees: [],
     });
 
     expect(relativePositionIssue.position).toBe(1);

spec/javascripts/boards/list_spec.js

@@ -94,7 +94,8 @@ describe('List model', () => {
       title: 'Testing',
       iid: 1,
       confidential: false,
-      labels: [list.label, listDup.label]
+      labels: [list.label, listDup.label],
+      assignees: [],
     });
 
     list.issues.push(issue);

spec/javascripts/boards/modal_store_spec.js

@@ -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);