From 03f418df382ca4b924db22df7a1b0245a92f3408 Mon Sep 17 00:00:00 2001 From: Christian Cueni Date: Wed, 11 Sep 2019 14:45:31 +0200 Subject: [PATCH] Fix content list numbering --- client/src/components/ContentBlock.vue | 19 +- client/tests/unit/content-block.spec.js | 240 ++++++++++++++++++++++++ 2 files changed, 253 insertions(+), 6 deletions(-) create mode 100644 client/tests/unit/content-block.spec.js diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue index f51c210b..6f85068e 100644 --- a/client/src/components/ContentBlock.vue +++ b/client/src/components/ContentBlock.vue @@ -152,8 +152,9 @@ if (content.type === 'content_list_item') { contentList = [...contentList, content] if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array + let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList, startingIndex)]; startingIndex = this.updateStartingIndex(startingIndex, contentList); - return [...newContents, ...this.createContentListOrBlocks(contentList, startingIndex)]; + return updatedContent; } return newContents; } else { @@ -220,19 +221,25 @@ }]; }, updateStartingIndex(startingIndex, contentList) { - return contentList.length > 1 ? startingIndex + contentList.length : startingIndex; + return contentList.length > 0 ? startingIndex + contentList.length : startingIndex; }, removeSingleContentListItem(content, index) { // just handle the case where we have one contentlistItem ( no index like "a)"" will be shown) - if (index > 0) { + + if (index === 0) { return content; }; - let contentListIndex = content.findIndex(contentItem => contentItem.type === 'content_list'); - if (contentListIndex < 0) { + const contentLists = content.filter(contentItem => contentItem.type === 'content_list'); + if (contentLists.length !== 1) { return content; } - return [...content.slice(0, contentListIndex), ...content[contentListIndex].contents[0].value, ...content.slice(contentListIndex + 1)]; + + const listIndex = content.findIndex(contentItem => contentItem.type === 'content_list'); + if (content[listIndex].contents.length !== 1) { + return content; + } + return [...content.slice(0, listIndex), ...content[listIndex].contents[0].value, ...content.slice(listIndex + 1)]; } }, data() { diff --git a/client/tests/unit/content-block.spec.js b/client/tests/unit/content-block.spec.js new file mode 100644 index 00000000..dfde5350 --- /dev/null +++ b/client/tests/unit/content-block.spec.js @@ -0,0 +1,240 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils' +import ContentBlock from '@/components/ContentBlock' +import Vuex from 'vuex' + +const localVue = createLocalVue() + +localVue.use(Vuex) + +describe('ContentBlock.vue', () => { + + let actions; + let store; + let getters; + + beforeEach(() => { + actions = {}; + getters = { + editModule: jest.fn() + }; + + store = new Vuex.Store({ + state: {}, + getters, + actions: {} + }) + }) + + it('should update index if content list has minimal length', () => { + const props = { + contentBlock: {id: 'asbd', type: 'content', contents: []}, + parent: null + }; + const wrapper = shallowMount(ContentBlock, { + propsData: props, + store, + localVue + }); + + let contentList = [1,2,3,4]; + let index = 0; + let updatedIndex = wrapper.vm.updateStartingIndex(index, contentList); + expect(updatedIndex).toEqual(contentList.length + index); + }); + + it('should not update index if content list has not minimal length', () => { + const props = { + contentBlock: {id: 'asbd', type: 'content', contents: []}, + parent: null + }; + const wrapper = shallowMount(ContentBlock, { + propsData: props, + store, + localVue + }); + + let contentList = []; + let index = 2; + let updatedIndex = wrapper.vm.updateStartingIndex(index, contentList); + expect(updatedIndex).toEqual(index); + }); + + + it('should use continuos item numbering', () => { + + const contents = [ + { + type: 'text_block' + }, + { + type: 'content_list_item', + id: 1, + contents: [] + }, + { + type: 'text_block' + }, + { + type: 'content_list_item', + id: 2, + contents: [] + }, + { + type: 'content_list_item', + id: 3, + contents: [] + }, + { + type: 'text_block' + }, + { + type: 'content_list_item', + id: 4, + contents: [] + }, + ]; + + + const props = { + contentBlock: { + id: 'asbd', + type: 'content', + contents + }, + parent: null + }; + const wrapper = shallowMount(ContentBlock, { + propsData: props, + store, + localVue + }); + + /* + expected output + [ { type: 'text_block' }, + { type: 'content_list', + contents: [ [Object] ], + id: 1, + startingIndex: 0 }, + { type: 'text_block' }, + { type: 'content_list', + contents: [ [Object], [Object] ], + id: 2, + startingIndex: 1 }, + { type: 'text_block' }, + { type: 'content_list', + contents: [ [Object] ], + id: 4, + startingIndex: 3 } ] + */ + + const updatedContents = wrapper.vm.contentBlocksWithContentLists.contents; + + // start at 0 + expect(updatedContents[1].startingIndex).toEqual(0); + // 2nd content list + expect(updatedContents[3].startingIndex).toEqual(1); + // 3rd content list + expect(updatedContents[5].startingIndex).toEqual(3); + }); + + it('should remove single content items', () => { + + const contents = [ + { + type: 'text_block' + }, + { + type: 'content_list', + id: 1, + contents: [ + { + type: 'content_list_item', + value: [ + { + type: 'text_block' + } + ] + }] + }, + { + type: 'text_block' + } + ]; + + const props = { + contentBlock: { + id: 'asbd', + type: 'content', + contents: [] + }, + parent: null + }; + const wrapper = shallowMount(ContentBlock, { + propsData: props, + store, + localVue + }); + + const contents2 = wrapper.vm.removeSingleContentListItem(contents, 1); + + const expectList = [ + { type: 'text_block' }, + { type: 'text_block' }, + { type: 'text_block' } + ]; + // start at 0 + expect(contents2).toEqual(expectList); + }); + + it('should not remove multiple content items', () => { + + const contents = [ + { + type: 'text_block' + }, + { + type: 'content_list', + id: 1, + contents: [ + { + type: 'content_list_item', + value: [ + { + type: 'text_block' + } + ] + }, + { + type: 'content_list_item', + value: [ + { + type: 'text_block' + } + ] + }] + }, + { + type: 'text_block' + } + ]; + + const props = { + contentBlock: { + id: 'asbd', + type: 'content', + contents: [] + }, + parent: null + }; + const wrapper = shallowMount(ContentBlock, { + propsData: props, + store, + localVue + }); + + const contents3 = wrapper.vm.removeSingleContentListItem(contents, 1); + expect(contents3).toEqual(contents); + }); + +})