1 files changed, 58 insertions, 16 deletions

diff --git a/spec/frontend/environments/environment_pin_spec.js b/spec/frontend/environments/environment_pin_spec.js
index a9a58071e12..669c974ea4f 100644
--- a/spec/frontend/environments/environment_pin_spec.js
+++ b/spec/frontend/environments/environment_pin_spec.js
@@ -1,5 +1,9 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import cancelAutoStopMutation from '~/environments/graphql/mutations/cancel_auto_stop.mutation.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import PinComponent from '~/environments/components/environment_pin.vue';
 import eventHub from '~/environments/event_hub';
 
@@ -18,28 +22,66 @@ describe('Pin Component', () => {
 
   const autoStopUrl = '/root/auto-stop-env-test/-/environments/38/cancel_auto_stop';
 
-  beforeEach(() => {
-    factory({
-      propsData: {
-        autoStopUrl,
-      },
+  describe('without graphql', () => {
+    beforeEach(() => {
+      factory({
+        propsData: {
+          autoStopUrl,
+        },
+      });
     });
-  });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
+    afterEach(() => {
+      wrapper.destroy();
+    });
 
-  it('should render the component with descriptive text', () => {
-    expect(wrapper.text()).toBe('Prevent auto-stopping');
+    it('should render the component with descriptive text', () => {
+      expect(wrapper.text()).toBe('Prevent auto-stopping');
+    });
+
+    it('should emit onPinClick when clicked', () => {
+      const eventHubSpy = jest.spyOn(eventHub, '$emit');
+      const item = wrapper.find(GlDropdownItem);
+
+      item.vm.$emit('click');
+
+      expect(eventHubSpy).toHaveBeenCalledWith('cancelAutoStop', autoStopUrl);
+    });
   });
 
-  it('should emit onPinClick when clicked', () => {
-    const eventHubSpy = jest.spyOn(eventHub, '$emit');
-    const item = wrapper.find(GlDropdownItem);
+  describe('with graphql', () => {
+    Vue.use(VueApollo);
+    let mockApollo;
 
-    item.vm.$emit('click');
+    beforeEach(() => {
+      mockApollo = createMockApollo();
+      factory({
+        propsData: {
+          autoStopUrl,
+          graphql: true,
+        },
+        apolloProvider: mockApollo,
+      });
+    });
 
-    expect(eventHubSpy).toHaveBeenCalledWith('cancelAutoStop', autoStopUrl);
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('should render the component with descriptive text', () => {
+      expect(wrapper.text()).toBe('Prevent auto-stopping');
+    });
+
+    it('should emit onPinClick when clicked', () => {
+      jest.spyOn(mockApollo.defaultClient, 'mutate');
+      const item = wrapper.find(GlDropdownItem);
+
+      item.vm.$emit('click');
+
+      expect(mockApollo.defaultClient.mutate).toHaveBeenCalledWith({
+        mutation: cancelAutoStopMutation,
+        variables: { autoStopUrl },
+      });
+    });
   });
 });