From 089b9a76df9d1faded6e52e683ed6bba09f24e59 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Thu, 3 Sep 2020 09:55:45 +0200
Subject: [PATCH] displaying expected vs received values for unit testing test
 case

---
 apps/remix-ide/src/app/tabs/test-tab.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/remix-ide/src/app/tabs/test-tab.js b/apps/remix-ide/src/app/tabs/test-tab.js
index a57e9af24b..4c84777fab 100644
--- a/apps/remix-ide/src/app/tabs/test-tab.js
+++ b/apps/remix-ide/src/app/tabs/test-tab.js
@@ -144,24 +144,28 @@ module.exports = class TestTab extends ViewPlugin {
       this.testsOutput.appendChild(this.outputHeader)
     } else if (result.type === 'testPass') {
       this.testsOutput.appendChild(yo`
-        <div id="${this.runningTestFileName}" data-id="testTabSolidityUnitTestsOutputheader" class="${css.testPass} ${css.testLog} text-success border-0">
+        <div id="${this.runningTestFileName}" data-id="testTabSolidityUnitTestsOutputheader" class="bg-light mb-2 ${css.testPass} ${css.testLog} text-success border-0">
           ✓ ${result.value}
         </div>
       `)
     } else if (result.type === 'testFailure') {
+      const preposition = result.assertMethod === 'equal' || result.assertMethod === 'notEqual' ? 'to' : ''
+      const method = result.assertMethod === 'ok' ? '' : result.assertMethod
+      const expected = result.assertMethod === 'ok' ? `'true'` : result.expected
       this.testsOutput.appendChild(yo`
-        <div class="${css.testFailure} ${css.testLog} d-flex flex-column text-danger border-0" id="UTContext${result.context}">
+        <div class="bg-light mb-2 ${css.testFailure} ${css.testLog} d-flex flex-column text-danger border-0" id="UTContext${result.context}">
           <span> ✘ ${result.value}</span>
           <span class="text-dark">Error Message:</span>
           <span class="pb-2">"${result.errMsg}"</span>
           <span class="text-dark">Asserttion:</span>
           <div class="d-flex flex-wrap">
-            <span>The value should be </div>
-            <div class="px-1 font-weight-bold">'${result.assertMethod}'</div>
-            <div>(to): ${result.expected}</div>
+            <span>Expected value should be</span>
+            <div class="mx-1 font-weight-bold">${method}</div>
+            <div>${preposition} ${expected}</div>
           </div>
-            <span class="text-dark">The result is:</span>
-            <span>${result.returned}</span>
+          <span class="text-dark">Received value:</span>
+          <span>${result.returned}</span>
+          <span class="text-dark text-sm pb-2">Skipping the rest...</span>
         </div>
       `)
     }