diff options
| -rw-r--r-- | spec/javascripts/issue_show/issue_title_description_spec.js | 6 | ||||
| -rw-r--r-- | spec/javascripts/issue_show/mock_data.js | 8 | ||||
| -rw-r--r-- | spec/javascripts/issue_spec.js | 52 |
3 files changed, 57 insertions, 9 deletions
diff --git a/spec/javascripts/issue_show/issue_title_description_spec.js b/spec/javascripts/issue_show/issue_title_description_spec.js index e1d0f51f9cb..3877ed2164b 100644 --- a/spec/javascripts/issue_show/issue_title_description_spec.js +++ b/spec/javascripts/issue_show/issue_title_description_spec.js @@ -11,14 +11,12 @@ const issueShowInterceptor = data => (request, next) => { next(request.respondWith(JSON.stringify(data), { status: 200, headers: { - 'POLL-INTERVAL': 1, + 'POLL-INTERVAL': 10, }, })); }; describe('Issue Title', () => { - document.body.innerHTML = '<span id="task_status"></span>'; - const comps = { IssueTitleComponent: {}, }; @@ -57,7 +55,7 @@ describe('Issue Title', () => { expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('42'); done(); - }, 10); + }, 20); }, 10); // 10ms is just long enough for the update hook to fire }); diff --git a/spec/javascripts/issue_show/mock_data.js b/spec/javascripts/issue_show/mock_data.js index 5d234ebf254..ad5a7b63470 100644 --- a/spec/javascripts/issue_show/mock_data.js +++ b/spec/javascripts/issue_show/mock_data.js @@ -15,4 +15,12 @@ export default { issue_number: 1, task_status: '0 of 0 completed', }, + issueSpecRequest: { + title: '<p>this is a title</p>', + title_text: 'this is a title', + description: '<li class="task-list-item enabled"><input type="checkbox" class="task-list-item-checkbox">Task List Item</li>', + description_text: '- [ ] Task List Item', + issue_number: 1, + task_status: '0 of 1 completed', + }, }; diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js index 9a2570ef7e9..e2e9cc01424 100644 --- a/spec/javascripts/issue_spec.js +++ b/spec/javascripts/issue_spec.js @@ -1,5 +1,10 @@ /* 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 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'); @@ -75,16 +80,53 @@ describe('Issue', function() { expect($btnReopen).toHaveText('Reopen issue'); } - describe('task lists', function() { + fdescribe('task lists', function() { + const issueShowInterceptor = data => (request, next) => { + next(request.respondWith(JSON.stringify(data), { + status: 200, + })); + }; + beforeEach(function() { loadFixtures('issues/issue-with-task-list.html.raw'); 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() { - spyOn(jQuery, 'ajax').and.stub(); - $('input[type=checkbox]').attr('checked', true).trigger('change'); - expect($('.js-task-list-field').val()).toBe('- [x] Task List Item'); + 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() { |