Skip to content

G
gitlab-ce
Commit e00f7f1c authored by Illya Klymov's avatar Illya Klymov
Browse files
Options

Remove deprecated `setMethods` calls 

`@vue/test-utils` 1.x deprecate `setMethods`
parent 42e1a2aa
Expand all Show whitespace changes
Inline Side-by-side
Showing with 329 additions and 385 deletions
spec/frontend/design_management/components/design_presentation_spec.js
View file @ e00f7f1c
import { nextTick } from 'vue';
import { shallowMount } from '@vue/test-utils';
import DesignPresentation from '~/design_management/components/design_presentation.vue';
import DesignOverlay from '~/design_management/components/design_overlay.vue';
......@@ -100,12 +101,12 @@ describe('Design management design presentation component', () => {
clientY: endCoords.clientY,
});
return wrapper.vm.$nextTick();
return nextTick();
})
.then(() => {
if (mouseup) {
addCommentOverlay.trigger(event.mouseup);
return wrapper.vm.$nextTick();
return nextTick();
}
return undefined;
......@@ -125,7 +126,7 @@ describe('Design management design presentation component', () => {
mockOverlayData,
);
return wrapper.vm.$nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
......@@ -133,7 +134,7 @@ describe('Design management design presentation component', () => {
it('renders empty state when no image provided', () => {
createComponent();
return wrapper.vm.$nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
......@@ -149,7 +150,7 @@ describe('Design management design presentation component', () => {
wrapper.vm.openCommentForm({ x: 1, y: 1 });
return wrapper.vm.$nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.emitted('openCommentForm')).toEqual([
[{ ...mockOverlayData.overlayDimensions, x: 1, y: 1 }],
]);
......@@ -166,7 +167,7 @@ describe('Design management design presentation component', () => {
mockOverlayData,
);
return wrapper.vm.$nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.vm.currentCommentForm).toBeNull();
expect(wrapper.element).toMatchSnapshot();
});
......@@ -182,7 +183,7 @@ describe('Design management design presentation component', () => {
mockOverlayData,
);
return wrapper.vm.$nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.vm.currentCommentForm).toBeNull();
expect(wrapper.element).toMatchSnapshot();
});
......@@ -206,7 +207,7 @@ describe('Design management design presentation component', () => {
},
);
return wrapper.vm.$nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.vm.currentCommentForm).toEqual({
x: 1,
y: 1,
......@@ -379,7 +380,7 @@ describe('Design management design presentation component', () => {
});
describe('onImageResize', () => {
it('sets zoom focal point on initial load', () => {
beforeEach(() => {
createComponent(
{
image: 'test.jpg',
......@@ -388,22 +389,21 @@ describe('Design management design presentation component', () => {
mockOverlayData,
);
wrapper.setMethods({
shiftZoomFocalPoint: jest.fn(),
scaleZoomFocalPoint: jest.fn(),
scrollToFocalPoint: jest.fn(),
jest.spyOn(wrapper.vm, 'shiftZoomFocalPoint');
jest.spyOn(wrapper.vm, 'scaleZoomFocalPoint');
jest.spyOn(wrapper.vm, 'scrollToFocalPoint');
wrapper.vm.onImageResize({ width: 10, height: 10 });
return nextTick();
});
wrapper.vm.onImageResize({ width: 10, height: 10 });
return wrapper.vm.$nextTick().then(() => {
it('sets zoom focal point on initial load', () => {
expect(wrapper.vm.shiftZoomFocalPoint).toHaveBeenCalled();
expect(wrapper.vm.initialLoad).toBe(false);
});
});
it('calls scaleZoomFocalPoint and scrollToFocalPoint after initial load', () => {
wrapper.vm.onImageResize({ width: 10, height: 10 });
return wrapper.vm.$nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.vm.scaleZoomFocalPoint).toHaveBeenCalled();
expect(wrapper.vm.scrollToFocalPoint).toHaveBeenCalled();
});
......@@ -506,7 +506,7 @@ describe('Design management design presentation component', () => {
.$nextTick()
.then(() => {
addCommentOverlay.trigger('mouseup');
return wrapper.vm.$nextTick();
return nextTick();
})
.then(() => {
expect(wrapper.emitted('openCommentForm')).toBeDefined();
......
spec/frontend/diffs/components/app_spec.js
View file @ e00f7f1c
import { nextTick } from 'vue';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon, GlPagination } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter';
import { TEST_HOST } from 'spec/test_constants';
......@@ -27,6 +27,8 @@ const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`;
const COMMIT_URL = `${TEST_HOST}/COMMIT/OLD`;
const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`;
Vue.use(Vuex);
function getCollapsedFilesWarning(wrapper) {
return wrapper.find(CollapsedFilesWarning);
}
......@@ -38,7 +40,6 @@ describe('diffs/components/app', () => {
let mock;
function createComponent(props = {}, extendStore = () => {}, provisions = {}) {
const localVue = createLocalVue();
const provide = {
...provisions,
glFeatures: {
......@@ -46,8 +47,6 @@ describe('diffs/components/app', () => {
},
};
localVue.use(Vuex);
store = createDiffsStore();
store.state.diffs.isLoading = false;
store.state.diffs.isTreeLoaded = true;
......@@ -55,7 +54,6 @@ describe('diffs/components/app', () => {
extendStore(store);
wrapper = shallowMount(App, {
localVue,
propsData: {
endpoint: TEST_ENDPOINT,
endpointMetadata: `${TEST_HOST}/diff/endpointMetadata`,
......@@ -262,7 +260,7 @@ describe('diffs/components/app', () => {
shouldShow: true,
});
// Component uses $nextTick so we wait until that has finished
// Component uses nextTick so we wait until that has finished
await nextTick();
expect(store.state.diffs.currentDiffFileId).toBe('ABC');
......@@ -298,8 +296,8 @@ describe('diffs/components/app', () => {
describe('keyboard shortcut navigation', () => {
let spies = [];
let jumpSpy;
let moveSpy;
let jumpSpy;
function setup(componentProps, featureFlags) {
createComponent(
......@@ -311,11 +309,8 @@ describe('diffs/components/app', () => {
);
moveSpy = jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
jumpSpy = jest.fn();
jumpSpy = jest.spyOn(wrapper.vm, 'jumpToFile').mockImplementation(() => {});
spies = [jumpSpy, moveSpy];
wrapper.setMethods({
jumpToFile: jumpSpy,
});
}
describe('visible app', () => {
......@@ -404,8 +399,6 @@ describe('diffs/components/app', () => {
let spy;
beforeEach(() => {
spy = jest.fn();
createComponent({}, () => {
store.state.diffs.diffFiles = [
{ file_hash: '111', file_path: '111.js' },
......@@ -413,10 +406,7 @@ describe('diffs/components/app', () => {
{ file_hash: '333', file_path: '333.js' },
];
});
wrapper.setMethods({
scrollToFile: spy,
});
spy = jest.spyOn(store, 'dispatch');
});
afterEach(() => {
......@@ -428,15 +418,15 @@ describe('diffs/components/app', () => {
wrapper.vm.jumpToFile(+1);
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['222.js']);
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['diffs/scrollToFile', '222.js']);
store.state.diffs.currentDiffFileId = '222';
wrapper.vm.jumpToFile(+1);
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['333.js']);
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['diffs/scrollToFile', '333.js']);
store.state.diffs.currentDiffFileId = '333';
wrapper.vm.jumpToFile(-1);
expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['222.js']);
// expect(spy.mock.calls[spy.mock.calls.length - 1]).toEqual(['222.js']);
});
it('does not jump to previous file from the first one', async () => {
......@@ -611,12 +601,6 @@ describe('diffs/components/app', () => {
});
describe('setTreeDisplay', () => {
let setShowTreeList;
beforeEach(() => {
setShowTreeList = jest.fn();
});
afterEach(() => {
localStorage.removeItem('mr_tree_show');
});
......@@ -625,14 +609,13 @@ describe('diffs/components/app', () => {
createComponent({}, ({ state }) => {
state.diffs.diffFiles.push({ sha: '123' });
});
wrapper.setMethods({
setShowTreeList,
});
jest.spyOn(store, 'dispatch');
wrapper.vm.setTreeDisplay();
expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList: false, saving: false });
expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
showTreeList: false,
saving: false,
});
});
it('calls setShowTreeList with true when more than 1 file is in diffs array', () => {
......@@ -640,14 +623,14 @@ describe('diffs/components/app', () => {
state.diffs.diffFiles.push({ sha: '123' });
state.diffs.diffFiles.push({ sha: '124' });
});
wrapper.setMethods({
setShowTreeList,
});
jest.spyOn(store, 'dispatch');
wrapper.vm.setTreeDisplay();
expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList: true, saving: false });
expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
showTreeList: true,
saving: false,
});
});
it.each`
......@@ -660,14 +643,14 @@ describe('diffs/components/app', () => {
createComponent({}, ({ state }) => {
state.diffs.diffFiles.push({ sha: '123' });
});
wrapper.setMethods({
setShowTreeList,
});
jest.spyOn(store, 'dispatch');
wrapper.vm.setTreeDisplay();
expect(setShowTreeList).toHaveBeenCalledWith({ showTreeList, saving: false });
expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowTreeList', {
showTreeList,
saving: false,
});
});
});
......
spec/frontend/ide/components/terminal/terminal_spec.js
View file @ e00f7f1c
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import { shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui';
import Terminal from '~/ide/components/terminal/terminal.vue';
......@@ -14,17 +15,18 @@ import GLTerminal from '~/terminal/terminal';
const TEST_TERMINAL_PATH = 'terminal/path';
const localVue = createLocalVue();
localVue.use(Vuex);
Vue.use(Vuex);
jest.mock('~/terminal/terminal', () =>
jest.fn().mockImplementation(() => ({
jest.fn().mockImplementation(function FakeTerminal() {
Object.assign(this, {
dispose: jest.fn(),
disable: jest.fn(),
addScrollListener: jest.fn(),
scrollToTop: jest.fn(),
scrollToBottom: jest.fn(),
})),
});
}),
);
describe('IDE Terminal', () => {
......@@ -41,13 +43,12 @@ describe('IDE Terminal', () => {
},
});
wrapper = shallowMount(localVue.extend(Terminal), {
wrapper = shallowMount(Terminal, {
propsData: {
status: RUNNING,
terminalPath: TEST_TERMINAL_PATH,
...propsData,
},
localVue,
store,
});
};
......@@ -102,7 +103,7 @@ describe('IDE Terminal', () => {
factory();
wrapper.vm.createTerminal();
return localVue.nextTick();
return nextTick();
});
it('is visible if terminal is created', () => {
......@@ -129,7 +130,7 @@ describe('IDE Terminal', () => {
wrapper.setData({ canScrollUp: true, canScrollDown: true });
return localVue.nextTick().then(() => {
return nextTick().then(() => {
expect(wrapper.find(TerminalControls).props()).toEqual({
canScrollUp: true,
canScrollDown: true,
......@@ -139,30 +140,24 @@ describe('IDE Terminal', () => {
});
describe('refresh', () => {
let createTerminal;
let stopTerminal;
beforeEach(() => {
createTerminal = jest.fn().mockName('createTerminal');
stopTerminal = jest.fn().mockName('stopTerminal');
});
it('creates the terminal if running', () => {
factory({ status: RUNNING, terminalPath: TEST_TERMINAL_PATH });
wrapper.setMethods({ createTerminal });
wrapper.vm.refresh();
expect(createTerminal).toHaveBeenCalled();
expect(GLTerminal.mock.instances).toHaveLength(1);
});
it('stops the terminal if stopping', () => {
factory({ status: STOPPING });
it('stops the terminal if stopping', async () => {
factory({ status: RUNNING, terminalPath: TEST_TERMINAL_PATH });
wrapper.setMethods({ stopTerminal });
wrapper.vm.refresh();
expect(stopTerminal).toHaveBeenCalled();
const terminal = GLTerminal.mock.instances[0];
wrapper.setProps({ status: STOPPING });
await nextTick();
expect(terminal.disable).toHaveBeenCalled();
});
});
......
spec/frontend/notes/components/discussion_jump_to_next_button_spec.js
View file @ e00f7f1c
......@@ -13,7 +13,8 @@ describe('JumpToNextDiscussionButton', () => {
wrapper = shallowMount(JumpToNextDiscussionButton, {
propsData: { fromDiscussionId },
});
wrapper.setMethods({ jumpToNextRelativeDiscussion: jumpFn });
jest.spyOn(wrapper.vm, 'jumpToNextRelativeDiscussion').mockImplementation(jumpFn);
trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
});
......
spec/frontend/notes/components/note_form_spec.js
View file @ e00f7f1c
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import { shallowMount } from '@vue/test-utils';
import createStore from '~/notes/stores';
import NoteForm from '~/notes/components/note_form.vue';
import batchComments from '~/batch_comments/stores/modules/batch_comments';
......@@ -18,12 +19,9 @@ describe('issue_note_form component', () => {
let props;
const createComponentWrapper = () => {
const localVue = createLocalVue();
return shallowMount(localVue.extend(NoteForm), {
return shallowMount(NoteForm, {
store,
propsData: props,
// see https://gitlab.com/gitlab-org/gitlab-foss/issues/56317 for the following
localVue,
});
};
......@@ -60,24 +58,23 @@ describe('issue_note_form component', () => {
expect(wrapper.vm.noteHash).toBe(`#note_${props.noteId}`);
});
it('return note hash as `#` when `noteId` is empty', () => {
it('return note hash as `#` when `noteId` is empty', async () => {
wrapper.setProps({
...props,
noteId: '',
});
await nextTick();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.noteHash).toBe('#');
});
});
});
describe('conflicts editing', () => {
beforeEach(() => {
wrapper = createComponentWrapper();
});
it('should show conflict message if note changes outside the component', () => {
it('should show conflict message if note changes outside the component', async () => {
wrapper.setProps({
...props,
isEditing: true,
......@@ -87,14 +84,14 @@ describe('issue_note_form component', () => {
const message =
'This comment has changed since you started editing, please review the updated comment to ensure information is not lost.';
return wrapper.vm.$nextTick().then(() => {
await nextTick();
const conflictWarning = wrapper.find('.js-conflict-edit-warning');
expect(conflictWarning.exists()).toBe(true);
expect(conflictWarning.text().replace(/\s+/g, ' ').trim()).toBe(message);
});
});
});
describe('form', () => {
beforeEach(() => {
......@@ -156,29 +153,27 @@ describe('issue_note_form component', () => {
});
describe('actions', () => {
it('should be possible to cancel', () => {
const cancelHandler = jest.fn();
it('should be possible to cancel', async () => {
wrapper.setProps({
...props,
isEditing: true,
});
wrapper.setMethods({ cancelHandler });
await nextTick();
return wrapper.vm.$nextTick().then(() => {
const cancelButton = wrapper.find('[data-testid="cancel"]');
cancelButton.trigger('click');
await nextTick();
expect(cancelHandler).toHaveBeenCalledWith(true);
});
expect(wrapper.emitted().cancelForm).toHaveLength(1);
});
it('should be possible to update the note', () => {
it('should be possible to update the note', async () => {
wrapper.setProps({
...props,
isEditing: true,
});
await nextTick();
return wrapper.vm.$nextTick().then(() => {
const textarea = wrapper.find('textarea');
textarea.setValue('Foo');
const saveButton = wrapper.find('.js-vue-issue-save');
......@@ -188,7 +183,6 @@ describe('issue_note_form component', () => {
});
});
});
});
describe('with autosaveKey', () => {
describe('with draft', () => {
......@@ -199,7 +193,7 @@ describe('issue_note_form component', () => {
});
wrapper = createComponentWrapper();
return wrapper.vm.$nextTick();
return nextTick();
});
it('displays the draft in textarea', () => {
......@@ -217,7 +211,7 @@ describe('issue_note_form component', () => {
});
wrapper = createComponentWrapper();
return wrapper.vm.$nextTick();
return nextTick();
});
it('leaves the textarea empty', () => {
......@@ -273,16 +267,15 @@ describe('issue_note_form component', () => {
});
});
it('should be possible to cancel', () => {
it('should be possible to cancel', async () => {
jest.spyOn(wrapper.vm, 'cancelHandler');
return wrapper.vm.$nextTick().then(() => {
await nextTick();
const cancelButton = wrapper.find('[data-testid="cancelBatchCommentsEnabled"]');
cancelButton.trigger('click');
expect(wrapper.vm.cancelHandler).toHaveBeenCalledWith(true);
});
});
it('shows resolve checkbox', () => {
expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(true);
......@@ -304,7 +297,7 @@ describe('issue_note_form component', () => {
},
});
await wrapper.vm.$nextTick();
await nextTick();
expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(false);
});
......@@ -312,7 +305,7 @@ describe('issue_note_form component', () => {
it('hides actions for commits', () => {
wrapper.setProps({ discussion: { for_commit: true } });
return wrapper.vm.$nextTick(() => {
return nextTick(() => {
expect(wrapper.find('.note-form-actions').text()).not.toContain('Start a review');
});
});
......@@ -326,7 +319,7 @@ describe('issue_note_form component', () => {
textarea.setValue('Foo');
textarea.trigger('keydown.enter', { metaKey: true });
return wrapper.vm.$nextTick(() => {
return nextTick(() => {
expect(wrapper.vm.handleAddToReview).toHaveBeenCalled();
});
});
......
spec/frontend/notes/components/noteable_discussion_spec.js
View file @ e00f7f1c
import { mount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import mockDiffFile from 'jest/diffs/mock_data/diff_file';
import { trimText } from 'helpers/text_helper';
import createStore from '~/notes/stores';
import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
import NoteableDiscussion from '~/notes/components/noteable_discussion.vue';
import DiscussionNotes from '~/notes/components/discussion_notes.vue';
import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
import NoteForm from '~/notes/components/note_form.vue';
......@@ -17,8 +19,6 @@ import {
const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
const localVue = createLocalVue();
describe('noteable_discussion component', () => {
let store;
let wrapper;
......@@ -32,10 +32,9 @@ describe('noteable_discussion component', () => {
store.dispatch('setNoteableData', noteableDataMock);
store.dispatch('setNotesData', notesDataMock);
wrapper = mount(localVue.extend(noteableDiscussion), {
wrapper = mount(NoteableDiscussion, {
store,
propsData: { discussion: discussionMock },
localVue,
});
});
......@@ -47,32 +46,28 @@ describe('noteable_discussion component', () => {
expect(wrapper.find('.discussion-header').exists()).toBe(false);
});
it('should render thread header', () => {
it('should render thread header', async () => {
const discussion = { ...discussionMock };
discussion.diff_file = mockDiffFile;
discussion.diff_discussion = true;
discussion.expanded = false;
wrapper.setProps({ discussion });
await nextTick();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find('.discussion-header').exists()).toBe(true);
});
});
describe('actions', () => {
it('should toggle reply form', () => {
const replyPlaceholder = wrapper.find(ReplyPlaceholder);
it('should toggle reply form', async () => {
await nextTick();
return wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.vm.isReplying).toEqual(false);
const replyPlaceholder = wrapper.find(ReplyPlaceholder);
replyPlaceholder.vm.$emit('onClick');
})
.then(() => wrapper.vm.$nextTick())
.then(() => {
await nextTick();
expect(wrapper.vm.isReplying).toEqual(true);
const noteForm = wrapper.find(NoteForm);
......@@ -87,23 +82,22 @@ describe('noteable_discussion component', () => {
expect(noteFormProps.saveButtonTitle).toBe('Comment');
expect(noteFormProps.autosaveKey).toBe(`Note/Issue/${discussionMock.id}/Reply`);
});
});
it('should expand discussion', async () => {
const expandDiscussion = jest.fn();
const discussion = { ...discussionMock };
discussion.expanded = false;
const discussion = { ...discussionMock, expanded: false };
wrapper.setProps({ discussion });
wrapper.setMethods({ expandDiscussion });
store.dispatch = jest.fn();
await wrapper.vm.$nextTick();
await nextTick();
wrapper.vm.showReplyForm();
wrapper.find(DiscussionNotes).vm.$emit('startReplying');
await wrapper.vm.$nextTick();
await nextTick();
expect(expandDiscussion).toHaveBeenCalledWith({ discussionId: discussion.id });
expect(store.dispatch).toHaveBeenCalledWith('expandDiscussion', {
discussionId: discussion.id,
});
});
it('does not render jump to thread button', () => {
......@@ -143,7 +137,7 @@ describe('noteable_discussion component', () => {
wrapper.setProps({ discussion });
return wrapper.vm.$nextTick();
return nextTick();
});
it('displays a button to resolve with issue', () => {
......@@ -169,10 +163,9 @@ describe('noteable_discussion component', () => {
window.gon.current_user_id = userDataMock.id;
store.dispatch('setUserData', userDataMock);
wrapper = mount(localVue.extend(noteableDiscussion), {
wrapper = mount(NoteableDiscussion, {
store,
propsData: { discussion: discussionMock },
localVue,
});
});
......@@ -188,10 +181,9 @@ describe('noteable_discussion component', () => {
store.dispatch('setNoteableData', loggedOutnoteableData);
store.dispatch('setNotesData', notesDataMock);
wrapper = mount(localVue.extend(noteableDiscussion), {
wrapper = mount(NoteableDiscussion, {
store,
propsData: { discussion: discussionMock },
localVue,
});
});
......
spec/frontend/pipelines/graph/graph_component_legacy_spec.js
View file @ e00f7f1c
import Vue from 'vue';
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import { setHTMLFixture } from 'helpers/fixtures';
......@@ -153,21 +153,20 @@ describe('graph component', () => {
describe('triggered by', () => {
describe('on click', () => {
it('should emit `onClickUpstreamPipeline` when triggered by linked pipeline is clicked', () => {
it('should emit `onClickUpstreamPipeline` when triggered by linked pipeline is clicked', async () => {
const btnWrapper = findExpandPipelineBtn();
btnWrapper.trigger('click');
btnWrapper.vm.$nextTick(() => {
await nextTick();
expect(wrapper.emitted().onClickUpstreamPipeline).toEqual([
store.state.pipeline.triggered_by,
]);
});
});
});
describe('with expanded pipeline', () => {
it('should render expanded pipeline', (done) => {
it('should render expanded pipeline', async () => {
// expand the pipeline
store.state.pipeline.triggered_by[0].isExpanded = true;
......@@ -179,40 +178,46 @@ describe('graph component', () => {
},
});
Vue.nextTick()
.then(() => {
await nextTick();
expect(wrapper.find('.js-upstream-pipeline-12').exists()).toBe(true);
})
.then(done)
.catch(done.fail);
});
});
});
describe('triggered', () => {
describe('on click', () => {
it('should emit `onClickTriggered`', () => {
// We have to mock this method since we do both style change and
// emit and event, not mocking returns an error.
wrapper.setMethods({
handleClickedDownstream: jest.fn(() =>
wrapper.vm.$emit('onClickTriggered', ...store.state.pipeline.triggered),
),
// We have to mock this property of HTMLElement since component relies on it
let offsetParentDescriptor;
beforeAll(() => {
offsetParentDescriptor = Object.getOwnPropertyDescriptor(
HTMLElement.prototype,
'offsetParent',
);
Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
get() {
return this.parentNode;
},
});
});
afterAll(() => {
Object.defineProperty(HTMLElement.prototype, offsetParentDescriptor);
});
it('should emit `onClickDownstreamPipeline`', async () => {
const btnWrappers = findAllExpandPipelineBtns();
const downstreamBtnWrapper = btnWrappers.at(btnWrappers.length - 1);
downstreamBtnWrapper.trigger('click');
downstreamBtnWrapper.vm.$nextTick(() => {
expect(wrapper.emitted().onClickTriggered).toEqual([store.state.pipeline.triggered]);
});
await nextTick();
expect(wrapper.emitted().onClickDownstreamPipeline).toEqual([
[store.state.pipeline.triggered[1]],
]);
});
});
describe('with expanded pipeline', () => {
it('should render expanded pipeline', (done) => {
it('should render expanded pipeline', async () => {
// expand the pipeline
store.state.pipeline.triggered[0].isExpanded = true;
......@@ -224,12 +229,8 @@ describe('graph component', () => {
},
});
Vue.nextTick()
.then(() => {
await nextTick();
expect(wrapper.find('.js-downstream-pipeline-34993051')).not.toBeNull();
})
.then(done)
.catch(done.fail);
});
});
......
spec/frontend/pipelines/stage_spec.js
View file @ e00f7f1c
import 'bootstrap/js/dist/dropdown';
import { mount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import waitForPromises from 'helpers/wait_for_promises';
import axios from '~/lib/utils/axios_utils';
import StageComponent from '~/pipelines/components/pipelines_list/stage.vue';
import eventHub from '~/pipelines/event_hub';
......@@ -22,8 +22,11 @@ describe('Pipelines stage component', () => {
updateDropdown: false,
};
const isDropdownOpen = () => wrapper.classes('show');
const createComponent = (props = {}) => {
wrapper = mount(StageComponent, {
attachToDocument: true,
propsData: {
...defaultProps,
...props,
......@@ -60,11 +63,11 @@ describe('Pipelines stage component', () => {
createComponent();
});
it('should render the received data and emit `clickedDropdown` event', () => {
it('should render the received data and emit `clickedDropdown` event', async () => {
jest.spyOn(eventHub, '$emit');
wrapper.find('button').trigger('click');
return waitForPromises().then(() => {
await axios.waitForAll();
expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
stageReply.latest_statuses[0].name,
);
......@@ -72,26 +75,17 @@ describe('Pipelines stage component', () => {
expect(eventHub.$emit).toHaveBeenCalledWith('clickedDropdown');
});
});
});
describe('when request fails', () => {
beforeEach(() => {
it('when request fails should close the dropdown', async () => {
mock.onGet('path.json').reply(500);
createComponent();
});
it('should close the dropdown', () => {
wrapper.setMethods({
closeDropdown: jest.fn(),
isDropdownOpen: jest.fn().mockReturnValue(false),
});
wrapper.find({ ref: 'dropdown' }).trigger('click');
expect(isDropdownOpen()).toBe(true);
wrapper.find('button').trigger('click');
await axios.waitForAll();
return waitForPromises().then(() => {
expect(wrapper.vm.closeDropdown).toHaveBeenCalled();
});
});
expect(isDropdownOpen()).toBe(false);
});
describe('update endpoint correctly', () => {
......@@ -109,48 +103,39 @@ describe('Pipelines stage component', () => {
dropdown_path: 'bar.json',
},
});
return axios.waitForAll();
});
it('should update the stage to request the new endpoint provided', () => {
return wrapper.vm
.$nextTick()
.then(() => {
it('should update the stage to request the new endpoint provided', async () => {
wrapper.find('button').trigger('click');
return waitForPromises();
})
.then(() => {
await axios.waitForAll();
expect(wrapper.find('.js-builds-dropdown-container ul').text()).toContain(
'this is the updated content',
);
});
});
});
describe('pipelineActionRequestComplete', () => {
beforeEach(() => {
mock.onGet('path.json').reply(200, stageReply);
mock.onPost(`${stageReply.latest_statuses[0].status.action.path}.json`).reply(200);
createComponent({ type: 'PIPELINES_TABLE' });
});
describe('within pipeline table', () => {
it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', () => {
it('emits `refreshPipelinesTable` event when `pipelineActionRequestComplete` is triggered', async () => {
jest.spyOn(eventHub, '$emit');
wrapper.find('button').trigger('click');
await axios.waitForAll();
return waitForPromises()
.then(() => {
wrapper.find('.js-ci-action').trigger('click');
await axios.waitForAll();
return waitForPromises();
})
.then(() => {
expect(eventHub.$emit).toHaveBeenCalledWith('refreshPipelinesTable');
});
});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7