Commit 6028d4da authored by Martin Wortschack's avatar Martin Wortschack

Merge branch 'himkp-jest-vue-shared' into 'master'

Migrate some spec/javascripts/vue_shared specs to Jest

See merge request gitlab-org/gitlab!31393
parents d40d598b 37dd9a77
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import ciBadge from '~/vue_shared/components/ci_badge_link.vue';
describe('CI Badge Link Component', () => {
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import ciIcon from '~/vue_shared/components/ci_icon.vue';
describe('CI Icon component', () => {
......
import Vue from 'vue';
import MockAdapter from 'axios-mock-adapter';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import waitForPromises from 'spec/helpers/wait_for_promises';
import mountComponent from 'helpers/vue_mount_component_helper';
import waitForPromises from 'helpers/wait_for_promises';
import { GREEN_BOX_IMAGE_URL } from 'spec/test_constants';
import axios from '~/lib/utils/axios_utils';
import contentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
......@@ -96,7 +96,7 @@ describe('ContentViewer', () => {
it('markdown preview receives the file path as a parameter', done => {
mock = new MockAdapter(axios);
spyOn(axios, 'post').and.callThrough();
jest.spyOn(axios, 'post');
mock.onPost(`${gon.relative_url_root}/testproject/preview_markdown`).reply(200, {
body: '<b>testing</b>',
});
......@@ -114,7 +114,7 @@ describe('ContentViewer', () => {
expect(axios.post).toHaveBeenCalledWith(
`${gon.relative_url_root}/testproject/preview_markdown`,
{ path: 'foo/test.md', text: '* Test' },
jasmine.any(Object),
expect.any(Object),
);
})
.then(done)
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
import diffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
......@@ -32,7 +32,7 @@ describe('DiffViewer', () => {
createComponent({ ...requiredProps, projectPath: '' });
setTimeout(() => {
setImmediate(() => {
expect(vm.$el.querySelector('.deleted img').getAttribute('src')).toBe(
`//-/raw/DEF/${RED_BOX_IMAGE_URL}`,
);
......@@ -53,7 +53,7 @@ describe('DiffViewer', () => {
oldPath: 'testold.abc',
});
setTimeout(() => {
setImmediate(() => {
expect(vm.$el.querySelector('.deleted .file-info').textContent.trim()).toContain(
'testold.abc',
);
......
import Vue from 'vue';
import { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
import { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
import dropdownButtonComponent from '~/vue_shared/components/dropdown/dropdown_button.vue';
const defaultLabel = 'Select';
......@@ -74,7 +74,7 @@ describe('DropdownButtonComponent', () => {
},
);
expect(vm.$el).not.toContainElement('.dropdown-toggle-text');
expect(vm.$el.querySelector('.dropdown-toggle-text')).toBeNull();
expect(vm.$el).toHaveText('Lorem Ipsum Dolar');
});
});
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import dropdownHiddenInputComponent from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
import { mockLabels } from './mock_data';
......
import Vue from 'vue';
import { file } from 'spec/ide/helpers';
import { file } from 'jest/ide/helpers';
import ItemComponent from '~/vue_shared/components/file_finder/item.vue';
import createComponent from '../../../helpers/vue_mount_component_helper';
import createComponent from 'helpers/vue_mount_component_helper';
describe('File finder item spec', () => {
const Component = Vue.extend(ItemComponent);
......@@ -75,7 +75,7 @@ describe('File finder item spec', () => {
});
it('emits event when clicked', () => {
spyOn(vm, '$emit');
jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.$el.click();
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import component from '~/vue_shared/components/filtered_search_dropdown.vue';
describe('Filtered search dropdown', () => {
......@@ -125,7 +125,7 @@ describe('Filtered search dropdown', () => {
describe('on click create button', () => {
it('emits createItem event with the filter', done => {
spyOn(vm, '$emit');
jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.$nextTick(() => {
vm.$el.querySelector('.js-dropdown-create-button').click();
......
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import Vue from 'vue';
import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
......@@ -8,13 +8,12 @@ describe('GlCountdown', () => {
let now = '2000-01-01T00:00:00Z';
beforeEach(() => {
spyOn(Date, 'now').and.callFake(() => new Date(now).getTime());
jasmine.clock().install();
jest.spyOn(Date, 'now').mockImplementation(() => new Date(now).getTime());
});
afterEach(() => {
vm.$destroy();
jasmine.clock().uninstall();
jest.clearAllTimers();
});
describe('when there is time remaining', () => {
......@@ -29,16 +28,16 @@ describe('GlCountdown', () => {
});
it('displays remaining time', () => {
expect(vm.$el).toContainText('01:02:03');
expect(vm.$el.textContent).toContain('01:02:03');
});
it('updates remaining time', done => {
now = '2000-01-01T00:00:01Z';
jasmine.clock().tick(1000);
jest.advanceTimersByTime(1000);
Vue.nextTick()
.then(() => {
expect(vm.$el).toContainText('01:02:02');
expect(vm.$el.textContent).toContain('01:02:02');
done();
})
.catch(done.fail);
......@@ -57,19 +56,26 @@ describe('GlCountdown', () => {
});
it('displays 00:00:00', () => {
expect(vm.$el).toContainText('00:00:00');
expect(vm.$el.textContent).toContain('00:00:00');
});
});
describe('when an invalid date is passed', () => {
beforeEach(() => {
Vue.config.warnHandler = jest.fn();
});
afterEach(() => {
Vue.config.warnHandler = null;
});
it('throws a validation error', () => {
spyOn(Vue.config, 'warnHandler').and.stub();
vm = mountComponent(Component, {
endDateString: 'this is invalid',
});
expect(Vue.config.warnHandler).toHaveBeenCalledTimes(1);
const [errorMessage] = Vue.config.warnHandler.calls.argsFor(0);
const [errorMessage] = Vue.config.warnHandler.mock.calls[0];
expect(errorMessage).toMatch(/^Invalid prop: .* "endDateString"/);
});
......
import Vue from 'vue';
import mountComponent, { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
import headerCi from '~/vue_shared/components/header_ci_component.vue';
describe('Header CI Component', () => {
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import toolbar from '~/vue_shared/components/markdown/toolbar.vue';
describe('toolbar', () => {
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import navigationTabs from '~/vue_shared/components/navigation_tabs.vue';
describe('navigation tabs component', () => {
......@@ -56,7 +56,7 @@ describe('navigation tabs component', () => {
});
it('should trigger onTabClick', () => {
spyOn(vm, '$emit');
jest.spyOn(vm, '$emit').mockImplementation(() => {});
vm.$el.querySelector('.js-pipelines-tab-pending').click();
expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending');
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import datePicker from '~/vue_shared/components/pikaday.vue';
describe('datePicker', () => {
......@@ -20,7 +20,7 @@ describe('datePicker', () => {
});
it('should toggle when dropdown is clicked', () => {
const hidePicker = jasmine.createSpy();
const hidePicker = jest.fn();
vm.$on('hidePicker', hidePicker);
vm.$el.querySelector('.dropdown-menu-toggle').click();
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import { projectData } from 'spec/ide/mock_data';
import mountComponent from 'helpers/vue_mount_component_helper';
import { projectData } from 'jest/ide/mock_data';
import { TEST_HOST } from 'spec/test_constants';
import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue';
......@@ -48,8 +48,8 @@ describe('ProjectAvatarDefault component', () => {
vm.$nextTick()
.then(() => {
expect(vm.$el).toContainElement('.avatar');
expect(vm.$el).not.toContainElement('.identicon');
expect(vm.$el.querySelector('.avatar')).not.toBeNull();
expect(vm.$el.querySelector('.identicon')).toBeNull();
expect(vm.$el.querySelector('img')).toHaveAttr('src', avatarUrl);
})
.then(done)
......
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { trimText } from 'spec/helpers/text_helper';
import { trimText } from 'helpers/text_helper';
import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
const localVue = createLocalVue();
......@@ -9,7 +9,7 @@ describe('ProjectListItem component', () => {
let wrapper;
let vm;
let options;
loadJSONFixtures('static/projects.json');
const project = getJSONFixture('static/projects.json')[0];
beforeEach(() => {
......@@ -44,7 +44,7 @@ describe('ProjectListItem component', () => {
wrapper = shallowMount(Component, options);
({ vm } = wrapper);
spyOn(vm, '$emit');
jest.spyOn(vm, '$emit').mockImplementation(() => {});
wrapper.vm.onClick();
expect(wrapper.vm.$emit).toHaveBeenCalledWith('click');
......@@ -95,7 +95,7 @@ describe('ProjectListItem component', () => {
});
it('prevents search query and project name XSS', () => {
const alertSpy = spyOn(window, 'alert');
const alertSpy = jest.spyOn(window, 'alert');
options.propsData.project.name = "my-xss-pro<script>alert('XSS');</script>ject";
options.propsData.matcher = "pro<script>alert('XSS');</script>";
......
......@@ -4,10 +4,7 @@ import { shallowMount } from '@vue/test-utils';
import LabelsSelect from '~/labels_select';
import BaseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
import {
mockConfig,
mockLabels,
} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockConfig, mockLabels } from './mock_data';
const createComponent = (config = mockConfig) =>
shallowMount(BaseComponent, {
......
......@@ -3,10 +3,7 @@ import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue';
import {
mockConfig,
mockLabels,
} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockConfig, mockLabels } from './mock_data';
const componentConfig = {
...mockConfig,
......
......@@ -3,7 +3,7 @@ import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue';
import { mockSuggestedColors } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockSuggestedColors } from './mock_data';
const createComponent = headerTitle => {
const Component = Vue.extend(dropdownCreateLabelComponent);
......
......@@ -3,7 +3,7 @@ import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue';
import { mockConfig } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockConfig } from './mock_data';
const createComponent = (
labelsWebUrl = mockConfig.labelsWebUrl,
......
......@@ -3,7 +3,7 @@ import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
import { mockLabels } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockLabels } from './mock_data';
const createComponent = (labels = mockLabels) => {
const Component = Vue.extend(dropdownValueCollapsedComponent);
......
......@@ -2,10 +2,7 @@ import { mount } from '@vue/test-utils';
import DropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
import { GlLabel } from '@gitlab/ui';
import {
mockConfig,
mockLabels,
} from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data';
import { mockConfig, mockLabels } from './mock_data';
const createComponent = (
labels = mockLabels,
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
const createComponent = config => {
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import Tab from '~/vue_shared/components/tabs/tab.vue';
describe('Tab component', () => {
......
......@@ -5,28 +5,23 @@ import Tab from '~/vue_shared/components/tabs/tab.vue';
describe('Tabs component', () => {
let vm;
beforeEach(done => {
beforeEach(() => {
vm = new Vue({
components: {
Tabs,
Tab,
},
template: `
<div>
<tabs>
<tab title="Testing" active>
First tab
</tab>
<tab>
<template slot="title">Test slot</template>
Second tab
</tab>
</tabs>
</div>
`,
render(h) {
return h('div', [
h('tabs', [
h('tab', { attrs: { title: 'Testing', active: true } }, 'First tab'),
h('tab', [h('template', { slot: 'title' }, 'Test slot'), 'Second tab']),
]),
]);
},
}).$mount();
setTimeout(done);
return vm.$nextTick();
});
describe('tab links', () => {
......@@ -46,14 +41,12 @@ describe('Tabs component', () => {
expect(vm.$el.querySelector('a').classList).toContain('active');
});
it('updates active class on click', done => {
it('updates active class on click', () => {
vm.$el.querySelectorAll('a')[1].click();
setTimeout(() => {
return vm.$nextTick(() => {
expect(vm.$el.querySelector('a').classList).not.toContain('active');
expect(vm.$el.querySelectorAll('a')[1].classList).toContain('active');
done();
});
});
});
......
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import toggleButton from '~/vue_shared/components/toggle_button.vue';
describe('Toggle Button', () => {
......@@ -42,7 +42,7 @@ describe('Toggle Button', () => {
value: true,
});
spyOn(vm, '$emit');
jest.spyOn(vm, '$emit').mockImplementation(() => {});
});
it('renders is checked class', () => {
......@@ -72,7 +72,7 @@ describe('Toggle Button', () => {
value: true,
disabledInput: true,
});
spyOn(vm, '$emit');
jest.spyOn(vm, '$emit').mockImplementation(() => {});
});
it('renders disabled button', () => {
......
import { shallowMount } from '@vue/test-utils';
import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue';
describe('User Avatar Svg Component', () => {
describe('Initialization', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(UserAvatarSvg, {
propsData: {
size: 99,
svg:
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1.707 15.707C1.077z"/></svg>',
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('should have <svg> as a child element', () => {
expect(wrapper.element.tagName).toEqual('svg');
expect(wrapper.html()).toContain('<path');
});
});
});
import Vue from 'vue';
import avatarSvg from 'icons/_icon_random.svg';
import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue';
const UserAvatarSvgComponent = Vue.extend(UserAvatarSvg);
describe('User Avatar Svg Component', function() {
describe('Initialization', function() {
beforeEach(function() {
this.propsData = {
size: 99,
svg: avatarSvg,
};
this.userAvatarSvg = new UserAvatarSvgComponent({
propsData: this.propsData,
}).$mount();
});
it('should return a defined Vue component', function() {
expect(this.userAvatarSvg).toBeDefined();
});
it('should have <svg> as a child element', function() {
expect(this.userAvatarSvg.$el.tagName).toEqual('svg');
expect(this.userAvatarSvg.$el.innerHTML).toContain('<path');
});
});
});
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