debian-mirror-gitlab/spec/javascripts/vue_shared/components/markdown/field_spec.js

175 lines
4.5 KiB
JavaScript
Raw Normal View History

2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-09-10 17:25:29 +05:30
import Vue from 'vue';
import fieldComponent from '~/vue_shared/components/markdown/field.vue';
2018-03-17 18:26:18 +05:30
function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
2019-05-18 00:54:41 +05:30
expect(vm.$el.querySelector('.md-preview-holder').style.display).toEqual(isWrite ? 'none' : '');
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
describe('Markdown field component', () => {
let vm;
2018-12-13 13:39:08 +05:30
beforeEach(done => {
2017-09-10 17:25:29 +05:30
vm = new Vue({
2018-03-17 18:26:18 +05:30
components: {
fieldComponent,
},
2017-09-10 17:25:29 +05:30
data() {
return {
text: 'testing\n123',
};
},
template: `
<field-component
2018-03-17 18:26:18 +05:30
markdown-preview-path="/preview"
markdown-docs-path="/docs"
2017-09-10 17:25:29 +05:30
>
<textarea
slot="textarea"
v-model="text">
</textarea>
</field-component>
`,
}).$mount();
Vue.nextTick(done);
});
describe('mounted', () => {
it('renders textarea inside backdrop', () => {
2018-12-13 13:39:08 +05:30
expect(vm.$el.querySelector('.zen-backdrop textarea')).not.toBeNull();
2017-09-10 17:25:29 +05:30
});
describe('markdown preview', () => {
let previewLink;
2018-03-17 18:26:18 +05:30
let writeLink;
2017-09-10 17:25:29 +05:30
beforeEach(() => {
2018-12-13 13:39:08 +05:30
spyOn(Vue.http, 'post').and.callFake(
() =>
new Promise(resolve => {
setTimeout(() => {
resolve({
json() {
return {
body: '<p>markdown preview</p>',
};
},
});
});
}),
);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
writeLink = vm.$el.querySelector('.nav-links .js-write-link');
2017-09-10 17:25:29 +05:30
});
2018-12-13 13:39:08 +05:30
it('sets preview link as active', done => {
2017-09-10 17:25:29 +05:30
previewLink.click();
Vue.nextTick(() => {
2018-12-13 13:39:08 +05:30
expect(previewLink.parentNode.classList.contains('active')).toBeTruthy();
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('shows preview loading text', done => {
2017-09-10 17:25:29 +05:30
previewLink.click();
Vue.nextTick(() => {
2019-05-18 00:54:41 +05:30
expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain(
'Loading…',
);
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('renders markdown preview', done => {
2017-09-10 17:25:29 +05:30
previewLink.click();
setTimeout(() => {
2019-05-18 00:54:41 +05:30
expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(
2018-12-13 13:39:08 +05:30
'<p>markdown preview</p>',
);
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('renders GFM with jQuery', done => {
2017-09-10 17:25:29 +05:30
spyOn($.fn, 'renderGFM');
2018-03-17 18:26:18 +05:30
2017-09-10 17:25:29 +05:30
previewLink.click();
setTimeout(() => {
2018-12-13 13:39:08 +05:30
expect($.fn.renderGFM).toHaveBeenCalled();
2017-09-10 17:25:29 +05:30
done();
2018-03-17 18:26:18 +05:30
}, 0);
});
2018-12-13 13:39:08 +05:30
it('clicking already active write or preview link does nothing', done => {
2018-03-17 18:26:18 +05:30
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);
2017-09-10 17:25:29 +05:30
});
});
describe('markdown buttons', () => {
2018-12-13 13:39:08 +05:30
it('converts single words', done => {
2017-09-10 17:25:29 +05:30
const textarea = vm.$el.querySelector('textarea');
textarea.setSelectionRange(0, 7);
vm.$el.querySelector('.js-md').click();
Vue.nextTick(() => {
2018-12-13 13:39:08 +05:30
expect(textarea.value).toContain('**testing**');
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('converts a line', done => {
2017-09-10 17:25:29 +05:30
const textarea = vm.$el.querySelector('textarea');
textarea.setSelectionRange(0, 0);
2018-12-05 23:21:45 +05:30
vm.$el.querySelectorAll('.js-md')[5].click();
2017-09-10 17:25:29 +05:30
Vue.nextTick(() => {
2018-12-13 13:39:08 +05:30
expect(textarea.value).toContain('* testing');
2017-09-10 17:25:29 +05:30
done();
});
});
2018-12-13 13:39:08 +05:30
it('converts multiple lines', done => {
2017-09-10 17:25:29 +05:30
const textarea = vm.$el.querySelector('textarea');
textarea.setSelectionRange(0, 50);
2018-12-05 23:21:45 +05:30
vm.$el.querySelectorAll('.js-md')[5].click();
2017-09-10 17:25:29 +05:30
Vue.nextTick(() => {
2018-12-13 13:39:08 +05:30
expect(textarea.value).toContain('* testing\n* 123');
2017-09-10 17:25:29 +05:30
done();
});
});
});
});
});