Commit 4dff571a authored by Mike Greiling's avatar Mike Greiling

Merge branch '#36121-Migrate-field_spec.js-to-Jest' into 'master'

refactored field_spec from karma to jest

Closes #36121

See merge request gitlab-org/gitlab!20309
parents 1c1eda42 b9c6ef22
import $ from 'jquery';
import '~/behaviors/markdown/render_gfm';
import Vue from 'vue';
import AxiosMockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import { mount, createLocalVue } from '@vue/test-utils';
import fieldComponent from '~/vue_shared/components/markdown/field.vue';
import { TEST_HOST } from 'spec/test_constants';
import AxiosMockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import $ from 'jquery';
function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
expect(vm.$el.querySelector('.md-preview-holder').style.display).toEqual(isWrite ? 'none' : '');
}
const markdownPreviewPath = `${TEST_HOST}/preview`;
const markdownDocsPath = `${TEST_HOST}/docs`;
describe('Markdown field component', () => {
const markdownPreviewPath = `${TEST_HOST}/preview`;
const markdownDocsPath = `${TEST_HOST}/docs`;
let axiosMock;
let vm;
function assertMarkdownTabs(isWrite, writeLink, previewLink, wrapper) {
expect(writeLink.element.parentNode.classList.contains('active')).toEqual(isWrite);
expect(previewLink.element.parentNode.classList.contains('active')).toEqual(!isWrite);
expect(wrapper.find('.md-preview-holder').element.style.display).toEqual(isWrite ? 'none' : '');
}
beforeEach(done => {
axiosMock = new AxiosMockAdapter(axios);
vm = new Vue({
components: {
fieldComponent,
function createComponent() {
const wrapper = mount(fieldComponent, {
propsData: {
markdownDocsPath,
markdownPreviewPath,
},
data() {
return {
text: 'testing\n123',
};
slots: {
textarea: '<textarea>testing\n123</textarea>',
},
template: `
<field-component
......@@ -37,12 +31,26 @@ describe('Markdown field component', () => {
<textarea
slot="textarea"
v-model="text">
<slot>this is a test</slot>
</textarea>
</field-component>
`,
}).$mount();
sync: false,
});
return wrapper;
}
const getPreviewLink = wrapper => wrapper.find('.nav-links .js-preview-link');
const getWriteLink = wrapper => wrapper.find('.nav-links .js-write-link');
const getMarkdownButton = wrapper => wrapper.find('.js-md');
const getAllMarkdownButtons = wrapper => wrapper.findAll('.js-md');
Vue.nextTick(done);
describe('Markdown field component', () => {
let axiosMock;
const localVue = createLocalVue();
beforeEach(() => {
axiosMock = new AxiosMockAdapter(axios);
});
afterEach(() => {
......@@ -50,122 +58,120 @@ describe('Markdown field component', () => {
});
describe('mounted', () => {
let wrapper;
const previewHTML = '<p>markdown preview</p>';
let previewLink;
let writeLink;
it('renders textarea inside backdrop', () => {
expect(vm.$el.querySelector('.zen-backdrop textarea')).not.toBeNull();
wrapper = createComponent();
expect(wrapper.find('.zen-backdrop textarea').element).not.toBeNull();
});
describe('markdown preview', () => {
let previewLink;
let writeLink;
beforeEach(() => {
axiosMock.onPost(markdownPreviewPath).replyOnce(200, { body: previewHTML });
previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
writeLink = vm.$el.querySelector('.nav-links .js-write-link');
axiosMock.onPost(markdownPreviewPath).reply(200, { body: previewHTML });
});
it('sets preview link as active', done => {
previewLink.click();
it('sets preview link as active', () => {
wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
previewLink.trigger('click');
Vue.nextTick(() => {
expect(previewLink.parentNode.classList.contains('active')).toBeTruthy();
done();
return localVue.nextTick().then(() => {
expect(previewLink.element.parentNode.classList.contains('active')).toBeTruthy();
});
});
it('shows preview loading text', done => {
previewLink.click();
it('shows preview loading text', () => {
wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
previewLink.trigger('click');
Vue.nextTick(() => {
expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain(
localVue.nextTick(() => {
expect(wrapper.find('.md-preview-holder').element.textContent.trim()).toContain(
'Loading…',
);
done();
});
});
it('renders markdown preview', done => {
previewLink.click();
it('renders markdown preview', () => {
wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
previewLink.trigger('click');
setTimeout(() => {
expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(previewHTML);
done();
expect(wrapper.find('.md-preview-holder').element.innerHTML).toContain(previewHTML);
});
});
it('renders GFM with jQuery', done => {
spyOn($.fn, 'renderGFM');
it('renders GFM with jQuery', () => {
wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
jest.spyOn($.fn, 'renderGFM');
previewLink.click();
previewLink.trigger('click');
setTimeout(() => {
expect($.fn.renderGFM).toHaveBeenCalled();
done();
}, 0);
});
it('clicking already active write or preview link does nothing', done => {
writeLink.click();
Vue.nextTick()
.then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
.then(() => writeLink.click())
.then(() => Vue.nextTick())
.then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
.then(() => previewLink.click())
.then(() => Vue.nextTick())
.then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
.then(() => previewLink.click())
.then(() => Vue.nextTick())
.then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
.then(done)
.catch(done.fail);
it('clicking already active write or preview link does nothing', () => {
wrapper = createComponent();
writeLink = getWriteLink(wrapper);
previewLink = getPreviewLink(wrapper);
writeLink.trigger('click');
return localVue
.nextTick()
.then(() => assertMarkdownTabs(true, writeLink, previewLink, wrapper))
.then(() => writeLink.trigger('click'))
.then(() => localVue.nextTick())
.then(() => assertMarkdownTabs(true, writeLink, previewLink, wrapper))
.then(() => previewLink.trigger('click'))
.then(() => localVue.nextTick())
.then(() => assertMarkdownTabs(false, writeLink, previewLink, wrapper))
.then(() => previewLink.trigger('click'))
.then(() => localVue.nextTick())
.then(() => assertMarkdownTabs(false, writeLink, previewLink, wrapper));
});
});
describe('markdown buttons', () => {
it('converts single words', done => {
const textarea = vm.$el.querySelector('textarea');
it('converts single words', () => {
wrapper = createComponent();
const textarea = wrapper.find('textarea').element;
textarea.setSelectionRange(0, 7);
vm.$el.querySelector('.js-md').click();
const markdownButton = getMarkdownButton(wrapper);
markdownButton.trigger('click');
Vue.nextTick(() => {
localVue.nextTick(() => {
expect(textarea.value).toContain('**testing**');
done();
});
});
it('converts a line', done => {
const textarea = vm.$el.querySelector('textarea');
it('converts a line', () => {
wrapper = createComponent();
const textarea = wrapper.find('textarea').element;
textarea.setSelectionRange(0, 0);
vm.$el.querySelectorAll('.js-md')[5].click();
const markdownButton = getAllMarkdownButtons(wrapper).wrappers[5];
markdownButton.trigger('click');
Vue.nextTick(() => {
localVue.nextTick(() => {
expect(textarea.value).toContain('* testing');
done();
});
});
it('converts multiple lines', done => {
const textarea = vm.$el.querySelector('textarea');
it('converts multiple lines', () => {
wrapper = createComponent();
const textarea = wrapper.find('textarea').element;
textarea.setSelectionRange(0, 50);
vm.$el.querySelectorAll('.js-md')[5].click();
const markdownButton = getAllMarkdownButtons(wrapper).wrappers[5];
markdownButton.trigger('click');
Vue.nextTick(() => {
localVue.nextTick(() => {
expect(textarea.value).toContain('* testing\n* 123');
done();
});
});
});
......
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