Fix bad connector - verify if both new and resolved issues are present before adding the connector.

app/assets/javascripts/vue_merge_request_widget/ee/components/mr_widget_code_quality.vue

@@ -50,27 +50,40 @@ export default {
 
     codeText() {
       const { newIssues, resolvedIssues } = this.mr.codeclimateMetrics;
-      let newIssuesText = '';
-      let resolvedIssuesText = '';
-      let text = '';
+      let newIssuesText;
+      let resolvedIssuesText;
+      let text = [];
 
       if (this.hasNoneIssues) {
-        text = 'No changes to code quality so far.';
+        text.push('No changes to code quality so far.');
       } else if (this.hasIssues) {
         if (newIssues.length) {
-          newIssuesText = `degraded on ${newIssues.length} ${this.pointsText(newIssues)}`;
+          newIssuesText = ` degraded on ${newIssues.length} ${this.pointsText(newIssues)}`;
         }
 
         if (resolvedIssues.length) {
-          resolvedIssuesText = `improved on ${resolvedIssues.length} ${this.pointsText(resolvedIssues)}`;
+          resolvedIssuesText = ` improved on ${resolvedIssues.length} ${this.pointsText(resolvedIssues)}`;
         }
 
-        const connector = this.hasIssues ? 'and' : '';
+        const connector = (newIssues.length > 0 && resolvedIssues.length > 0) ? ' and' : null;
 
-        text = `Code quality ${resolvedIssuesText} ${connector} ${newIssuesText}.`;
+        text = ['Code quality'];
+        if (resolvedIssuesText) {
+          text.push(resolvedIssuesText);
         }
 
-      return text;
+        if (connector) {
+          text.push(connector);
+        }
+
+        if (newIssuesText) {
+          text.push(newIssuesText);
+        }
+
+        text.push('.');
+      }
+
+      return text.join('');
     },
   },
 

spec/javascripts/vue_mr_widget/components/mr_widget_code_quality_spec.js

@@ -72,6 +72,34 @@ describe('Merge Request Code Quality', () => {
       }, 0);
     });
 
+    describe('text connector', () => {
+      it('should only render information about fixed issues', (done) => {
+        setTimeout(() => {
+          vm.mr.codeclimateMetrics.newIssues = [];
+
+          Vue.nextTick(() => {
+            expect(
+              vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
+            ).toEqual('Code quality improved on 1 point.');
+            done();
+          });
+        }, 0);
+      });
+
+      it('should only render information about added issues', (done) => {
+        setTimeout(() => {
+          vm.mr.codeclimateMetrics.resolvedIssues = [];
+
+          Vue.nextTick(() => {
+            expect(
+              vm.$el.querySelector('span:nth-child(2)').textContent.trim(),
+            ).toEqual('Code quality degraded on 1 point.');
+            done();
+          });
+        }, 0);
+      });
+    });
+
     describe('toggleCollapsed', () => {
       it('toggles issues', (done) => {
         setTimeout(() => {