Commit 082b868e authored by Regis's avatar Regis

fix js specs

parent 3af533f7
export default (apiData, tasks) => { export default (newStateData, tasks) => {
const $tasks = $('#task_status'); const $tasks = $('#task_status');
const $tasksShort = $('#task_status_short'); const $tasksShort = $('#task_status_short');
const $issueableHeader = $('.issuable-header'); const $issueableHeader = $('.issuable-header');
const tasksStates = { api: null, tasks: null }; const tasksStates = { newState: null, currentState: null };
if ($tasks.length === 0) { if ($tasks.length === 0) {
if (!(apiData.task_status.indexOf('0 of 0') === 0)) { if (!(newStateData.task_status.indexOf('0 of 0') === 0)) {
$issueableHeader.append(`<span id="task_status">${apiData.task_status}</span>`); $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
} else { } else {
$issueableHeader.append('<span id="task_status"></span>'); $issueableHeader.append('<span id="task_status"></span>');
} }
} else { } else {
tasksStates.api = apiData.task_status.indexOf('0 of 0') === 0; tasksStates.newState = newStateData.task_status.indexOf('0 of 0') === 0;
tasksStates.tasks = tasks.indexOf('0 of 0') === 0; tasksStates.currentState = tasks.indexOf('0 of 0') === 0;
} }
if ($tasks && !tasksStates.api) { if ($tasks && !tasksStates.newState) {
$tasks.text(apiData.task_status); $tasks.text(newStateData.task_status);
$tasksShort.text(apiData.task_status); $tasksShort.text(newStateData.task_status);
} else if (tasksStates.tasks) { } else if (tasksStates.currentState) {
$issueableHeader.append(`<span id="task_status">${apiData.task_status}</span>`); $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
} else if (tasksStates.api) { } else if (tasksStates.newState) {
$tasks.remove(); $tasks.remove();
$tasksShort.remove(); $tasksShort.remove();
} }
......
...@@ -2,7 +2,7 @@ import Vue from 'vue'; ...@@ -2,7 +2,7 @@ import Vue from 'vue';
import $ from 'jquery'; import $ from 'jquery';
import '~/render_math'; import '~/render_math';
import '~/render_gfm'; import '~/render_gfm';
import issueTitle from '~/issue_show/issue_title_description.vue'; import issueTitleDescription from '~/issue_show/issue_title_description.vue';
import issueShowData from './mock_data'; import issueShowData from './mock_data';
window.$ = $; window.$ = $;
...@@ -11,18 +11,18 @@ const issueShowInterceptor = data => (request, next) => { ...@@ -11,18 +11,18 @@ const issueShowInterceptor = data => (request, next) => {
next(request.respondWith(JSON.stringify(data), { next(request.respondWith(JSON.stringify(data), {
status: 200, status: 200,
headers: { headers: {
'POLL-INTERVAL': 10, 'POLL-INTERVAL': 1,
}, },
})); }));
}; };
describe('Issue Title', () => { describe('Issue Title', () => {
const comps = { document.body.innerHTML = '<span id="task_status"></span>';
IssueTitleComponent: {},
}; let IssueTitleDescriptionComponent;
beforeEach(() => { beforeEach(() => {
comps.IssueTitleComponent = Vue.extend(issueTitle); IssueTitleDescriptionComponent = Vue.extend(issueTitleDescription);
}); });
afterEach(() => { afterEach(() => {
...@@ -32,14 +32,14 @@ describe('Issue Title', () => { ...@@ -32,14 +32,14 @@ describe('Issue Title', () => {
it('should render a title/description and update title/description on update', (done) => { it('should render a title/description and update title/description on update', (done) => {
Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest)); Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
const issueShowComponent = new comps.IssueTitleComponent({ const issueShowComponent = new IssueTitleDescriptionComponent({
propsData: { propsData: {
candescription: '.css-stuff', canUpdateIssue: '.css-stuff',
endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title', endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
}, },
}).$mount(); }).$mount();
// need setTimeout because actual setTimeout in code :P // need setTimeout because of api call/v-html
setTimeout(() => { setTimeout(() => {
expect(document.querySelector('title').innerText).toContain('this is a title (#1)'); expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>'); expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
...@@ -55,8 +55,8 @@ describe('Issue Title', () => { ...@@ -55,8 +55,8 @@ describe('Issue Title', () => {
expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('42'); expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('42');
done(); done();
}, 20); });
}, 10); });
// 10ms is just long enough for the update hook to fire // 10ms is just long enough for the update hook to fire
}); });
}); });
/* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */ /* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
import Issue from '~/issue'; import Issue from '~/issue';
import Vue from 'vue';
import '~/render_math';
import '~/render_gfm';
import IssueTitle from '~/issue_show/issue_title_description.vue';
import issueShowData from './issue_show/mock_data';
require('~/lib/utils/text_utility'); require('~/lib/utils/text_utility');
...@@ -81,52 +76,9 @@ describe('Issue', function() { ...@@ -81,52 +76,9 @@ describe('Issue', function() {
} }
describe('task lists', function() { describe('task lists', function() {
const issueShowInterceptor = data => (request, next) => {
next(request.respondWith(JSON.stringify(data), {
status: 200,
}));
};
beforeEach(function() { beforeEach(function() {
loadFixtures('issues/issue-with-task-list.html.raw'); loadFixtures('issues/issue-with-task-list.html.raw');
this.issue = new Issue(); this.issue = new Issue();
Vue.http.interceptors.push(issueShowInterceptor(issueShowData.issueSpecRequest));
});
afterEach(function() {
Vue.http.interceptors = _.without(Vue.http.interceptors, issueShowInterceptor);
});
it('modifies the Markdown field', function(done) {
// gotta actually render it for jquery to find elements
const vm = new Vue({
el: document.querySelector('.issue-title-entrypoint'),
components: {
IssueTitle,
},
render: createElement => createElement(IssueTitle, {
props: {
candescription: '.js-task-list-container',
endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
},
}),
});
setTimeout(() => {
spyOn(jQuery, 'ajax').and.stub();
const description = '<li class="task-list-item enabled"><input type="checkbox" class="task-list-item-checkbox"> Task List Item</li>';
expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
expect(vm.$el.querySelector('.wiki').innerHTML).toContain(description);
expect(vm.$el.querySelector('.js-task-list-field').value).toContain('- [ ] Task List Item');
// somehow the dom does not have a closest `.js-task-list.field` to the `.task-list-item-checkbox`
$('input[type=checkbox]').attr('checked', true).trigger('change');
expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
done();
}, 10);
}); });
it('submits an ajax request on tasklist:changed', function() { it('submits an ajax request on tasklist:changed', function() {
......
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