├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── package.json └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | COPYRIGHT (c) 2016 James Kyle 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `assertEqualJSX` 2 | 3 | ![Example of output](https://cloud.githubusercontent.com/assets/952783/14961155/0df51bd8-104d-11e6-9eeb-efc9c372d0b9.png) 4 | 5 | 6 | ### API 7 | 8 | ```js 9 | assertEqualJSX(jsx, jsx, [opts]); 10 | ``` 11 | 12 | ### Example 13 | 14 | ```js 15 | assertEqualJSX( 16 | , 17 | // should equal: 18 |
19 |

Hello world

20 |

Look at this amazing component

21 |
22 | ) 23 | ``` 24 | 25 | #### `opts.sanitize` 26 | 27 | ```js 28 | function sanitizeId(str) { 29 | return str.replace(/my-component-id-(\d+)/ig, 'my-component-id-0'); 30 | } 31 | 32 | assertEqualJSX( 33 |
, 34 | // should equal: 35 |
, 36 | // with sanitization: 37 | { 38 | sanitize: sanitizeId 39 | } 40 | ) 41 | ``` 42 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var renderToStaticMarkup = require('react-dom/server').renderToStaticMarkup; 2 | var beautifyHTML = require('js-beautify').html; 3 | var diffWords = require('diff').diffWords; 4 | var chalk = require('chalk'); 5 | var fail = require('assert').fail; 6 | 7 | var inKarma = !!(global.top && global.top.karma); 8 | var colors = new chalk.constructor({ 9 | enabled: inKarma 10 | }); 11 | 12 | module.exports = function assertEqualJSX(actual, expected, opts) { 13 | opts = opts || {} 14 | 15 | actual = renderToStaticMarkup(actual); 16 | expected = renderToStaticMarkup(expected); 17 | 18 | if (opts.sanitize) { 19 | actual = opts.sanitize(actual); 20 | expected = opts.sanitize(expected); 21 | } 22 | 23 | if (actual === expected) { 24 | return; 25 | } 26 | 27 | actual = beautifyHTML(actual); 28 | expected = beautifyHTML(expected); 29 | 30 | var diff = diffWords(actual, expected) 31 | .map(function(part) { 32 | if (part.added) { 33 | return colors.black.bgRed(part.value); 34 | } else if (part.removed) { 35 | return colors.black.bgGreen(part.value); 36 | } else { 37 | return colors.gray(part.value); 38 | } 39 | }) 40 | .join(''); 41 | 42 | var message = [ 43 | '', 44 | '-------------------------------------------------------------------------', 45 | '', 46 | colors.gray('Diff:'), 47 | diff, 48 | '', 49 | colors.green('Actual:'), 50 | colors.green(actual), 51 | '', 52 | colors.red('Expected:'), 53 | colors.red(expected), 54 | '', 55 | '-------------------------------------------------------------------------', 56 | ].join('\n'); 57 | 58 | fail(actual, expected, message, '=='); 59 | }; 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "assert-equal-jsx", 3 | "version": "1.0.3", 4 | "description": "assertEqualJSX", 5 | "main": "index.js", 6 | "author": "James Kyle ", 7 | "license": "MIT", 8 | "dependencies": { 9 | "chalk": "^1.1.3", 10 | "diff": "^2.2.2", 11 | "js-beautify": "^1.6.2", 12 | "react-dom": "^0.14.0 || ^15.0.0" 13 | }, 14 | "devDependencies": { 15 | "mocha": "^2.5.3", 16 | "react": "^0.14.0 || ^15.0.0" 17 | }, 18 | "scripts": { 19 | "test": "mocha test.js" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | var assert = require('assert'); 2 | var assertEqualJSX = require('./'); 3 | var React = require('react'); 4 | 5 | describe('assertEqualJSX', function() { 6 | it('should pass when jsx is equal', function() { 7 | assertEqualJSX( 8 | React.createElement('div'), 9 | React.createElement('div') 10 | ); 11 | }); 12 | 13 | it('should fail when jsx isnt equal', function() { 14 | assert.throws(function() { 15 | assertEqualJSX( 16 | React.createElement('div'), 17 | React.createElement('span') 18 | ); 19 | }); 20 | }); 21 | }); 22 | --------------------------------------------------------------------------------