Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

834 lines (699 sloc) 20.461 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>
Jump to Line
Something went wrong with that request. Please try again.