test.html
5.0 KB
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>语法插件单元测试</title>
<link rel="stylesheet" href="./js/qunit/qunit.css">
<script src="./js/qunit/qunit.js"></script>
<script src="../dist/template-debug.js"></script>
<script id="default" type="text/html">{{value}}</script>
<script id="noEscape" type="text/html">{{#value}}</script>
<script id="include" type="text/html">{{include 'include-content'}}</script>
<script id="include2" type="text/html">{{include 'include-content'}}{{include 'include-content' data2}}</script>
<script id="include-content" type="text/html">{{#value}}</script>
<script id="print" type="text/html">{{print value value2}}</script>
<script id="sandbox" type="text/html">{{typeof document}}</script>
<script id="sandbox2" type="text/html">{{window.$sandbox = true}}</script>
<script id="html" type="text/html">""''\\</script>
<script id="debug-render" type="text/html">{{a.b.c.d.e.f}}</script>
<script id="debug-syntax" type="text/html">{{a b c d e f}}</script>
<script id="helper" type="text/html">{{test value}}</script>
<script id="helper2" type="text/html">{{#value | test}}</script>
<script>
if (!window.console) {
window.console = {
log: function () {}
}
}
test('基本', function () {
var data = {value: 'hello <em>world</em>'};
equal(typeof template.compile('{{value}}'), 'function', '编译成函数');
equal(template('default', data), 'hello <em>world</em>', '编码输出');
equal(template('noEscape', data), 'hello <em>world</em>', '原文输出');
});
test('特殊类型变量输出', function () {
var data = {value: 'hello <em>world</em>'};
equal(template('default', {value:function(){return 'hello world'}}), 'hello world', '函数类型运算后输出');
equal(template('default', {value:0}), '0', 'Number类型输出');
equal(template('default', {value:false}), '', 'Boolean(false)类型输出空值');
equal(template('default', {value:true}), '', 'Boolean(true)类型输出空值');
equal(template('default', {value:{}}), '', 'Object类型输出空值');
});
test('特殊字符输出', function () {
equal(template('html', {}), '""\'\'\\\\', '编码输出js特殊字符');
});
test('XSS防范测试', function () {
equal(template('default', {value:'<>"\'&'}), '<>"'&', 'HTML字符转义');
});
test('空值处理', function () {
equal(template('default', {value:''}), '', '空字符串输出');
equal(template('default', {}), '', 'undefined转成空值');
equal(template('default', {value:null}), '', 'null转成空值');
});
test('内置方法', function () {
var data = {value: 'hello <em>world</em>', value2: '...', data2: {value: '^^^^^^'}};
equal(template('include', data), 'hello <em>world</em>', 'include');
equal(template('include2', data), 'hello <em>world</em>^^^^^^', '相同模板多次include');
equal(template('print', data), 'hello <em>world</em>...', 'print');
});
test('辅助方法', function () {
var data = {value: 'hello world'};
template.helper('test', function (content) {
return '<em>' + content + '</em>';
});
template.helper('link', function (content, url) {
return '<i' + content + 'i>[' + url + ']';
});
equal(template('helper', data), '<em>hello world</em>', '兼容以前的语法');
equal(template('helper2', data), '<em>hello world</em>', '使用新的管道风格');
equal(
template.compile("{{value | test | link: 'abcd'}}")({value: '<--->'})
, '<i<em><---></em>i>[abcd]', '嵌套使用');
});
test('沙箱', function () {
equal(template('sandbox', {}), 'undefined', '拒绝读取外部对象');
template('sandbox2', {});
equal(window.$sandbox, undefined, '防范污染外部对象');
});
test('调试', function () {
var onerror = template.onerror;
var error = null;
template.onerror = function (e) {
console.log(e)
error = e;
};
template('debug-render-xxxxxxxxx', {});
deepEqual({
name: error.name,
message: error.message
}, {
name: 'Render Error',
message: 'Template not found'
}, '没有找到模板');
error = null;
template.onerror = function (e) {
console.log(e)
error = e;
};
template('debug-render', {});
deepEqual({
name: error.name,
line: error.line
}, {
name: 'Render Error',
line: 1
}, '渲染错误调试');
error = null;
template.onerror = function (e) {
console.log(e)
error = e;
};
template('debug-syntax', {});
deepEqual({
name: error.name
}, {
name: 'Syntax Error'
}, '语法错误调试');
template.onerror = onerror;
});
test('配置功能', function () {
template.defaults.escape = false;
template.defaults.openTag = '<<';
template.defaults.closeTag = '>>';
var data = {value: 'hello <em>world</em>'};
equal(template.compile('<<value>>')(data), 'hello <em>world</em>', '自定义界定符');
equal(template.compile('<<#value>>')(data), 'hello <em>world</em>', '关闭默认编码输出');
template.defaults.escape = true;
template.defaults.openTag = '{{';
template.defaults.closeTag = '}}';
});
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">test markup</div>
</body>
</html>