Skip to content

G
gitlab-ce
Commit 4dff571a authored by Mike Greiling's avatar Mike Greiling
Browse files
Options

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
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 0 deletions
spec/javascripts/vue_shared/components/markdown/field_spec.js → spec/frontend/vue_shared/components/markdown/field_spec.js
View file @ 4dff571a
import $ from 'jquery'; import { mount, createLocalVue } from '@vue/test-utils';
import '~/behaviors/markdown/render_gfm';
import Vue from 'vue';
import AxiosMockAdapter from 'axios-mock-adapter';
import axios from '~/lib/utils/axios_utils';
import fieldComponent from '~/vue_shared/components/markdown/field.vue'; import fieldComponent from '~/vue_shared/components/markdown/field.vue';
import { TEST_HOST } from 'spec/test_constants'; 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) { const markdownPreviewPath = `${TEST_HOST}/preview`;
expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite); const markdownDocsPath = `${TEST_HOST}/docs`;
expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
expect(vm.$el.querySelector('.md-preview-holder').style.display).toEqual(isWrite ? 'none' : '');
}
describe('Markdown field component', () => { function assertMarkdownTabs(isWrite, writeLink, previewLink, wrapper) {
const markdownPreviewPath = `${TEST_HOST}/preview`; expect(writeLink.element.parentNode.classList.contains('active')).toEqual(isWrite);
const markdownDocsPath = `${TEST_HOST}/docs`; expect(previewLink.element.parentNode.classList.contains('active')).toEqual(!isWrite);
let axiosMock; expect(wrapper.find('.md-preview-holder').element.style.display).toEqual(isWrite ? 'none' : '');
let vm; }
beforeEach(done => { function createComponent() {
axiosMock = new AxiosMockAdapter(axios); const wrapper = mount(fieldComponent, {
vm = new Vue({ propsData: {
components: { markdownDocsPath,
fieldComponent, markdownPreviewPath,
}, },
data() { slots: {
return { textarea: '<textarea>testing\n123</textarea>',
text: 'testing\n123',
};
}, },
template: ` template: `
<field-component <field-component
...@@ -37,12 +31,26 @@ describe('Markdown field component', () => { ...@@ -37,12 +31,26 @@ describe('Markdown field component', () => {
<textarea <textarea
slot="textarea" slot="textarea"
v-model="text"> v-model="text">
<slot>this is a test</slot>
</textarea> </textarea>
</field-component> </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(() => { afterEach(() => {
...@@ -50,122 +58,120 @@ describe('Markdown field component', () => { ...@@ -50,122 +58,120 @@ describe('Markdown field component', () => {
}); });
describe('mounted', () => { describe('mounted', () => {
let wrapper;
const previewHTML = '<p>markdown preview</p>'; const previewHTML = '<p>markdown preview</p>';
let previewLink;
let writeLink;
it('renders textarea inside backdrop', () => { 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', () => { describe('markdown preview', () => {
let previewLink;
let writeLink;
beforeEach(() => { beforeEach(() => {
axiosMock.onPost(markdownPreviewPath).replyOnce(200, { body: previewHTML }); axiosMock.onPost(markdownPreviewPath).reply(200, { body: previewHTML });
previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
writeLink = vm.$el.querySelector('.nav-links .js-write-link');
}); });
it('sets preview link as active', done => { it('sets preview link as active', () => {
previewLink.click(); wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
previewLink.trigger('click');
Vue.nextTick(() => { return localVue.nextTick().then(() => {
expect(previewLink.parentNode.classList.contains('active')).toBeTruthy(); expect(previewLink.element.parentNode.classList.contains('active')).toBeTruthy();
done();
}); });
}); });
it('shows preview loading text', done => { it('shows preview loading text', () => {
previewLink.click(); wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
previewLink.trigger('click');
Vue.nextTick(() => { localVue.nextTick(() => {
expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain( expect(wrapper.find('.md-preview-holder').element.textContent.trim()).toContain(
'Loading…', 'Loading…',
); );
done();
}); });
}); });
it('renders markdown preview', done => { it('renders markdown preview', () => {
previewLink.click(); wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
previewLink.trigger('click');
setTimeout(() => { setTimeout(() => {
expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(previewHTML); expect(wrapper.find('.md-preview-holder').element.innerHTML).toContain(previewHTML);
done();
}); });
}); });
it('renders GFM with jQuery', done => { it('renders GFM with jQuery', () => {
spyOn($.fn, 'renderGFM'); wrapper = createComponent();
previewLink = getPreviewLink(wrapper);
jest.spyOn($.fn, 'renderGFM');
previewLink.click(); previewLink.trigger('click');
setTimeout(() => { setTimeout(() => {
expect($.fn.renderGFM).toHaveBeenCalled(); expect($.fn.renderGFM).toHaveBeenCalled();
done();
}, 0); }, 0);
}); });
it('clicking already active write or preview link does nothing', done => { it('clicking already active write or preview link does nothing', () => {
writeLink.click(); wrapper = createComponent();
Vue.nextTick() writeLink = getWriteLink(wrapper);
.then(() => assertMarkdownTabs(true, writeLink, previewLink, vm)) previewLink = getPreviewLink(wrapper);
.then(() => writeLink.click())
.then(() => Vue.nextTick()) writeLink.trigger('click');
.then(() => assertMarkdownTabs(true, writeLink, previewLink, vm)) return localVue
.then(() => previewLink.click()) .nextTick()
.then(() => Vue.nextTick()) .then(() => assertMarkdownTabs(true, writeLink, previewLink, wrapper))
.then(() => assertMarkdownTabs(false, writeLink, previewLink, vm)) .then(() => writeLink.trigger('click'))
.then(() => previewLink.click()) .then(() => localVue.nextTick())
.then(() => Vue.nextTick()) .then(() => assertMarkdownTabs(true, writeLink, previewLink, wrapper))
.then(() => assertMarkdownTabs(false, writeLink, previewLink, vm)) .then(() => previewLink.trigger('click'))
.then(done) .then(() => localVue.nextTick())
.catch(done.fail); .then(() => assertMarkdownTabs(false, writeLink, previewLink, wrapper))
.then(() => previewLink.trigger('click'))
.then(() => localVue.nextTick())
.then(() => assertMarkdownTabs(false, writeLink, previewLink, wrapper));
}); });
}); });
describe('markdown buttons', () => { describe('markdown buttons', () => {
it('converts single words', done => { it('converts single words', () => {
const textarea = vm.$el.querySelector('textarea'); wrapper = createComponent();
const textarea = wrapper.find('textarea').element;
textarea.setSelectionRange(0, 7); 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**'); expect(textarea.value).toContain('**testing**');
done();
}); });
}); });
it('converts a line', done => { it('converts a line', () => {
const textarea = vm.$el.querySelector('textarea'); wrapper = createComponent();
const textarea = wrapper.find('textarea').element;
textarea.setSelectionRange(0, 0); 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'); expect(textarea.value).toContain('* testing');
done();
}); });
}); });
it('converts multiple lines', done => { it('converts multiple lines', () => {
const textarea = vm.$el.querySelector('textarea'); wrapper = createComponent();
const textarea = wrapper.find('textarea').element;
textarea.setSelectionRange(0, 50); 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'); 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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7