parent
96a4652100
commit
f80d2ab3c6
|
@ -0,0 +1,34 @@
|
|||
import Vue from 'vue';
|
||||
import Store from '~/issue_show/stores';
|
||||
import descriptionField from '~/issue_show/components/fields/description.vue';
|
||||
|
||||
describe('Description field component', () => {
|
||||
let vm;
|
||||
let store;
|
||||
|
||||
beforeEach((done) => {
|
||||
const Component = Vue.extend(descriptionField);
|
||||
store = new Store({
|
||||
titleHtml: '',
|
||||
descriptionHtml: '',
|
||||
issuableRef: '',
|
||||
});
|
||||
store.formState.description = 'test';
|
||||
|
||||
vm = new Component({
|
||||
propsData: {
|
||||
markdownPreviewUrl: '/',
|
||||
markdownDocs: '/',
|
||||
store,
|
||||
},
|
||||
}).$mount();
|
||||
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
it('renders markdown field with description', () => {
|
||||
expect(
|
||||
vm.$el.querySelector('.md-area textarea').value,
|
||||
).toBe('test');
|
||||
});
|
||||
});
|
|
@ -0,0 +1,121 @@
|
|||
import Vue from 'vue';
|
||||
import fieldComponent from '~/vue_shared/components/markdown/field.vue';
|
||||
|
||||
describe('Markdown field component', () => {
|
||||
let vm;
|
||||
|
||||
beforeEach(() => {
|
||||
vm = new Vue({
|
||||
render(createElement) {
|
||||
return createElement(
|
||||
fieldComponent,
|
||||
{
|
||||
props: {
|
||||
markdownPreviewUrl: '/preview',
|
||||
markdownDocs: '/docs',
|
||||
},
|
||||
},
|
||||
[
|
||||
createElement('textarea', {
|
||||
slot: 'textarea',
|
||||
}),
|
||||
],
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('creates a new instance of GL form', (done) => {
|
||||
spyOn(gl, 'GLForm');
|
||||
vm.$mount();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
gl.GLForm,
|
||||
).toHaveBeenCalled();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe('mounted', () => {
|
||||
beforeEach((done) => {
|
||||
vm.$mount();
|
||||
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
it('renders textarea inside backdrop', () => {
|
||||
expect(
|
||||
vm.$el.querySelector('.zen-backdrop textarea'),
|
||||
).not.toBeNull();
|
||||
});
|
||||
|
||||
describe('markdown preview', () => {
|
||||
let previewLink;
|
||||
|
||||
beforeEach(() => {
|
||||
spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
|
||||
resolve({
|
||||
json() {
|
||||
return {
|
||||
body: '<p>markdown preview</p>',
|
||||
};
|
||||
},
|
||||
});
|
||||
}));
|
||||
|
||||
previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
|
||||
});
|
||||
|
||||
it('sets preview link as active', (done) => {
|
||||
previewLink.click();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
previewLink.parentNode.classList.contains('active'),
|
||||
).toBeTruthy();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows preview loading text', (done) => {
|
||||
previewLink.click();
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
vm.$el.querySelector('.md-preview').textContent.trim(),
|
||||
).toContain('Loading...');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders markdown preview', (done) => {
|
||||
previewLink.click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(
|
||||
vm.$el.querySelector('.md-preview').innerHTML,
|
||||
).toContain('<p>markdown preview</p>');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders GFM with jQuery', (done) => {
|
||||
spyOn($.fn, 'renderGFM');
|
||||
previewLink.click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(
|
||||
$.fn.renderGFM,
|
||||
).toHaveBeenCalled();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
|
@ -0,0 +1,67 @@
|
|||
import Vue from 'vue';
|
||||
import headerComponent from '~/vue_shared/components/markdown/header.vue';
|
||||
|
||||
describe('Markdown field header component', () => {
|
||||
let vm;
|
||||
|
||||
beforeEach((done) => {
|
||||
const Component = Vue.extend(headerComponent);
|
||||
|
||||
vm = new Component({
|
||||
propsData: {
|
||||
previewMarkdown: false,
|
||||
},
|
||||
}).$mount();
|
||||
|
||||
Vue.nextTick(done);
|
||||
});
|
||||
|
||||
it('renders markdown buttons', () => {
|
||||
expect(
|
||||
vm.$el.querySelectorAll('.js-md').length,
|
||||
).toBe(7);
|
||||
});
|
||||
|
||||
it('renders `write` link as active when previewMarkdown is false', () => {
|
||||
expect(
|
||||
vm.$el.querySelector('li:nth-child(1)').classList.contains('active'),
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders `preview` link as active when previewMarkdown is true', (done) => {
|
||||
vm.previewMarkdown = true;
|
||||
|
||||
Vue.nextTick(() => {
|
||||
expect(
|
||||
vm.$el.querySelector('li:nth-child(2)').classList.contains('active'),
|
||||
).toBeTruthy();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('emits toggle markdown event when clicking preview', () => {
|
||||
spyOn(vm, '$emit');
|
||||
|
||||
vm.$el.querySelector('li:nth-child(2) a').click();
|
||||
|
||||
expect(
|
||||
vm.$emit,
|
||||
).toHaveBeenCalledWith('toggle-markdown');
|
||||
});
|
||||
|
||||
it('blurs preview link after click', (done) => {
|
||||
const link = vm.$el.querySelector('li:nth-child(2) a');
|
||||
spyOn(HTMLElement.prototype, 'blur');
|
||||
|
||||
link.click();
|
||||
|
||||
setTimeout(() => {
|
||||
expect(
|
||||
link.blur,
|
||||
).toHaveBeenCalled();
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue