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

A flexiable Virtual DOM library for building modern web interface.

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

describe('test patch', () => {
  test('simple test', () => {
    const app = document.createElement('div')
    app.id = 'app'
    
    const node = document.createElement('div')
    node.id = 'container'
    node.innerHTML = '<p><span>text content 1</span></p>' + 
                     '<ul class="news"><li key="0">news 1</li><li key="1">news 2</li><li key="2">news 3</li></ul>'

    app.appendChild(node)

    patch(app, {
      3: [{
        type: 3,
        content: 'text content 2',
      }],
      4: [{
        type: 2,
        props: {
          class: 'news-container',
        },
      }, {
        type: 1,
        changes: [{
          type: 1,
          toIndex: 0,
          fromIndex: 2,
        }],
      }],
    })

    expect(app.innerHTML).toBe(
      '<div id="container">' +
      '<p><span>text content 2</span></p>' +
      '<ul class="news-container"><li key="2">news 3</li><li key="1">news 2</li><li key="0">news 1</li></ul>' +
      '</div>'
    )
  })
})

describe('test patch with rootWithNullPatch', () => {
  describe('type 4, append newNode', () => {
    test('text node', () => {
      const app = document.createElement('div')
      app.id = 'app'

      patch(app, {
        rootWithNull: {
          type: 4,
          vnode: 'text content',
        }
      })

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

    test('Element', () => {
      const app = document.createElement('div')
      app.id = 'app'

      patch(app, {
        rootWithNull: {
          type: 4,
          vnode: Element.of('span', 'text content'),
        }
      })

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

  test('type 5, remove oldNode', () => {
    const app = document.createElement('div')
    app.id = 'app'
    
    const node = document.createElement('div')
    node.id = 'container'
    node.innerHTML = '<p><span>text content 1</span></p>' + 
                     '<ul class="news"><li key="0">news 1</li><li key="1">news 2</li><li key="2">news 3</li></ul>'

    app.appendChild(node)

    patch(app, {
      rootWithNull: {
        type: 5,
      }
    })

    expect(app.innerHTML).toBe('')
  })
})