Merge branch 'icons-ci-icons' into 'master'

Convert Icons in CI to SVG Sprite Icons

See merge request gitlab-org/gitlab-ce!14567

4 files changed, 57 insertions, 63 deletions

diff --git a/spec/javascripts/vue_shared/ci_action_icons_spec.js b/spec/javascripts/vue_shared/ci_action_icons_spec.js
deleted file mode 100644
index 3d53a5ab24d..00000000000
--- a/spec/javascripts/vue_shared/ci_action_icons_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import getActionIcon from '~/vue_shared/ci_action_icons';
-import cancelSVG from 'icons/_icon_action_cancel.svg';
-import retrySVG from 'icons/_icon_action_retry.svg';
-import playSVG from 'icons/_icon_action_play.svg';
-import stopSVG from 'icons/_icon_action_stop.svg';
-
-describe('getActionIcon', () => {
-  it('should return an empty string', () => {
-    expect(getActionIcon()).toEqual('');
-  });
-
-  it('should return cancel svg', () => {
-    expect(getActionIcon('icon_action_cancel')).toEqual(cancelSVG);
-  });
-
-  it('should return retry svg', () => {
-    expect(getActionIcon('icon_action_retry')).toEqual(retrySVG);
-  });
-
-  it('should return play svg', () => {
-    expect(getActionIcon('icon_action_play')).toEqual(playSVG);
-  });
-
-  it('should render stop svg', () => {
-    expect(getActionIcon('icon_action_stop')).toEqual(stopSVG);
-  });
-});
diff --git a/spec/javascripts/vue_shared/ci_status_icon_spec.js b/spec/javascripts/vue_shared/ci_status_icon_spec.js
deleted file mode 100644
index b6621d6054d..00000000000
--- a/spec/javascripts/vue_shared/ci_status_icon_spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { borderlessStatusIconEntityMap, statusIconEntityMap } from '~/vue_shared/ci_status_icons';
-
-describe('CI status icons', () => {
-  const statuses = [
-    'icon_status_canceled',
-    'icon_status_created',
-    'icon_status_failed',
-    'icon_status_manual',
-    'icon_status_pending',
-    'icon_status_running',
-    'icon_status_skipped',
-    'icon_status_success',
-    'icon_status_warning',
-  ];
-
-  it('should have a dictionary for borderless icons', () => {
-    statuses.forEach((status) => {
-      expect(borderlessStatusIconEntityMap[status]).toBeDefined();
-    });
-  });
-
-  it('should have a dictionary for icons', () => {
-    statuses.forEach((status) => {
-      expect(statusIconEntityMap[status]).toBeDefined();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
index ba303738f71..8762ce9903b 100644
--- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
@@ -11,63 +11,63 @@ describe('CI Badge Link Component', () => {
       text: 'canceled',
       label: 'canceled',
       group: 'canceled',
-      icon: 'icon_status_canceled',
+      icon: 'status_canceled',
       details_path: 'status/canceled',
     },
     created: {
       text: 'created',
       label: 'created',
       group: 'created',
-      icon: 'icon_status_created',
+      icon: 'status_created',
       details_path: 'status/created',
     },
     failed: {
       text: 'failed',
       label: 'failed',
       group: 'failed',
-      icon: 'icon_status_failed',
+      icon: 'status_failed',
       details_path: 'status/failed',
     },
     manual: {
       text: 'manual',
       label: 'manual action',
       group: 'manual',
-      icon: 'icon_status_manual',
+      icon: 'status_manual',
       details_path: 'status/manual',
     },
     pending: {
       text: 'pending',
       label: 'pending',
       group: 'pending',
-      icon: 'icon_status_pending',
+      icon: 'status_pending',
       details_path: 'status/pending',
     },
     running: {
       text: 'running',
       label: 'running',
       group: 'running',
-      icon: 'icon_status_running',
+      icon: 'status_running',
       details_path: 'status/running',
     },
     skipped: {
       text: 'skipped',
       label: 'skipped',
       group: 'skipped',
-      icon: 'icon_status_skipped',
+      icon: 'status_skipped',
       details_path: 'status/skipped',
     },
     success_warining: {
       text: 'passed',
       label: 'passed',
       group: 'success_with_warnings',
-      icon: 'icon_status_warning',
+      icon: 'status_warning',
       details_path: 'status/warning',
     },
     success: {
       text: 'passed',
       label: 'passed',
       group: 'passed',
-      icon: 'icon_status_success',
+      icon: 'status_success',
       details_path: 'status/passed',
     },
   };
diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js
new file mode 100644
index 00000000000..104da4473ce
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/icon_spec.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Sprite Icon Component', function () {
+  describe('Initialization', function () {
+    let icon;
+
+    beforeEach(function () {
+      const IconComponent = Vue.extend(Icon);
+
+      icon = mountComponent(IconComponent, {
+        name: 'test',
+        size: 99,
+        cssClasses: 'extraclasses',
+      });
+    });
+
+    afterEach(() => {
+      icon.$destroy();
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(icon).toBeDefined();
+    });
+
+    it('should have <svg> as a child element', function () {
+      expect(icon.$el.tagName).toBe('svg');
+    });
+
+    it('should have <use> as a child element with the correct href', function () {
+      expect(icon.$el.firstChild.tagName).toBe('use');
+      expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#test`);
+    });
+
+    it('should properly compute iconSizeClass', function () {
+      expect(icon.iconSizeClass).toBe('s99');
+    });
+
+    it('should properly render img css', function () {
+      const classList = icon.$el.classList;
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains('extraclasses');
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
+    });
+  });
+});