moy-dom/test/patch/renderChildren.test.js

A flexiable Virtual DOM library for building modern web interface.

import renderChildren from '../../src/patch/renderChildren'
import Element from '../../src/Element'

let node

beforeEach(() => {
  node = document.createElement('ul')

  node.innerHTML = '<li>news 1</li><li>news 2</li><li>news 3</li><li>news 4</li>'
})

describe('test renderChildren with only one change', () => {
  test('remove', () => {
    renderChildren(node, [{
      type: 0,
      index: 1,
    }])

    expect(node.innerHTML).toBe('<li>news 1</li><li>news 3</li><li>news 4</li>')
  })

  test('move', () => {
    renderChildren(node, [{
      type: 1,
      fromIndex: 3,
      toIndex: 1,
    }])

    expect(node.innerHTML).toBe('<li>news 1</li><li>news 4</li><li>news 3</li><li>news 2</li>')
  })

  describe('test insert', () => {
    test('Element', () => {
      renderChildren(node, [{
        type: 2,
        index: 2,
        item: Element.of('li', 'news 5'),
      }])

      expect(node.innerHTML).toBe('<li>news 1</li><li>news 2</li><li>news 5</li><li>news 3</li><li>news 4</li>')
    })

    test('text node', () => {
      renderChildren(node, [{
        type: 2,
        index: 2,
        item: 'news 5',
      }])

      expect(node.innerHTML).toBe('<li>news 1</li><li>news 2</li>news 5<li>news 3</li><li>news 4</li>')
    })
  })

  describe('test append', () => {
    test('Element', () => {
      renderChildren(node, [{
        type: 3,
        item: Element.of('li', 'news 5'),
      }])

      expect(node.innerHTML).toBe('<li>news 1</li><li>news 2</li><li>news 3</li><li>news 4</li><li>news 5</li>')
    })

    test('text node', () => {
      renderChildren(node, [{
        type: 3,
        item: 'news 5',
      }])

      expect(node.innerHTML).toBe('<li>news 1</li><li>news 2</li><li>news 3</li><li>news 4</li>news 5')
    })
  })
})

describe('test renderChildren with many changes', () => {
  test('many changes', () => {
    renderChildren(node, [{
      type: 0,
      index: 1,
    }, {
      type: 1,
      fromIndex: 2,
      toIndex: 1,
    }, {
      type: 2,
      index: 2,
      item: Element.of('li', 'news 5'),
    }, {
      type: 3,
      item: 'news 6',
    }])

    expect(node.innerHTML).toBe('<li>news 1</li><li>news 4</li><li>news 5</li><li>news 3</li>news 6')
  })
})

describe('test renderChildren with an not exist type', () => {
  test('not an exist type', () => {
    expect(
      () => renderChildren(node, [{
        type: 4,
        index: 3,
      }])
    ).toThrow('Unknown reorder type 4')
  })
})