-
Notifications
You must be signed in to change notification settings - Fork 88
/
t_test.html
127 lines (99 loc) · 3.56 KB
/
t_test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>t.js</title>
<style>
body { background:black; color:white; padding:40px; font-family: 'PT Sans', Helvetica, Arial, sans-serif;}
a { color:#9bf; }
p > span { display:inline-block; margin:0 10px; font-weight:bold; }
</style>
</head>
<body>
<div id="qunit"></div>
</body>
<script src="http://code.jquery.com/qunit/qunit-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/qunit/qunit-1.9.0.css">
<script src="t.min.js"></script>
<script type="t/template" id="test">
<h1>{{=greeting}}</h1>
<h2>{{=user.display_name}}</h2>
{{user.address}}
<address>{{%user.address}}</address>
{{/user.address}}
<h4>Friends</h4>
{{@user.friends}}
<a href="{{%_val.url}}">{{=_val.name}}</a><br>
{{/@user.friends}}
{{=not_a_value}}
{{=not.a.value}}
{{!not_a_value}}
<p>Missing required information!</p>
{{/!not_a_value}}
{{user.display_name}}
<p>Bacon ipsum {{=user.display_name}}?</p>
{{:user.display_name}}
This should not be here.
{{/user.display_name}}
{{not_a_value}}
This should not be here.
{{:not_a_value}}
<p>Yes bacon ipsum {{=user.display_name}}!</p>
{{/not_a_value}}
{{@user.prefs}}
<p><span>{{=_key}}</span>{{=_val}}</p>
{{/@user.prefs}}
<h4>Test Values</h4>
{{@test_values}}
<p>{{=_key}}<span id="{{=_key}}" data-val="{{%_val}}">{{=_val}}</span></p>
{{/@test_values}}
</script>
<script>
console.log(document.getElementById('test').innerHTML);
test("t.js tests", function() {
var div = document.createElement('div');
var template = new t(document.getElementById('test').innerHTML);
div.innerHTML = template.render({
greeting: "Welcome!",
user: {
display_name: "Jason",
address: "111 State St, Ithaca,<script>alert(1);<\/script> NY 14853",
friends: [
{name: "Kunal", url: "http://whatspop.com"},
{name: "Francisco", url: "http://smalldemons.com"},
{name: "Nick", url: "http://milewise.com"}
],
prefs: {
Notifications: "Yes!",
"Stay logged in": "No"
}
},
test_values: {
"true": true,
"false": false,
"zero": 0,
"string_zero": "0",
"null": null
}
});
document.body.appendChild(div);
console.log(div.innerHTML);
ok(/<h1>Welcome!<\/h1>/.test(div.innerHTML), "Simple interpolation.");
ok(/<h2>Jason<\/h2>/.test(div.innerHTML), "Name-spaced interpolation.");
ok(/<address>/.test(div.innerHTML), "If block.");
ok(/<p>Missing /.test(div.innerHTML), "If-not block.");
ok(/<p>Bacon ipsum Jason\?<\/p>/.test(div.innerHTML), "If-else block (true).");
ok(/<p>Yes bacon ipsum Jason\!<\/p>/.test(div.innerHTML), "If-else block (false).");
ok(/<address>111 State St, Ithaca,<script>alert\(1\);<\/script> NY 14853<\/address>/.test(div.innerHTML), "Scrubbed interpolation.");
equal(div.innerHTML.match(/>(?:Kunal|Francisco|Nick)</g).length, 3, "Array iteration.")
equal(div.innerHTML.match(/>(?:Notifications|Yes!|Stay logged in|No)</g).length, 4, "Object key/val iteration.")
// passing true as a value is a little not-sane but we'll print it for you
equal(document.getElementById("true").innerHTML, "true", "Prints boolean true");
equal(document.getElementById("zero").innerHTML, "0", "Prints zero");
equal(document.getElementById("string_zero").innerHTML, "0", "Prints the string 0");
equal(document.getElementById("false").innerHTML, "", "Does not print boolean false");
equal(document.getElementById("null").innerHTML, "", "Does not print null");
equal((new t("{{%quot}}")).render({quot: '"'}), """, "Escapes quotes properly")
});
</script>
</html>