import $ from 'jquery'; import axios from '~/lib/utils/axios_utils'; import TaskList from '~/task_list'; describe('TaskList', () => { let taskList; let currentTarget; const taskListOptions = { selector: '.task-list', dataType: 'issue', fieldName: 'description', lockVersion: 2, }; const createTaskList = () => new TaskList(taskListOptions); beforeEach(() => { setFixtures(`
`); currentTarget = $('
'); taskList = createTaskList(); }); it('should call init when the class constructed', () => { jest.spyOn(TaskList.prototype, 'init'); jest.spyOn(TaskList.prototype, 'disable').mockImplementation(() => {}); jest.spyOn($.prototype, 'taskList').mockImplementation(() => {}); jest.spyOn($.prototype, 'on').mockImplementation(() => {}); taskList = createTaskList(); const $taskListEl = $(taskList.taskListContainerSelector); expect(taskList.init).toHaveBeenCalled(); expect(taskList.disable).toHaveBeenCalled(); expect($taskListEl.taskList).toHaveBeenCalledWith('enable'); expect($(document).on).toHaveBeenCalledWith( 'tasklist:changed', taskList.taskListContainerSelector, taskList.updateHandler, ); }); describe('getTaskListTarget', () => { it('should return currentTarget from event object if exists', () => { const $target = taskList.getTaskListTarget({ currentTarget }); expect($target).toEqual(currentTarget); }); it('should return element of the taskListContainerSelector', () => { const $target = taskList.getTaskListTarget(); expect($target).toEqual($(taskList.taskListContainerSelector)); }); }); describe('disableTaskListItems', () => { it('should call taskList method with disable param', () => { taskList.disableTaskListItems(); expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(2); }); }); describe('enableTaskListItems', () => { it('should enable markdown tasks and disable non-markdown tasks', () => { taskList.disableTaskListItems(); taskList.enableTaskListItems(); expect(document.querySelectorAll('.task-list-item input:enabled').length).toEqual(1); expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(1); }); }); describe('enable', () => { it('should enable task list items and on document event', () => { jest.spyOn($.prototype, 'on').mockImplementation(() => {}); taskList.enable(); expect(document.querySelectorAll('.task-list-item input:enabled').length).toEqual(1); expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(1); expect($(document).on).toHaveBeenCalledWith( 'tasklist:changed', taskList.taskListContainerSelector, taskList.updateHandler, ); }); }); describe('disable', () => { it('should disable task list items and off document event', () => { jest.spyOn($.prototype, 'off').mockImplementation(() => {}); taskList.disable(); expect(document.querySelectorAll('.task-list-item input:disabled').length).toEqual(2); expect($(document).off).toHaveBeenCalledWith( 'tasklist:changed', taskList.taskListContainerSelector, ); }); }); describe('update', () => { it('should disable task list items and make a patch request then enable them again', () => { const response = { data: { lock_version: 3 } }; jest.spyOn(taskList, 'enableTaskListItems').mockImplementation(() => {}); jest.spyOn(taskList, 'disableTaskListItems').mockImplementation(() => {}); jest.spyOn(taskList, 'onUpdate').mockImplementation(() => {}); jest.spyOn(taskList, 'onSuccess').mockImplementation(() => {}); jest.spyOn(axios, 'patch').mockReturnValue(Promise.resolve(response)); const value = 'hello world'; const endpoint = '/foo'; const target = $(``); const detail = { index: 2, checked: true, lineNumber: 8, lineSource: '- [ ] check item', }; const event = { target, detail }; const patchData = { [taskListOptions.dataType]: { [taskListOptions.fieldName]: value, lock_version: taskListOptions.lockVersion, update_task: { index: detail.index, checked: detail.checked, line_number: detail.lineNumber, line_source: detail.lineSource, }, }, }; const update = taskList.update(event); expect(taskList.onUpdate).toHaveBeenCalled(); return update.then(() => { expect(taskList.disableTaskListItems).toHaveBeenCalledWith(event); expect(axios.patch).toHaveBeenCalledWith(endpoint, patchData); expect(taskList.enableTaskListItems).toHaveBeenCalledWith(event); expect(taskList.onSuccess).toHaveBeenCalledWith(response.data); expect(taskList.lockVersion).toEqual(response.data.lock_version); }); }); }); it('should handle request error and enable task list items', () => { const response = { data: { error: 1 } }; jest.spyOn(taskList, 'enableTaskListItems').mockImplementation(() => {}); jest.spyOn(taskList, 'onUpdate').mockImplementation(() => {}); jest.spyOn(taskList, 'onError').mockImplementation(() => {}); jest.spyOn(axios, 'patch').mockReturnValue(Promise.reject({ response })); // eslint-disable-line prefer-promise-reject-errors const event = { detail: {} }; const update = taskList.update(event); expect(taskList.onUpdate).toHaveBeenCalled(); return update.then(() => { expect(taskList.enableTaskListItems).toHaveBeenCalledWith(event); expect(taskList.onError).toHaveBeenCalledWith(response.data); }); }); });