fix for #616 Implemented image comparison map popup in html report

galenframework · Mar 9, 2019 · 414b87a · 414b87a
1 parent c75d5ac
commit 414b87a
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 1 deletion.
diff --git a/galen-core/src/main/resources/html-report/galen-report.css b/galen-core/src/main/resources/html-report/galen-report.css
@@ -247,6 +247,11 @@ svg line.meta-line-guide {
 .layout-spec ul.error-messages li {
     margin-left: 10px;
 }
+.layout-spec ul.error-messages li .link {
+    color: #B33914;
+    font-weight: bold;
+    text-decoration: underline;
+}
 .layout-spec.has-failure > .title {
     font-weight: bold;
     color: #DB4B4B;
@@ -548,3 +553,8 @@ table.mutation-table tr.mutation-table-total td {
     white-space: pre;
     overflow-x: auto;
 }
+
+.image-comparison-popup .image-layout {
+    display: inline-block;
+    margin: 5px;
+}
diff --git a/galen-core/src/main/resources/html-report/galen-report.js b/galen-core/src/main/resources/html-report/galen-report.js
@@ -245,10 +245,45 @@ function toggleReportNode(node) {
     node.expanded = !node.expanded;
 }
 
+Vue.component('image-comparison-popup', {
+    props: ['imagedata'],
+    template: '#tpl-image-comparison-popup',
+    mounted() {
+        document.addEventListener('keydown', this.onKeyPress);
+    },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.onKeyPress);
+    },
+    data: function () {
+        var clientWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+        var clientHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        return {
+            position: {
+                top: 5,
+                left: 50,
+                width: clientWidth - 100,
+                height: clientHeight - 10
+            }
+        };
+    },
+    methods: {
+        onKeyPress: function (event) {
+            if (event.key === 'Escape') {
+                this.$emit('close');
+            }
+        }
+    }
+});
 
 Vue.component('screenshot-popup', {
     props: ['screenshot', 'highlight', 'guides', 'spec'],
     template: '#tpl-screenshot-popup',
+    mounted() {
+        document.addEventListener('keydown', this.onKeyPress);
+    },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this.onKeyPress);
+    },
     data: function () {
         var clientWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
         var clientHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
@@ -271,6 +306,13 @@ Vue.component('screenshot-popup', {
                 offsetTop: 30 - this.highlight.boundaryBox.min.y,
             }
         };
+    },
+    methods: {
+        onKeyPress: function (event) {
+            if (event.key === 'Escape') {
+                this.$emit('close');
+            }
+        }
     }
 });
 
@@ -360,7 +402,8 @@ Vue.component('layout-spec', {
     template: '#tpl-layout-spec',
     data: function () {
         return {
-            isFailed: this.spec.errors && this.spec.errors.length > 0
+            isFailed: this.spec.errors && this.spec.errors.length > 0,
+            imageComparisonShown: false
         };
     },
     methods: {

diff --git a/galen-core/src/main/resources/html-report/report-test.tpl.html b/galen-core/src/main/resources/html-report/report-test.tpl.html
@@ -218,11 +218,38 @@
                     v-bind:title="spec.place ? spec.place.filePath + ':' + spec.place.lineNumber : ''"
                     >{{spec.name}}</div>
                 <ul class="error-messages" v-if="isFailed">
+                    <li class="error-message" v-if="spec.imageComparison">
+                        <span class="link" v-on:click="imageComparisonShown = true">Show image comparison</span>
+                    </li>
                     <li class="error-message" v-for="error in spec.errors">{{error}}</li>
                 </ul>
                 <div v-if="spec.subLayout" class="sublayout">
                     <layout-section v-if="spec.subLayout.sections" v-for="section in spec.subLayout.sections" v-bind:section="section" v-bind:bus="bus" v-bind:layout="spec.subLayout"></layout-section>
                 </div>
+                <image-comparison-popup v-if="imageComparisonShown" v-on:close="imageComparisonShown = false" v-bind:imagedata="spec.imageComparison"/>
+            </div>
+        </template>
+
+
+        <template id="tpl-image-comparison-popup">
+            <div class="image-comparison-popup">
+                <div class="popup-shadow" v-on:click="$emit('close')"> </div>
+                <div class="popup-container" v-bind:style="{top: position.top + 'px', left: position.left + 'px', width: position.width + 'px', height: position.height + 'px'}">
+                    <div class="popup-body">
+                        <div class="image-layout">
+                            <h5>Actual Image</h5>
+                            <img v-bind:src="imagedata.actualImage"/>
+                        </div>
+                        <div class="image-layout">
+                            <h5>Expected Image</h5>
+                            <img v-bind:src="imagedata.expectedImage"/>
+                        </div>
+                        <div class="image-layout">
+                            <h5>Comparison Map</h5>
+                            <img v-bind:src="imagedata.comparisonMapImage"/>
+                        </div>
+                    </div>
+                </div>
             </div>
         </template>