Permalink
Fetching contributors…
Cannot retrieve contributors at this time
834 lines (699 sloc) 20 KB
<!doctype html>
<head>
<title>Plates browser tests</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" />
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<script src="http://bestiejs.github.com/json3/lib/json3.js"></script>
<script src="../lib/plates.js"></script>
</head>
<body>
<div id="qunit"></div>
<script type="test/fixture" id="partial-1.html">
<strong>strong</strong> plates
</script>
<script type="test/fixture" id="test-1.html">
<div id='key'></div>
</script>
<script type="test/fixture" id="test-1.json">
{
"key": "value"
}
</script>
<script type="test/fixture" id="test-1.out">
<div id='key'>value</div>
</script>
<script type="test/fixture" id="test-10.html">
<br><img class="logo"><input name="first_name"/><input name="last_name" />
</script>
<script type="test/fixture" id="test-10.json">
{
"url": "/some/image.png",
"fname": "Raul",
"lname": "Julia"
}
</script>
<script type="test/fixture" id="test-10.out">
<br><img class="logo" src="/some/image.png"><input name="first_name" value="Raul"/><input name="last_name" value="Julia" />
</script>
<script type="test/fixture" id="test-11.html">
<input type="hidden" name="method" value="" /><input type="hidden" name="id" value="" />
</script>
<script type="test/fixture" id="test-11.json">
{
"method": "DELETE",
"id": 7
}
</script>
<script type="test/fixture" id="test-11.out">
<input type="hidden" name="method" value="DELETE" /><input type="hidden" name="id" value="7" />
</script>
<script type="test/fixture" id="test-12.html">
<ul><li class="name"><span class="first"></span>:<span class="middle"></span><span class="last"></span></li></ul>
</script>
<script type="test/fixture" id="test-12.json">
{
"name": [
{
"first" : "John",
"middle" : "C",
"last" : "Smith"
},
{
"first" : "Jane",
"middle" : "A",
"last" : "Doe"
}
]
}
</script>
<script type="test/fixture" id="test-12.out">
<ul><li class="name"><span class="first">John</span>:<span class="middle">C</span><span class="last">Smith</span></li><li class="name"><span class="first">Jane</span>:<span class="middle">A</span><span class="last">Doe</span></li></ul>
</script>
<script type="test/fixture" id="test-13.html">
<a href="aA1-_:/&#1235; "></a>
</script>
<script type="test/fixture" id="test-13.json">
{
"test": "test"
}
</script>
<script type="test/fixture" id="test-13.out">
<a href="test"></a>
</script>
<script type="test/fixture" id="test-14.html">
<table>
<tr class="names">
<td class="first"></td>
<td class="last"></td>
</tr>
</table>
</script>
<script type="test/fixture" id="test-14.json">
{
"names" : [
{
"first" : "John",
"last" : "Smith"
},
{
"first" : "Jane",
"last" : "Doe"
}
]
}
</script>
<script type="test/fixture" id="test-14.out">
<table>
<tr class="names">
<td class="first">John</td>
<td class="last">Smith</td>
</tr><tr class="names">
<td class="first">Jane</td>
<td class="last">Doe</td>
</tr>
</table>
</script>
<script type="test/fixture" id="test-15.html">
<a href="placeholder">Link</a>
<ul>
<li class="names">
<span class="first"></span>
<span class="middle"></span>
<span class="last"></span>
</li>
</ul>
</script>
<script type="test/fixture" id="test-15.json">
{
"link" : "/foobar",
"names" : [
{
"first" : "John",
"middle" : "C",
"last" : "Smith"
},
{
"first" : "Jane",
"middle" : "A",
"last" : "Doe"
}
]
}
</script>
<script type="test/fixture" id="test-15.out">
<a href="/foobar">Link</a>
<ul>
<li class="names">
<span class="first">John</span>
<span class="middle">C</span>
<span class="last">Smith</span>
</li><li class="names">
<span class="first">Jane</span>
<span class="middle">A</span>
<span class="last">Doe</span>
</li>
</ul>
</script>
<script type="test/fixture" id="test-16.html">
<b>Flatiron Components</b>
<br/>
<ul>
<li class='components'></li>
</ul>
</script>
<script type="test/fixture" id="test-16.json">
{
"components": [
"Union",
"Director",
"Broadway",
"Plates",
"Resourceful"
]
}
</script>
<script type="test/fixture" id="test-16.out">
<b>Flatiron Components</b>
<br/>
<ul>
<li class='components'>Union</li><li class='components'>Director</li><li class='components'>Broadway</li><li class='components'>Plates</li><li class='components'>Resourceful</li>
</ul>
</script>
<script type="test/fixture" id="test-17.html">
<ul>
<li class="organizations">
<h3 class="name"></h3>
<ul>
<li class="staff">
<table>
<tr class="name">
<td class="first"></td>
<td class="last"></td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
</script>
<script type="test/fixture" id="test-17.json">
{
"organizations" : [
{
"name": "DotOrg",
"staff": [
{
"name": {
"first": "Dot",
"last" : "Matrix"
}
},
{
"name": {
"first": "Serious",
"last" : "Business"
}
}
]
},
{
"name": "FooBar",
"staff": [
{
"name": {
"first": "Foo",
"last" : "Bar"
}
},
{
"name": {
"first": "Baz",
"last" : "Bitsom"
}
}
]
}
]
}
</script>
<script type="test/fixture" id="test-17.out">
<ul>
<li class="organizations">
<h3 class="name">DotOrg</h3>
<ul>
<li class="staff">
<table>
<tr class="name">
<td class="first">Dot</td>
<td class="last">Matrix</td>
</tr>
</table>
</li><li class="staff">
<table>
<tr class="name">
<td class="first">Serious</td>
<td class="last">Business</td>
</tr>
</table>
</li>
</ul>
</li><li class="organizations">
<h3 class="name">FooBar</h3>
<ul>
<li class="staff">
<table>
<tr class="name">
<td class="first">Foo</td>
<td class="last">Bar</td>
</tr>
</table>
</li><li class="staff">
<table>
<tr class="name">
<td class="first">Baz</td>
<td class="last">Bitsom</td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
</script>
<script type="test/fixture" id="test-18.html">
<span class="username"></span>
<span class="login name"></span>
</script>
<script type="test/fixture" id="test-18.json">
{
"username": "lord thingy",
"name": "Tom Marvolo Riddle"
}
</script>
<script type="test/fixture" id="test-18.out">
<span class="username">lord thingy</span>
<span class="login name">Tom Marvolo Riddle</span>
</script>
<script type="test/fixture" id="test-19.html">
<a href="bar/bla">test</a>
</script>
<script type="test/fixture" id="test-19.json">
{}
</script>
<script type="test/fixture" id="test-19.out">
<a href="bazz/bla">test</a>
</script>
<script type="test/fixture" id="test-2.html">
<!-- foo --><div id="key1"><div id="key2"></div><img src="/"/></div>
</script>
<script type="test/fixture" id="test-2.json">
{
"key2": "value2"
}
</script>
<script type="test/fixture" id="test-2.out">
<!-- foo --><div id="key1"><div id="key2">value2</div><img src="/"/></div>
</script>
<script type="test/fixture" id="test-20.html">
<a href="bar/bla"></a>
</script>
<script type="test/fixture" id="test-20.json">
{ "test": "test" }
</script>
<script type="test/fixture" id="test-20.out">
<a href="test/bla"></a>
</script>
<script type="test/fixture" id="test-21.html">
<div id="key"><div class="removed">Hello world</div></div>
</script>
<script type="test/fixture" id="test-21.json">
{}
</script>
<script type="test/fixture" id="test-21.out">
<div id="key"></div>
</script>
<script type="test/fixture" id="test-22.html">
<div id="key"><input type="email" value="testing" /></div>
</script>
<script type="test/fixture" id="test-22.json">
{}
</script>
<script type="test/fixture" id="test-22.out">
<div id="key"></div>
</script>
<script type="test/fixture" id="test-23.html">
<div id="key"><input type="email" value="testing"></div>
</script>
<script type="test/fixture" id="test-23.json">
{}
</script>
<script type="test/fixture" id="test-23.out">
<div id="key"></div>
</script>
<script type="test/fixture" id="test-24.html">
<div class="insert"></div>
</script>
<script type="test/fixture" id="test-24.json">
{}
</script>
<script type="test/fixture" id="test-24.out">
<div class="insert"><div class="trolling"></div></div>
</script>
<script type="test/fixture" id="test-25.html">
<div class="insert"></div>
</script>
<script type="test/fixture" id="test-25.json">
{}
</script>
<script type="test/fixture" id="test-25.out">
<div class="insert"><div class="trolling">moo</div></div>
</script>
<script type="test/fixture" id="test-26.html">
<div class="insert"></div>
</script>
<script type="test/fixture" id="test-26.json">
{
"partial": {
"boink": "moo"
}
}
</script>
<script type="test/fixture" id="test-26.out">
<div class="insert"><div class="trolling">moo</div></div>
</script>
<script type="test/fixture" id="test-27.html">
<div class="insert"></div>
</script>
<script type="test/fixture" id="test-27.json">
{}
</script>
<script type="test/fixture" id="test-27.out">
<div class="insert">
<strong>strong</strong> plates
</div>
</script>
<script type="test/fixture" id="test-28.html">
<div class="insert"></div>
</script>
<script type="test/fixture" id="test-28.json">
{}
</script>
<script type="test/fixture" id="test-28.out">
<div class="insert">
<strong>strong</strong> plates
<strong>strong</strong> plates
<strong>strong</strong> plates
</div>
</script>
<script type="test/fixture" id="test-29.html">
<div></div>
</script>
<script type="test/fixture" id="test-29.json">
{ "foo": "bar" }
</script>
<script type="test/fixture" id="test-29.out">
<div>bar</div>
</script>
<script type="test/fixture" id="test-3.html">
<div id="key1" style="visible: foobar > 1"><!-- foo --><div id="key2"></div><img src="/"/></div>
</script>
<script type="test/fixture" id="test-3.json">
{
"key1": "value1"
}
</script>
<script type="test/fixture" id="test-3.out">
<div id="key1" style="visible: foobar > 1">value1</div>
</script>
<script type="test/fixture" id="test-30.json">
{ "uppercase": "UPPERCASED" }
</script>
<script type="test/fixture" id="test-30.html">
<div class="transformation"></div>
</script>
<script type="test/fixture" id="test-30.out">
<div class="transformation">uppercased</div>
</script>
<script type="test/fixture" id="test-4.html">
<a id="someid" src="google.com"></a>
<a id="someotherid" src="yahoo.com"></a>
</script>
<script type="test/fixture" id="test-4.json">
{
"key1": "Google",
"key2": "Yahoo!"
}
</script>
<script type="test/fixture" id="test-4.out">
<a id="someid" src="google.com">Google</a>
<a id="someotherid" src="yahoo.com">Yahoo!</a>
</script>
<script type="test/fixture" id="test-5.html">
<a id="someid" class="red hidden large" href="/foo">Old Value</a>
</script>
<script type="test/fixture" id="test-5.json">
{
"key1": "New Value"
}
</script>
<script type="test/fixture" id="test-5.out">
<a id="someid" class="red hidden large" href="/foo">New Value</a>
</script>
<script type="test/fixture" id="test-6.html">
<a id="someid" class="red hidden large" href="/foo">Old Value</a>
</script>
<script type="test/fixture" id="test-6.json">
{
"key1": "New Value",
"key2": "/bar"
}
</script>
<script type="test/fixture" id="test-6.out">
<a id="someid" class="red hidden large" href="/bar">New Value</a>
</script>
<script type="test/fixture" id="test-7.html">
<a id="someid1" class="name" href="/foo"></a>
<a id="someid2" class="name" href="/foo"></a>
</script>
<script type="test/fixture" id="test-7.json">
{
"name": "Alpha"
}
</script>
<script type="test/fixture" id="test-7.out">
<a id="someid1" class="name" href="/foo">Alpha</a>
<a id="someid2" class="name" href="/foo">Alpha</a>
</script>
<script type="test/fixture" id="test-8.html">
<a href="/"></a>
</script>
<script type="test/fixture" id="test-8.json">
{
"newurl": "/test"
}
</script>
<script type="test/fixture" id="test-8.out">
<a href="/test"></a>
</script>
<script type="test/fixture" id="test-9.html">
<a href="/"></a>
</script>
<script type="test/fixture" id="test-9.json">
[
{ "url": "/a" },
{ "url": "/b" },
{ "url": "/c" }
]
</script>
<script type="test/fixture" id="test-9.out">
<a href="/a"></a>
<a href="/b"></a>
<a href="/c"></a>
</script>
<script>
var ws = "\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003" +
"\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028" +
"\u2029\uFEFF";
if (!String.prototype.trim || ws.trim()) {
// http://blog.stevenlevithan.com/archives/faster-trim-javascript
// http://perfectionkills.com/whitespace-deviations/
ws = "[" + ws + "]";
var trimBeginRegexp = new RegExp("^" + ws + ws + "*"),
trimEndRegexp = new RegExp(ws + ws + "*$");
String.prototype.trim = function trim() {
if (this === undefined || this === null) {
throw new TypeError("can't convert "+this+" to object");
}
return String(this).replace(trimBeginRegexp, "").replace(trimEndRegexp, "");
};
}
var common = {
createTest: function (name, map) {
var html = document.getElementById(name + '.html').innerHTML
, out = document.getElementById(name + '.out').innerHTML
, data = JSON.parse(document.getElementById(name + '.json').innerHTML);
var result = Plates.bind(html, data, map);
QUnit.assert.equal(
result.trim().replace(/[\n|\r]/g, '')
, out.trim().replace(/[\n|\r]/g, '')
, 'Expecting `' + html + '` to equal `' + out + '`'
);
}
}
module("merge data into markup, when providing both data and markup");
test("(1) a single tag with an `id` that corresponds to a `data-key`.", function () {
return common.createTest('test-1');
});
test("(2) a deeply nested tag with an `id` that corresponds to a `data-key`.", function () {
return common.createTest('test-2');
});
test("(3) a tag with an `id` that corresponds to a `data-key`, having a body of nested tags.", function () {
return common.createTest('test-3');
});
test("(4) a tag with an arbitrary attribute that corresponds to a `data-key`.", function () {
var map = Plates.Map();
map.where('src').is('google.com').use('key1');
map.where('src').is('yahoo.com').use('key2');
return common.createTest('test-4', map);
});
test("(5) a tag with a class attribute whith a value that corresponds to a `data-key`.", function () {
var map = Plates.Map();
map.where('class').is('hidden').use('key1');
return common.createTest('test-5', map);
});
test("(6) a tag with a class attribute whith a value that corresponds to a `data-key`, a second map item.", function () {
var map = Plates.Map();
map.where('class').is('hidden').use('key1');
map.where('href').is('/foo').use('key2').as('href');
return common.createTest('test-6', map);
});
test("(7) a map that redefines the default matching attribute of `id`.", function () {
var map = Plates.Map({
where: 'class'
});
return common.createTest('test-7', map);
});
test("(8) using the insert shortcut.", function () {
var map = Plates.Map();
map.where('href').is('/').insert('newurl');
return common.createTest('test-8', map);
});
test("(9) iterate a collection.", function () {
var map = Plates.Map();
map.where('href').is('/').insert('url');
return common.createTest('test-9', map);
});
test("(10) a map that defines creating missing attributes.", function () {
var map = Plates.Map({
create: true
});
map.className('logo').use('url').as('src');
map.where('name').is('first_name').use('fname').as('value');
map.where('name').is('last_name').use('lname').as('value');
return common.createTest('test-10', map);
});
test("(11) differing on \"is\" parameter only.", function () {
var map = Plates.Map();
map.where('name').is('method').use('method').as('value');
map.where('name').is('id').use('id').as('value');
return common.createTest('test-11', map);
});
test("(12) iterate a collection of over an element with children.", function () {
return common.createTest('test-12');
});
test("(13) attributes can contain valid characters", function () {
var map = Plates.Map();
map.where('href').is('aA1-_:/&#1235; ').insert('test');
return common.createTest('test-13', map);
});
test("(14) It should be able to iterate over collections with maps", function () {
var map = Plates.Map();
map.className("names").use("names");
return common.createTest('test-14', map);
});
test("(15) It should be able to iterate over collections with multiple maps", function () {
var map = Plates.Map();
map.where("href").is("placeholder").insert("link");
map.className("names").use("names");
return common.createTest('test-15', map);
});
test("(16) It should be able to iterate over simple arrays", function () {
return common.createTest('test-16');
});
test("(17) It should be able to iterate over deeply nested objects", function () {
return common.createTest('test-17');
});
test("(18) It should be able to see the classnames properly", function () {
var map = Plates.Map();
map.className("username").use("username");
map.className("name").use("name");
return common.createTest('test-18', map);
});
test("(19) Replace partial value with a new value", function () {
var map = Plates.Map();
map.where("href").is(/^bar/).replace(/bar/, 'bazz');
return common.createTest('test-19', map);
});
test("(20) Replace partial value with a new value from the data object", function () {
var map = Plates.Map();
map.where("href").has(/^bar/).insert('test');
return common.createTest('test-20', map);
});
test("(21) Remove should remove the whole element", function () {
var map = Plates.Map();
map.className('removed').remove();
return common.createTest('test-21', map);
});
test("(22) Remove should remove self closing elements", function () {
var map = Plates.Map();
map.where('type').is('email').remove();
return common.createTest('test-22', map);
});
test("(23) Remove should remove self closing elements without optional ending slash", function () {
var map = Plates.Map();
map.where('type').is('email').remove();
return common.createTest('test-23', map);
});
test("(24) Should append new templates", function () {
var map = Plates.Map();
map.className('insert').append('<div class="trolling"></div>');
return common.createTest('test-24', map);
});
test("(25) New templates should also process map and custom data", function () {
var map = Plates.Map();
var partial = Plates.Map();
partial.className('trolling').to('boink');
map.className('insert').append('<div class="trolling"></div>', { boink: 'moo' }, partial);
return common.createTest('test-25', map);
});
test("(26) When the data for the partial was provided as a string, get it from the parent data structure", function () {
var map = Plates.Map();
var partial = Plates.Map();
partial.className('trolling').to('boink');
map.className('insert').append('<div class="trolling"></div>', 'partial', partial);
return common.createTest('test-26', map);
});
test("(27) append should read from file system if no template has been provided", function () {
var map = Plates.Map();
var partial = Plates.Map();
map.className('insert').append('partial-1.html');
return common.createTest('test-27', map);
});
test("(28) it should repeat the partial for each item in the array", function () {
var map = Plates.Map();
var partial = Plates.Map();
map.className('insert').append('partial-1.html', [{}, {}, {}]);
return common.createTest('test-28', map);
});
test("(29) a tag match without attributes should replace the contents", function () {
var map = Plates.Map();
map.tag('div').use('foo');
return common.createTest('test-29', map);
});
test("(30) use can be passed a function which returns the value", function() {
var map = Plates.Map();
map.class('transformation').use(function (data, key) {
return data.uppercase.toLowerCase();
});
return common.createTest('test-30', map);
});
</script>