test.html 5.0 KB

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