diff --git a/app/assets/javascripts/issue_show/actions/tasks.js b/app/assets/javascripts/issue_show/actions/tasks.js index 654d6d64f0f..719b604a865 100644 --- a/app/assets/javascripts/issue_show/actions/tasks.js +++ b/app/assets/javascripts/issue_show/actions/tasks.js @@ -1,26 +1,26 @@ -export default (apiData, tasks) => { +export default (newStateData, tasks) => { const $tasks = $('#task_status'); const $tasksShort = $('#task_status_short'); const $issueableHeader = $('.issuable-header'); - const tasksStates = { api: null, tasks: null }; + const tasksStates = { newState: null, currentState: null }; if ($tasks.length === 0) { - if (!(apiData.task_status.indexOf('0 of 0') === 0)) { - $issueableHeader.append(`${apiData.task_status}`); + if (!(newStateData.task_status.indexOf('0 of 0') === 0)) { + $issueableHeader.append(`${newStateData.task_status}`); } else { $issueableHeader.append(''); } } else { - tasksStates.api = apiData.task_status.indexOf('0 of 0') === 0; - tasksStates.tasks = tasks.indexOf('0 of 0') === 0; + tasksStates.newState = newStateData.task_status.indexOf('0 of 0') === 0; + tasksStates.currentState = tasks.indexOf('0 of 0') === 0; } - if ($tasks && !tasksStates.api) { - $tasks.text(apiData.task_status); - $tasksShort.text(apiData.task_status); - } else if (tasksStates.tasks) { - $issueableHeader.append(`${apiData.task_status}`); - } else if (tasksStates.api) { + if ($tasks && !tasksStates.newState) { + $tasks.text(newStateData.task_status); + $tasksShort.text(newStateData.task_status); + } else if (tasksStates.currentState) { + $issueableHeader.append(`${newStateData.task_status}`); + } else if (tasksStates.newState) { $tasks.remove(); $tasksShort.remove(); } diff --git a/spec/javascripts/issue_show/issue_title_description_spec.js b/spec/javascripts/issue_show/issue_title_description_spec.js index 3877ed2164b..30455663e50 100644 --- a/spec/javascripts/issue_show/issue_title_description_spec.js +++ b/spec/javascripts/issue_show/issue_title_description_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import $ from 'jquery'; import '~/render_math'; 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'; window.$ = $; @@ -11,18 +11,18 @@ const issueShowInterceptor = data => (request, next) => { next(request.respondWith(JSON.stringify(data), { status: 200, headers: { - 'POLL-INTERVAL': 10, + 'POLL-INTERVAL': 1, }, })); }; describe('Issue Title', () => { - const comps = { - IssueTitleComponent: {}, - }; + document.body.innerHTML = ''; + + let IssueTitleDescriptionComponent; beforeEach(() => { - comps.IssueTitleComponent = Vue.extend(issueTitle); + IssueTitleDescriptionComponent = Vue.extend(issueTitleDescription); }); afterEach(() => { @@ -32,14 +32,14 @@ describe('Issue Title', () => { it('should render a title/description and update title/description on update', (done) => { Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest)); - const issueShowComponent = new comps.IssueTitleComponent({ + const issueShowComponent = new IssueTitleDescriptionComponent({ propsData: { - candescription: '.css-stuff', + canUpdateIssue: '.css-stuff', endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title', }, }).$mount(); - // need setTimeout because actual setTimeout in code :P + // need setTimeout because of api call/v-html setTimeout(() => { expect(document.querySelector('title').innerText).toContain('this is a title (#1)'); expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('

this is a title

'); @@ -55,8 +55,8 @@ describe('Issue Title', () => { expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('42'); done(); - }, 20); - }, 10); + }); + }); // 10ms is just long enough for the update hook to fire }); }); diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js index 788d7ccc5e4..445ecea8e64 100644 --- a/spec/javascripts/issue_spec.js +++ b/spec/javascripts/issue_spec.js @@ -1,10 +1,5 @@ /* 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'); @@ -81,52 +76,9 @@ describe('Issue', function() { } describe('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(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 = '
  • Task List Item
  • '; - - expect(document.querySelector('title').innerText).toContain('this is a title (#1)'); - expect(vm.$el.querySelector('.title').innerHTML).toContain('

    this is a title

    '); - 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() {