Merge pull request #26 from revivek/tests/add-for-elements

Namespace data- decorations one more level, and add tests for Oy components

jasmine.json

@@ -2,6 +2,7 @@
     "spec_dir": "lib",
     "spec_files": [
         "__tests__/*-test.js",
-        "rules/__tests__/*-test.js"
+        "rules/__tests__/*-test.js",
+        "components/__tests__/*-test.js"
     ]
 }

lib/components/OyImg.js

@@ -22,8 +22,8 @@ exports['default'] = _react2['default'].createClass({
 
   render: function render() {
     return _react2['default'].createElement('img', _extends({}, this.props, {
-      'data-border': this.props.border,
-      'data-align': this.props.align }));
+      'data-oy-border': this.props.border,
+      'data-oy-align': this.props.align }));
   }
 });
 module.exports = exports['default'];

lib/components/OyTD.js

@@ -26,10 +26,10 @@ exports['default'] = _react2['default'].createClass({
     return _react2['default'].createElement(
       'td',
       _extends({}, this.props, {
-        'data-align': this.props.align,
-        'data-valign': this.props.vAlign,
-        'data-background': this.props.background,
-        'data-bgcolor': this.props.bgColor }),
+        'data-oy-align': this.props.align,
+        'data-oy-valign': this.props.vAlign,
+        'data-oy-background': this.props.background,
+        'data-oy-bgcolor': this.props.bgColor }),
       this.props.children
     );
   }

lib/components/OyTable.js

@@ -25,9 +25,9 @@ exports['default'] = _react2['default'].createClass({
     return _react2['default'].createElement(
       'table',
       _extends({}, this.props, {
-        'data-align': this.props.align,
-        'data-bgcolor': this.props.bgColor,
-        'data-valign': this.props.vAlign }),
+        'data-oy-align': this.props.align,
+        'data-oy-bgcolor': this.props.bgColor,
+        'data-oy-valign': this.props.vAlign }),
       this.props.children
     );
   }

lib/components/__tests__/OyElement-test.js

@@ -0,0 +1,37 @@
+'use strict';
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAddonsTestUtils = require('react-addons-test-utils');
+
+var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);
+
+var _OyElement = require('../OyElement');
+
+var _OyElement2 = _interopRequireDefault(_OyElement);
+
+describe('OyElement', function () {
+  var shallowRenderer = undefined;
+
+  beforeEach(function () {
+    shallowRenderer = _reactAddonsTestUtils2['default'].createRenderer();
+  });
+
+  it('should render Oy-whitelisted element', function () {
+    shallowRenderer.render(_react2['default'].createElement(_OyElement2['default'], { type: 'table', className: 'mytable' }));
+    var result = shallowRenderer.getRenderOutput();
+    expect(result.type.displayName).toEqual('OyTable');
+    expect(result.props.className).toEqual('mytable');
+  });
+
+  it('should render the right React element if not in Oy whitelist', function () {
+    shallowRenderer.render(_react2['default'].createElement(_OyElement2['default'], { type: 'a', className: 'myanchor' }));
+    var result = shallowRenderer.getRenderOutput();
+    expect(result.type).toEqual('a');
+    expect(result.props.className).toEqual('myanchor');
+  });
+});

lib/components/__tests__/OyImg-test.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDomServer = require('react-dom/server');
+
+var _reactDomServer2 = _interopRequireDefault(_reactDomServer);
+
+var _OyImg = require('../OyImg');
+
+var _OyImg2 = _interopRequireDefault(_OyImg);
+
+describe('OyImg', function () {
+  it('should render a <img> element with Oy-decorated attributes', function () {
+    // border
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(_OyImg2['default'], { border: '5' }))).toEqual('<img data-oy-border="5"/>');
+
+    // align
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(_OyImg2['default'], { align: 'center' }))).toEqual('<img data-oy-align="center"/>');
+  });
+});

lib/components/__tests__/OyTD-test.js

@@ -0,0 +1,47 @@
+'use strict';
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDomServer = require('react-dom/server');
+
+var _reactDomServer2 = _interopRequireDefault(_reactDomServer);
+
+var _OyTD = require('../OyTD');
+
+var _OyTD2 = _interopRequireDefault(_OyTD);
+
+describe('OyTD', function () {
+  it('should render a <td> element with Oy-decorated attributes', function () {
+    // align
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(
+      _OyTD2['default'],
+      { align: 'center' },
+      'Foo'
+    ))).toEqual('<td data-oy-align="center">Foo</td>');
+
+    // valign
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(
+      _OyTD2['default'],
+      { vAlign: 'center' },
+      'Foo'
+    ))).toEqual('<td data-oy-valign="center">Foo</td>');
+
+    // background
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(
+      _OyTD2['default'],
+      { background: 'foo.jpeg' },
+      'Foo'
+    ))).toEqual('<td data-oy-background="foo.jpeg">Foo</td>');
+
+    // bgcolor
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(
+      _OyTD2['default'],
+      { bgColor: '#123456' },
+      'Foo'
+    ))).toEqual('<td data-oy-bgcolor="#123456">Foo</td>');
+  });
+});

lib/components/__tests__/OyTable-test.js

@@ -0,0 +1,40 @@
+'use strict';
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDomServer = require('react-dom/server');
+
+var _reactDomServer2 = _interopRequireDefault(_reactDomServer);
+
+var _OyTable = require('../OyTable');
+
+var _OyTable2 = _interopRequireDefault(_OyTable);
+
+describe('OyTable', function () {
+  it('should render a <table> element with Oy-decorated attributes', function () {
+    // align
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(
+      _OyTable2['default'],
+      { align: 'center' },
+      'Foo'
+    ))).toEqual('<table data-oy-align="center">Foo</table>');
+
+    // valign
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(
+      _OyTable2['default'],
+      { vAlign: 'center' },
+      'Foo'
+    ))).toEqual('<table data-oy-valign="center">Foo</table>');
+
+    // bgcolor
+    expect(_reactDomServer2['default'].renderToStaticMarkup(_react2['default'].createElement(
+      _OyTable2['default'],
+      { bgColor: '#123456' },
+      'Foo'
+    ))).toEqual('<table data-oy-bgcolor="#123456">Foo</table>');
+  });
+});

lib/utils/HTML4.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 var attributeWhitelist = [{
-  regex: /data-align/g,
+  regex: /data-oy-align/g,
   replacement: 'align'
 }, {
-  regex: /data-valign/g,
+  regex: /data-oy-valign/g,
   replacement: 'valign'
 }, {
-  regex: /data-background/g,
+  regex: /data-oy-background/g,
   replacement: 'background'
 }, {
-  regex: /data-bgcolor/g,
+  regex: /data-oy-bgcolor/g,
   replacement: 'bgcolor'
 }];
 

package.json

@@ -18,7 +18,9 @@
   },
   "devDependencies": {
     "babel": "^5.5.6",
-    "jasmine": "^2.3.1"
+    "jasmine": "^2.3.1",
+    "react-dom": "0.14.6",
+    "react-addons-test-utils": "^0.14.6"
   },
   "scripts": {
     "compile": "babel -d lib/ src/",

src/components/OyImg.jsx

@@ -12,8 +12,9 @@ export default React.createClass({
   render: function() {
     return (
       <img {...this.props}
-        data-border={this.props.border}
-        data-align={this.props.align} />
+        data-oy-border={this.props.border}
+        data-oy-align={this.props.align} />
     );
   }
 });
+

src/components/OyTD.jsx

@@ -14,10 +14,10 @@ export default React.createClass({
   render: function() {
     return (
       <td {...this.props}
-        data-align={this.props.align}
-        data-valign={this.props.vAlign}
-        data-background={this.props.background}
-        data-bgcolor={this.props.bgColor}>
+        data-oy-align={this.props.align}
+        data-oy-valign={this.props.vAlign}
+        data-oy-background={this.props.background}
+        data-oy-bgcolor={this.props.bgColor}>
         {this.props.children}
       </td>
     );

src/components/OyTable.jsx

@@ -13,9 +13,9 @@ export default React.createClass({
   render: function() {
     return (
       <table {...this.props}
-        data-align={this.props.align}
-        data-bgcolor={this.props.bgColor}
-        data-valign={this.props.vAlign}>
+        data-oy-align={this.props.align}
+        data-oy-bgcolor={this.props.bgColor}
+        data-oy-valign={this.props.vAlign}>
         {this.props.children}
       </table>
     );

src/components/__tests__/OyElement-test.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactTestUtils from 'react-addons-test-utils';
+
+import OyElement from '../OyElement';
+
+
+describe('OyElement', function() {
+  let shallowRenderer;
+
+  beforeEach(() => {
+    shallowRenderer = ReactTestUtils.createRenderer();
+  });
+
+  it('should render Oy-whitelisted element', function() {
+    shallowRenderer.render(<OyElement type="table" className="mytable" />);
+    const result = shallowRenderer.getRenderOutput();
+    expect(result.type.displayName).toEqual('OyTable');
+    expect(result.props.className).toEqual('mytable');
+  });
+
+  it('should render the right React element if not in Oy whitelist', function() {
+    shallowRenderer.render(<OyElement type="a" className="myanchor" />);
+    const result = shallowRenderer.getRenderOutput();
+    expect(result.type).toEqual('a');
+    expect(result.props.className).toEqual('myanchor');
+  });
+});

src/components/__tests__/OyImg-test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+import OyImg from '../OyImg';
+
+
+describe('OyImg', function() {
+  it('should render a <img> element with Oy-decorated attributes', function() {
+    // border
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyImg border="5" />)
+    ).toEqual('<img data-oy-border="5"/>');
+
+    // align
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyImg align="center" />)
+    ).toEqual('<img data-oy-align="center"/>');
+  });
+});

src/components/__tests__/OyTD-test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+import OyTD from '../OyTD';
+
+
+describe('OyTD', function() {
+  it('should render a <td> element with Oy-decorated attributes', function() {
+    // align
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyTD align="center">Foo</OyTD>)
+    ).toEqual('<td data-oy-align="center">Foo</td>');
+
+    // valign
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyTD vAlign="center">Foo</OyTD>)
+    ).toEqual('<td data-oy-valign="center">Foo</td>');
+
+    // background
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyTD background="foo.jpeg">Foo</OyTD>)
+    ).toEqual('<td data-oy-background="foo.jpeg">Foo</td>');
+
+    // bgcolor
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyTD bgColor="#123456">Foo</OyTD>)
+    ).toEqual('<td data-oy-bgcolor="#123456">Foo</td>');
+  });
+});

src/components/__tests__/OyTable-test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+import OyTable from '../OyTable';
+
+
+describe('OyTable', function() {
+  it('should render a <table> element with Oy-decorated attributes', function() {
+    // align
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyTable align="center">Foo</OyTable>)
+    ).toEqual('<table data-oy-align="center">Foo</table>');
+
+    // valign
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyTable vAlign="center">Foo</OyTable>)
+    ).toEqual('<table data-oy-valign="center">Foo</table>');
+
+    // bgcolor
+    expect(
+      ReactDOMServer.renderToStaticMarkup(<OyTable bgColor="#123456">Foo</OyTable>)
+    ).toEqual('<table data-oy-bgcolor="#123456">Foo</table>');
+  });
+});