From 0fc93df02b7d1be4ec243298ff17045cbd4f049a Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Thu, 4 Oct 2018 14:53:15 +0200
Subject: Add component tests for scheduled job frontend

---
 .../pipelines/pipelines_actions_spec.js            | 89 +++++++++++++++-------
 .../pipelines/pipelines_table_row_spec.js          |  7 ++
 2 files changed, 70 insertions(+), 26 deletions(-)

(limited to 'spec')

diff --git a/spec/javascripts/pipelines/pipelines_actions_spec.js b/spec/javascripts/pipelines/pipelines_actions_spec.js
index 72fb0a8f9ef..fe60a883f77 100644
--- a/spec/javascripts/pipelines/pipelines_actions_spec.js
+++ b/spec/javascripts/pipelines/pipelines_actions_spec.js
@@ -1,46 +1,83 @@
 import Vue from 'vue';
-import pipelinesActionsComp from '~/pipelines/components/pipelines_actions.vue';
+import eventHub from '~/pipelines/event_hub';
+import PipelinesActions from '~/pipelines/components/pipelines_actions.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { TEST_HOST } from 'spec/test_constants';
 
 describe('Pipelines Actions dropdown', () => {
-  let component;
-  let actions;
-  let ActionsComponent;
+  const Component = Vue.extend(PipelinesActions);
+  let vm;
 
-  beforeEach(() => {
-    ActionsComponent = Vue.extend(pipelinesActionsComp);
+  afterEach(() => {
+    vm.$destroy();
+  });
 
-    actions = [
+  describe('manual actions', () => {
+    const actions = [
       {
         name: 'stop_review',
-        path: '/root/review-app/builds/1893/play',
+        path: `${TEST_HOST}/root/review-app/builds/1893/play`,
       },
       {
         name: 'foo',
-        path: '#',
+        path: `${TEST_HOST}/disabled/pipeline/action`,
         playable: false,
       },
     ];
 
-    component = new ActionsComponent({
-      propsData: {
-        actions,
-      },
-    }).$mount();
-  });
+    beforeEach(() => {
+      vm = mountComponent(Component, { actions });
+    });
 
-  it('should render a dropdown with the provided actions', () => {
-    expect(
-      component.$el.querySelectorAll('.dropdown-menu li').length,
-    ).toEqual(actions.length);
+    it('renders a dropdown with the provided actions', () => {
+      const dropdownItems = vm.$el.querySelectorAll('.dropdown-menu li');
+      expect(dropdownItems.length).toEqual(actions.length);
+    });
+
+    it("renders a disabled action when it's not playable", () => {
+      const dropdownItem = vm.$el.querySelector('.dropdown-menu li:last-child button');
+      expect(dropdownItem).toBeDisabled();
+    });
   });
 
-  it('should render a disabled action when it\'s not playable', () => {
-    expect(
-      component.$el.querySelector('.dropdown-menu li:last-child button').getAttribute('disabled'),
-    ).toEqual('disabled');
+  describe('scheduled jobs', () => {
+    const scheduledJobAction = {
+      name: 'scheduled action',
+      path: `${TEST_HOST}/scheduled/job/action`,
+      playable: true,
+      scheduled_at: '2063-04-05T00:42:00Z',
+    };
+    const findDropdownItem = () => vm.$el.querySelector('.dropdown-menu li button');
+
+    beforeEach(() => {
+      spyOn(Date, 'now').and.callFake(() => new Date('2063-04-04T00:42:00Z').getTime());
+      vm = mountComponent(Component, { actions: [scheduledJobAction] });
+    });
+
+    it('emits postAction event after confirming', () => {
+      const emitSpy = jasmine.createSpy('emit');
+      eventHub.$on('postAction', emitSpy);
+      spyOn(window, 'confirm').and.callFake(() => true);
+
+      findDropdownItem().click();
+
+      expect(window.confirm).toHaveBeenCalled();
+      expect(emitSpy).toHaveBeenCalledWith(scheduledJobAction.path);
+    });
+
+    it('does not emit postAction event if confirmation is cancelled', () => {
+      const emitSpy = jasmine.createSpy('emit');
+      eventHub.$on('postAction', emitSpy);
+      spyOn(window, 'confirm').and.callFake(() => false);
+
+      findDropdownItem().click();
+
+      expect(window.confirm).toHaveBeenCalled();
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
 
-    expect(
-      component.$el.querySelector('.dropdown-menu li:last-child button').classList.contains('disabled'),
-    ).toEqual(true);
+    it('displays the remaining time in the dropdown', () => {
+      expect(findDropdownItem()).toContainText('24:00:00');
+    });
   });
 });
diff --git a/spec/javascripts/pipelines/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js
index 03ffc122795..42795f5c134 100644
--- a/spec/javascripts/pipelines/pipelines_table_row_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js
@@ -158,8 +158,13 @@ describe('Pipelines Table Row', () => {
   });
 
   describe('actions column', () => {
+    const scheduledJobAction = {
+      name: 'some scheduled job',
+    };
+
     beforeEach(() => {
       const withActions = Object.assign({}, pipeline);
+      withActions.details.scheduled_actions = [scheduledJobAction];
       withActions.flags.cancelable = true;
       withActions.flags.retryable = true;
       withActions.cancel_path = '/cancel';
@@ -171,6 +176,8 @@ describe('Pipelines Table Row', () => {
     it('should render the provided actions', () => {
       expect(component.$el.querySelector('.js-pipelines-retry-button')).not.toBeNull();
       expect(component.$el.querySelector('.js-pipelines-cancel-button')).not.toBeNull();
+      const dropdownMenu = component.$el.querySelectorAll('.dropdown-menu');
+      expect(dropdownMenu).toContainText(scheduledJobAction.name);
     });
 
     it('emits `retryPipeline` event when retry button is clicked and toggles loading', () => {
-- 
cgit v1.2.1