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

A flexiable Virtual DOM library for building modern web interface.

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

describe('test applyPatches', () => {
  describe('type 0, replace', () => {
    let node, childNode

    beforeEach(() => {
      node = document.createElement('div')
      childNode = document.createElement('p')
      node.appendChild(childNode)
    })

    test('text node', () => {
      applyPatches(childNode, [{
        type: 0,
        node: 'text content',
      }])

      expect(node.innerHTML).toBe('text content')
    })

    test('Element', () => {
      applyPatches(childNode, [{
        type: 0,
        node: Element.of('span', 'text content'),
      }])

      expect(node.innerHTML).toBe('<span>text content</span>')
    })
  })

  test('type 1, reorder children', () => {
    const node = document.createElement('ul')
    node.innerHTML = '<li>news 1</li><li>news 2</li><li>news 3</li><li>news 4</li>'

    applyPatches(node, [{
      type: 1,
      changes: [{
        type: 1,
        fromIndex: 2,
        toIndex: 1,
      }],
    }])

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

  test('type 2, props\' changes', () => {
    const node = document.createElement('input')

    applyPatches(node, [{
      type: 2,
      props: {
        type: 'number',
      },
    }])

    expect(node.getAttribute('type')).toBe('number')
  })

  test('type 3, textContent replace', () => {
    const node = document.createTextNode('text content 1')

    expect(node.textContent).toBe('text content 1')

    applyPatches(node, [{
      type: 3,
      content: 'text content 2',
    }])

    expect(node.textContent).toBe('text content 2')
  })
})

describe('test applyPatches with an not exist type', () => {
  test('not exist type', () => {
    const node = document.createElement('input')

    expect(
      () => applyPatches(node, [{
        type: 4,
        index: 2,
      }])
    ).toThrow('Unknown patch type 4')
  })
})