Add test time execution

Author: VadimNastoyashchy

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - The test(s) is/are marked as pending and will not be executed. Helpful for planning and organizing future tests.
     - `describe.todo()`  Declares a test group as "to-do." 
     - `test.todo()`  Declares a test as "to-do." 
+- Added test time execution to the `HTML` report:
 - Based on [Review&Add additional `unit-tests`](https://github.com/scripterio-js/scripterio/issues/58)
   - Added unit tests for:
     -`config.mjs`

src/core/context.mjs

@@ -9,6 +9,7 @@ import {
 } from '../utils/transform.mjs'
 import { printNewLine, printSkippedMsg } from './output.mjs'
 import { getConfig } from '../config/config.mjs'
+import { timeStamp } from '../utils/support.mjs'
 
 const config = getConfig()
 const failures = []
@@ -163,6 +164,7 @@ const runTest = async (test) => {
   global.currentTest = test
   currentTest.describeStack = [...describeStack]
 
+  const startTimeStamp = timeStamp()
   if (test.todo) {
     result.numTodo++
     console.log(
@@ -195,6 +197,8 @@ const runTest = async (test) => {
     }
     attempts++
   }
+
+ const endTimeStamp = timeStamp()
   if (!passed) {
     result.numFailed++
     console.log(indent(applyColor(`<red>✗</red> ${currentTest.name}`)))
@@ -206,6 +210,7 @@ const runTest = async (test) => {
   }
   result.numTests++
   result.results.push(currentTest)
+  currentTest.duration = endTimeStamp - startTimeStamp
   global.currentTest = null
 }
 

src/reporters/html-template.mjs

@@ -341,34 +341,37 @@ export const template = ({
           return content
             .map(
               (test) => `
-        <div class="test-case" style="padding-left: ${padding}px">
-        <div class="test-name ${
-          test.todo ? 'todo' : test.errors.length ? 'failed' : 'passed'
-        }">
-          ${test.name}${test.todo ? ' (TODO)' : ''}
-        </div>
-        ${
-          test.errors.length
-            ? `
-          <a class="toggle-error" onclick="toggleError(this)">Show error details</a>
-          <div class="error-details">
-            ${test.errors
-              .map(
-                (error) => `
-              <div class="error">
-                <pre>${stripAnsi(error.message)}</pre>
-                <pre>${stripAnsi(error.stack)}</pre>
-              </div>
-            `
-              )
-              .join('')}
-                </div>
-              `
-            : ''
-        }
-              ${test.apiDetails ? renderApiDetails(test.apiDetails) : ''}
+      <div class="test-case" style="padding-left: ${padding}px">
+      <div class="test-name ${
+        test.todo ? 'todo' : test.errors.length ? 'failed' : 'passed'
+      }">
+        ${test.name}${test.todo ? ' (TODO)' : ''}
+        <span style="color:#888; font-size:0.95em; margin-left:0.5em;">${
+          typeof test.duration === 'number' ? `${test.duration} ms` : ''
+        }</span>
+      </div>
+      ${
+        test.errors.length
+          ? `
+        <a class="toggle-error" onclick="toggleError(this)">Show error details</a>
+        <div class="error-details">
+          ${test.errors
+            .map(
+              (error) => `
+            <div class="error">
+              <pre>${stripAnsi(error.message)}</pre>
+              <pre>${stripAnsi(error.stack)}</pre>
             </div>
           `
+            )
+            .join('')}
+              </div>
+            `
+          : ''
+      }
+            ${test.apiDetails ? renderApiDetails(test.apiDetails) : ''}
+          </div>
+        `
             )
             .join('')
         }