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

A flexiable Virtual DOM library for building modern web interface.

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

let index, patches

beforeEach(() => {
  index = 0
  patches = {}
})

describe('test for dfsWalk withoutchildren', () => {
  test('the same Element', () => {
    dfsWalk(Element.of(
      'div', {
        id: 'container',
      },
    ), Element.of(
      'div', {
        id: 'container',
      }
    ), index, patches)

    expect(patches).toEqual({})
  })

  test('the same text node', () => {
    dfsWalk('text content', 'text content', index, patches)

    expect(patches).toEqual({})
  })

  test('different Element with tagName', () => {
    dfsWalk(Element.of(
      'div', {
        id: 'container',
      },
    ), Element.of(
      'article', {
        id: 'container',
      },
    ), index, patches)

    expect(patches).toEqual({
      0: [{
        type: 0,
        node: Element.of(
          'div', {
            id: 'container',
          },
        ),
      }],
    })
  })

  test('different Element with props', () => {
    dfsWalk(Element.of(
      'div', {
        id: 'container',
      }
    ), Element.of(
      'div', {
        id: 'wrap',
      }
    ), index, patches)

    expect(patches).toEqual({
      0: [{
        type: 2,
        props: {
          id: 'container',
        }
      }]
    })
  })

  test('different text node', () => {
    dfsWalk('text content 2', 'text content 1', index, patches)

    expect(patches).toEqual({
      0: [{
        type: 3,
        content: 'text content 2',
      }]
    })
  })

  // Real DOM node will be removed when perform reordering, so has no needs to do anthings in here
  // see listDiff children
  test('different Element with null', () => {
    dfsWalk(null, Element.of(
      'div', {
        id: 'container',
      },
    ), index, patches)

    expect(patches).toEqual({})
  })
})

describe('test for dfsWalk with children within props ignore', () => {
  test('newTree and oldTree both ignore children', () => {
    dfsWalk(Element.of(
      'div', {
        ignore: true,
      },
      'text content 2',
    ), Element.of(
      'div', {
        ignore: true,
      },
      'text content 1',
    ), index, patches)

    expect(patches).toEqual({})
  })

  test('newTree ignores children', () => {
    dfsWalk(Element.of(
      'div', {
        ignore: true,
      },
      'text content 2',
    ), Element.of(
      'div',
      'text content 1',
    ), index, patches)

    expect(patches).toEqual({
      0: [{
        type: 2,
        props: {
          ignore: true,
        },
      }]
    })
  })

  test('oldTree ignores children', () => {
    dfsWalk(Element.of(
      'div',
      'text content 2',
    ), Element.of(
      'div', {
        ignore: true,
      },
      'text content 1',
    ), index, patches)

    expect(patches).toEqual({
      0: [{
        type: 2,
        props: {
          ignore: undefined,
        },
      }],
      1: [{
        type: 3,
        content: 'text content 2',
      }]
    })
  })
})

describe('test for dfsWalk with children', () => {
  test('test with text node children', () => {
    dfsWalk(Element.of(
      'div',
      'text content 2'
    ), Element.of(
      'div',
      'text content 1',
    ), index, patches)

    expect(patches).toEqual({
      1: [{
        type: 3,
        content: 'text content 2',
      }]
    })
  })

  test('test with Element children without key', () => {
    dfsWalk(Element.of(
      'p', Element.of(
        'span',
        'text content 2',
      )
    ), Element.of(
      'p', Element.of(
        'span',
        'text content 1',
      )
    ), index, patches)

    expect(patches).toEqual({
      2: [{
        type: 3,
        content: 'text content 2',
      }]
    })
  })

  test('test with Element children with key', () => {
    dfsWalk(Element.of(
      'p', Element.of(
        'span', {
          key: 1,
        },
        'text content, key 1'
      ), Element.of(
        'span', {
          key: 0,
        },
        'text content, key 0'
      )
    ), Element.of(
      'p', Element.of(
        'span', {
          key: 0,
        },
        'text content, key 0'
      ), Element.of(
        'span', {
          key: 1,
        },
        'text content, key 1'
      )
    ), index, patches)

    expect(patches).toEqual({
      0: [{
        type: 1,
        changes: [{
          type: 1,
          toIndex: 0,
          fromIndex: 1,
        }],
      }],
    })
  })
})