Improve logic for stringified approvers, get tests passing.

app/assets/javascripts/merge_request_widget/approvals/components/approvals_body.js.es6

@@ -13,12 +13,24 @@
       approverNamesStringified() {
         const approvers = this.suggestedApprovers;
         if (approvers && approvers.length) {
-          const lastIdx = approvers.length - 1;
+          if (approvers.length === 1) {
+            return approvers[0].name;
+          }
+          const lastIndex = approvers.length - 1;
+          const nextToLastIndex = approvers.length - 2;
           return approvers.reduce((memo, curr, index) => {
-            const userDisplayName = curr.name;
-            const newList = index !== lastIdx ? `${memo} ${userDisplayName}, ` :
-              `${memo} or ${userDisplayName}`;
-            return newList;
+            let suffix;
+
+            if (index === nextToLastIndex) {
+              suffix = ' or ';
+            } else if (index === lastIndex) {
+              suffix = '';
+            } else {
+              suffix = ', ';
+            }
+
+            const nameToAdd = `${curr.name}${suffix}`;
+            return `${memo}${nameToAdd}`;
           }, '');
         }
         return null;

spec/javascripts/approvals/approvals_body_spec.js.es6

@@ -24,7 +24,7 @@
     `);
 
     this.initialData = {
-      suggestedApprovers: ['Approver 1'],
+      suggestedApprovers: [ { name: 'Approver 1' }],
       userCanApprove: false,
       userHasApproved: true,
       approvedBy: [],
@@ -65,7 +65,7 @@
 
         it('should display the correct string for 2 possible approver', function (done) {
           this.approvalsBody.approvalsLeft = 2;
-          this.approvalsBody.suggestedApprovers.push('Approver 2');
+          this.approvalsBody.suggestedApprovers.push({ name: 'Approver 2' });
 
           Vue.nextTick(() => {
             const correctText = '2 more approvals';
@@ -77,14 +77,17 @@
 
       describe('approverNamesStringified', function () {
         // Preceded by: Requires {one more approval} required from _____
-        it('should display the correct string for 1 possible approver name', function () {
+        it('should display the correct string for 1 possible approver name', function (done) {
           const correctText = 'Approver 1';
-          expect(this.approvalsBody.approverNamesStringified).toBe(correctText);
+          Vue.nextTick(() => {
+            expect(this.approvalsBody.approverNamesStringified).toBe(correctText);
+            done();
+          });
         });
 
         it('should display the correct string for 2 possible approver names', function (done) {
           this.approvalsBody.approvalsLeft = 2;
-          this.approvalsBody.suggestedApprovers.push('Approver 2');
+          this.approvalsBody.suggestedApprovers.push({ name: 'Approver 2' });
 
           Vue.nextTick(() => {
             const correctText = 'Approver 1 or Approver 2';
@@ -95,8 +98,8 @@
 
         it('should display the correct string for 3 possible approver names', function (done) {
           this.approvalsBody.approvalsLeft = 3;
-          this.approvalsBody.suggestedApprovers.push('Approver 2');
-          this.approvalsBody.suggestedApprovers.push('Approver 3');
+          this.approvalsBody.suggestedApprovers.push({ name: 'Approver 2' });
+          this.approvalsBody.suggestedApprovers.push({ name: 'Approver 3' });
 
           Vue.nextTick(() => {
             const correctText = 'Approver 1, Approver 2 or Approver 3';