chore(karma): better output for many browsers

sunlin0oo · Mar 11, 2022 · 6914fb5 · 6914fb5
1 parent ea51f45
commit 6914fb5
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 43 deletions.
diff --git a/Utilities/Karma/reporting-template.html b/Utilities/Karma/reporting-template.html
@@ -23,6 +23,14 @@
       .indent {
           margin-left: 32px;
       }
+      .badge {
+          font-size: 0.9rem;
+          border-radius: 4px;
+          border: 1px solid #333;
+          background-color: rgba(255, 255, 255, 0.4);
+          padding: 4px;
+          color: black;
+      }
       .line {
           border: 1px solid grey;
           font-size: 1em;
@@ -42,11 +50,12 @@
       .test > .line {
           font-size: 1.1em;
       }
-      .test.pass > .line {
+      .green, .test.pass > .line {
           background: #98ff98;
       }
-      .test.fail > .line {
+      .red, .test.fail > .line {
           background: #ee0000;
+          color: white;
       }
       .spec.pass > .line {
           background: #98ff9888;
@@ -57,13 +66,6 @@
       .skip {
           background: #efefef;
       }
-      .badge {
-          font-size: 0.9rem;
-          border-radius: 4px;
-          border: 1px solid #333;
-          background-color: rgba(255, 255, 255, 0.4);
-          padding: 4px;
-      }
       .details {
           padding: 8px;
           background: #eee;
@@ -121,6 +123,14 @@
           : 'show all image tests';
       }
 
+      function toggleTests(browserID) {
+        const el = document.getElementById(browserID);
+        if (el) {
+          const addOrRemove = !Array.from(el.classList).includes('hidden');
+          toggleClasses(`#${browserID}`, ['hidden'], addOrRemove);
+        }
+      }
+
       window.onload = () => {
         toggleSuccess(true);
         toggleImages(false);
@@ -136,56 +146,68 @@ <h1>vtk.js Test Results</h1>
     {{#each browsers}}
     <div class="browser">
       <div class="line">
-        <div>{{name}}</div>
+        <div>
+          {{name}}
+          <span class="ml-8 badge {{#if summary.failed}}red{{else}}green{{/if}}">
+            {{#if summary.failed}}
+            Some tests failed
+            {{else}}
+            All passed
+            {{/if}}
+          </span>
+          <button onclick="toggleTests('id-{{id}}')">Hide/show browser tests</button>
+        </div>
         <ul>
           <li>Failed: {{summary.failed}}</li>
           <li>Passed: {{summary.passed}}</li>
           <li>Skipped: {{summary.skipped}}</li>
           <li>Total: {{summary.total}}</li>
         </ul>
       </div>
-      {{#each tests}}
-      <div class="test indent {{#if success}}pass{{else}}fail{{/if}}">
-        <div class="line">
-          {{name}}
-          {{#if success}}
-          <div class="ml-8 badge">passing</div>
-          {{else}}
-          <div class="ml-8 badge">failing</div>
-          {{/if}}
-        </div>
-        {{#each specs}}
-        <div class="spec indent {{#if skipped}}skip{{else if success}}pass{{else}}fail{{/if}}">
+      <div id="id-{{id}}" class="hidden">
+        {{#each tests}}
+        <div class="test indent {{#if success}}pass{{else}}fail{{/if}}">
           <div class="line">
-            <div>{{description}}</div>
-            {{#if skipped}}
-            <div class="ml-8 badge">skipped</div>
-            {{else if success}}
+            {{name}}
+            {{#if success}}
             <div class="ml-8 badge">passing</div>
             {{else}}
             <div class="ml-8 badge">failing</div>
             {{/if}}
           </div>
-          {{#with details}}
-          <div class="details operator-{{operator}}">
-          {{#if (equals operator "imagediff")}}
-            {{! Image diff structure: see testUtils.compareImage }}
-            <div>Mismatch count tolerance: {{expected}}%</div>
-            <div class="imagediff">
-              <figure><img src="{{actual.outputImage}}"><figcaption>Output</figcaption></figure>
-              <figure><img src="{{actual.expectedImage}}"><figcaption>Expected</figcaption></figure>
-              <figure><img src="{{actual.diffImage}}"><figcaption>Difference</figcaption></figure>
+          {{#each specs}}
+          <div class="spec indent {{#if skipped}}skip{{else if success}}pass{{else}}fail{{/if}}">
+            <div class="line">
+              <div>{{description}}</div>
+              {{#if skipped}}
+              <div class="ml-8 badge">skipped</div>
+              {{else if success}}
+              <div class="ml-8 badge">passing</div>
+              {{else}}
+              <div class="ml-8 badge">failing</div>
+              {{/if}}
+            </div>
+            {{#with details}}
+            <div class="details operator-{{operator}}">
+            {{#if (equals operator "imagediff")}}
+              {{! Image diff structure: see testUtils.compareImage }}
+              <div>Mismatch count tolerance: {{expected}}%</div>
+              <div class="imagediff">
+                <figure><img src="{{actual.outputImage}}"><figcaption>Output</figcaption></figure>
+                <figure><img src="{{actual.expectedImage}}"><figcaption>Expected</figcaption></figure>
+                <figure><img src="{{actual.diffImage}}"><figcaption>Difference</figcaption></figure>
+              </div>
+            {{else}}
+              <div>Output: <code>{{json actual}}</code></div>
+              <div>Expected: <code>{{json expected}}</code></div>
+            {{/if}}
             </div>
-          {{else}}
-            <div>Output: <code>{{details.actual}}</code></div>
-            <div>Expected: <code>{{details.expected}}</code></div>
-          {{/if}}
+            {{/with}}
           </div>
-          {{/with}}
+          {{/each}}
         </div>
         {{/each}}
       </div>
-      {{/each}}
     </div>
     {{/each}}
  </body>

diff --git a/Utilities/Karma/tape-html-reporter.js b/Utilities/Karma/tape-html-reporter.js
@@ -6,6 +6,10 @@ Handlebars.registerHelper('equals', function(a, b) {
   return a === b;
 });
 
+Handlebars.registerHelper('json', function(obj) {
+  return JSON.stringify(obj);
+});
+
 var TapeHTMLReporter = function(baseReporterDecorator, rootConfig, logger) {
   const log = logger.create('tape-html-reporter');
   const config = rootConfig.tapeHTMLReporter || {};

diff --git a/karma.conf.js b/karma.conf.js
@@ -2,8 +2,8 @@
 const path = require('path');
 
 const webpack = require('webpack');
-const testsRules = require('./Utilities/config/rules-tests');
 const ESLintPlugin = require('eslint-webpack-plugin');
+const testsRules = require('./Utilities/config/rules-tests');
 
 const sourcePath = path.join(__dirname, './Sources');
 
@@ -52,7 +52,7 @@ module.exports = function init(config) {
         },
       },
       plugins: [
-	new ESLintPlugin(),
+        new ESLintPlugin(),
         new webpack.DefinePlugin({
           __BASE_PATH__: "'/base'",
         }),