skillbox/client/tests/unit/content-block.spec.js

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

});