From b9ee06661005721d2a69294fbdd9b960399bac63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Sun, 3 Jan 2016 00:29:28 +0100
Subject: [PATCH] Various fixes in the resemble.js QUnit extension.

---
 test/js/helpers.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/test/js/helpers.js b/test/js/helpers.js
index e4cc2872..5d079f91 100644
--- a/test/js/helpers.js
+++ b/test/js/helpers.js
@@ -57,11 +57,6 @@ function compareProperties(actual, expected, properties, message, options) {
 
 function compareItem(actual, expected, message, options, properties) {
 
-    function getImageTag(raster) {
-        return '<img width="' + raster.with + '" height="' + raster.height
-                + '" src="'+ raster.source + '">'
-    }
-
     function rasterize(item, group, resolution) {
         var raster = null;
         if (group) {
@@ -72,6 +67,11 @@ function compareItem(actual, expected, message, options, properties) {
         return raster;
     }
 
+    function getImageTag(raster) {
+        return '<img width="' + raster.width + '" height="' + raster.height
+                + '" src="' + raster.source + '">'
+    }
+
     if (options && options.rasterize) {
         // In order to properly compare pixel by pixel, we need to put each item
         // into a group with a white background of the united dimensions of the
@@ -95,29 +95,29 @@ function compareItem(actual, expected, message, options, properties) {
         } else {
             // Use resemble.js to compare the two rasterized items.
             var id = QUnit.config.current.testId,
+                index = QUnit.config.current.assertions.length + 1,
                 result;
             resemble(actual.getImageData())
                 .compareTo(expected.getImageData())
                 // When working with imageData, this call is synchronous:
                 .onComplete(function(data) { result = data; });
             var identical = result ? 100 - result.misMatchPercentage : 0,
-                ok = identical == 100;
-            QUnit.push(ok, identical.toFixed(2) + '% identical',
-                    '100.00% identical', message);
+                ok = identical == 100,
+                text = identical.toFixed(2) + '% identical'
+            QUnit.push(ok, text, '100.00% identical', message);
             if (!ok && result) {
-                var output = document.getElementById('qunit-test-output-' + id),
+                // Get the right entry for this unit test and assertion, and
+                // replace the results with images
+                var entry = document.getElementById('qunit-test-output-' + id)
+                        .querySelector('li:nth-child(' + (index) + ')'),
                     bounds = result.diffBounds;
-                output.querySelector('.test-expected td').innerHTML =
+                entry.querySelector('.test-expected td').innerHTML =
                         getImageTag(expected);
-                var el = output.querySelector('.test-actual td');
-                el.innerHTML = getImageTag(actual) + '<br>' +
-                        el.innerHTML.replace(/<\/?pre>|"/g, '');
-                output.querySelector('.test-diff td').innerHTML =
-                        getImageTag({
-                            source: result.getImageDataUrl(),
-                            width: bounds.right - bounds.left,
-                            height: bounds.bottom - bounds.top
-                        });
+                entry.querySelector('.test-actual td').innerHTML =
+                        getImageTag(actual);
+                entry.querySelector('.test-diff td').innerHTML = '<pre>' + text
+                        + '</pre><br>'
+                        + '<img src="' + result.getImageDataUrl() + '">';
             }
         }
     } else {