Handle resemble output setting applying to every image
resemble.outputSettings() applied the settings on a global scale causing
it to affect every diff image on the current page. This fix is directed
to resolve that issue by implementing the output settings right before
the diffProcess is created thus applying the settings to its respective
diff image with its own controls.
Change-Id: I69def795b44158a1771df0582c4711ad1bae7af7
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.js b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
index 4a54955..a9e1f00 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode.js
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
@@ -14,6 +14,11 @@
(function() {
'use strict';
+ const DEFAULT_SETTING = {
+ errorType: 'movement',
+ largeImageThreshold: 1200,
+ };
+
Polymer({
is: 'gr-resemble-diff-mode',
@@ -49,11 +54,7 @@
],
attached() {
- window.resemble.outputSettings({
- errorType: 'movement',
- largeImageThreshold: 0,
- transparency: 1,
- });
+ window.resemble.outputSettings(DEFAULT_SETTING);
},
_handleImageDiff() {
@@ -79,10 +80,23 @@
},
_createDiffProcess(base, rev, ignoreColors) {
+ window.resemble.outputSettings(this._setOutputSetting());
const process = window.resemble(base).compareTo(rev);
return this._maybeIgnoreColors(process, ignoreColors);
},
+ _setOutputSetting() {
+ const rgb = this._hexToRGB(this._colorValue);
+ return {
+ transparency: this._transparent ? 0.1 : 1,
+ errorColor: {
+ red: rgb.r,
+ green: rgb.g,
+ blue: rgb.b,
+ },
+ };
+ },
+
/**
* Reloads the diff. Resemble 1.2.1 seems to have an issue with successive
* reloads via the repaint() function, so this implementation creates a
@@ -121,9 +135,6 @@
_handleTransparentToggle() {
this.debounce('transparent-toggle', () => {
this._transparent = !this._transparent;
- window.resemble.outputSettings({
- transparency: this._transparent ? 0.3 : 1,
- });
this.reload();
}, 1);
},
@@ -133,14 +144,6 @@
// the color to show up immediately on the image diff.
_handleColorChange() {
this.debounce('color-change', () => {
- const rgb = this._hexToRGB(this._colorValue);
- window.resemble.outputSettings({
- errorColor: {
- red: rgb.r,
- green: rgb.g,
- blue: rgb.b,
- },
- });
this.reload();
}, 5);
},
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
index 6c19660..280693d 100644
--- a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -79,6 +79,25 @@
assert.isTrue(dummyProcess.ignoreColors.called);
});
+ test('_setOutputSetting', () => {
+ sandbox.stub(window.resemble, 'outputSettings');
+ element._transparent = true;
+ element._colorValue = '#00ffff';
+ const expectedResult = {
+ transparency: 0.1,
+ errorColor: {
+ red: 0,
+ green: 255,
+ blue: 255,
+ },
+ };
+ element._createDiffProcess();
+ flushAsynchronousOperations();
+
+ assert.isTrue(window.resemble.outputSettings.called);
+ sinon.assert.calledWith(window.resemble.outputSettings, expectedResult);
+ });
+
test('_handleIgnoreColorsToggle', () => {
sandbox.stub(element, 'reload');
element._ignoreColors = false;
@@ -105,13 +124,10 @@
test('_handleColorChange', () => {
sandbox.stub(element, 'reload');
- sandbox.stub(element, '_hexToRGB')
- .returns({r: 0, g: 0, b: 0});
element._colorValue = '';
element.flushDebouncer('color-change');
flushAsynchronousOperations();
- assert.isTrue(element._hexToRGB.called);
assert.isTrue(element.reload.called);
});
