审查视图

public/assets/libs/art-template/test/test.html 5.0 KB
王智 authored
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 &#60;em&#62;world&#60;/em&#62;', '编码输出');
	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:'<>"\'&'}), '&#60;&#62;&#34;&#39;&#38;', '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: '<--->'})
	, '&#60;i&#60;em&#62;&#60;---&#62;&#60;/em&#62;i&#62;[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>