Commit 28046a19 authored by Mike Greiling's avatar Mike Greiling

Merge branch 'fe-fix-karma-vue-test-utils-violations' into 'master'

Fe fix karma vue test utils violations

Closes #32213

See merge request gitlab-org/gitlab!18765
parents 41f1591b eb55ed89
......@@ -4,11 +4,12 @@ import { GlPopover, GlLink } from '@gitlab/ui';
import { TEST_HOST } from 'helpers/test_constants';
import component from 'ee/approvals/components/approval_check_popover.vue';
const localVue = createLocalVue();
describe('Approval Check Popover', () => {
let wrapper;
beforeEach(() => {
const localVue = createLocalVue();
wrapper = shallowMount(component, {
localVue,
propsData: {
......
......@@ -4,21 +4,21 @@ import noteActions from '~/notes/components/note_actions.vue';
import { TEST_HOST } from 'spec/test_constants';
import { userDataMock } from '../../../../spec/frontend/notes/mock_data';
const localVue = createLocalVue();
describe('noteActions', () => {
let wrapper;
let store;
let props;
const createWrapper = propsData => {
const localVue = createLocalVue();
return shallowMount(noteActions, {
const createWrapper = propsData =>
shallowMount(localVue.extend(noteActions), {
store,
propsData,
localVue,
sync: false,
attachToDocument: true,
});
};
beforeEach(() => {
store = createStore();
......
......@@ -28,9 +28,10 @@ const mockItem = Object.assign({}, mockIssue1, {
assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
});
const localVue = createLocalVue();
const createComponent = (parentItem = mockParentItem, item = mockItem) => {
const store = createDefaultStore();
const localVue = createLocalVue();
const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
store.dispatch('setInitialParentItem', mockParentItem);
......
......@@ -23,9 +23,10 @@ const mockItem = Object.assign({}, mockEpic1, {
pathIdSeparator: PathIdSeparator.Epic,
});
const localVue = createLocalVue();
const createComponent = (parentItem = mockParentItem, item = mockItem) => {
const store = createDefaultStore();
const localVue = createLocalVue();
const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
store.dispatch('setInitialParentItem', mockParentItem);
......@@ -44,7 +45,7 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
isSubItem: true,
});
return shallowMount(TreeItem, {
return shallowMount(localVue.extend(TreeItem), {
localVue,
store,
stubs: {
......@@ -54,6 +55,7 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
parentItem,
item,
},
sync: false,
});
};
......
......@@ -22,7 +22,12 @@ describe('Batch comments diff file drafts component', () => {
},
});
vm = shallowMount(DiffFileDrafts, { store, localVue, propsData: { fileHash: 'filehash' } });
vm = shallowMount(localVue.extend(DiffFileDrafts), {
store,
localVue,
propsData: { fileHash: 'filehash' },
sync: false,
});
}
afterEach(() => {
......
......@@ -5,6 +5,8 @@ import { createStore } from 'ee/batch_comments/stores';
import '~/behaviors/markdown/render_gfm';
import { createDraft } from '../mock_data';
const localVue = createLocalVue();
describe('Batch comments draft note component', () => {
let wrapper;
let draft;
......@@ -14,8 +16,7 @@ describe('Batch comments draft note component', () => {
draft = createDraft();
const localVue = createLocalVue();
wrapper = shallowMount(DraftNote, {
wrapper = shallowMount(localVue.extend(DraftNote), {
store,
propsData: { draft },
sync: false,
......
......@@ -17,7 +17,7 @@ describe('CustomMetricsForm', () => {
legend: '',
},
}) {
wrapper = shallowMount(CustomMetricsForm, {
wrapper = shallowMount(localVue.extend(CustomMetricsForm), {
localVue,
sync: false,
propsData: {
......
import Vue from 'vue';
import IssuesAnalytics from 'ee/issues_analytics/components/issues_analytics.vue';
import EmptyState from 'ee/issues_analytics/components/empty_state.vue';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { createStore } from 'ee/issues_analytics/stores';
const localVue = createLocalVue();
describe('Issues Analytics component', () => {
let vm;
let store;
let mountComponent;
const Component = Vue.extend(IssuesAnalytics);
const mockChartData = { '2017-11': 0, '2017-12': 2 };
beforeEach(() => {
......@@ -22,13 +22,14 @@ describe('Issues Analytics component', () => {
filterBlockEl: document.querySelector('#mock-filter'),
};
return shallowMount(Component, {
return shallowMount(localVue.extend(IssuesAnalytics), {
propsData: props,
stubs: {
GlColumnChart: true,
EmptyState,
},
store,
localVue,
}).vm;
};
......
......@@ -14,12 +14,25 @@ import propsData from 'spec/monitoring/components/dashboard_spec';
import CustomMetricsFormFields from 'ee/custom_metrics/components/custom_metrics_form_fields.vue';
import * as types from '~/monitoring/stores/mutation_types';
const localVue = createLocalVue();
describe('Dashboard', () => {
let Component;
let mock;
let store;
let vm;
const localVue = createLocalVue();
const createComponent = (props = {}) => {
vm = shallowMount(localVue.extend(Component), {
propsData: {
...propsData,
...props,
},
store,
sync: false,
localVue,
});
};
beforeEach(() => {
setFixtures(`
......@@ -60,52 +73,37 @@ describe('Dashboard', () => {
describe('add custom metrics', () => {
describe('when not available', () => {
beforeEach(() => {
vm = shallowMount(Component, {
propsData: {
...propsData,
customMetricsAvailable: false,
customMetricsPath: '/endpoint',
hasMetrics: true,
prometheusAlertsAvailable: true,
alertsEndpoint: '/endpoint',
},
store,
createComponent({
customMetricsAvailable: false,
customMetricsPath: '/endpoint',
hasMetrics: true,
prometheusAlertsAvailable: true,
alertsEndpoint: '/endpoint',
});
});
it('does not render add button on the dashboard', done => {
setTimeout(() => {
expect(vm.element.querySelector('.js-add-metric-button')).toBe(null);
done();
});
it('does not render add button on the dashboard', () => {
expect(vm.element.querySelector('.js-add-metric-button')).toBe(null);
});
});
describe('when available', () => {
beforeEach(() => {
vm = shallowMount(Component, {
propsData: {
...propsData,
customMetricsAvailable: true,
customMetricsPath: '/endpoint',
hasMetrics: true,
prometheusAlertsAvailable: true,
alertsEndpoint: '/endpoint',
},
store,
beforeEach(done => {
createComponent({
customMetricsAvailable: true,
customMetricsPath: '/endpoint',
hasMetrics: true,
prometheusAlertsAvailable: true,
alertsEndpoint: '/endpoint',
});
setupComponentStore(vm);
});
it('renders add button on the dashboard', done => {
localVue.nextTick(() => {
expect(vm.element.querySelector('.js-add-metric-button').innerText).toContain(
'Add metric',
);
vm.vm.$nextTick(done);
});
done();
});
it('renders add button on the dashboard', () => {
expect(vm.element.querySelector('.js-add-metric-button').innerText).toContain('Add metric');
});
it('uses modal for custom metrics form', () => {
......
import component from 'ee/onboarding/onboarding_helper/components/action_popover.vue';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import eventHub from 'ee/onboarding/onboarding_helper/event_hub';
const localVue = createLocalVue();
describe('User onboarding action popover', () => {
let wrapper;
let props;
......@@ -11,29 +13,29 @@ describe('User onboarding action popover', () => {
const placement = 'top';
const showDefault = true;
beforeEach(() => {
const createComponent = () => {
props = {
target,
content,
placement,
showDefault,
};
wrapper = shallowMount(component, {
wrapper = shallowMount(localVue.extend(component), {
propsData: props,
sync: false,
localVue,
});
});
};
afterEach(() => {
wrapper.destroy();
});
describe('mounted', () => {
describe('when mounted', () => {
it("binds 'onboardingHelper.showActionPopover', 'onboardingHelper.hideActionPopover' and 'onboardingHelper.destroyActionPopover' event listener on eventHub", () => {
spyOn(eventHub, '$on');
const wrapperX = shallowMount(component, {
propsData: props,
});
createComponent();
expect(eventHub.$on).toHaveBeenCalledWith(
'onboardingHelper.showActionPopover',
......@@ -49,38 +51,42 @@ describe('User onboarding action popover', () => {
'onboardingHelper.destroyActionPopover',
jasmine.any(Function),
);
wrapperX.destroy();
});
});
describe('beforeDestroy', () => {
it("unbinds 'showActionPopover', 'hideActionPopover' and 'destroyActionPopover' event handler", () => {
spyOn(eventHub, '$off');
describe('after mount', () => {
beforeEach(() => {
createComponent();
});
describe('beforeDestroy', () => {
it("unbinds 'showActionPopover', 'hideActionPopover' and 'destroyActionPopover' event handler", () => {
spyOn(eventHub, '$off');
wrapper.destroy();
wrapper.destroy();
expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.showActionPopover');
expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.hideActionPopover');
expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.destroyActionPopover');
expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.showActionPopover');
expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.hideActionPopover');
expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.destroyActionPopover');
});
});
});
describe('methods', () => {
describe('toggleShowPopover', () => {
it('updates the showPopover property', () => {
wrapper.vm.showPopover = false;
describe('methods', () => {
describe('toggleShowPopover', () => {
it('updates the showPopover property', () => {
wrapper.vm.showPopover = false;
wrapper.vm.toggleShowPopover(true);
wrapper.vm.toggleShowPopover(true);
expect(wrapper.vm.showPopover).toBeTruthy();
expect(wrapper.vm.showPopover).toBeTruthy();
});
});
});
});
describe('template', () => {
it('shows the content passed in as prop', () => {
expect(wrapper.text()).toEqual(content);
describe('template', () => {
it('shows the content passed in as prop', () => {
expect(wrapper.text()).toEqual(content);
});
});
});
});
import component from 'ee/onboarding/onboarding_helper/components/help_content_popover.vue';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
const localVue = createLocalVue();
describe('User onboarding help content popover', () => {
let wrapper;
......@@ -42,7 +44,7 @@ describe('User onboarding help content popover', () => {
};
function createComponent(propsData) {
wrapper = shallowMount(component, { propsData });
wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
}
afterEach(() => {
......
import component from 'ee/onboarding/onboarding_helper/components/onboarding_helper.vue';
import TourPartsList from 'ee/onboarding/onboarding_helper/components/tour_parts_list.vue';
import Icon from '~/vue_shared/components/icon.vue';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlProgressBar, GlLoadingIcon } from '@gitlab/ui';
import Tracking from '~/tracking';
const localVue = createLocalVue();
describe('User onboarding tour parts list', () => {
let wrapper;
......@@ -29,7 +31,7 @@ describe('User onboarding tour parts list', () => {
};
function createComponent(propsData) {
wrapper = shallowMount(component, { propsData });
wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
}
beforeEach(() => {
......@@ -125,10 +127,16 @@ describe('User onboarding tour parts list', () => {
describe('watch', () => {
describe('watch initialShow', () => {
it('sets showPopover to true if initialShow is true', () => {
it('sets showPopover to true if initialShow is true', done => {
wrapper.setProps({ initialShow: true });
expect(wrapper.vm.showPopover).toBe(true);
wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.vm.showPopover).toBe(true);
})
.then(done)
.catch(done.fail);
});
});
......@@ -314,7 +322,7 @@ describe('User onboarding tour parts list', () => {
expect(wrapper.find('.qa-toggle-btn').exists()).toBe(true);
});
it('renders the proper toggle button icons', () => {
it('renders the proper toggle button icons', done => {
const btn = wrapper.find('.qa-toggle-btn');
const icon = btn.find(Icon);
......@@ -322,7 +330,13 @@ describe('User onboarding tour parts list', () => {
wrapper.vm.expanded = true;
expect(icon.props('name')).toEqual('close');
wrapper.vm
.$nextTick()
.then(() => {
expect(icon.props('name')).toEqual('close');
})
.then(done)
.catch(done.fail);
});
it('renders the tour parts list if there are tour titles', () => {
......
import component from 'ee/onboarding/onboarding_helper/components/tour_parts_list.vue';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
const localVue = createLocalVue();
describe('User onboarding tour parts list', () => {
let wrapper;
......@@ -18,7 +20,7 @@ describe('User onboarding tour parts list', () => {
let tourItems;
function createComponent(propsData) {
wrapper = shallowMount(component, { propsData });
wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
}
beforeEach(() => {
......
......@@ -3,9 +3,11 @@ import component from 'ee/onboarding/onboarding_welcome/components/welcome_page.
import ActionPopover from 'ee/onboarding/onboarding_helper/components/action_popover.vue';
import HelpContentPopover from 'ee/onboarding/onboarding_helper/components/help_content_popover.vue';
import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import onboardingUtils from 'ee/onboarding/utils';
const localVue = createLocalVue();
describe('User onboarding welcome page', () => {
let wrapper;
const props = {
......@@ -16,7 +18,7 @@ describe('User onboarding welcome page', () => {
};
function createComponent(propsData) {
wrapper = shallowMount(component, { propsData });
wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
}
afterEach(() => {
......
......@@ -14,14 +14,17 @@ describe('project component', () => {
const ProjectComponent = localVue.extend(Project);
let wrapper;
beforeEach(() => {
const createComponent = (props = {}) => {
wrapper = shallowMount(ProjectComponent, {
sync: false,
store,
localVue,
propsData: { project: mockOneProject },
propsData: {
project: mockOneProject,
...props,
},
});
});
};
afterEach(() => {
wrapper.destroy();
......@@ -37,12 +40,8 @@ describe('project component', () => {
upgrade_required: true,
upgrade_path: '/upgrade',
};
wrapper = shallowMount(ProjectComponent, {
sync: false,
store,
localVue,
propsData: { project },
});
createComponent({ project });
});
it('shows project title', () => {
......@@ -72,12 +71,8 @@ describe('project component', () => {
upgrade_required: true,
upgrade_path: '',
};
wrapper = shallowMount(ProjectComponent, {
sync: false,
store,
localVue,
propsData: { project },
});
createComponent({ project });
});
it('shows upgrade license text', () => {
......@@ -91,6 +86,10 @@ describe('project component', () => {
});
describe('wrapped components', () => {
beforeEach(() => {
createComponent();
});
describe('project header', () => {
it('binds project', () => {
const header = wrapper.find(ProjectHeader);
......
......@@ -3,16 +3,16 @@ import { GlButton } from '@gitlab/ui';
import CreateEpicForm from 'ee/related_items_tree/components/create_epic_form.vue';
const createComponent = (isSubmitting = false) => {
const localVue = createLocalVue();
const localVue = createLocalVue();
return mount(CreateEpicForm, {
const createComponent = (isSubmitting = false) =>
mount(localVue.extend(CreateEpicForm), {
localVue,
propsData: {
isSubmitting,
},
sync: false,
});
};
describe('RelatedItemsTree', () => {
describe('CreateEpicForm', () => {
......
......@@ -11,16 +11,18 @@ import IssueActionsSplitButton from 'ee/related_items_tree/components/issue_acti
import { mockInitialConfig, mockParentItem } from '../mock_data';
const localVue = createLocalVue();
const createComponent = () => {
const store = createDefaultStore();
const localVue = createLocalVue();
store.dispatch('setInitialConfig', mockInitialConfig);
store.dispatch('setInitialParentItem', mockParentItem);
return shallowMount(RelatedItemsTreeApp, {
return shallowMount(localVue.extend(RelatedItemsTreeApp), {
localVue,
store,
sync: false,
});
};
......
......@@ -4,10 +4,10 @@ import RelatedItemsBody from 'ee/related_items_tree/components/related_items_tre
import { mockParentItem } from '../mock_data';
const createComponent = (parentItem = mockParentItem, children = []) => {
const localVue = createLocalVue();
const localVue = createLocalVue();
return shallowMount(RelatedItemsBody, {
const createComponent = (parentItem = mockParentItem, children = []) =>
shallowMount(localVue.extend(RelatedItemsBody), {
localVue,
stubs: {
'tree-root': true,
......@@ -16,8 +16,8 @@ const createComponent = (parentItem = mockParentItem, children = []) => {
parentItem,
children,
},
sync: false,
});
};
describe('RelatedItemsTree', () => {
describe('RelatedTreeBody', () => {
......
......@@ -14,16 +14,16 @@ const mockClosedAt = `${currentDate.getFullYear() - 1}-${currentDate.getMonth()
1}-${currentDate.getDate()}`;
const mockClosedAtYear = currentDate.getFullYear() - 1;
const localVue = createLocalVue();
const createComponent = ({
getTargetRef = () => {},
isOpen = false,
state = 'closed',
createdAt = mockCreatedAt,
closedAt = mockClosedAt,
}) => {
const localVue = createLocalVue();
return shallowMount(StateTooltip, {
}) =>
shallowMount(localVue.extend(StateTooltip), {
localVue,
propsData: {
getTargetRef,
......@@ -32,8 +32,8 @@ const createComponent = ({
createdAt,
closedAt,
},
sync: false,
});
};
describe('RelatedItemsTree', () => {
describe('RelatedItemsTreeHeader', () => {
......
......@@ -16,9 +16,10 @@ const mockItem = Object.assign({}, mockIssue1, {
assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
});
const localVue = createLocalVue();
const createComponent = (parentItem = mockParentItem, item = mockItem) => {
const store = createDefaultStore();
const localVue = createLocalVue();
const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
store.dispatch('setInitialParentItem', mockParentItem);
......@@ -36,9 +37,10 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
item,
});
return shallowMount(TreeItemRemoveModal, {
return shallowMount(localVue.extend(TreeItemRemoveModal), {
localVue,
store,
sync: false,
});
};
......
......@@ -18,13 +18,14 @@ import {
const { epic } = mockQueryResponse.data.group;
const localVue = createLocalVue();
const createComponent = ({
parentItem = mockParentItem,
epicPageInfo = epic.children.pageInfo,
issuesPageInfo = epic.issues.pageInfo,
} = {}) => {
const store = createDefaultStore();
const localVue = createLocalVue();
const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
store.dispatch('setInitialParentItem', mockParentItem);
......@@ -44,7 +45,7 @@ const createComponent = ({
pageInfo: issuesPageInfo,
});
return shallowMount(TreeRoot, {
return shallowMount(localVue.extend(TreeRoot), {
localVue,
store,
stubs: {
......@@ -55,6 +56,7 @@ const createComponent = ({
parentItem,
children,
},
sync: false,
});
};
......
import Vue from 'vue';
import component from 'ee/security_dashboard/components/vulnerability_chart_buttons.vue';
import { DAYS } from 'ee/security_dashboard/store/modules/vulnerabilities/constants';
import { shallowMount, mount } from '@vue/test-utils';
import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
const localVue = createLocalVue();
describe('Vulnerability Chart Buttons', () => {
let wrapper;
const Component = Vue.extend(component);
const days = [DAYS.THIRTY, DAYS.SIXTY, DAYS.NINETY];
const createWrapper = (props = {}, mountfn = shallowMount) => {
wrapper = mountfn(localVue.extend(Component), {
propsData: { days, ...props },
localVue,
sync: false,
});
};
afterEach(() => {
wrapper.destroy();
});
describe('when rendering the buttons', () => {
it('should render with 90 days selected', () => {
const activeDay = DAYS.NINETY;
const wrapper = shallowMount(Component, { propsData: { days, activeDay } });
createWrapper({ activeDay });
const activeButton = wrapper.find('[data-days="90"].active');
expect(activeButton.attributes('data-days')).toMatch('90');
......@@ -18,7 +34,8 @@ describe('Vulnerability Chart Buttons', () => {
it('should render with 60 days selected', () => {
const activeDay = DAYS.SIXTY;
const wrapper = shallowMount(Component, { propsData: { days, activeDay } });
createWrapper({ activeDay });
const activeButton = wrapper.find('[data-days="60"].active');
expect(activeButton.attributes('data-days')).toMatch('60');
......@@ -26,7 +43,8 @@ describe('Vulnerability Chart Buttons', () => {
it('should render with 30 days selected', () => {
const activeDay = DAYS.THIRTY;
const wrapper = shallowMount(Component, { propsData: { days, activeDay } });
createWrapper({ activeDay });
const activeButton = wrapper.find('[data-days="30"].active');
expect(activeButton.attributes('data-days')).toMatch('30');
......@@ -35,10 +53,9 @@ describe('Vulnerability Chart Buttons', () => {
describe('when clicking the button', () => {
const activeDay = DAYS.THIRTY;
let wrapper;
beforeEach(() => {
wrapper = mount(Component, { propsData: { days, activeDay }, sync: false });
createWrapper({ activeDay }, mount);
});
it('should call the clickHandler', () => {
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import StorageApp from 'ee/storage_counter/components/app.vue';
import Project from 'ee/storage_counter/components/project.vue';
import { projects, withRootStorageStatistics } from '../data';
const localVue = createLocalVue();
describe('Storage counter app', () => {
let wrapper;
......@@ -15,10 +17,11 @@ describe('Storage counter app', () => {
},
};
wrapper = shallowMount(StorageApp, {
wrapper = shallowMount(localVue.extend(StorageApp), {
propsData: { namespacePath: 'h5bp', helpPagePath: 'help' },
mocks: { $apollo },
sync: true,
sync: false,
localVue,
});
}
......@@ -30,33 +33,51 @@ describe('Storage counter app', () => {
wrapper.destroy();
});
it('renders the 2 projects', () => {
it('renders the 2 projects', done => {
wrapper.setData({
namespace: projects,
});
expect(wrapper.findAll(Project).length).toEqual(2);
wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.findAll(Project).length).toEqual(2);
})
.then(done)
.catch(done.fail);
});
describe('with rootStorageStatistics information', () => {
it('renders total usage', () => {
it('renders total usage', done => {
wrapper.setData({
namespace: withRootStorageStatistics,
});
expect(wrapper.find('.js-total-usage').text()).toContain(
withRootStorageStatistics.totalUsage,
);
wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.find('.js-total-usage').text()).toContain(
withRootStorageStatistics.totalUsage,
);
})
.then(done)
.catch(done.fail);
});
});
describe('without rootStorageStatistics information', () => {
it('renders N/A', () => {
it('renders N/A', done => {
wrapper.setData({
namespace: projects,
});
expect(wrapper.find('.js-total-usage').text()).toContain('N/A');
wrapper.vm
.$nextTick()
.then(() => {
expect(wrapper.find('.js-total-usage').text()).toContain('N/A');
})
.then(done)
.catch(done.fail);
});
});
});
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import Project from 'ee/storage_counter/components/project.vue';
import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
......@@ -22,11 +22,15 @@ const data = {
},
};
const localVue = createLocalVue();
function factory(project) {
wrapper = shallowMount(Project, {
wrapper = shallowMount(localVue.extend(Project), {
propsData: {
project,
},
localVue,
sync: false,
});
}
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import StorageRow from 'ee/storage_counter/components/storage_row.vue';
import { numberToHumanSize } from '~/lib/utils/number_utils';
......@@ -7,13 +7,16 @@ const data = {
name: 'LFS Package',
value: 1293346,
};
const localVue = createLocalVue();
function factory({ name, value }) {
wrapper = shallowMount(StorageRow, {
wrapper = shallowMount(localVue.extend(StorageRow), {
propsData: {
name,
value,
},
localVue,
sync: false,
});
}
......
......@@ -23,6 +23,7 @@ describe('Approval auth component', () => {
...props,
modalId: 'testid',
},
sync: false,
localVue,
});
};
......
......@@ -4,15 +4,14 @@ import diffModule from '~/diffs/store/modules';
import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('Diff settiings dropdown component', () => {
let vm;
let actions;
function createComponent(extendStore = () => {}) {
const localVue = createLocalVue();
localVue.use(Vuex);
const store = new Vuex.Store({
modules: {
diffs: {
......@@ -26,9 +25,10 @@ describe('Diff settiings dropdown component', () => {
extendStore(store);
vm = mount(SettingsDropdown, {
vm = mount(localVue.extend(SettingsDropdown), {
localVue,
store,
sync: false,
});
}
......
import Vue from 'vue';
import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { trimText } from 'spec/helpers/text_helper';
import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here
const createComponent = () => {
const Component = Vue.extend(frequentItemsListItemComponent);
return shallowMount(Component, {
propsData: {
itemId: mockProject.id,
itemName: mockProject.name,
namespace: mockProject.namespace,
webUrl: mockProject.webUrl,
avatarUrl: mockProject.avatarUrl,
},
});
};
const localVue = createLocalVue();
describe('FrequentItemsListItemComponent', () => {
let wrapper;
let vm;
beforeEach(() => {
wrapper = createComponent();
({ vm } = wrapper);
});
const createComponent = (props = {}) => {
wrapper = shallowMount(localVue.extend(frequentItemsListItemComponent), {
propsData: {
itemId: mockProject.id,
itemName: mockProject.name,
namespace: mockProject.namespace,
webUrl: mockProject.webUrl,
avatarUrl: mockProject.avatarUrl,
...props,
},
sync: false,
localVue,
});
};
afterEach(() => {
vm.$destroy();
wrapper.destroy();
wrapper = null;
});
describe('computed', () => {
describe('hasAvatar', () => {
it('should return `true` or `false` if whether avatar is present or not', () => {
wrapper.setProps({ avatarUrl: 'path/to/avatar.png' });
createComponent({ avatarUrl: 'path/to/avatar.png' });
expect(vm.hasAvatar).toBe(true);
expect(wrapper.vm.hasAvatar).toBe(true);
});
wrapper.setProps({ avatarUrl: null });
it('should return `false` if avatar is not present', () => {
createComponent({ avatarUrl: null });
expect(vm.hasAvatar).toBe(false);
expect(wrapper.vm.hasAvatar).toBe(false);
});
});
describe('highlightedItemName', () => {
it('should enclose part of project name in <b> & </b> which matches with `matcher` prop', () => {
wrapper.setProps({ matcher: 'lab' });
createComponent({ matcher: 'lab' });
expect(wrapper.find('.js-frequent-items-item-title').html()).toContain(
'<b>L</b><b>a</b><b>b</b>',
......@@ -55,7 +53,7 @@ describe('FrequentItemsListItemComponent', () => {
});
it('should return project name as it is if `matcher` is not available', () => {
wrapper.setProps({ matcher: null });
createComponent({ matcher: null });
expect(trimText(wrapper.find('.js-frequent-items-item-title').text())).toBe(
mockProject.name,
......@@ -65,13 +63,13 @@ describe('FrequentItemsListItemComponent', () => {
describe('truncatedNamespace', () => {
it('should truncate project name from namespace string', () => {
wrapper.setProps({ namespace: 'platform / nokia-3310' });
createComponent({ namespace: 'platform / nokia-3310' });
expect(trimText(wrapper.find('.js-frequent-items-item-namespace').text())).toBe('platform');
});
it('should truncate namespace string from the middle if it includes more than two groups in path', () => {
wrapper.setProps({
createComponent({
namespace: 'platform / hardware / broadcom / Wifi Group / Mobile Chipset / nokia-3310',
});
......@@ -84,6 +82,8 @@ describe('FrequentItemsListItemComponent', () => {
describe('template', () => {
it('should render component element', () => {
createComponent();
expect(wrapper.classes()).toContain('frequent-items-list-item-container');
expect(wrapper.findAll('a').length).toBe(1);
expect(wrapper.findAll('.frequent-items-item-avatar-container').length).toBe(1);
......
import Vue from 'vue';
import searchComponent from '~/frequent_items/components/frequent_items_search_input.vue';
import eventHub from '~/frequent_items/event_hub';
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
const createComponent = (namespace = 'projects') => {
const Component = Vue.extend(searchComponent);
const localVue = createLocalVue();
return shallowMount(Component, { propsData: { namespace } });
};
const createComponent = (namespace = 'projects') =>
shallowMount(localVue.extend(searchComponent), {
propsData: { namespace },
localVue,
sync: false,
});
describe('FrequentItemsSearchInputComponent', () => {
let wrapper;
......@@ -40,7 +42,7 @@ describe('FrequentItemsSearchInputComponent', () => {
spyOn(eventHub, '$on');
const vmX = createComponent().vm;
Vue.nextTick(() => {
localVue.nextTick(() => {
expect(eventHub.$on).toHaveBeenCalledWith(
`${vmX.namespace}-dropdownOpen`,
jasmine.any(Function),
......@@ -58,7 +60,7 @@ describe('FrequentItemsSearchInputComponent', () => {
vmX.$mount();
vmX.$destroy();
Vue.nextTick(() => {
localVue.nextTick(() => {
expect(eventHub.$off).toHaveBeenCalledWith(
`${vmX.namespace}-dropdownOpen`,
jasmine.any(Function),
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlButton } from '@gitlab/ui';
import Form from '~/jobs/components/manual_variables_form.vue';
const localVue = createLocalVue();
describe('Manual Variables Form', () => {
let wrapper;
const requiredProps = {
action: {
path: '/play',
......@@ -14,8 +17,10 @@ describe('Manual Variables Form', () => {
};
const factory = (props = {}) => {
wrapper = shallowMount(Form, {
wrapper = shallowMount(localVue.extend(Form), {
propsData: props,
localVue,
sync: false,
});
};
......@@ -23,8 +28,15 @@ describe('Manual Variables Form', () => {
factory(requiredProps);
});
afterEach(() => {
wrapper.destroy();
afterEach(done => {
// The component has a `nextTick` callback after some events so we need
// to wait for those to finish before destroying.
setImmediate(() => {
wrapper.destroy();
wrapper = null;
done();
});
});
it('renders empty form with correct placeholders', () => {
......@@ -71,7 +83,7 @@ describe('Manual Variables Form', () => {
});
describe('when deleting a variable', () => {
it('removes the variable row', () => {
beforeEach(done => {
wrapper.vm.variables = [
{
key: 'new key',
......@@ -80,6 +92,10 @@ describe('Manual Variables Form', () => {
},
];
wrapper.vm.$nextTick(done);
});
it('removes the variable row', () => {
wrapper.find(GlButton).vm.$emit('click');
expect(wrapper.vm.variables.length).toBe(0);
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlColumnChart } from '@gitlab/ui/dist/charts';
import ColumnChart from '~/monitoring/components/charts/column.vue';
const localVue = createLocalVue();
describe('Column component', () => {
let columnChart;
beforeEach(() => {
columnChart = shallowMount(ColumnChart, {
columnChart = shallowMount(localVue.extend(ColumnChart), {
propsData: {
graphData: {
queries: [
......@@ -28,6 +30,8 @@ describe('Column component', () => {
},
containerWidth: 100,
},
sync: false,
localVue,
});
});
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
const localVue = createLocalVue();
describe('Empty Chart component', () => {
let emptyChart;
const graphTitle = 'Memory Usage';
beforeEach(() => {
emptyChart = shallowMount(EmptyChart, {
emptyChart = shallowMount(localVue.extend(EmptyChart), {
propsData: {
graphTitle,
},
sync: false,
localVue,
});
});
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
import { graphDataPrometheusQuery } from '../mock_data';
const localVue = createLocalVue();
describe('Single Stat Chart component', () => {
let singleStatChart;
beforeEach(() => {
singleStatChart = shallowMount(SingleStatChart, {
singleStatChart = shallowMount(localVue.extend(SingleStatChart), {
propsData: {
graphData: graphDataPrometheusQuery,
},
sync: false,
localVue,
});
});
......
......@@ -72,6 +72,17 @@ describe('Dashboard', () => {
let mock;
let store;
let component;
let wrapper;
const createComponentWrapper = (props = {}, options = {}) => {
wrapper = shallowMount(localVue.extend(DashboardComponent), {
localVue,
sync: false,
propsData: { ...propsData, ...props },
store,
...options,
});
};
beforeEach(() => {
setFixtures(`
......@@ -81,13 +92,16 @@ describe('Dashboard', () => {
store = createStore();
mock = new MockAdapter(axios);
DashboardComponent = Vue.extend(Dashboard);
DashboardComponent = localVue.extend(Dashboard);
});
afterEach(() => {
if (component) {
component.$destroy();
}
if (wrapper) {
wrapper.destroy();
}
mock.restore();
});
......@@ -123,15 +137,8 @@ describe('Dashboard', () => {
});
describe('cluster health', () => {
let wrapper;
beforeEach(done => {
wrapper = shallowMount(DashboardComponent, {
localVue,
sync: false,
propsData: { ...propsData, hasMetrics: true },
store,
});
createComponentWrapper({ hasMetrics: true });
// all_dashboards is not defined in health dashboards
wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
......@@ -383,7 +390,6 @@ describe('Dashboard', () => {
});
describe('drag and drop function', () => {
let wrapper;
let expectedPanelCount; // also called metrics, naming to be improved: https://gitlab.com/gitlab-org/gitlab/issues/31565
const findDraggables = () => wrapper.findAll(VueDraggable);
......@@ -400,13 +406,7 @@ describe('Dashboard', () => {
});
beforeEach(done => {
wrapper = shallowMount(DashboardComponent, {
localVue,
sync: false,
propsData: { ...propsData, hasMetrics: true },
store,
attachToDocument: true,
});
createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
setupComponentStore(wrapper.vm);
......@@ -417,6 +417,10 @@ describe('Dashboard', () => {
wrapper.destroy();
});
afterEach(() => {
wrapper.destroy();
});
it('wraps vuedraggable', () => {
expect(findDraggablePanels().exists()).toBe(true);
expect(findDraggablePanels().length).toEqual(expectedPanelCount);
......@@ -502,7 +506,6 @@ describe('Dashboard', () => {
// https://gitlab.com/gitlab-org/gitlab-ce/issues/66922
// eslint-disable-next-line jasmine/no-disabled-tests
xdescribe('link to chart', () => {
let wrapper;
const currentDashboard = 'TEST_DASHBOARD';
localVue.use(GlToast);
const link = () => wrapper.find('.js-chart-link');
......@@ -511,13 +514,7 @@ describe('Dashboard', () => {
beforeEach(done => {
mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
wrapper = shallowMount(DashboardComponent, {
localVue,
sync: false,
attachToDocument: true,
propsData: { ...propsData, hasMetrics: true, currentDashboard },
store,
});
createComponentWrapper({ hasMetrics: true, currentDashboard }, { attachToDocument: true });
setTimeout(done);
});
......@@ -614,19 +611,12 @@ describe('Dashboard', () => {
});
describe('dashboard edit link', () => {
let wrapper;
const findEditLink = () => wrapper.find('.js-edit-link');
beforeEach(done => {
mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
wrapper = shallowMount(DashboardComponent, {
localVue,
sync: false,
attachToDocument: true,
propsData: { ...propsData, hasMetrics: true },
store,
});
createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
wrapper.vm.$store.commit(
`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import GraphGroup from '~/monitoring/components/graph_group.vue';
const localVue = createLocalVue();
describe('Graph group component', () => {
let graphGroup;
const findPrometheusGroup = () => graphGroup.find('.prometheus-graph-group');
const findPrometheusPanel = () => graphGroup.find('.prometheus-panel');
const createComponent = propsData => {
graphGroup = shallowMount(localVue.extend(GraphGroup), {
propsData,
sync: false,
localVue,
});
};
afterEach(() => {
graphGroup.destroy();
});
describe('When groups can be collapsed', () => {
beforeEach(() => {
graphGroup = shallowMount(GraphGroup, {
propsData: {
name: 'panel',
collapseGroup: true,
},
createComponent({
name: 'panel',
collapseGroup: true,
});
});
......@@ -33,12 +42,10 @@ describe('Graph group component', () => {
describe('When groups can not be collapsed', () => {
beforeEach(() => {
graphGroup = shallowMount(GraphGroup, {
propsData: {
name: 'panel',
collapseGroup: true,
showPanels: false,
},
createComponent({
name: 'panel',
collapseGroup: true,
showPanels: false,
});
});
......@@ -49,12 +56,7 @@ describe('Graph group component', () => {
describe('When collapseGroup prop is updated', () => {
beforeEach(() => {
graphGroup = shallowMount(GraphGroup, {
propsData: {
name: 'panel',
collapseGroup: false,
},
});
createComponent({ name: 'panel', collapseGroup: false });
});
it('previously collapsed group should respond to the prop change', done => {
......
......@@ -2,15 +2,14 @@ import Vuex from 'vuex';
import { createLocalVue, mount } from '@vue/test-utils';
import ReplyButton from '~/notes/components/note_actions/reply_button.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('ReplyButton', () => {
let wrapper;
beforeEach(() => {
const localVue = createLocalVue();
localVue.use(Vuex);
wrapper = mount(ReplyButton, {
wrapper = mount(localVue.extend(ReplyButton), {
sync: false,
localVue,
});
......
......@@ -12,7 +12,7 @@ describe('noteActions', () => {
const shallowMountNoteActions = propsData => {
const localVue = createLocalVue();
return shallowMount(noteActions, {
return shallowMount(localVue.extend(noteActions), {
store,
propsData,
localVue,
......
......@@ -14,7 +14,7 @@ describe('issue_note_form component', () => {
const createComponentWrapper = () => {
const localVue = createLocalVue();
return shallowMount(NoteForm, {
return shallowMount(localVue.extend(NoteForm), {
store,
propsData: props,
// see https://gitlab.com/gitlab-org/gitlab-foss/issues/56317 for the following
......
......@@ -10,6 +10,8 @@ import mockDiffFile from '../../diffs/mock_data/diff_file';
const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
const localVue = createLocalVue();
describe('noteable_discussion component', () => {
let store;
let wrapper;
......@@ -22,8 +24,7 @@ describe('noteable_discussion component', () => {
store.dispatch('setNoteableData', noteableDataMock);
store.dispatch('setNotesData', notesDataMock);
const localVue = createLocalVue();
wrapper = mount(noteableDiscussion, {
wrapper = mount(localVue.extend(noteableDiscussion), {
store,
propsData: { discussion: discussionMock },
localVue,
......
......@@ -18,7 +18,7 @@ describe('issue_note', () => {
store.dispatch('setNotesData', notesDataMock);
const localVue = createLocalVue();
wrapper = shallowMount(issueNote, {
wrapper = shallowMount(localVue.extend(issueNote), {
store,
propsData: {
note,
......
......@@ -20,7 +20,7 @@ describe('RelatedMergeRequests', () => {
mock = new MockAdapter(axios);
mock.onGet(`${API_ENDPOINT}?per_page=100`).reply(200, mockData, { 'x-total': 2 });
wrapper = mount(RelatedMergeRequests, {
wrapper = mount(localVue.extend(RelatedMergeRequests), {
localVue,
sync: false,
store: createStore(),
......
......@@ -4,18 +4,19 @@ import MrWidgetPipeline from '~/vue_merge_request_widget/components/mr_widget_pi
import ArtifactsApp from '~/vue_merge_request_widget/components/artifacts_list_app.vue';
import { mockStore } from '../mock_data';
const localVue = createLocalVue();
describe('MrWidgetPipelineContainer', () => {
let wrapper;
const factory = (props = {}) => {
const localVue = createLocalVue();
wrapper = mount(localVue.extend(MrWidgetPipelineContainer), {
propsData: {
mr: Object.assign({}, mockStore),
...props,
},
localVue,
sync: false,
});
};
......
import { shallowMount } from '@vue/test-utils';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import GraphqlPagination from '~/vue_shared/components/pagination/graphql_pagination.vue';
const localVue = createLocalVue();
describe('Graphql Pagination component', () => {
let wrapper;
function factory({ hasNextPage = true, hasPreviousPage = true }) {
wrapper = shallowMount(GraphqlPagination, {
wrapper = shallowMount(localVue.extend(GraphqlPagination), {
propsData: {
hasNextPage,
hasPreviousPage,
},
sync: false,
localVue,
});
}
......
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