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

A flexiable Virtual DOM library for building modern web interface.

import dfsWalk from '../../src/patch/dfsWalk'

describe('test dfsWalk', () => {
  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)

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

    expect(node.innerHTML).toBe(
      '<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>'
    )
  })
})