moy-dom/test/Element.test.js

A flexiable Virtual DOM library for building modern web interface.

import Element from '../src/Element'

describe('test for Element constructor', () => {
  test('without null children', () => {
    const element = new Element('div', {
        id: 'container',
      }, 
      ['text content'],
    )

    expect(element.children).toEqual(['text content'])
    expect(element.count).toEqual(1)
  })

  test('with Element children', () => {
    const element = new Element('div', {
        id: 'container',
      }, [
        new Element(
          'span', {

          },
          ['text content span'],
        ),
      ],
    )

    expect(element.children.length).toBe(1)
    expect(element.count).toEqual(2)
  })

  test('with null children', () => {
    const element = new Element('div', {
      id: 'container',
    }, [null, 'text content'])

    expect(element.children.length).toBe(1)
    expect(element.count).toEqual(1)
  })
})

describe('test for Element of', () => {
  test('just with tagName', () => {
    expect(
      Element.of('div')
    ).toEqual(new Element('div', {}, []))
  })

  test('with tagName and props', () => {
    expect(
      Element.of('div', {id: 'container'})
    ).toEqual(new Element('div', {id: 'container'}, []))
  })

  test('with tagName and children', () => {
    expect(
      Element.of('div', 'text content')
    ).toEqual(new Element('div', {}, ['text content']))
  })

  test('with tagName, props and children', () => {
    expect(
      Element.of('div', {id: 'container'}, 'text content')
    ).toEqual(
      new Element('div', {id: 'container'}, ['text content'])
    )
  })
})

describe('test for Element render', () => {
  describe('domAttr', () => {
    test('normal value', () => {
      const element = Element.of(
        'input', {
          value: 'murakami',
        },
      ).render()

      expect(element.nodeName).toBe('INPUT')
      expect(element.value).toBe('murakami')
    })

    test('undefined', () => {
      const element = Element.of(
        'input', {
          value: undefined,
        },
      ).render()

      expect(element.value).toBe('')
    })
  })

  describe('domEvent', () => {
    test('function', () => {
      const element = Element.of(
        'div', {
          onclick: jest.fn(),
        }
      ).render()

      expect(element.onclick).toEqual(expect.any(Function))
    })

    test('function', () => {
      const element = Element.of(
        'div', {
          onclick: undefined,
        }
      ).render()

      expect(element.onclick).toBeNull()
    })
  })

  describe('boolAttr', () => {
    test('propValue true', () => {
      const element = Element.of(
        'input', {
          disabled: true,
        },
      ).render()

      expect(element.disabled).toBeTruthy()
      expect(element.getAttribute('disabled')).toBe('disabled')
    })

    test('propValue false', () => {
      const element = Element.of(
        'input', {
          disabled: false,
        },
      ).render()

      expect(element.disabled).toBeFalsy()
      expect(element.getAttribute('disabled')).toBeNull()
    })
  })

  describe('normalAttr', () => {
    test('normal value', () => {
      const element = Element.of(
        'input', {
          class: 'input-author',
        }
      ).render()

      expect(element.className).toBe('input-author')
      expect(element.getAttribute('class')).toBe('input-author')
    })

    test('undefined', () => {
      const element = Element.of(
        'input', {
          class: undefined,
        }
      ).render()

      expect(element.className).toBe('')
      expect(element.getAttribute('class')).toBeNull()
    })
  })

  describe('children', () => {
    test('text node', () => {
      const element = Element.of(
        'span',
        'text content',
      ).render()

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

    test('Element node', () => {
      const element = Element.of(
        'p', Element.of(
          'span',
          'text content',
        ),
      ).render()

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

describe('test for Element Object.prototype.toString.call', () => {
  test('toStringTag', () => {
    expect(
      Object.prototype.toString.call(Element.of('div'))
    ).toBe('[object Element]')
  })
})