Add latest changes from gitlab-org/gitlab@master

3 files changed, 128 insertions, 0 deletions

diff --git a/spec/frontend/environments/environment_item_spec.js b/spec/frontend/environments/environment_item_spec.js
index 52625c64a1c..004687fcf44 100644
--- a/spec/frontend/environments/environment_item_spec.js
+++ b/spec/frontend/environments/environment_item_spec.js
@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
 import { format } from 'timeago.js';
 import EnvironmentItem from '~/environments/components/environment_item.vue';
+import PinComponent from '~/environments/components/environment_pin.vue';
+
 import { environment, folder, tableData } from './mock_data';
 
 describe('Environment item', () => {
@@ -26,6 +28,8 @@ describe('Environment item', () => {
     });
   });
 
+  const findAutoStop = () => wrapper.find('.js-auto-stop');
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -77,6 +81,79 @@ describe('Environment item', () => {
           expect(wrapper.find('.js-commit-component')).toBeDefined();
         });
       });
+
+      describe('Without auto-stop date', () => {
+        beforeEach(() => {
+          factory({
+            propsData: {
+              model: environment,
+              canReadEnvironment: true,
+              tableData,
+              shouldShowAutoStopDate: true,
+            },
+          });
+        });
+
+        it('should not render a date', () => {
+          expect(findAutoStop().exists()).toBe(false);
+        });
+
+        it('should not render the suto-stop button', () => {
+          expect(wrapper.find(PinComponent).exists()).toBe(false);
+        });
+      });
+
+      describe('With auto-stop date', () => {
+        describe('in the future', () => {
+          const futureDate = new Date(Date.now() + 100000);
+          beforeEach(() => {
+            factory({
+              propsData: {
+                model: {
+                  ...environment,
+                  auto_stop_at: futureDate,
+                },
+                canReadEnvironment: true,
+                tableData,
+                shouldShowAutoStopDate: true,
+              },
+            });
+          });
+
+          it('renders the date', () => {
+            expect(findAutoStop().text()).toContain(format(futureDate));
+          });
+
+          it('should render the auto-stop button', () => {
+            expect(wrapper.find(PinComponent).exists()).toBe(true);
+          });
+        });
+
+        describe('in the past', () => {
+          const pastDate = new Date(Date.now() - 100000);
+          beforeEach(() => {
+            factory({
+              propsData: {
+                model: {
+                  ...environment,
+                  auto_stop_at: pastDate,
+                },
+                canReadEnvironment: true,
+                tableData,
+                shouldShowAutoStopDate: true,
+              },
+            });
+          });
+
+          it('should not render a date', () => {
+            expect(findAutoStop().exists()).toBe(false);
+          });
+
+          it('should not render the suto-stop button', () => {
+            expect(wrapper.find(PinComponent).exists()).toBe(false);
+          });
+        });
+      });
     });
 
     describe('With manual actions', () => {
diff --git a/spec/frontend/environments/environment_pin_spec.js b/spec/frontend/environments/environment_pin_spec.js
new file mode 100644
index 00000000000..d1d6735fa38
--- /dev/null
+++ b/spec/frontend/environments/environment_pin_spec.js
@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '~/environments/event_hub';
+import PinComponent from '~/environments/components/environment_pin.vue';
+
+describe('Pin Component', () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    // This destroys any wrappers created before a nested call to factory reassigns it
+    if (wrapper && wrapper.destroy) {
+      wrapper.destroy();
+    }
+    wrapper = shallowMount(PinComponent, {
+      ...options,
+    });
+  };
+
+  const autoStopUrl = '/root/auto-stop-env-test/-/environments/38/cancel_auto_stop';
+
+  beforeEach(() => {
+    factory({
+      propsData: {
+        autoStopUrl,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render the component with thumbtack icon', () => {
+    expect(wrapper.find(Icon).props('name')).toBe('thumbtack');
+  });
+
+  it('should emit onPinClick when clicked', () => {
+    const eventHubSpy = jest.spyOn(eventHub, '$emit');
+    const button = wrapper.find(GlButton);
+
+    button.vm.$emit('click');
+
+    expect(eventHubSpy).toHaveBeenCalledWith('cancelAutoStop', autoStopUrl);
+  });
+});
diff --git a/spec/frontend/environments/mock_data.js b/spec/frontend/environments/mock_data.js
index a014108b898..a2b581578d2 100644
--- a/spec/frontend/environments/mock_data.js
+++ b/spec/frontend/environments/mock_data.js
@@ -63,6 +63,7 @@ const environment = {
   log_path: 'root/ci-folders/environments/31/logs',
   created_at: '2016-11-07T11:11:16.525Z',
   updated_at: '2016-11-10T15:55:58.778Z',
+  auto_stop_at: null,
 };
 
 const folder = {
@@ -98,6 +99,10 @@ const tableData = {
     title: 'Updated',
     spacing: 'section-10',
   },
+  autoStop: {
+    title: 'Auto stop in',
+    spacing: 'section-5',
+  },
   actions: {
     spacing: 'section-25',
   },