Use hiff to compare SVG output to fixtures

Importantly, we normalize property order in the SVG style attribute before comparing, to avoid spurious errors on essentially identical images.
A side benefit is nicer error messages on test failures.

__tests__/compareSvg.js

@@ -0,0 +1,23 @@
+import hiff from 'hiff';
+
+function normalizeStyle(style) {
+	style = (style || '').split(';').map(s => s.trim());
+	style.sort();
+	return style.join(';');
+}
+
+function normalizeAttrs(...$ns) {
+	for (let $n of $ns) {
+		if ($n.attr('style'))
+			$n.attr('style', normalizeStyle($n.attr('style')));
+	}
+}
+
+function comparatorFn($n1, $n2, childChanges) {
+	normalizeAttrs($n1, $n2);
+	return hiff.defaultTagComparisonFn($n1, $n2, childChanges);
+}
+
+export default function compareSvg(svg1, svg2, options = {}) {
+	return hiff.compare(svg1, svg2, Object.assign({}, options, {tagComparison: comparatorFn}));
+}

__tests__/graphical-tests.js

@@ -1,14 +1,17 @@
 import fixtures from './fixtures';
 import {render} from 'enzyme';
 import { expect } from 'chai';
+import compareSvg from './compareSvg';
 
 describe('Graphical tests from fixtures.js', function() {
-	for (let key of Object.keys(fixtures)) {
-		describe(`${key}`, function() {
-			it('should render as specified', function() {
-				const wrapper = render(fixtures[key].jsx);
-        		expect(wrapper.html()).to.eq(fixtures[key].svg);
-			});
-		});
-	}
-});
+    for (let key of Object.keys(fixtures)) {
+        describe(`${key}`, function() {
+            it('should render as specified', function() {
+                const wrapper = render(fixtures[key].jsx);
+                const result = compareSvg(wrapper.html(), fixtures[key].svg);
+                const errorMessage = 'SVG output changed:\n' + result.changes.map(change => change.message).join('\n') + '\n';
+                expect(result.changes, errorMessage).to.be.empty;
+            });
+        });
+    }
+});

package.json

@@ -42,6 +42,7 @@
     "babel-runtime": "^6.6.1",
     "chai": "^3.5.0",
     "enzyme": "^2.1.0",
+    "hiff": "^0.3.0",
     "jsdom": "^8.1.0",
     "line-by-line": "^0.1.4",
     "mocha": "^2.4.5",