Add tests

Author: NekR

index.js

@@ -3,11 +3,20 @@ var escape = require('escape-html');
 var Tag = require('./lib/tag');
 var hasOwn = Object.prototype.hasOwnProperty;
 
+var emptyTags = require('empty-tags').reduce(function(map, tag) {
+  map[tag] = true;
+  return map;
+}, Object.create(null));
+
 var renderer = jsx.register('HTML', {
   tags: {
     '*': {
       enter: function(tag, props) {
-        return new Tag(escape(tag), props);
+        if (escape(tag) !== tag) {
+          throw new Error('Incorrect tag name: ' + tag);
+        }
+
+        return new Tag(tag, props);
       },
       leave: function(parent, tag) {
         return parent;
@@ -16,16 +25,27 @@ var renderer = jsx.register('HTML', {
         if (child == null) return parent;
 
         if (child instanceof Tag) {
-          parent.children.push(child);
+          // do nothing
         } else {
           child = escape(child + '');
         }
 
+        parent.children.push(child);
+
         return parent;
       },
       props: function(props) {
         return Object.keys(props)
-          .map(mapProps).join(' ');
+          .map(function(key) {
+            return mapProps(key, key && props[key]);
+          }).join(' ');
+      },
+      children: function(children, parent, tag) {
+        if (typeof emptyTags[tag.toLowerCase()] !== 'undefined') {
+          throw new Error('Tag <' + tag + ' /> cannot have children');
+        }
+
+        return children;
       }
     }
   },
@@ -36,9 +56,7 @@ var renderer = jsx.register('HTML', {
 
 module.exports = renderer;
 
-function mapProps(key) {
-  var val = key && props[key];
-
+function mapProps(key, val) {
   if (!key || val == null) return '';
   if (val instanceof Tag) return '';
 
@@ -67,6 +85,8 @@ function handleStyle(style) {
   for (var key in style) {
     if (!hasOwn.call(style, key)) continue;
 
+    var val = style[key];
+
     key = key.replace(/[A-Z]/g, function(m) {
       return '-' + m.toLowerCase();
     });
@@ -75,7 +95,7 @@ function handleStyle(style) {
       key = '-' + key;
     }
 
-    string += key + ': ' + val + ';';
+    string += (string ? ' ' : '') + key + ': ' + val + ';';
   }
 
   return string;

package.json

@@ -4,15 +4,16 @@
   "description": "Render JSX-IR to HTML or XML string",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "node_modules/.bin/mocha tests/test.js"
   },
   "author": "Arthur Stolyar <[email protected]>",
   "license": "MIT",
   "dependencies": {
     "babel-plugin-jsx": "^1.1.0",
-    "jsx-runtime": "^1.1.0",
+    "empty-tags": "^1.0.0",
     "escape-html": "^1.0.2",
     "html-tags": "^1.1.1",
+    "jsx-runtime": "^1.1.0",
     "svg-tags": "^1.0.0"
   },
   "repository": "jsx-ir/jsx-to-html",

tests/entries/attrs.jsx

@@ -0,0 +1,40 @@
+var runtime = require('../../index');
+var emptyTags = require('empty-tags');
+var assert = require('assert');
+
+export var simple = () => {
+  let elem = runtime.render(
+    <div data-test="test"></div>
+  );
+
+  let str = '<div data-test="test"></div>';
+
+  assert.equal(elem, str);
+};
+
+export var js_values = () => {
+  let elem = runtime.render(
+    <div
+      data-boolean={ true }
+      data-number={ 1 }
+      data-string={ 'str' }
+      data-object={ {} }
+      data-array={ [1, 2, 3] }
+    ></div>
+  );
+
+  let str = '<div data-boolean="true" data-number="1" data-string="str"' +
+    ' data-object="{}" data-array="[1,2,3]"></div>';
+
+  assert.equal(elem, str);
+};
+
+export var prop_vs_attr= () => {
+  let elem = runtime.render(
+    <div data-test="test" className="test" _prop={ true }></div>
+  );
+
+  let str = '<div data-test="test" class="test" _prop="true"></div>';
+
+  assert.equal(elem, str);
+};

tests/entries/children.jsx

@@ -0,0 +1,47 @@
+var runtime = require('../../index');
+var emptyTags = require('empty-tags');
+var assert = require('assert');
+
+export var simple_text = () => {
+  let elem = runtime.render(
+    <div>
+      text
+    </div>
+  );
+
+  assert.equal(elem, '<div>text</div>');
+};
+
+export var escape_text = () => {
+  let elem = runtime.render(
+    <div>{ '<span>\'"&</span>' }</div>
+  );
+
+  assert.equal(elem, '<div>&lt;span&gt;&#39;&quot;&amp;&lt;/span&gt;</div>');
+};
+
+export var array_child = () => {
+  let elem = runtime.render(
+    <div>
+      { [<span />, 'Hello', <input />] }
+    </div>
+  );
+
+  assert.equal(elem, '<div><span></span>Hello<input></input></div>');
+}
+
+export var jsvalues_text = () => {
+  let elem = runtime.render(
+    <div>
+      { true }
+      { 1 }
+      { 'str' }
+      { {} }
+      { [1, 2, 3] }
+    </div>
+  );
+
+  var str = '<div>true1str[object Object]123</div>';
+
+  assert.equal(elem, str);
+}

tests/entries/styles.jsx

@@ -0,0 +1,43 @@
+var runtime = require('../../index');
+var emptyTags = require('empty-tags');
+var assert = require('assert');
+
+export var object = () => {
+  let elem = runtime.render(
+    <div
+      style={ {
+        color: 'black'
+      } }
+    ></div>
+  );
+
+  assert.equal(elem, '<div style="color: black;"></div>');
+};
+
+export var object_vendors = () => {
+  let elem = runtime.render(
+    <div
+      style={ {
+        mozOpacity: 1,
+        webkitBorderRadius: '3px',
+        msFilter: 'go away',
+        oLink: 'dead'
+      } }
+    ></div>
+  );
+
+  let str = '<div style="-moz-opacity: 1; -webkit-border-radius: 3px;' +
+    ' -ms-filter: go away; -o-link: dead;"></div>'
+
+  assert.equal(elem, str);
+};
+
+export var string = () => {
+  let elem = runtime.render(
+    <div
+      style="color: black"
+    ></div>
+  );
+
+  assert.equal(elem, '<div style="color: black"></div>');
+};

tests/entries/tags.jsx

@@ -0,0 +1,99 @@
+var runtime = require('../../index');
+var emptyTags = require('empty-tags');
+var assert = require('assert');
+
+export var simple = () => {
+  let elem = runtime.render(<div />);
+
+  assert.equal(
+    elem, '<div></div>'
+  );
+};
+
+export var svg_tags = () => {
+  let elem = runtime.render(
+    <div>
+      <svg></svg>
+    </div>
+  );
+
+  let str = '<div><svg></svg></div>';
+
+  assert.equal(elem, str);
+};
+
+export var foreign_tags = () => {
+  let elem = runtime.render(
+    <div>
+      <svg>
+        <foreignObject />
+      </svg>
+    </div>
+  );
+
+  let str = '<div><svg><foreignObject></foreignObject></svg></div>';
+
+  assert.equal(elem, str);
+};
+
+export var custom_tags = () => {
+  let elem = runtime.render(
+    <div>
+      <custom-tag></custom-tag>
+    </div>
+  );
+
+  let str = '<div><custom-tag></custom-tag></div>';
+
+  assert.equal(elem, str);
+};
+
+export var scope_tags = () => {
+  var Scoped = function() {
+    return <span></span>
+  };
+
+  let elem = runtime.render(
+    <div>
+      <Scoped />
+    </div>
+  );
+
+  let str = '<div><span></span></div>';
+
+  assert.equal(elem, str);
+};
+
+export var empty_tags = () => {
+  emptyTags.forEach(function(tag, i) {
+    var Empty = function() {
+      return {
+        tag: tag,
+        children: [<div />],
+        props: null
+      }
+    };
+
+    assert.throws(function() {
+      runtime.render(<Empty />);
+    }, function(e) {
+      if (e.message === 'Tag <' + tag + ' /> cannot have children') {
+        return true;
+      }
+    }, 'Tag <' + tag + '> cannot have children, but it has');
+  });
+}
+
+export var escale_tag_name = () => {
+  assert.throws(function() {
+    runtime.render({
+      tag: '<div>',
+      children: null,
+      props: null
+    });
+  }, function(e) {
+    if (e.message.indexOf('Incorrect tag name:') === 0) {
+      return true;
+    }
+  });
+};

tests/test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var fs = require('fs');
+var path = require('path');
+var babel = require('babel-core');
+var plugin = require('../babel-plugin');
+var Module = require('module');
+
+var testsFolder = path.join(__dirname, 'entries');
+var dir = fs.readdirSync(testsFolder);
+
+var modulePaths = module.paths;
+
+describe('dom tests', function() {
+  dir.forEach(function(fileName) {
+    var filePath = path.join(testsFolder, fileName);
+    var file = fs.readFileSync(filePath, 'utf-8');
+
+    testFile(file, filePath, fileName);
+
+    function testFile(file, filePath, fileName) {
+      var result = babel.transform(file, {
+        plugins: [plugin],
+        blacklist: ['react']
+      });
+
+      var mod = requireString(result.code, filePath, fileName);
+
+      describe(fileName, function() {
+        Object.keys(mod).forEach(function(key) {
+          it(key, mod[key]);
+        });
+      });
+    }
+  });
+});
+
+function requireString(src, filePath, fileName) {
+  var module = new Module(fileName);
+
+  module.filename = filePath;
+  module.paths = Module._nodeModulePaths(path.dirname(filePath));
+  module._compile(src, filePath);
+
+  return module.exports;
+}