displaying expected vs received values for unit testing test case

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>
       `)
     }