test-native.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>模板引擎单元测试</title>
  6. <link rel="stylesheet" href="./js/qunit/qunit.css">
  7. <script src="./js/qunit/qunit.js"></script>
  8. <script src="../dist/template-native-debug.js"></script>
  9. <script id="default" type="text/html"><%=value%></script>
  10. <script id="noEscape" type="text/html"><%=#value%></script>
  11. <script id="include" type="text/html"><%include('include-content')%></script>
  12. <script id="include2" type="text/html"><%=include('include-content')%></script>
  13. <script id="include3" type="text/html"><%=#include('include-content')%></script>
  14. <script id="include-content" type="text/html"><%=#value%></script>
  15. <script id="print" type="text/html"><%print(value, value2)%></script>
  16. <script id="print2" type="text/html"><%=print(value, value2)%></script>
  17. <script id="print3" type="text/html"><%=#print(value, value2)%></script>
  18. <script id="sandbox" type="text/html"><%=typeof document%></script>
  19. <script id="sandbox2" type="text/html"><%if (window) window.$sandbox = true;%></script>
  20. <script id="html" type="text/html">""''\\</script>
  21. <script id="debug-render" type="text/html"><%=a.b.c.d.e.f%></script>
  22. <script id="debug-syntax" type="text/html"><%=a b c d e f%></script>
  23. <script id="helper" type="text/html"><%=test (value)%></script>
  24. <script id="helper2" type="text/html"><%=#test (value)%></script>
  25. <script id="helper3" type="text/html"><%=#test (value)%></script>
  26. <script id="parser" type="text/html">
  27. <%if(0===a) {}%><%1===5?2:3%><%%>
  28. </script>
  29. <script>
  30. if (!window.console) {
  31. window.console = {
  32. log: function () {}
  33. }
  34. }
  35. test('基本', function () {
  36. var data = {value: 'hello <em>world</em>'};
  37. equal(typeof template.compile('<%=value%>'), 'function', '编译成函数');
  38. equal(template('default', data), 'hello &#60;em&#62;world&#60;/em&#62;', '编码输出');
  39. equal(template('noEscape', data), 'hello <em>world</em>', '原文输出');
  40. });
  41. test('特殊类型变量输出', function () {
  42. var data = {value: 'hello <em>world</em>'};
  43. equal(template('default', {value:function(){return 'hello world'}}), 'hello world', '函数类型运算后输出');
  44. equal(template('default', {value:0}), '0', 'Number类型输出');
  45. equal(template('default', {value:false}), '', 'Boolean(false)类型输出空值');
  46. equal(template('default', {value:true}), '', 'Boolean(true)类型输出空值');
  47. equal(template('default', {value:{}}), '', 'Object类型输出空值');
  48. });
  49. test('特殊字符输出', function () {
  50. equal(template('html', {}), '""\'\'\\\\', '编码输出js特殊字符');
  51. });
  52. test('XSS防范测试', function () {
  53. equal(template('default', {value:'<>"\'&'}), '&#60;&#62;&#34;&#39;&#38;', 'HTML字符转义');
  54. });
  55. test('空值处理', function () {
  56. equal(template('default', {value:''}), '', '空字符串输出');
  57. equal(template('default', {}), '', 'undefined转成空值');
  58. equal(template('default', {value:null}), '', 'null转成空值');
  59. });
  60. test('内置方法', function () {
  61. var data = {value: 'hello <em>world</em>', value2: '...'};
  62. equal(template('include', data), 'hello <em>world</em>', 'include');
  63. equal(template('include2', data), 'hello <em>world</em>', '=include');
  64. equal(template('include3', data), 'hello <em>world</em>', '==include');
  65. equal(template('print', data), 'hello <em>world</em>...', 'print');
  66. equal(template('print2', data), 'hello <em>world</em>...', '=print');
  67. equal(template('print3', data), 'hello <em>world</em>...', '==print');
  68. });
  69. test('辅助方法', function () {
  70. var data = {value: 'hello world'};
  71. template.helper('test', function (content) {
  72. return '<em>' + content + '</em>';
  73. });
  74. equal(template('helper', data), '&#60;em&#62;hello world&#60;/em&#62;', '=helper');
  75. equal(template('helper2', data), '<em>hello world</em>', '=helper');
  76. equal(template('helper2', data), '<em>hello world</em>', '==helper');
  77. });
  78. test('沙箱', function () {
  79. equal(template('sandbox', {}), 'undefined', '拒绝读取外部对象');
  80. template('sandbox2', {});
  81. equal(window.$sandbox, undefined, '防范污染外部对象');
  82. });
  83. test('调试', function () {
  84. var onerror = template.onerror;
  85. var error = null;
  86. template.onerror = function (e) {
  87. console.log(e)
  88. error = e;
  89. };
  90. template('debug-render-xxxxxxxxx', {});
  91. deepEqual({
  92. name: error.name,
  93. message: error.message
  94. }, {
  95. name: 'Render Error',
  96. message: 'Template not found'
  97. }, '没有找到模板');
  98. error = null;
  99. template.onerror = function (e) {
  100. console.log(e)
  101. error = e;
  102. };
  103. template('debug-render', {});
  104. deepEqual({
  105. name: error.name,
  106. line: error.line
  107. }, {
  108. name: 'Render Error',
  109. line: 1
  110. }, '渲染错误调试');
  111. error = null;
  112. template.onerror = function (e) {
  113. console.log(e)
  114. error = e;
  115. };
  116. template('debug-syntax', {});
  117. deepEqual({
  118. name: error.name
  119. }, {
  120. name: 'Syntax Error'
  121. }, '语法错误调试');
  122. template.onerror = onerror;
  123. });
  124. test('配置功能', function () {
  125. template.defaults.escape = false;
  126. template.defaults.openTag = '{{';
  127. template.defaults.closeTag = '}}';
  128. var data = {value: 'hello <em>world</em>'};
  129. equal(template.compile('{{=value}}')(data), 'hello <em>world</em>', '自定义界定符');
  130. equal(template.compile('{{=value}}')(data), 'hello <em>world</em>', '关闭默认编码输出');
  131. template.defaults.escape = true;
  132. template.defaults.openTag = '<%';
  133. template.defaults.closeTag = '%>';
  134. });
  135. test('语法', function () {
  136. var value = template('parser', {});
  137. equal(value, '');
  138. });
  139. </script>
  140. </head>
  141. <body>
  142. <div id="qunit"></div>
  143. <div id="qunit-fixture">test markup</div>
  144. </body>
  145. </html>