From 39bef72c0d9ed56794941e23afbc359d27a65a91 Mon Sep 17 00:00:00 2001
From: Payton Burdette <pburdette@gitlab.com>
Date: Wed, 6 May 2020 16:17:20 +0000
Subject: [PATCH] Migrate pipelines actions spec
Migrate pipelines actions spec
from karma to jest. And use vue
test utils now.
---
.../pipelines/pipelines_actions_spec.js | 142 ++++++++++++++++++
.../pipelines/pipelines_actions_spec.js | 128 ----------------
2 files changed, 142 insertions(+), 128 deletions(-)
create mode 100644 spec/frontend/pipelines/pipelines_actions_spec.js
delete mode 100644 spec/javascripts/pipelines/pipelines_actions_spec.js
diff --git a/spec/frontend/pipelines/pipelines_actions_spec.js b/spec/frontend/pipelines/pipelines_actions_spec.js
new file mode 100644
index 0000000000000..5e8d21660decd
--- /dev/null
+++ b/spec/frontend/pipelines/pipelines_actions_spec.js
@@ -0,0 +1,142 @@
+import { shallowMount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
+import PipelinesActions from '~/pipelines/components/pipelines_actions.vue';
+import { GlDeprecatedButton } from '@gitlab/ui';
+import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+
+describe('Pipelines Actions dropdown', () => {
+ let wrapper;
+ let mock;
+
+ const createComponent = (actions = []) => {
+ wrapper = shallowMount(PipelinesActions, {
+ propsData: {
+ actions,
+ },
+ });
+ };
+
+ const findAllDropdownItems = () => wrapper.findAll(GlDeprecatedButton);
+ const findAllCountdowns = () => wrapper.findAll(GlCountdown);
+
+ beforeEach(() => {
+ mock = new MockAdapter(axios);
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ wrapper = null;
+
+ mock.restore();
+ });
+
+ describe('manual actions', () => {
+ const mockActions = [
+ {
+ name: 'stop_review',
+ path: `${TEST_HOST}/root/review-app/builds/1893/play`,
+ },
+ {
+ name: 'foo',
+ path: `${TEST_HOST}/disabled/pipeline/action`,
+ playable: false,
+ },
+ ];
+
+ beforeEach(() => {
+ createComponent(mockActions);
+ });
+
+ it('renders a dropdown with the provided actions', () => {
+ expect(findAllDropdownItems()).toHaveLength(mockActions.length);
+ });
+
+ it("renders a disabled action when it's not playable", () => {
+ expect(
+ findAllDropdownItems()
+ .at(1)
+ .attributes('disabled'),
+ ).toBe('true');
+ });
+
+ describe('on click', () => {
+ it('makes a request and toggles the loading state', () => {
+ mock.onPost(mockActions.path).reply(200);
+
+ wrapper.find(GlDeprecatedButton).vm.$emit('click');
+
+ expect(wrapper.vm.isLoading).toBe(true);
+
+ return waitForPromises().then(() => {
+ expect(wrapper.vm.isLoading).toBe(false);
+ });
+ });
+ });
+ });
+
+ describe('scheduled jobs', () => {
+ const scheduledJobAction = {
+ name: 'scheduled action',
+ path: `${TEST_HOST}/scheduled/job/action`,
+ playable: true,
+ scheduled_at: '2063-04-05T00:42:00Z',
+ };
+ const expiredJobAction = {
+ name: 'expired action',
+ path: `${TEST_HOST}/expired/job/action`,
+ playable: true,
+ scheduled_at: '2018-10-05T08:23:00Z',
+ };
+
+ beforeEach(() => {
+ jest.spyOn(Date, 'now').mockImplementation(() => new Date('2063-04-04T00:42:00Z').getTime());
+ createComponent([scheduledJobAction, expiredJobAction]);
+ });
+
+ it('makes post request after confirming', () => {
+ mock.onPost(scheduledJobAction.path).reply(200);
+ jest.spyOn(window, 'confirm').mockReturnValue(true);
+
+ findAllDropdownItems()
+ .at(0)
+ .vm.$emit('click');
+
+ expect(window.confirm).toHaveBeenCalled();
+
+ return waitForPromises().then(() => {
+ expect(mock.history.post.length).toBe(1);
+ });
+ });
+
+ it('does not make post request if confirmation is cancelled', () => {
+ mock.onPost(scheduledJobAction.path).reply(200);
+ jest.spyOn(window, 'confirm').mockReturnValue(false);
+
+ findAllDropdownItems()
+ .at(0)
+ .vm.$emit('click');
+
+ expect(window.confirm).toHaveBeenCalled();
+ expect(mock.history.post.length).toBe(0);
+ });
+
+ it('displays the remaining time in the dropdown', () => {
+ expect(
+ findAllCountdowns()
+ .at(0)
+ .props('endDateString'),
+ ).toBe(scheduledJobAction.scheduled_at);
+ });
+
+ it('displays 00:00:00 for expired jobs in the dropdown', () => {
+ expect(
+ findAllCountdowns()
+ .at(1)
+ .props('endDateString'),
+ ).toBe(expiredJobAction.scheduled_at);
+ });
+ });
+});
diff --git a/spec/javascripts/pipelines/pipelines_actions_spec.js b/spec/javascripts/pipelines/pipelines_actions_spec.js
deleted file mode 100644
index 91f7d2167cc11..0000000000000
--- a/spec/javascripts/pipelines/pipelines_actions_spec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import Vue from 'vue';
-import MockAdapter from 'axios-mock-adapter';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'spec/test_constants';
-import axios from '~/lib/utils/axios_utils';
-import PipelinesActions from '~/pipelines/components/pipelines_actions.vue';
-
-describe('Pipelines Actions dropdown', () => {
- const Component = Vue.extend(PipelinesActions);
- let vm;
- let mock;
-
- afterEach(() => {
- vm.$destroy();
- mock.restore();
- });
-
- beforeEach(() => {
- mock = new MockAdapter(axios);
- });
-
- describe('manual actions', () => {
- const actions = [
- {
- name: 'stop_review',
- path: `${TEST_HOST}/root/review-app/builds/1893/play`,
- },
- {
- name: 'foo',
- path: `${TEST_HOST}/disabled/pipeline/action`,
- playable: false,
- },
- ];
-
- beforeEach(() => {
- vm = mountComponent(Component, { actions });
- });
-
- 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();
- });
-
- describe('on click', () => {
- it('makes a request and toggles the loading state', done => {
- mock.onPost(actions.path).reply(200);
-
- vm.$el.querySelector('.dropdown-menu li button').click();
-
- expect(vm.isLoading).toEqual(true);
-
- setTimeout(() => {
- expect(vm.isLoading).toEqual(false);
-
- done();
- });
- });
- });
- });
-
- describe('scheduled jobs', () => {
- const scheduledJobAction = {
- name: 'scheduled action',
- path: `${TEST_HOST}/scheduled/job/action`,
- playable: true,
- scheduled_at: '2063-04-05T00:42:00Z',
- };
- const expiredJobAction = {
- name: 'expired action',
- path: `${TEST_HOST}/expired/job/action`,
- playable: true,
- scheduled_at: '2018-10-05T08:23:00Z',
- };
- const findDropdownItem = action => {
- const buttons = vm.$el.querySelectorAll('.dropdown-menu li button');
- return Array.prototype.find.call(buttons, element =>
- element.innerText.trim().startsWith(action.name),
- );
- };
-
- beforeEach(done => {
- spyOn(Date, 'now').and.callFake(() => new Date('2063-04-04T00:42:00Z').getTime());
- vm = mountComponent(Component, { actions: [scheduledJobAction, expiredJobAction] });
-
- Vue.nextTick()
- .then(done)
- .catch(done.fail);
- });
-
- it('makes post request after confirming', done => {
- mock.onPost(scheduledJobAction.path).reply(200);
- spyOn(window, 'confirm').and.callFake(() => true);
-
- findDropdownItem(scheduledJobAction).click();
-
- expect(window.confirm).toHaveBeenCalled();
- setTimeout(() => {
- expect(mock.history.post.length).toBe(1);
- done();
- });
- });
-
- it('does not make post request if confirmation is cancelled', () => {
- mock.onPost(scheduledJobAction.path).reply(200);
- spyOn(window, 'confirm').and.callFake(() => false);
-
- findDropdownItem(scheduledJobAction).click();
-
- expect(window.confirm).toHaveBeenCalled();
- expect(mock.history.post.length).toBe(0);
- });
-
- it('displays the remaining time in the dropdown', () => {
- expect(findDropdownItem(scheduledJobAction)).toContainText('24:00:00');
- });
-
- it('displays 00:00:00 for expired jobs in the dropdown', () => {
- expect(findDropdownItem(expiredJobAction)).toContainText('00:00:00');
- });
- });
-});
--
GitLab