7 files changed, 69 insertions, 1 deletions
diff --git a/spec/helpers/icons_helper_spec.rb b/spec/helpers/icons_helper_spec.rb
index 91c8faea7fd..3d79dac284f 100644
--- a/spec/helpers/icons_helper_spec.rb
+++ b/spec/helpers/icons_helper_spec.rb
@@ -16,6 +16,25 @@ describe IconsHelper do
     end
   end
 
+  describe 'sprite_icon' do
+    icon_name = 'clock'
+
+    it 'returns svg icon html' do
+      expect(sprite_icon(icon_name).to_s)
+        .to eq "<svg><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
+    end
+
+    it 'returns svg icon html + size classes' do
+      expect(sprite_icon(icon_name, size: 72).to_s)
+        .to eq "<svg class=\"s72\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
+    end
+
+    it 'returns svg icon html + size classes + additional class' do
+      expect(sprite_icon(icon_name, size: 72, css_class: 'icon-danger').to_s)
+        .to eq "<svg class=\"s72 icon-danger\"><use xlink:href=\"/images/icons.svg##{icon_name}\"></use></svg>"
+    end
+  end
+
   describe 'file_type_icon_class' do
     it 'returns folder class' do
       expect(file_type_icon_class('folder', 0, 'folder_name')).to eq 'folder'
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index 454f187ccbc..9fc047b1f5e 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -29,6 +29,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            emptyStateSvgPath: 'foo',
+            errorStateSvgPath: 'foo',
             autoDevopsHelpPath: 'foo',
           },
         }).$mount();
@@ -65,6 +67,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            emptyStateSvgPath: 'foo',
+            errorStateSvgPath: 'foo',
             autoDevopsHelpPath: 'foo',
           },
         }).$mount();
@@ -117,6 +121,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
           propsData: {
             endpoint: 'endpoint',
             helpPagePath: 'foo',
+            emptyStateSvgPath: 'foo',
+            errorStateSvgPath: 'foo',
             autoDevopsHelpPath: 'foo',
           },
         }).$mount();
@@ -139,6 +145,8 @@ describe('Pipelines table in Commits and Merge requests', () => {
         propsData: {
           endpoint: 'endpoint',
           helpPagePath: 'foo',
+          emptyStateSvgPath: 'foo',
+          errorStateSvgPath: 'foo',
           autoDevopsHelpPath: 'foo',
         },
       }).$mount();
diff --git a/spec/javascripts/fixtures/pipelines.html.haml b/spec/javascripts/fixtures/pipelines.html.haml
index 418a38a0e2e..97b0c25c923 100644
--- a/spec/javascripts/fixtures/pipelines.html.haml
+++ b/spec/javascripts/fixtures/pipelines.html.haml
@@ -2,6 +2,8 @@
   #pipelines-list-vue{ data: { endpoint: 'foo',
     "css-class" => 'foo',
     "help-page-path" => 'foo',
+    "empty-state-svg-path" => 'foo',
+    "error-state-svg-path" => 'foo',
     "new-pipeline-path" => 'foo',
     "can-create-pipeline" => 'true',
     "all-path" =>  'foo',
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index fd5b7d4e5da..787b405de47 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -411,5 +411,15 @@ describe('common_utils', () => {
       commonUtils.ajaxPost(requestURL, data);
       expect(ajaxSpy.calls.allArgs()[0][0].type).toEqual('POST');
     });
+
+    describe('gl.utils.spriteIcon', () => {
+      beforeEach(() => {
+        window.gon.sprite_icons = 'icons.svg';
+      });
+
+      it('should return the svg for a linked icon', () => {
+        expect(gl.utils.spriteIcon('test')).toEqual('<svg><use xlink:href="icons.svg#test" /></svg>');
+      });
+    });
   });
 });
diff --git a/spec/javascripts/monitoring/dashboard_state_spec.js b/spec/javascripts/monitoring/dashboard_state_spec.js
index e8f7042e131..3319eeb3f31 100644
--- a/spec/javascripts/monitoring/dashboard_state_spec.js
+++ b/spec/javascripts/monitoring/dashboard_state_spec.js
@@ -21,6 +21,9 @@ describe('EmptyState', () => {
         selectedState: 'gettingStarted',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.currentState).toBe(component.states.gettingStarted);
@@ -31,6 +34,9 @@ describe('EmptyState', () => {
         selectedState: 'gettingStarted',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.buttonPath).toEqual(statePaths.settingsPath);
@@ -42,6 +48,9 @@ describe('EmptyState', () => {
         selectedState: 'loading',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.buttonPath).toEqual(statePaths.documentationPath);
@@ -53,6 +62,9 @@ describe('EmptyState', () => {
         selectedState: 'unableToConnect',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.showButtonDescription).toEqual(true);
@@ -63,6 +75,9 @@ describe('EmptyState', () => {
         selectedState: 'loading',
         settingsPath: statePaths.settingsPath,
         documentationPath: statePaths.documentationPath,
+        emptyGettingStartedSvgPath: 'foo',
+        emptyLoadingSvgPath: 'foo',
+        emptyUnableToConnectSvgPath: 'foo',
       });
 
       expect(component.showButtonDescription).toEqual(false);
@@ -74,6 +89,9 @@ describe('EmptyState', () => {
       selectedState: 'gettingStarted',
       settingsPath: statePaths.settingsPath,
       documentationPath: statePaths.documentationPath,
+      emptyGettingStartedSvgPath: 'foo',
+      emptyLoadingSvgPath: 'foo',
+      emptyUnableToConnectSvgPath: 'foo',
     });
 
     expect(component.$el.querySelector('svg')).toBeDefined();
@@ -87,6 +105,9 @@ describe('EmptyState', () => {
       selectedState: 'loading',
       settingsPath: statePaths.settingsPath,
       documentationPath: statePaths.documentationPath,
+      emptyGettingStartedSvgPath: 'foo',
+      emptyLoadingSvgPath: 'foo',
+      emptyUnableToConnectSvgPath: 'foo',
     });
 
     expect(component.$el.querySelector('svg')).toBeDefined();
@@ -100,6 +121,9 @@ describe('EmptyState', () => {
       selectedState: 'unableToConnect',
       settingsPath: statePaths.settingsPath,
       documentationPath: statePaths.documentationPath,
+      emptyGettingStartedSvgPath: 'foo',
+      emptyLoadingSvgPath: 'foo',
+      emptyUnableToConnectSvgPath: 'foo',
     });
 
     expect(component.$el.querySelector('svg')).toBeDefined();
diff --git a/spec/javascripts/pipelines/empty_state_spec.js b/spec/javascripts/pipelines/empty_state_spec.js
index bb47a28d9fe..6611b74594f 100644
--- a/spec/javascripts/pipelines/empty_state_spec.js
+++ b/spec/javascripts/pipelines/empty_state_spec.js
@@ -11,6 +11,7 @@ describe('Pipelines Empty State', () => {
     component = new EmptyStateComponent({
       propsData: {
         helpPagePath: 'foo',
+        emptyStateSvgPath: 'foo',
       },
     }).$mount();
   });
diff --git a/spec/javascripts/pipelines/error_state_spec.js b/spec/javascripts/pipelines/error_state_spec.js
index f667d351f72..a402857a4d1 100644
--- a/spec/javascripts/pipelines/error_state_spec.js
+++ b/spec/javascripts/pipelines/error_state_spec.js
@@ -8,7 +8,11 @@ describe('Pipelines Error State', () => {
   beforeEach(() => {
     ErrorStateComponent = Vue.extend(errorStateComp);
 
-    component = new ErrorStateComponent().$mount();
+    component = new ErrorStateComponent({
+      propsData: {
+        errorStateSvgPath: 'foo',
+      },
+    }).$mount();
   });
 
   it('should render error state SVG', () => {