Create resemble diff mode for image diff plugin
Change-Id: I66a5c2758d4262b9658c3e26865208689ca562f6
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.html b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
new file mode 100644
index 0000000..6ec3b16
--- /dev/null
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.html
@@ -0,0 +1,33 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script src="../node_modules/resemblejs/resemble.js"></script>
+<dom-module id="gr-resemble-diff-mode">
+ <template>
+ <style>
+ :host {
+ display: block;
+ }
+ #imageDiff {
+ border: 1px solid var(--border-color, #ddd);
+ display: block;
+ margin: 0 auto;
+ }
+ </style>
+ <img id="imageDiff">
+ </template>
+ <script src="gr-resemble-diff-mode.js"></script>
+</dom-module>
\ No newline at end of file
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode.js b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
new file mode 100644
index 0000000..1c9076e
--- /dev/null
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode.js
@@ -0,0 +1,55 @@
+// Copyright (C) 2018 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+ 'use strict';
+
+ Polymer({
+ is: 'gr-resemble-diff-mode',
+
+ properties: {
+ baseImage: Object,
+ revisonImage: Object,
+ },
+
+ observers: [
+ '_handleImageDiff(baseImage, revisionImage)',
+ ],
+
+ _handleImageDiff(base, revision) {
+ if (base && revision) {
+ const baseEncoded = this.getDataUrl(base);
+ const revisionEncoded = this.getDataUrl(revision);
+ return this.compareImages(baseEncoded, revisionEncoded).then(src => {
+ this.$.imageDiff.setAttribute('src', src);
+ });
+ }
+ },
+
+ compareImages(baseEncoded, revisionEncoded) {
+ return new Promise((resolve, reject) =>
+ resemble(baseEncoded).compareTo(revisionEncoded).onComplete(data => {
+ if (data.error) {
+ reject();
+ } else {
+ resolve(data.getImageDataUrl());
+ }
+ })
+ );
+ },
+
+ getDataUrl(image) {
+ return 'data:' + image['type'] + ';base64,' + image['body'];
+ },
+ });
+})();
\ No newline at end of file
diff --git a/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
new file mode 100644
index 0000000..65460cc
--- /dev/null
+++ b/gr-resemble-diff-mode/gr-resemble-diff-mode_test.html
@@ -0,0 +1,83 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>resemble-diff-mode</title>
+
+<link rel="import" href="../node_modules/polymer/polymer.html">
+<link rel="import" href="../node_modules/@polymer/test-fixture/test-fixture.html">
+<link rel="import" href="../node_modules/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="./gr-resemble-diff-mode.html">
+
+<script>void(0);</script>
+
+<script src="../node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
+<script src="../node_modules/web-component-tester/browser.js"></script>
+<script src="../node_modules/@polymer/sinonjs/sinon.js"></script>
+
+<test-fixture id="basicFixture">
+ <template>
+ <gr-resemble-diff-mode>
+ </gr-resemble-diff-mode>
+ </template>
+</test-fixture>
+
+<script>
+ suite('gr-resemble-diff-mode tests', () => {
+ let element;
+
+ setup(() => {
+ element = fixture('basicFixture');
+ });
+
+ test('test initialization', () => {
+ assert.notEqual(element, null);
+ assert.equal(element.baseImage, null);
+ assert.equal(element.revisionImage, null);
+ });
+
+ test('test getDataUrl', () => {
+ element.baseImage = {
+ type: 'image/png',
+ body: 'SGVsbG8=',
+ };
+ const desiredOutput = 'data:image/png;base64,SGVsbG8=';
+ assert.equal(element.getDataUrl(element.baseImage), desiredOutput);
+ });
+
+ test('test resemble mode image diff', () => {
+ const img = element.$.imageDiff;
+ const expected_result = 'data:image/png;base64,SGVsbG8V29ybGQ==';
+ assert.isFalse(img.hasAttribute('src'));
+ element.baseImage = {
+ type: 'image/png',
+ body: 'SGVsbG8=',
+ };
+ assert.isFalse(img.hasAttribute('src'));
+ element.revisionImage = {
+ type: 'image/png',
+ body: 'V29ybGQ=',
+ };
+ flushAsynchronousOperations();
+ sinon.stub(element, 'compareImages')
+ .returns(Promise.resolve(expected_result));
+ return element._handleImageDiff(element.baseImage, element.revisionImage)
+ .then(() => {
+ assert.equal(img.src, expected_result);
+ });
+ });
+ });
+</script>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 7a02c3f..181c106 100644
--- a/test/index.html
+++ b/test/index.html
@@ -19,13 +19,14 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Test Runner</title>
<meta charset="utf-8">
-<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
-<script src="../bower_components/web-component-tester/browser.js"></script>
+<script src="../node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
+<script src="../node_modules/web-component-tester/browser.js"></script>
+
<script>
const suites = [
- // Insert test suites here.
+ '../gr-resemble-diff-mode/gr-resemble-diff-mode_test.html',
];
WCT.loadSuites(suites);
- WCT.loadSuites(suites.forEach(suite => `${suite}?dom=shadow`));
+ WCT.loadSuites(suites.map(suite => `${suite}?dom=shadow`));
</script>
\ No newline at end of file
