1 files changed, 65 insertions, 10 deletions

diff --git a/spec/frontend/environments/deploy_board_component_spec.js b/spec/frontend/environments/deploy_board_component_spec.js
index 24e94867afd..f0fb4d1027c 100644
--- a/spec/frontend/environments/deploy_board_component_spec.js
+++ b/spec/frontend/environments/deploy_board_component_spec.js
@@ -1,9 +1,10 @@
 import { GlTooltip, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import CanaryIngress from '~/environments/components/canary_ingress.vue';
 import DeployBoard from '~/environments/components/deploy_board.vue';
 import { deployBoardMockData, environment } from './mock_data';
+import { rolloutStatus } from './graphql/mock_data';
 
 const logsPath = `gitlab-org/gitlab-test/-/logs?environment_name=${environment.name}`;
 
@@ -24,11 +25,11 @@ describe('Deploy Board', () => {
   describe('with valid data', () => {
     beforeEach((done) => {
       wrapper = createComponent();
-      wrapper.vm.$nextTick(done);
+      nextTick(done);
     });
 
     it('should render percentage with completion value provided', () => {
-      expect(wrapper.vm.$refs.percentage.innerText).toEqual(`${deployBoardMockData.completion}%`);
+      expect(wrapper.find({ ref: 'percentage' }).text()).toBe(`${deployBoardMockData.completion}%`);
     });
 
     it('should render total instance count', () => {
@@ -57,20 +58,74 @@ describe('Deploy Board', () => {
 
     it('sets up a tooltip for the legend', () => {
       const iconSpan = wrapper.find('[data-testid="legend-tooltip-target"]');
-      const tooltip = wrapper.find(GlTooltip);
-      const icon = iconSpan.find(GlIcon);
+      const tooltip = wrapper.findComponent(GlTooltip);
+      const icon = iconSpan.findComponent(GlIcon);
 
       expect(tooltip.props('target')()).toBe(iconSpan.element);
       expect(icon.props('name')).toBe('question');
     });
 
     it('renders the canary weight selector', () => {
-      const canary = wrapper.find(CanaryIngress);
+      const canary = wrapper.findComponent(CanaryIngress);
       expect(canary.exists()).toBe(true);
       expect(canary.props('canaryIngress')).toEqual({ canary_weight: 50 });
     });
   });
 
+  describe('with new valid data', () => {
+    beforeEach(async () => {
+      wrapper = createComponent({
+        graphql: true,
+        deployBoardData: rolloutStatus,
+      });
+      await nextTick();
+    });
+
+    it('should render percentage with completion value provided', () => {
+      expect(wrapper.find({ ref: 'percentage' }).text()).toBe(`${rolloutStatus.completion}%`);
+    });
+
+    it('should render total instance count', () => {
+      const renderedTotal = wrapper.find('.deploy-board-instances-text');
+      const actualTotal = rolloutStatus.instances.length;
+      const output = `${actualTotal > 1 ? 'Instances' : 'Instance'} (${actualTotal})`;
+
+      expect(renderedTotal.text()).toEqual(output);
+    });
+
+    it('should render all instances', () => {
+      const instances = wrapper.findAll('.deploy-board-instances-container a');
+
+      expect(instances).toHaveLength(rolloutStatus.instances.length);
+      expect(
+        instances.at(1).classes(`deployment-instance-${rolloutStatus.instances[2].status}`),
+      ).toBe(true);
+    });
+
+    it('should render an abort and a rollback button with the provided url', () => {
+      const buttons = wrapper.findAll('.deploy-board-actions a');
+
+      expect(buttons.at(0).attributes('href')).toEqual(rolloutStatus.rollbackUrl);
+      expect(buttons.at(1).attributes('href')).toEqual(rolloutStatus.abortUrl);
+    });
+
+    it('sets up a tooltip for the legend', () => {
+      const iconSpan = wrapper.find('[data-testid="legend-tooltip-target"]');
+      const tooltip = wrapper.findComponent(GlTooltip);
+      const icon = iconSpan.findComponent(GlIcon);
+
+      expect(tooltip.props('target')()).toBe(iconSpan.element);
+      expect(icon.props('name')).toBe('question');
+    });
+
+    it('renders the canary weight selector', () => {
+      const canary = wrapper.findComponent(CanaryIngress);
+      expect(canary.exists()).toBe(true);
+      expect(canary.props('canaryIngress')).toEqual({ canaryWeight: 50 });
+      expect(canary.props('graphql')).toBe(true);
+    });
+  });
+
   describe('with empty state', () => {
     beforeEach((done) => {
       wrapper = createComponent({
@@ -79,7 +134,7 @@ describe('Deploy Board', () => {
         isEmpty: true,
         logsPath,
       });
-      wrapper.vm.$nextTick(done);
+      nextTick(done);
     });
 
     it('should render the empty state', () => {
@@ -98,11 +153,11 @@ describe('Deploy Board', () => {
         isEmpty: false,
         logsPath,
       });
-      wrapper.vm.$nextTick(done);
+      nextTick(done);
     });
 
     it('should render loading spinner', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
 
@@ -116,7 +171,7 @@ describe('Deploy Board', () => {
         deployBoardData: deployBoardMockData,
       });
       ({ statuses } = wrapper.vm);
-      wrapper.vm.$nextTick(done);
+      nextTick(done);
     });
 
     it('with all the possible statuses', () => {