1 files changed, 40 insertions, 0 deletions
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 032fb90ca3c..5997c93105e 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -62,6 +62,38 @@ describe('MRWidgetPipeline', () => {
         expect(vm.hasCIError).toEqual(true);
       });
     });
+
+    describe('coverageDeltaClass', () => {
+      it('should return no class if there is no coverage change', () => {
+        vm = mountComponent(Component, {
+          pipeline: mockData.pipeline,
+          pipelineCoverageDelta: '0',
+          troubleshootingDocsPath: 'help',
+        });
+
+        expect(vm.coverageDeltaClass).toEqual('');
+      });
+
+      it('should return text-success if the coverage increased', () => {
+        vm = mountComponent(Component, {
+          pipeline: mockData.pipeline,
+          pipelineCoverageDelta: '10',
+          troubleshootingDocsPath: 'help',
+        });
+
+        expect(vm.coverageDeltaClass).toEqual('text-success');
+      });
+
+      it('should return text-danger if the coverage decreased', () => {
+        vm = mountComponent(Component, {
+          pipeline: mockData.pipeline,
+          pipelineCoverageDelta: '-12',
+          troubleshootingDocsPath: 'help',
+        });
+
+        expect(vm.coverageDeltaClass).toEqual('text-danger');
+      });
+    });
   });
 
   describe('rendered output', () => {
@@ -96,6 +128,7 @@ describe('MRWidgetPipeline', () => {
           pipeline: mockData.pipeline,
           hasCi: true,
           ciStatus: 'success',
+          pipelineCoverageDelta: mockData.pipelineCoverageDelta,
           troubleshootingDocsPath: 'help',
         });
       });
@@ -132,6 +165,13 @@ describe('MRWidgetPipeline', () => {
           `Coverage ${mockData.pipeline.coverage}`,
         );
       });
+
+      it('should render pipeline coverage delta information', () => {
+        expect(vm.$el.querySelector('.js-pipeline-coverage-delta.text-danger')).toBeDefined();
+        expect(vm.$el.querySelector('.js-pipeline-coverage-delta').textContent).toContain(
+          `(${mockData.pipelineCoverageDelta}%)`,
+        );
+      });
     });
 
     describe('without commit path', () => {