From 371a79c2f1f9bd7dbeb34700802d4292d4599b0b Mon Sep 17 00:00:00 2001 From: Ivan Montiel Date: Wed, 24 Feb 2016 16:06:03 -0700 Subject: [PATCH 1/3] Support injected CSS, close #1 --- react-cornea.compiled.js | 18 ++++++++++++++---- react-cornea.js | 25 +++++++++++++++++++------ 2 files changed, 33 insertions(+), 10 deletions(-) diff --git a/react-cornea.compiled.js b/react-cornea.compiled.js index dda86f9..4f15e13 100644 --- 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 + ''; + + var styles = ''; + + html = '' + styles + '' + html + ''; return html; }; @@ -44,6 +47,7 @@ var createScreenshot = function createScreenshot(_ref) { var html = _ref.html; var ref = _ref.ref; var path = _ref.path; + var css = _ref.css; _phantom2.default.create().then(function (ph) { ph.createPage().then(function (page) { @@ -75,6 +79,8 @@ var Differ = function Differ(_ref2) { var componentName = _ref2.componentName; var component = _ref2.component; var savePath = _ref2.savePath; + 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,7 +90,7 @@ 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; @@ -92,7 +98,11 @@ var Differ = function Differ(_ref2) { var promise = new Promise(function (resolve, reject) { createScreenshot({ - resolve: resolve, reject: reject, componentName: componentName, html: _this.html, path: path, + resolve: resolve, + reject: reject, + componentName: componentName, + html: _this.html, + path: path, ref: _this }); }); diff --git a/react-cornea.js b/react-cornea.js index ff7020c..f5e7ea9 100644 --- a/react-cornea.js +++ b/react-cornea.js @@ -5,15 +5,18 @@ 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 + ''; + + let styles = ''; + + html = '' + styles + '' + html + ''; return html; } -const createScreenshot = ({ resolve, reject, componentName, html, ref, path }) => { +const createScreenshot = ({ resolve, reject, componentName, html, ref, path, css }) => { phantom.create().then((ph) => { ph.createPage().then((page) => { page.property('viewportSize', { @@ -39,16 +42,26 @@ 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, + 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, + resolve, + reject, + componentName, + html: this.html, + path, ref: this }); }); From 34ac714b402f3367ab0b4b9eee4d902497b256df Mon Sep 17 00:00:00 2001 From: Ivan Montiel Date: Wed, 24 Feb 2016 16:13:24 -0700 Subject: [PATCH 2/3] Add viewport support, close #3 --- README.md | 6 +++++- react-cornea.compiled.js | 13 ++++++------- react-cornea.js | 13 +++++-------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 3de7101..429dc44 100644 --- 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/react-cornea.compiled.js b/react-cornea.compiled.js index 4f15e13..771993b 100644 --- a/react-cornea.compiled.js +++ b/react-cornea.compiled.js @@ -48,13 +48,11 @@ var createScreenshot = function createScreenshot(_ref) { 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 () { @@ -71,14 +69,14 @@ 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; @@ -103,7 +101,8 @@ var Differ = function Differ(_ref2) { componentName: componentName, html: _this.html, path: path, - ref: _this + ref: _this, + viewportSize: viewportSize }); }); diff --git a/react-cornea.js b/react-cornea.js index f5e7ea9..8b49504 100644 --- a/react-cornea.js +++ b/react-cornea.js @@ -16,13 +16,10 @@ const renderHtml = (component, css) => { return html; } -const createScreenshot = ({ resolve, reject, componentName, html, ref, path, css }) => { +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(() => { @@ -39,12 +36,11 @@ const createScreenshot = ({ resolve, reject, componentName, html, ref, path, css }); }; -// TODO support multiple viewport sizes -// TODO support stylesheet injection const Differ = function ({ componentName, component, savePath, + viewportSize = { width: 1440, height: 900 }, css = '', threshold = 0, onScreenshotsUpdated = () => {}, @@ -62,7 +58,8 @@ const Differ = function ({ componentName, html: this.html, path, - ref: this + ref: this, + viewportSize }); }); From 16539adf30b29ac140acd22386b630c9c1094796 Mon Sep 17 00:00:00 2001 From: Ivan Montiel Date: Wed, 24 Feb 2016 16:16:02 -0700 Subject: [PATCH 3/3] Upversion --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c94f421..73b7923 100644 --- 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": {