Merge pull request #5 from gios-asu/ivan-develop

Support new options
asu-ke-web-services · Feb 24, 2016 · 5c7e7ae · 5c7e7ae
2 parents 4b5a02c + 16539ad
commit 5c7e7ae
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -44,6 +44,8 @@ describe('A Program Component', () => {
       componentName: 'program',
       savePath: __dirname + '/',
       threshold: 0,
+      viewportSize: { width: 1440, height: 900 },
+      css: 'body { background-color: white } ',
       onScreenshotsUpdated: done // Used when updating screenshots
     });
 
@@ -73,7 +75,7 @@ var differ = new Differ({
   componentName: 'program',
   savePath: __dirname + '/',
   threshold: 0,
-  done, // Used when updating screenshots
+  onScreenshotsUpdated: done, // Used when updating screenshots
   updateSnapshots: true
 });
 ```
@@ -98,6 +100,8 @@ Create a new Differ object
     - componentName - The name of your component, used to save your file
     - savePath - The folder where your screenshots should be saved
     - threshold - The percentage difference allowed. Defaults to 0
+    - css - A CSS string of custom styles you would like injected. Defaults to ''
+    - viewportSize - An object with height and width defined as numbers. Defaults to { width: 1440, height: 900 }
     - onScreenshotsUpdated - What to do after screenshots have been updated when using the `env UPDATE_SCREENSHOTS=1` or option `updateScreenshots: true`. Defaults to noop.
     - updateScreenshots - Instead of running tests, simply update screenshots. Defaults to false.
 

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "type" : "git",
     "url" : "https://github.com/gios-asu/react-cornea.git"
   },
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A testing utility for generating visual diffs of your React components",
   "main": "react-cornea.compiled.js",
   "scripts": {

diff --git a/react-cornea.compiled.js b/react-cornea.compiled.js
@@ -29,10 +29,13 @@ var _fileExists2 = _interopRequireDefault(_fileExists);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var renderHtml = function renderHtml(component) {
+var renderHtml = function renderHtml(component, css) {
   var wrapper = (0, _enzyme.render)(component);
   var html = wrapper.html();
-  html = '<html><body>' + html + '</body></html>';
+
+  var styles = '<style>' + css + '</style>';
+
+  html = '<html><head>' + styles + '</head><body>' + html + '</body></html>';
 
   return html;
 };
@@ -44,13 +47,12 @@ var createScreenshot = function createScreenshot(_ref) {
   var html = _ref.html;
   var ref = _ref.ref;
   var path = _ref.path;
+  var css = _ref.css;
+  var viewportSize = _ref.viewportSize;
 
   _phantom2.default.create().then(function (ph) {
     ph.createPage().then(function (page) {
-      page.property('viewportSize', {
-        width: 1440,
-        height: 900
-      }).then(function () {
+      page.property('viewportSize', viewportSize).then(function () {
         page.property('content', html).then(function () {
           // TODO figure out a better way to do this
           setTimeout(function () {
@@ -67,14 +69,16 @@ var createScreenshot = function createScreenshot(_ref) {
   });
 };
 
-// TODO support multiple viewport sizes
-// TODO support stylesheet injection
 var Differ = function Differ(_ref2) {
   var _this = this;
 
   var componentName = _ref2.componentName;
   var component = _ref2.component;
   var savePath = _ref2.savePath;
+  var _ref2$viewportSize = _ref2.viewportSize;
+  var viewportSize = _ref2$viewportSize === undefined ? { width: 1440, height: 900 } : _ref2$viewportSize;
+  var _ref2$css = _ref2.css;
+  var css = _ref2$css === undefined ? '' : _ref2$css;
   var _ref2$threshold = _ref2.threshold;
   var threshold = _ref2$threshold === undefined ? 0 : _ref2$threshold;
   var _ref2$onScreenshotsUp = _ref2.onScreenshotsUpdated;
@@ -84,16 +88,21 @@ var Differ = function Differ(_ref2) {
 
   this.currentSnap = null;
   this.currentDiff = null;
-  this.html = renderHtml(component);
+  this.html = renderHtml(component, css);
 
   this.snap = function (_ref3) {
     var _ref3$path = _ref3.path;
     var path = _ref3$path === undefined ? './' : _ref3$path;
 
     var promise = new Promise(function (resolve, reject) {
       createScreenshot({
-        resolve: resolve, reject: reject, componentName: componentName, html: _this.html, path: path,
-        ref: _this
+        resolve: resolve,
+        reject: reject,
+        componentName: componentName,
+        html: _this.html,
+        path: path,
+        ref: _this,
+        viewportSize: viewportSize
       });
     });
 

diff --git a/react-cornea.js b/react-cornea.js
@@ -5,21 +5,21 @@ import imageDiff from 'image-diff';
 import fs from 'fs';
 import fileExists from 'file-exists';
 
-const renderHtml = (component) => {
+const renderHtml = (component, css) => {
   const wrapper = render(component);
   let html = wrapper.html();
-  html = '<html><body>' + html + '</body></html>'; 
+
+  let styles = '<style>' + css + '</style>'; 
+
+  html = '<html><head>' + styles + '</head><body>' + html + '</body></html>'; 
 
   return html;
 }
 
-const createScreenshot = ({ resolve, reject, componentName, html, ref, path }) => {
+const createScreenshot = ({ resolve, reject, componentName, html, ref, path, css, viewportSize }) => {
   phantom.create().then((ph) => {
     ph.createPage().then((page) => {
-      page.property('viewportSize', {
-        width: 1440,
-        height: 900
-      }).then(() => {
+      page.property('viewportSize', viewportSize).then(() => {
         page.property('content', html).then(() => {
           // TODO figure out a better way to do this
           setTimeout(() => {
@@ -36,20 +36,30 @@ const createScreenshot = ({ resolve, reject, componentName, html, ref, path }) =
   });
 };
 
-// TODO support multiple viewport sizes
-// TODO support stylesheet injection
 const Differ = function ({
-    componentName, component, savePath, threshold = 0, onScreenshotsUpdated = ()=>{}, updateSnapshots = false
+    componentName,
+    component,
+    savePath,
+    viewportSize = { width: 1440, height: 900 },
+    css = '',
+    threshold = 0,
+    onScreenshotsUpdated = () => {},
+    updateSnapshots = false
 }) {
   this.currentSnap = null;
   this.currentDiff = null;
-  this.html        = renderHtml(component);
+  this.html        = renderHtml(component, css);
 
   this.snap = ({ path = './' }) => {
     let promise = new Promise((resolve, reject) => {
       createScreenshot({
-        resolve, reject, componentName, html: this.html, path,
-        ref: this
+        resolve,
+        reject,
+        componentName,
+        html: this.html,
+        path,
+        ref: this,
+        viewportSize
       });
     });