hyperglue/test/browser/array.js

update html elements by mapping query selectors to attributes, text, and hypertext

var test = require('tape');
var hyperglue = require('../../');

var html = [
    '<div id="rows">',
    '<div class="row">',
    '<span class="name"></span>',
    '<span class="message"></span>',
    '</div>',
    '<b>ahoy!</b>',
    '</div>'
].join('');

var expected = [
    '<div id="rows">',
    '<div class="row">',
    '<span class="name">T-REX</span>',
    '<span class="message">RAWR</span>',
    '</div>',
    '<div class="row">',
    '<span class="name">robot</span>',
    '<span class="message">beep boop</span>',
    '</div>',
    '<div class="row">',
    '<span class="name">Dr X</span>',
    '<span class="message">mwahaha</span>',
    '</div>',
    '<b>ahoy!</b>',
    '</div>'
].join('');

test('array', function (t) {
    t.plan(1);
    
    var res = hyperglue(html, {
        '.row': [
            { '.name': 'T-REX', '.message': 'RAWR' },
            { '.name': 'robot', '.message': 'beep boop' },
            { '.name': 'Dr X', '.message': 'mwahaha' }
        ]
    }).outerHTML;
    
    t.equal(fudge(res), fudge(expected));
});

function fudge (html) {
    return html.toLowerCase()
        .replace(/\r\n/g, '\n')
        .replace(/"/g, '')
        .replace(/\n/g, '')
    ;
}