Merge branch 'master' into vue-pipelinesvue-pipelines

* master: (23 commits)
  Fix container registry navigation menu highlights
  Resolve "Mini pipeline graph + status badge, when updating in real time don't change color and svg icon"
  Refactor group search out of global search
  disables test settings on chat notification services when repository is empty
  Disable initialization table pipeline for new merge request form
  Improves support for long build traces:
  Review changes, used eq instead of match
  Remove lighten blue and add blue-25 for background
  Fixed tests
  29595 Customize experience callout design
  Remove unneeded format block
  Fixed tests
  29595 Customize experience callout design
  Remove issue boards from recent searches
  Updated specs
  Remove helper
  [ci skip] Use favicon full path
  Update phrasing via @jschatz1 comments
  Change heading
  Update index.md
  ...

1 files changed, 66 insertions, 0 deletions

diff --git a/spec/javascripts/vue_pipelines_index/stage_spec.js b/spec/javascripts/vue_pipelines_index/stage_spec.js
new file mode 100644
index 00000000000..542661df2b0
--- /dev/null
+++ b/spec/javascripts/vue_pipelines_index/stage_spec.js
@@ -0,0 +1,66 @@
+import Vue from 'vue';
+import { SUCCESS_SVG } from '~/ci_status_icons';
+import Stage from '~/vue_pipelines_index/components/stage';
+
+function minify(string) {
+  return string.replace(/\s/g, '');
+}
+
+describe('Pipelines Stage', () => {
+  describe('data', () => {
+    let stageReturnValue;
+
+    beforeEach(() => {
+      stageReturnValue = Stage.data();
+    });
+
+    it('should return object with .builds and .spinner', () => {
+      expect(stageReturnValue).toEqual({
+        builds: '',
+        spinner: '<span class="fa fa-spinner fa-spin"></span>',
+      });
+    });
+  });
+
+  describe('computed', () => {
+    describe('svgHTML', function () {
+      let stage;
+      let svgHTML;
+
+      beforeEach(() => {
+        stage = { stage: { status: { icon: 'icon_status_success' } } };
+
+        svgHTML = Stage.computed.svgHTML.call(stage);
+      });
+
+      it("should return the correct icon for the stage's status", () => {
+        expect(svgHTML).toBe(SUCCESS_SVG);
+      });
+    });
+  });
+
+  describe('when mounted', () => {
+    let StageComponent;
+    let renderedComponent;
+    let stage;
+
+    beforeEach(() => {
+      stage = { status: { icon: 'icon_status_success' } };
+
+      StageComponent = Vue.extend(Stage);
+
+      renderedComponent = new StageComponent({
+        propsData: {
+          stage,
+        },
+      }).$mount();
+    });
+
+    it('should render the correct status svg', () => {
+      const minifiedComponent = minify(renderedComponent.$el.outerHTML);
+      const expectedSVG = minify(SUCCESS_SVG);
+
+      expect(minifiedComponent).toContain(expectedSVG);
+    });
+  });
+});