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

A flexiable Virtual DOM library for building modern web interface.

import diff from '../../src/diff'
import Element from '../../src/Element'

describe('test diff', () => {
  test('diff two Elements', () => {
    expect(
      diff(Element.of(
        'div', {
          id: 'container',
        }, 
        Element.of(
          'p', 
          Element.of(
            'span',
            'text content 2',
          )
        ), 
        Element.of(
          'ul', {
            class: 'news-container',
          }, 
          Element.of(
            'li', {
              key: 2,
            },
            'news 3'
          ), 
          Element.of(
            'li', {
              key: 1,
            },
            'news 2'
          ), 
          Element.of(
            'li', {
              key: 0,
            },
            'news 1'
          ),
        ),
      ), Element.of(
        'div', {
          id: 'container',
        }, 
        Element.of(
          'p', 
          Element.of(
            'span',
            'text content 1',
          )
        ), 
        Element.of(
          'ul', {
            class: 'news',
          }, 
          Element.of(
            'li', {
              key: 0,
            },
            'news 1'
          ), 
          Element.of(
            'li', {
              key: 1,
            },
            'news 2'
          ), 
          Element.of(
            'li', {
              key: 2,
            },
            'news 3'
          ),
        ),
      ))
    ).toEqual({
      3: [{
        type: 3,
        content: 'text content 2',
      }],
      4: [{
        type: 2,
        props: {
          class: 'news-container',
        },
      }, {
        type: 1,
        changes: [{
          type: 1,
          toIndex: 0,
          fromIndex: 2,
        }],
      }],
    })
  })

  test('diff two text nodes', () => {
    expect(
      diff('text content 2', 'text content 1')
    ).toEqual({
      0: [{
        type: 3,
        content: 'text content 2',
      }],
    })
  })
})

describe('test diff with null Element', () => {
  test('diff with only oldNode null', () => {
    expect(
      diff('text content', null)
    ).toEqual({
      rootWithNull: {
        type: 4,
        vnode: 'text content',
      }
    })
  })

  test('diff with only oldNode null', () => {
    expect(
      diff(null, 'text content')
    ).toEqual({
      rootWithNull: {
        type: 5,
      }
    })
  })

  test('diff with both oldNode and newNode null', () => {
    expect(
      diff(null, null)
    ).toEqual({})
  })
})

describe('test diff with not String or Element type', () => {
  test('number', () => {
    expect(
      diff(2, 1)
    ).toEqual({
      0: [{
        type: 3,
        content: '2',
      }]
    })
  })

  test('object', () => {
    expect(
      diff(
        {a: 1},
        {a: 1},
      )
    ).toEqual({})
  })

  test('undefined', () => {
    expect(
      diff(undefined, undefined)
    ).toEqual({})
  })

  test('undefined, number', () => {
    expect(
      diff(undefined, 1)
    ).toEqual({
      0: [{
        type: 3,
        content: 'undefined',
      }]
    })
  })

  test('object, number', () => {
    expect(
      diff({a: 1}, 1)
    ).toEqual({
      0: [{
        type: 3,
        content: '[object Object]',
      }]
    })
  })
})