Create functionality to switch between resemble mode and opacity mode
Change-Id: I9780f98a7186ed93674e3c5b608e4bb23031a1ac
diff --git a/gr-image-diff-tool/gr-image-diff-tool.html b/gr-image-diff-tool/gr-image-diff-tool.html
index eb49f60..68e7f07 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.html
+++ b/gr-image-diff-tool/gr-image-diff-tool.html
@@ -14,10 +14,33 @@
limitations under the License.
-->
+<link rel="import" href="../gr-opacity-diff-mode/gr-opacity-diff-mode.html">
+<link rel="import" href="../gr-resemble-diff-mode/gr-resemble-diff-mode.html">
+
<dom-module id="gr-image-diff-tool">
<template>
<style>
+ :host {
+ display: block;
+ }
</style>
+
+ <template is="dom-if" if="[[_showResembleMode]]" restamp="true">
+ <gr-resemble-diff-mode
+ base-image="[[baseImage]]"
+ revision-image="[[revisionImage]]"></gr-resemble-diff-mode>
+ </template>
+
+ <template is="dom-if" if="[[_showOpacityMode]]" restamp="true">
+ <gr-opacity-diff-mode
+ base-image="[[baseImage]]"
+ revision-image="[[revisionImage]]"></gr-opacity-diff-mode>
+ </template>
+
+ <select id="dropdown" on-change="handleSelect">
+ <option value="resemble">Resemble Mode</option>
+ <option value="opacity">Opacity Mode</option>
+ </select>
</template>
<script src="gr-image-diff-tool.js"></script>
</dom-module>
\ No newline at end of file
diff --git a/gr-image-diff-tool/gr-image-diff-tool.js b/gr-image-diff-tool/gr-image-diff-tool.js
index 19769a7..20a0ac9 100644
--- a/gr-image-diff-tool/gr-image-diff-tool.js
+++ b/gr-image-diff-tool/gr-image-diff-tool.js
@@ -16,8 +16,27 @@
Polymer({
is: 'gr-image-diff-tool',
+
properties: {
- hi: String,
+ _showResembleMode: {
+ type: Boolean,
+ value: true,
+ },
+ _showOpacityMode: {
+ type: Boolean,
+ value: false,
+ },
+ },
+
+ handleSelect() {
+ const mode = this.$.dropdown.value;
+ if (mode === 'resemble') {
+ this._showResembleMode = true;
+ this._showOpacityMode = false;
+ } else if (mode === 'opacity') {
+ this._showOpacityMode = true;
+ this._showResembleMode = false;
+ }
},
});
})();
\ No newline at end of file
diff --git a/gr-image-diff-tool/gr-image-diff-tool_test.html b/gr-image-diff-tool/gr-image-diff-tool_test.html
new file mode 100644
index 0000000..0fe8a3e
--- /dev/null
+++ b/gr-image-diff-tool/gr-image-diff-tool_test.html
@@ -0,0 +1,68 @@
+<!--
+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>image-diff-tool</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-image-diff-tool.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-image-diff-tool>
+ </gr-image-diff-tool>
+ </template>
+</test-fixture>
+
+<script>
+ suite('gr-image-diff-tool tests', () => {
+ let element;
+
+ setup(() => {
+ element = fixture('basicFixture');
+ });
+
+ test('test opacity mode', () => {
+ element.$.dropdown.value = 'opacity';
+ element.handleSelect();
+ assert.isTrue(element._showOpacityMode);
+ assert.isFalse(element._showResembleMode);
+ flushAsynchronousOperations();
+
+ assert.ok(element.$$('gr-opacity-diff-mode'));
+ assert.equal(element.$$('gr-resemble-diff-mode'), null);
+ });
+
+ test('test resemble mode', () => {
+ element.$.dropdown.value = 'resemble';
+ element.handleSelect();
+ assert.isTrue(element._showResembleMode);
+ assert.isFalse(element._showOpacityMode);
+ flushAsynchronousOperations();
+
+ assert.ok(element.$$('gr-resemble-diff-mode'));
+ assert.equal(element.$$('gr-opacity-diff-mode'), null);
+ });
+ });
+</script>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 181c106..6b86c35 100644
--- a/test/index.html
+++ b/test/index.html
@@ -24,6 +24,7 @@
<script>
const suites = [
+ '../gr-image-diff-tool/gr-image-diff-tool_test.html',
'../gr-resemble-diff-mode/gr-resemble-diff-mode_test.html',
];
