Commit e61f2740 authored by Himanshu Kapoor's avatar Himanshu Kapoor

Migrate most specs in vue_shared to Jest

Migrate most of the specs in spec/javascripts/vue_shared from Karma
to Jest.
parent 7eae5182
import $ from 'jquery';
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
const modalComponent = Vue.extend(DeprecatedModal2);
......@@ -86,7 +85,7 @@ describe('DeprecatedModal2', () => {
});
});
it('works with data-toggle="modal"', done => {
it('works with data-toggle="modal"', () => {
setFixtures(`
<button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
<div id="modal-container"></div>
......@@ -101,9 +100,16 @@ describe('DeprecatedModal2', () => {
},
modalContainer,
);
$(vm.$el).on('shown.bs.modal', () => done());
const modalElement = document.getElementById('my-modal');
modalButton.click();
expect(modalElement).not.toHaveClass('show');
// let the modal fade in
jest.runOnlyPendingTimers();
expect(modalElement).toHaveClass('show');
});
describe('methods', () => {
......@@ -111,7 +117,7 @@ describe('DeprecatedModal2', () => {
beforeEach(() => {
vm = mountComponent(modalComponent, {});
spyOn(vm, '$emit');
jest.spyOn(vm, '$emit').mockImplementation(() => {});
});
describe('emitCancel', () => {
......@@ -149,23 +155,14 @@ describe('DeprecatedModal2', () => {
describe('slots', () => {
const slotContent = 'this should go into the slot';
const modalWithSlot = slotName => {
let template;
if (slotName) {
template = `
<deprecated-modal-2>
<template slot="${slotName}">${slotContent}</template>
</deprecated-modal-2>
`;
} else {
template = `<deprecated-modal-2>${slotContent}</deprecated-modal-2>`;
}
const modalWithSlot = slot => {
return Vue.extend({
components: {
DeprecatedModal2,
},
template,
render: h =>
h('deprecated-modal-2', [slot ? h('template', { slot }, slotContent) : slotContent]),
});
};
......
import $ from 'jquery';
import Vue from 'vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
import mountComponent from 'helpers/vue_mount_component_helper';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
const modalComponent = Vue.extend(DeprecatedModal);
......@@ -47,7 +46,7 @@ describe('DeprecatedModal', () => {
});
});
it('works with data-toggle="modal"', done => {
it('works with data-toggle="modal"', () => {
setFixtures(`
<button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
<div id="modal-container"></div>
......@@ -63,9 +62,12 @@ describe('DeprecatedModal', () => {
modalContainer,
);
const modalElement = vm.$el.querySelector('#my-modal');
$(modalElement).on('shown.bs.modal', () => done());
expect(modalElement).not.toHaveClass('show');
modalButton.click();
expect(modalElement).toHaveClass('show');
});
});
});
import $ from 'jquery';
import Vue from 'vue';
import { mount } from '@vue/test-utils';
import tooltip from '~/vue_shared/directives/tooltip';
describe('Tooltip directive', () => {
......@@ -13,19 +13,22 @@ describe('Tooltip directive', () => {
describe('with a single tooltip', () => {
beforeEach(() => {
setFixtures('<div id="dummy-element"></div>');
vm = new Vue({
el: '#dummy-element',
directives: {
tooltip,
const wrapper = mount(
{
directives: {
tooltip,
},
data() {
return {
tooltip: 'some text',
};
},
template: '<div v-tooltip :title="tooltip"></div>',
},
data() {
return {
tooltip: 'some text',
};
},
template: '<div v-tooltip :title="tooltip"></div>',
});
{ attachToDocument: true },
);
vm = wrapper.vm;
});
it('should have tooltip plugin applied', () => {
......@@ -34,48 +37,54 @@ describe('Tooltip directive', () => {
it('displays the title as tooltip', () => {
$(vm.$el).tooltip('show');
jest.runOnlyPendingTimers();
const tooltipElement = document.querySelector('.tooltip-inner');
expect(tooltipElement.innerText).toContain('some text');
expect(tooltipElement.textContent).toContain('some text');
});
it('updates a visible tooltip', done => {
it('updates a visible tooltip', () => {
$(vm.$el).tooltip('show');
jest.runOnlyPendingTimers();
const tooltipElement = document.querySelector('.tooltip-inner');
vm.tooltip = 'other text';
Vue.nextTick()
.then(() => {
expect(tooltipElement).toContainText('other text');
done();
})
.catch(done.fail);
jest.runOnlyPendingTimers();
return vm.$nextTick().then(() => {
expect(tooltipElement.textContent).toContain('other text');
});
});
});
describe('with multiple tooltips', () => {
beforeEach(() => {
const SomeComponent = Vue.extend({
directives: {
tooltip,
},
template: `
<div>
<div
v-tooltip
class="js-look-for-tooltip"
title="foo">
</div>
<div
v-tooltip
title="bar">
const wrapper = mount(
{
directives: {
tooltip,
},
template: `
<div>
<div
v-tooltip
class="js-look-for-tooltip"
title="foo">
</div>
<div
v-tooltip
title="bar">
</div>
</div>
</div>
`,
});
`,
},
{ attachToDocument: true },
);
vm = new SomeComponent().$mount();
vm = wrapper.vm;
});
it('should have tooltip plugin applied to all instances', () => {
......
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