Merged in feature/fix-numbering (pull request #35)

Fix content list numbering

Approved-by: Ramon Wenger <ramon.wenger@iterativ.ch>

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

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);
+  });
+
+})