knate/test/test_nateHtml.js

/* global test */
/* global suite */

const K = require('kcore')

// Create fake document object to emulate browser DOM model.
const JSDOM    = require('jsdom').JSDOM
const dom      = new JSDOM('')
const window   = dom.window
const document = window.document

global.window   = window
global.document = document

window.K = K

require('../src/KNateHtmlStatic')
require('../src/KNateAbstractDom')
require('../src/KNateHtmlDom')
require('should')

// This is dirty hack to pass emulated JSDOM object through K.Elem.isElem() test.
K.Elem = {
  isElem: function (o)
  {
    if (o.elem) {
      // Nate object.
      return false;
    } else {
      // JSDOM object.
      return true;
    }
  },

  isText: function (o)
  {
    return false;
  }
}

// Minimal kbrowser-core functionality needed by NateHtmlDom class.
K.updateProperty = function (o, key, newContent) {
  if (o[key] != newContent) {
    o[key] = newContent
  }
}

function TestNateHtml(domMode) {
  let nRoot       = null
  let nRootDiv    = null
  let title       = null
  let titlePrefix = null

  if (domMode) {
    // DOM tests.
    nRoot       = K.NateHtmlDom(document.body)
    title       = 'NateHtmlDom'
    titlePrefix = 'DOM: '
  } else {
    // Static tests.
    nRoot       = K.NateHtmlElem()
    title       = 'NateHtmlStatic'
    titlePrefix = 'Static: '
  }

  const _suite = (title, cb) => {
    suite(titlePrefix + title, cb)
  }

  const _reset = () => {
    // TODO: Use deleteAllChildren() in static version too.
    if (domMode) {
      nRoot.deleteAllChildren()
    } else {
      nRoot = K.NateHtmlElem()
    }
  }

  const _verifyResultHtml = (expectedHtml) => {
    if (domMode) {
      nRoot.elem.innerHTML.should.be.eql(expectedHtml)
    } else {
      nRoot.render().should.be.eql(expectedHtml)
    }
  }

  _suite(title, () => {
    _suite('Namespace', () => {
      let nElem1 = null
      let nElem2 = null

      let namespaceA = null
      let namespaceB = null
      let namespaceC = null

      const _testSetter = (nNode, key, value) => {
        nNode[key] = value
      }

      test('Init', () => {
        _reset()

        // Create two namespaces.
        namespaceA = nRoot.getNamespace().createExtension('testA')
        namespaceB = nRoot.getNamespace().createExtension('testB')

        namespaceA.addSetter('testKeyA1', _testSetter)
        namespaceA.addSetter('testKeyA2', _testSetter)

        namespaceB.addSetter('testKeyB1', _testSetter)
        namespaceB.addSetter('testKeyB2', _testSetter)
      })

      test('Create element via namespace directly', () => {
        _reset()

        // Create new elem with A namespace.
        nElem1 = namespaceA.createNate(nRoot)
        nElem1.set('testKeyA1', 'valueA1.1')
        nElem1.set('testKeyA2', 'valueA2.1')

        // Verify do A setters work.
        nElem1.getNamespace().should.be.eql(namespaceA)
        nElem1.testKeyA1.should.be.eql('valueA1.1')
        nElem1.testKeyA2.should.be.eql('valueA2.1')
      })

      test('Inherit namespace from parent', () => {
        // Create child elem - should inherits namespace from parent.
        nElem2 = nElem1.newDiv()
        nElem2.getNamespace().should.be.eql(namespaceA)

        // Verify do parent stayed without touch.
        nElem1.getNamespace().should.be.eql(namespaceA)
        nElem1.testKeyA1.should.be.eql('valueA1.1')
        nElem1.testKeyA2.should.be.eql('valueA2.1')

        // Verify do A setters work on child too.
        nElem2.set('testKeyA1', 'valueA1.2')
        nElem2.set('testKeyA2', 'valueA2.2')

        nElem2.testKeyA1.should.be.eql('valueA1.2')
        nElem2.testKeyA2.should.be.eql('valueA2.2')
      })

      test('Assign namespace directly', () => {
        // Replace namespace assigned to parent on-the-fly.
        nElem1.assignNamespace(namespaceB)
        nElem1.getNamespace().should.be.eql(namespaceB)
        nElem2.getNamespace().should.be.eql(namespaceA)

        // Verify do B setters work.
        nElem1.set('testKeyB1', 'valueB1.3')
        nElem1.set('testKeyB2', 'valueB2.3')

        nElem1.testKeyA1.should.be.eql('valueA1.1')
        nElem1.testKeyA2.should.be.eql('valueA2.1')
        nElem1.testKeyB1.should.be.eql('valueB1.3')
        nElem1.testKeyB2.should.be.eql('valueB2.3')

        // Verify do child setters stayed without touch.
        nElem2.set('testKeyA1', 'valueA1.4')
        nElem2.set('testKeyA2', 'valueA2.4')

        nElem2.testKeyA1.should.be.eql('valueA1.4')
        nElem2.testKeyA2.should.be.eql('valueA2.4')
      })

      test('Create and delete functions', () => {
        const namespace = K.BSC.NateNamespace();
        namespace.addCreateFunction('tag1', function() {
          const rv = this.getNamespace().createNate()
          rv._createdBy_ = 'createTag1'
          return rv
        })

        namespace.addCreateFunction('tag2', function() {
          const rv = this.getNamespace().createNate()
          rv._createdBy_ = 'createTag2'
          return rv
        })

        namespace.addDeleteFunction('tag1', function() {this._deletedBy_ = 'deleteTag1'})
        namespace.addDeleteFunction('tag2', function() {this._deletedBy_ = 'deleteTag2'})

        const nRoot = namespace.createNate()
        const nTag1 = nRoot.newTag1()
        const nTag2 = nRoot.newTag2()

        nTag1.delete()
        nTag2.delete()

        nTag1._createdBy_.should.be.eql('createTag1')
        nTag2._createdBy_.should.be.eql('createTag2')

        nTag1._deletedBy_.should.be.eql('deleteTag1')
        nTag2._deletedBy_.should.be.eql('deleteTag2')
      })
    })

    _suite('Single tags (generic)', () => {
      const _createOneTagTest = (tagName, createFunction, expectedHtml) => {
        test(createFunction, () => {
          _reset()
          nRoot[createFunction]().setText('text')
          _verifyResultHtml(expectedHtml)
        })

        test('createNate(' + tagName + ')', () => {
          _reset()
          nRoot.newNate(tagName).setText('text')
          _verifyResultHtml(expectedHtml)
        })
      }

      _createOneTagTest('b'             , 'newB'             , '<b>text</b>')
      _createOneTagTest('br'            , 'newBr'            , '<br>')
      _createOneTagTest('div'           , 'newDiv'           , '<div>text</div>')
      _createOneTagTest('span'          , 'newSpan'          , '<span>text</span>')
      _createOneTagTest('canvas'        , 'newCanvas'        , '<canvas>text</canvas>')
      _createOneTagTest('h1'            , 'newH1'            , '<h1>text</h1>')
      _createOneTagTest('h2'            , 'newH2'            , '<h2>text</h2>')
      _createOneTagTest('h3'            , 'newH3'            , '<h3>text</h3>')
      _createOneTagTest('label'         , 'newLabel'         , '<label>text</label>')
      _createOneTagTest('ul'            , 'newUl'            , '<ul>text</ul>')
      _createOneTagTest('li'            , 'newLi'            , '<li>text</li>')
      _createOneTagTest('p'             , 'newP'             , '<p>text</p>')
      _createOneTagTest('pre'           , 'newPre'           , '<pre>text</pre>')
      _createOneTagTest('option'        , 'newOption'        , '<option>text</option>')
      _createOneTagTest('optGroup'      , 'newOptGroup'      , '<optgroup>text</optgroup>')
      _createOneTagTest('textArea'      , 'newTextArea'      , '<textarea>text</textarea>')
      _createOneTagTest('table'         , 'newTable'         , '<table>text</table>')
      _createOneTagTest('tBody'         , 'newTBody'         , '<tbody>text</tbody>')
      _createOneTagTest('tr'            , 'newTr'            , '<tr>text</tr>')
      _createOneTagTest('td'            , 'newTd'            , '<td>text</td>')
      _createOneTagTest('a'             , 'newA'             , '<a>text</a>')

      _createOneTagTest('inputCheckbox' , 'newInputCheckbox' , '<input type="checkbox">')
      _createOneTagTest('inputPassword' , 'newInputPassword' , '<input type="password">')
      _createOneTagTest('inputRadio'    , 'newInputRadio'    , '<input type="radio">')
      _createOneTagTest('inputText'     , 'newInputText'     , '<input type="text">')
    })

    test('Special property: textContent', () => {
      _reset()
      const nDiv = nRoot.newDiv()
      // Pure text.
      nDiv.set('textContent', 'this is some pure text content')
      _verifyResultHtml('<div>this is some pure text content</div>')

      // Escaped HTML content.
      nDiv.set('textContent', 'this is HTML escaped content: <>&\'"')
      _verifyResultHtml('<div>this is HTML escaped content: &lt;&gt;&amp;\'"</div>')

      // Line break - should be keep as plain ascii.
      nDiv.set('textContent', 'line1\nline2')
      _verifyResultHtml('<div>line1\nline2</div>')
    })

    if (domMode) {
      // JSDOM doesn't implement innerText - skip on DOM tests.
      // https://github.com/jsdom/jsdom/issues/1245
      test('Special property: innerText (SKIPPED!)', () => {
      })

    } else {
      // Static tests - go on.
      test('Special property: innerText', () => {
        _reset()
        const nDiv = nRoot.newDiv()
        // Pure text.
        nDiv.set('innerText', 'this is some pure text content')
        _verifyResultHtml('<div>this is some pure text content</div>')

        // Escaped HTML content.
        nDiv.set('innerText', 'this is HTML escaped content: <>&\'"')
        _verifyResultHtml('<div>this is HTML escaped content: &lt;&gt;&amp;\'"</div>')

        // Line breaks - should be converted to <br>.
        nDiv.set('innerText', 'line1\nline2')
        _verifyResultHtml('<div>line1<br>line2</div>')

        // Nate children are not allowed anymore.
        let nateError = null
        try {
          nDiv.newDiv()
        } catch (_nateError) {
          nateError = _nateError
        }
        nateError.getErrorCode().should.be.eql('nateChildNotAllowed')
      })
    }

    test('Special property: innerHTML', () => {
      _reset()
      const nDiv = nRoot.newDiv()

      // Pure text.
      nDiv.set('innerHTML', 'this is some pure text content')
      _verifyResultHtml('<div>this is some pure text content</div>')

      // HTML content (should be keep as is).
      nDiv.set('innerHTML', 'this is HTML content: <b class="test-class">TEST1 &amp; TEST2</b>')
      _verifyResultHtml('<div>this is HTML content: <b class="test-class">TEST1 &amp; TEST2</b></div>')

      // Line break - should be keep as plain ascii.
      nDiv.set('innerHTML', 'line1\nline2')
      _verifyResultHtml('<div>line1\nline2</div>')

      // Internal content is set directly from string, so nate children are not
      // allowed anymore.
      let nateError = null
      try {
        nDiv.newSpan()
      } catch (_nateError) {
        nateError = _nateError
      }
      nateError.getErrorCode().should.be.eql('nateChildNotAllowed')

      // Should nothing changes after refused newXxx() call.
      _verifyResultHtml('<div>line1\nline2</div>')
    })

    test('Create nate child when direct content exists (should fail)', () => {
      // Create nate elem with inner content set directly by innerHTML property.
      _reset()
      const nDiv = nRoot.newDiv().set('innerHTML', 'test-html-content')

      // Try to create nate children by newXxx() call - should fail due to
      // direct content.
      let nateError = null
      try {
        nDiv.newSpan()
      } catch (_nateError) {
        nateError = _nateError
      }
      nateError.getErrorCode().should.be.eql('nateChildNotAllowed')

      // Clear innerHTML property and try again - should works now.
      nDiv.set('innerHTML', null)
      nDiv.newSpan()

      _verifyResultHtml('<div><span></span></div>')
    })

    test('Set content directly when nate children exists (should fail)', () => {
      _reset()
      // Create nate with child node.
      const nDiv = nRoot.newDiv()
      nDiv.newDiv()

      // Try set node content directly - should fail (innerHTML).
      let nateError = null
      try {
        nDiv.set('innerHTML', 'test-html-content')
      } catch (_nateError) {
        nateError = _nateError
      }
      nateError.getErrorCode().should.be.eql('nateChildrenAlreadyExists')

      // Try set node content directly - should fail (textContent).
      nateError = null
      try {
        nDiv.set('textContent', 'test-text-content')
      } catch (_nateError) {
        nateError = _nateError
      }
      nateError.getErrorCode().should.be.eql('nateChildrenAlreadyExists')

      // Remove all child nodes and try to set content once again.
      nDiv.deleteAllChildren()
      nDiv.set('innerHTML', 'test-html-content')
      _verifyResultHtml('<div>test-html-content</div>')
    })

    test('Raw text', () => {
      _reset()
      nRoot.newTxt('This is a line.')
      nRoot.br()
      nRoot.newTxt('And this is one more line.')

      _verifyResultHtml('This is a line.<br>And this is one more line.')
    })

    test('Meta tag', () => {
      _reset()

      nRoot.newMeta()
           .set('name', 'description')
           .set('content', 'This is test meta tag')

      _verifyResultHtml('<meta name="description" content="This is test meta tag">')
    })

    test('Simple table', () => {
      // A1 A2 A3
      // B1 B2 B3
      // C1 C2 C3
      _reset()

      const nTable = nRoot.newTable()

      const nRowA = nTable.newTr()
      const nRowB = nTable.newTr()
      const nRowC = nTable.newTr()

      nRowA.newTh().newTxt('A1')
      nRowA.newTh().newTxt('A2')
      nRowA.newTh().newTxt('A3')

      nRowB.newTd().newTxt('B1')
      nRowB.newTd().newTxt('B2')
      nRowB.newTd().newTxt('B3')

      nRowC.newTd().newTxt('C1')
      nRowC.newTd().newTxt('C2')
      nRowC.newTd().newTxt('C3')

      _verifyResultHtml(
        '<table>' +
          '<tr><th>A1</th><th>A2</th><th>A3</th></tr>' +
          '<tr><td>B1</td><td>B2</td><td>B3</td></tr>' +
          '<tr><td>C1</td><td>C2</td><td>C3</td></tr>' +
        '</table>')
    })

    test('Table with rowspan', () => {
      // A1 2 A3
      // B1 | B2
      // C1 | C3
      _reset()

      const nTable = nRoot.newTable()

      const nRowA = nTable.newTr()
      const nRowB = nTable.newTr()
      const nRowC = nTable.newTr()

      nRowA.newTh().newTxt('A1')
      nRowA.newTh().set('rowSpan', 3).newTxt('2')
      nRowA.newTh().newTxt('A3')

      nRowB.newTd().newTxt('B1')
      nRowB.newTd().newTxt('B3')

      nRowC.newTd().newTxt('C1')
      nRowC.newTd().newTxt('C3')

      _verifyResultHtml(
        '<table>' +
          '<tr><th>A1</th><th rowspan="3">2</th><th>A3</th></tr>' +
          '<tr><td>B1</td>'                  + '<td>B3</td></tr>' +
          '<tr><td>C1</td>'                  + '<td>C3</td></tr>' +
        '</table>')
    })

    test('Table with colspan', () => {
      // A1 A2 A3
      // B  -- --
      // C1 C2 C3
      _reset()

      const nTable = nRoot.newTable()

      const nRowA = nTable.newTr()
      const nRowB = nTable.newTr()
      const nRowC = nTable.newTr()

      nRowA.newTh().newTxt('A1')
      nRowA.newTh().newTxt('A2')
      nRowA.newTh().newTxt('A3')

      nRowB.newTd().set('colSpan', 3).newTxt('B')

      nRowC.newTd().newTxt('C1')
      nRowC.newTd().newTxt('C2')
      nRowC.newTd().newTxt('C3')

      _verifyResultHtml(
        '<table>' +
          '<tr><th>A1</th><th>A2</th><th>A3</th></tr>' +
          '<tr><td colspan="3">B</td></tr>' +
          '<tr><td>C1</td><td>C2</td><td>C3</td></tr>' +
        '</table>')
    })

    _suite('Generic attributes', () => {
      const arrayOfAttributes = [
        {key: 'id'        , value: 'this-is-the-item'},
        {key: 'class'     , value: 'this-is-the-class'},
        {key: 'cols'      , value: '1'},
        {key: 'name'      , value: 'this-is-the-name'},
        {key: 'rows'      , value: '2'},
        {key: 'wrap'      , value: 'hard'},
        {key: 'itemscope' , value: 'this-is-the-itemscope'},
        {key: 'itemtype'  , value: 'this-is-the-itemtype'},
        {key: 'itemprop'  , value: 'this-is-the-itemprop'},
        {key: 'content'   , value: 'this-is-the-content'},
        {key: 'style'     , value: 'color: red; background-color: green;'},
        // TODO: 'rect':
      ]

      for (const idx in arrayOfAttributes) {
        const item  = arrayOfAttributes[idx]
        const key   = item.key
        const value = item.value

        test(key, () => {
          _reset()
          nRoot.newDiv().set(key, value).setText('text')
          _verifyResultHtml('<div ' + key + '="' + value + '">text</div>')
        })
      }
    })

    test('Apply many attributes to one element', () => {
      _reset()

      // Empty div.
      const nDiv = nRoot.newDiv()
      _verifyResultHtml('<div></div>')

      // First attribute.
      nDiv.set('id', 'this-is-the-id')
      _verifyResultHtml('<div id="this-is-the-id"></div>')

      // Add second attribute.
      nDiv.set('class', 'this-is-the-class1')
      _verifyResultHtml('<div id="this-is-the-id" class="this-is-the-class1"></div>')

      // Add third attribute.
      nDiv.set('name', 'jenny')
      _verifyResultHtml('<div id="this-is-the-id" class="this-is-the-class1" name="jenny"></div>')

      // Update second (middle) attribute on-the-fly.
      nDiv.set('class', 'this-is-the-class2')
      _verifyResultHtml('<div id="this-is-the-id" class="this-is-the-class2" name="jenny"></div>')
    })

    test('Set CSS text directly', () => {
      _reset()
      nRoot.newDiv().set('cssText', 'color: blue;')
      _verifyResultHtml('<div style="color: blue;"></div>')
    })

    test('Read-only input', () => {
      _reset()
      nRoot.newInputText().set('readOnly', true)
      _verifyResultHtml('<input type="text" readonly="">')
    })

    test('Checkbox #1: Simple checkbox with label', () => {
      _reset()

      // Create related label and checkbox tags.
      nRoot.newLabel().set('for', 'john').newTxt('This is a checkbox')
      nRoot.newInputCheckbox().set('name', 'john')

      _verifyResultHtml(
        '<label for="john">This is a checkbox</label>' +
        '<input type="checkbox" name="john">')
    })

    test('Checkbox #2: Updated checked state on-the-fly', () => {
      _reset()

      // Create new checkbox item.
      const nCheckbox = nRoot.newInputCheckbox()
      _verifyResultHtml('<input type="checkbox">')

      // Set checked state on-off.
      if (domMode) {
        // DOM tests - verify state of DOM object.
        nCheckbox.set('checked', true)
        nCheckbox.elem.checked.should.be.eql(true)

        nCheckbox.set('checked', false)
        nCheckbox.elem.checked.should.be.eql(false)
      } else {
        // Static HTML tests - verify rendered HTML.
        nCheckbox.set('checked', true)
        _verifyResultHtml('<input type="checkbox" checked="checked">')

        nCheckbox.set('checked', false)
        _verifyResultHtml('<input type="checkbox">')
      }
    })

    test('Event handlers', () => {
      _reset()
      const _onclickCb  = function() {alert('This is onclick handler!')}
      const _onscrollCb = function() {alert('This is onscroll handler!')}

      const nDiv = nRoot.newDiv()
                        .set('onclick',  _onclickCb)
                        .set('onscroll', _onscrollCb)

      if (domMode) {
        // DOM tests - compare function pointers.
        nDiv.elem.onclick.should.be.eql(_onclickCb)
        nDiv.elem.onscroll.should.be.eql(_onscrollCb)
      } else {
        // Static HTML tests - compare rendered onclick attribute.
        nRoot.render().should.be.eql(
          '<div' +
          ' onclick="alert(\'This is onclick handler!\')"' +
          ' onscroll="alert(\'This is onscroll handler!\')"' +
          '></div>')
      }
    })

    test('Simple link', () => {
      _reset()
      // Simple link with href only.
      const nLink = nRoot.newA().set('href', 'http://ke.mu').setText('Kemu Studio')
      _verifyResultHtml('<a href="http://ke.mu">Kemu Studio</a>')

      // Add target.
      nLink.set('target', '_blank')
      _verifyResultHtml('<a href="http://ke.mu" target="_blank">Kemu Studio</a>')

      // Update href on-the-flt.
      nLink.set('href', 'http://calculla.com')
      _verifyResultHtml('<a href="http://calculla.com" target="_blank">Kemu Studio</a>')
    })

    test('Simple image', () => {
      _reset()
      // Create image with initial src.
      const nImg = nRoot.newImg().set('src', 'http://calculla.com/g/calculla_logo_32.svg')
      _verifyResultHtml('<img src="http://calculla.com/g/calculla_logo_32.svg">')

      // Update src on-the-fly.
      nImg.set('src', 'http://calculla.pl/g/calculla_logo_32.svg')
      _verifyResultHtml('<img src="http://calculla.pl/g/calculla_logo_32.svg">')
    })

    test('Select input #1: optgroups', () => {
      _reset()
      const nSelect = nRoot.newSelect()

      const nGroupA = nSelect.newOptGroup().set('label', 'A')
      nGroupA.newOption().set('value', 'value-a1').setText('A1')
      nGroupA.newOption().set('value', 'value-a2').setText('A2')
      nGroupA.newOption().set('value', 'value-a3').setText('A3')

      const nGroupB = nSelect.newOptGroup().set('label', 'B')
      nGroupB.newOption().set('value', 'value-b1').setText('B1')
      nGroupB.newOption().set('value', 'value-b2').setText('B2')
      nGroupB.newOption().set('value', 'value-b3').setText('B3')

      const nGroupC = nSelect.newOptGroup().set('label', 'C')
      nGroupC.newOption().set('value', 'value-c1').setText('C1')
      nGroupC.newOption().set('value', 'value-c2').setText('C2')
      nGroupC.newOption().set('value', 'value-c3').setText('C3')

      _verifyResultHtml(
        '<select>' +
          '<optgroup label="A">' +
            '<option value="value-a1">A1</option>' +
            '<option value="value-a2">A2</option>' +
            '<option value="value-a3">A3</option>' +
          '</optgroup>' +
          '<optgroup label="B">' +
            '<option value="value-b1">B1</option>' +
            '<option value="value-b2">B2</option>' +
            '<option value="value-b3">B3</option>' +
          '</optgroup>' +
          '<optgroup label="C">' +
            '<option value="value-c1">C1</option>' +
            '<option value="value-c2">C2</option>' +
            '<option value="value-c3">C3</option>' +
          '</optgroup>' +
        '</select>')
    })

    test('Select input #2: set selected item on-the-fly', () => {
      _reset()

      // New select tag with three options.
      const nSelect  = nRoot.newSelect()
      const nOption1 = nSelect.newOption().set('value', 'value1').setText('option1')
      const nOption2 = nSelect.newOption().set('value', 'value2').setText('option2')
      const nOption3 = nSelect.newOption().set('value', 'value3').setText('option3')

      _verifyResultHtml(
        '<select>' +
          '<option value="value1">option1</option>' +
          '<option value="value2">option2</option>' +
          '<option value="value3">option3</option>' +
        '</select>')

      // Set selected item on-the-fly.
      nOption2.set('selected', true)

      if (domMode) {
        // DOM tests - verify state id emulated DOM object.
        nOption1.elem.selected.should.be.eql(false)
        nOption2.elem.selected.should.be.eql(true)
        nOption3.elem.selected.should.be.eql(false)
      } else {
        // Static HTML tests - verify rendered HTML.
        _verifyResultHtml(
          '<select>' +
            '<option value="value1">option1</option>' +
            '<option value="value2" selected="selected">option2</option>' +
            '<option value="value3">option3</option>' +
          '</select>')
      }
    })

    _suite('Style attributes', () => {
      const arrayOfAttributes = [
        // CSS attributes without key rename.
        {key: 'cursor',     value: 'pointer'},
        {key: 'float',      value: 'left'},
        {key: 'height',     value: '1px'},
        {key: 'width',      value: '2px'},
        {key: 'left',       value: '3px'},
        {key: 'top',        value: '4px'},
        {key: 'right',      value: '5px'},
        {key: 'bottom',     value: '6px'},
        {key: 'margin',     value: '7px'},
        {key: 'padding',    value: '8px'},
        {key: 'overflow',   value: 'hidden'},
        {key: 'font',       value: '12px 12px'},
        {key: 'position',   value: 'absolute'},
        {key: 'visibility', value: 'none'},
        {key: 'color',      value: 'red'},
        {key: 'border',     value: '8px solid green'},
        {key: 'display',    value: 'block'},

        // CSS attributes with key rename.
        {key: 'overflowX'       , cssKey: 'overflow-x'       , value: 'auto'},
        {key: 'overflowY'       , cssKey: 'overflow-y'       , value: 'visible'},
        {key: 'zIndex'          , cssKey: 'z-index'          , value: '1234'},
        {key: 'textAlign'       , cssKey: 'text-align'       , value: 'center'},
        {key: 'verticalAlign'   , cssKey: 'vertical-align'   , value: 'bottom'},
        {key: 'backgroundColor' , cssKey: 'background-color' , value: 'blue'},
        {key: 'borderCollapse'  , cssKey: 'border-collapse'  , value: 'collapse'},
        {key: 'fontFamily'      , cssKey: 'font-family'      , value: 'arial'},
        {key: 'fontSize'        , cssKey: 'font-size'        , value: '50em'},
        {key: 'fontStyle'       , cssKey: 'font-style'       , value: 'italic'},
        {key: 'fontWeight'      , cssKey: 'font-weight'      , value: 'bold'}
      ]

      for (const idx in arrayOfAttributes) {
        const item   = arrayOfAttributes[idx]
        const key    = item.key
        const value  = item.value
        const cssKey = item.cssKey ? item.cssKey : item.key

        test(key, () => {
          _reset()
          nRoot.newDiv().set(key, value).setText('text')
          _verifyResultHtml('<div style="' + cssKey + ': ' + value + ';">text</div>')
        })
      }
    })

    _suite('Dataset #1: Single attribute', () => {
      const _createTestGood = (key, jsKey, value) => {
        test('"' + key + '" => "' + value + '"', () => {
          _reset()
          nRoot.newDiv().setData(key, value)
          _verifyResultHtml('<div data-' + jsKey + '="' + value + '"></div>')
        })
      }

      const _createTestBadKey = (key) => {
        const keyForPreview = key ? JSON.stringify(key) : '' + key
        test(keyForPreview, () => {
          _reset()
          try {
            nRoot.newDiv().setData(key, 'value')
          }
          catch(err) {
            err.getErrorCode().should.be.eql('invalidKey')
          }
        })
      }

      // Good examples.
      _suite('Good examples', () => {
        _createTestGood('key' , 'key'  , 'value')
        _createTestGood('123' , '123'  , 'value')
        _createTestGood('_'   , '_'    , 'value')
        _createTestGood('_key', '_key' , 'value')

        _createTestGood('key' , 'key' , 'VALUE')
        _createTestGood('key' , 'key' , '123')
        _createTestGood('key' , 'key' , 'this-is-some-value')
        _createTestGood('key' , 'key' , '3.14')
        _createTestGood('key' , 'key' , '')

        _createTestGood('KEY'    , 'key'    , 'value')
        _createTestGood('KeY'    , 'key'    , 'value')
        _createTestGood('kEy'    , 'key'    , 'value')
        _createTestGood('key_abc', 'key_abc', 'value')
        _createTestGood('key-abc', 'key-abc', 'value')
        _createTestGood('key.abc', 'key.abc', 'value')
        _createTestGood('key:abc', 'key:abc', 'value')
        _createTestGood('a.b.c.d', 'a.b.c.d', 'value')
      })

      // Bad key examples.
      _suite('Bad keys', () => {
        _createTestBadKey()
        _createTestBadKey('')
        _createTestBadKey(' ')
        _createTestBadKey('a b')
        _createTestBadKey('.')
        _createTestBadKey(',')
        _createTestBadKey('-')
        _createTestBadKey(null)
        _createTestBadKey(123)
        _createTestBadKey(3.14)
        _createTestBadKey([])
        _createTestBadKey([1234])
        _createTestBadKey({})
        _createTestBadKey({x:1234})
      })
    })
  })
}

TestNateHtml(false)
TestNateHtml(true)