2 files changed, 68 insertions, 7 deletions
diff --git a/spec/frontend/commit/pipelines/pipelines_table_spec.js b/spec/frontend/commit/pipelines/pipelines_table_spec.js
index 203a4d23160..9b01af1e585 100644
--- a/spec/frontend/commit/pipelines/pipelines_table_spec.js
+++ b/spec/frontend/commit/pipelines/pipelines_table_spec.js
@@ -120,18 +120,20 @@ describe('Pipelines table in Commits and Merge requests', () => {
       });
 
       describe('pipeline badge counts', () => {
-        it('should receive update-pipelines-count event', (done) => {
+        it('should receive update-pipelines-count event', () => {
           const element = document.createElement('div');
           document.body.appendChild(element);
 
-          element.addEventListener('update-pipelines-count', (event) => {
-            expect(event.detail.pipelineCount).toEqual(10);
-            done();
-          });
+          return new Promise((resolve) => {
+            element.addEventListener('update-pipelines-count', (event) => {
+              expect(event.detail.pipelineCount).toEqual(10);
+              resolve();
+            });
 
-          createComponent();
+            createComponent();
 
-          element.appendChild(wrapper.vm.$el);
+            element.appendChild(wrapper.vm.$el);
+          });
         });
       });
     });
diff --git a/spec/frontend/commit/pipelines/utils_spec.js b/spec/frontend/commit/pipelines/utils_spec.js
new file mode 100644
index 00000000000..472e35a6eb3
--- /dev/null
+++ b/spec/frontend/commit/pipelines/utils_spec.js
@@ -0,0 +1,59 @@
+import { formatStages } from '~/projects/commit_box/info/utils';
+
+const graphqlStage = [
+  {
+    __typename: 'CiStage',
+    name: 'deploy',
+    detailedStatus: {
+      __typename: 'DetailedStatus',
+      icon: 'status_success',
+      group: 'success',
+      id: 'success-409-409',
+    },
+  },
+];
+
+const restStage = [
+  {
+    name: 'deploy',
+    title: 'deploy: passed',
+    status: {
+      icon: 'status_success',
+      text: 'passed',
+      label: 'passed',
+      group: 'success',
+      tooltip: 'passed',
+      has_details: true,
+      details_path: '/root/ci-project/-/pipelines/318#deploy',
+      illustration: null,
+      favicon:
+        '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png',
+    },
+    path: '/root/ci-project/-/pipelines/318#deploy',
+    dropdown_path: '/root/ci-project/-/pipelines/318/stage.json?stage=deploy',
+  },
+];
+
+describe('Utils', () => {
+  it('combines REST and GraphQL stages correctly for component', () => {
+    expect(formatStages(graphqlStage, restStage)).toEqual([
+      {
+        dropdown_path: '/root/ci-project/-/pipelines/318/stage.json?stage=deploy',
+        name: 'deploy',
+        status: {
+          __typename: 'DetailedStatus',
+          group: 'success',
+          icon: 'status_success',
+          id: 'success-409-409',
+        },
+        title: 'deploy: passed',
+      },
+    ]);
+  });
+
+  it('throws an error if arrays are not the same length', () => {
+    expect(() => {
+      formatStages(graphqlStage, []);
+    }).toThrow('Rest stages and graphQl stages must be the same length');
+  });
+});