@testomatio/reporter 1.1.0-beta-2 → 1.1.0-beta-codecept-logger

package/lib/pipe/html.js

@@ -0,0 +1,316 @@
+const debug = require('debug')('@testomatio/reporter:pipe:html');
+const merge = require('lodash.merge');
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const handlebars = require('handlebars');
+const fileUrl = require('file-url');
+
+const { fileSystem, isSameTest, ansiRegExp } = require('../utils/utils');
+const { HTML_REPORT } = require('../constants');
+
+class HtmlPipe {
+    constructor(params, store = {}) {
+        this.store = store || {};
+        this.title = params.title || process.env.TESTOMATIO_TITLE;
+        this.apiKey = params.apiKey || process.env.TESTOMATIO;
+        this.isHtml = process.env.TESTOMATIO_HTML_REPORT_SAVE;
+
+        debug('HTML Pipe: ', this.apiKey ? 'API KEY' : '*no api key provided*');
+
+        this.isEnabled = false;
+        this.htmlOutputPath = "";
+        this.fullHtmlOutputPath = "";
+        this.filenameMsg = "";
+        this.tests = [];
+
+        if (this.isHtml) {
+            this.isEnabled = true;
+            this.htmlReportDir = process.env.TESTOMATIO_HTML_REPORT_FOLDER || HTML_REPORT.FOLDER;
+
+            if (process.env.TESTOMATIO_HTML_FILENAME && process.env.TESTOMATIO_HTML_FILENAME.endsWith(".html")) {
+                this.htmlReportName = process.env.TESTOMATIO_HTML_FILENAME
+            }
+
+            if (process.env.TESTOMATIO_HTML_FILENAME && !process.env.TESTOMATIO_HTML_FILENAME.endsWith(".html")) {
+                this.htmlReportName = HTML_REPORT.REPORT_DEFAULT_NAME;
+                this.filenameMsg = "HTML filename must include the extension \".html\"." +
+                    ` The default report name "${this.htmlReportDir}/${HTML_REPORT.REPORT_DEFAULT_NAME}" is used!`;
+            }
+
+            if (!process.env.TESTOMATIO_HTML_FILENAME) {
+                this.htmlReportName = HTML_REPORT.REPORT_DEFAULT_NAME;
+            }
+
+            this.templateFolderPath = path.resolve(__dirname, '..', 'template');
+            this.templateHtmlPath = path.resolve(this.templateFolderPath, HTML_REPORT.TEMPLATE_NAME);
+            this.htmlOutputPath = path.join(this.htmlReportDir, this.htmlReportName);
+            // create a new folder for the HTML reports
+            fileSystem.createDir(this.htmlReportDir);
+
+            debug(
+                chalk.yellow('HTML Pipe:'),
+                `Save HTML report: ${this.isEnabled}`,
+                `HTML report folder: ${this.htmlReportDir}, report name: ${this.htmlReportName}`
+            );
+        }
+    }
+
+    async createRun() {
+        // empty
+    }
+
+    updateRun() {
+        // empty
+    }
+
+    /**
+     * Add test data to the result array for saving. As a result of this function, we get a result object to save.
+     * @param {Object} test - object which includes each test entry.
+     */
+    addTest(test) {
+        if (!this.isEnabled) return;
+
+        if (!test.steps || !test.status) return;
+
+        const index = this.tests.findIndex(t => isSameTest(t, test));
+        // update if they were already added
+        if (index >= 0) {
+            this.tests[index] = merge(this.tests[index], test);
+            return;
+        }
+
+        this.tests.push(test);
+    }
+
+    async finishRun(runParams) {
+        if (!this.isEnabled) return;
+
+        if (this.isHtml) {
+            // GENERATE HTML reports based on the results data
+            this.buildReport({
+                runParams,
+                tests: this.tests, 
+                outputPath: this.htmlOutputPath, 
+                templatePath: this.templateHtmlPath, 
+                warningMsg: this.filenameMsg
+            });
+        }
+    }
+    /**
+     * Generates an HTML report based on provided test data and a template.
+     * @param {object} opts - Test options used to generate the HTML report: 
+     * runParams, tests, outputPath, templatePath
+     * @returns {void} - This function does not return anything.
+     */
+
+    buildReport(opts) {
+        const { runParams, tests, outputPath, templatePath, warningMsg: msg } = opts;
+        
+        debug('HTML tests data:', tests);
+
+        if (!outputPath) {
+            console.log(chalk.yellow(`🚨 HTML export path is not set, ignoring...`));
+            return;
+        }
+
+        console.log(chalk.yellow(`⏳ The test results will be added to the HTML report. It will take some time...`));
+
+        if (msg) {
+            console.log(chalk.blue(msg));
+        }
+
+        tests.forEach(test => {
+
+            if (!test.message || test.message.trim() === "") {
+                test.message = "This test has no 'message' code";
+            }
+
+            if (!test.suite_title || test.suite_title.trim() === "") {
+                test.suite_title = "Unknown suite";
+            }
+
+            if (!test.title || test.title.trim() === "") {
+                test.title = "Unknown test title";
+            }
+
+            if (!test.files || test.files.length === 0) {
+                test.files = "This test has no files";
+            }
+
+            if (test.steps) {
+                if (!test.steps || test.steps.trim() === "") {
+                    test.steps = "This test has no 'steps' code";
+                }
+                else {
+                    test.steps = removeAnsiColorCodes(test.steps);
+                }
+            }
+            
+            // TODO: u can added an additional test values to this checks in the future
+        });
+
+        const data = {
+            runId: this.store.runId || "",
+            status: runParams.status || "No status info",
+            parallel: runParams.isParallel || "No parallel info",
+            runUrl: this.store.runUrl || "",
+            executionTime: testExecutionSumTime(tests),
+            executionDate: getCurrentDateTimeFormatted(),
+            tests
+        };
+        // generate output HTML based on the template
+        const html = this.#generateHTMLReport(data, templatePath);
+
+        if (!html) return;
+
+        fs.writeFileSync(outputPath, html, 'utf-8');
+        // Check if the file exists
+        if (fs.existsSync(outputPath)) {
+            // Get the absolute path of the file
+            const absolutePath = path.resolve(outputPath);
+            // Convert the file path to a file URL
+            const fileUrlPath = fileUrl(absolutePath, {resolve: true});
+
+            debug('HTML tests data:', fileUrlPath);
+
+            console.log(chalk.green(`📊 The HTML report was successfully generated. Full filepath: ${fileUrlPath}`));
+        } else {
+            console.log(chalk.red(`🚨 Failed to generate the HTML report.`));
+        }
+    }
+
+    /**
+     * Generates an HTML report based on provided test data and a template path.
+     * @param {any} data - Test data used to generate the HTML report.
+     * @param {string} [templatePath=""] - The path to the HTML template used for generating the report.
+     * @returns {string | void} - The generated HTML report as a string or void if templatePath is not provided.
+     */
+    #generateHTMLReport(data, templatePath = "") {
+        if (!templatePath) {
+            console.log(chalk.red(`🚨 HTML template not found. Report generation is impossible!`))
+            return;
+        }
+
+        const templateSource = fs.readFileSync(templatePath, 'utf8');
+        this.#loadReportHelpers();
+        try {
+            const template = handlebars.compile(templateSource);
+
+            return template(data);
+        }
+        catch (e) {
+            console.log('Unknown HTML report generation error: ', e);
+        }
+    }
+
+    #loadReportHelpers() {
+        handlebars.registerHelper('getTestsByStatus', (tests, status) => 
+            tests.filter(test => test.status.toLowerCase() === status.toLowerCase()).length
+        );
+
+        handlebars.registerHelper('json', (tests) => {
+            function replaceScriptTagsInArray(array) {
+                return array.map(obj => {
+                    const keysToCheck = ["steps", "stack", "title", "suite_title", "message", "code"];
+                    const newObj = {};
+            
+                    for (const key in obj) {
+                        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                            if (key === "example") {
+                                newObj[key] = {};
+                                for (const subKey in obj[key]) {
+                                    if (Object.prototype.hasOwnProperty.call(obj[key], subKey)) {
+                                        newObj[key][subKey] = typeof obj[key][subKey] === "string"
+                                            ? obj[key][subKey]
+                                                .replace(/<script>/g, "<$cript>")
+                                                .replace(/<\/script>/g, "</$cript>")
+                                            : obj[key][subKey];
+                                    }
+                                }
+                            } else if (keysToCheck.includes(key)) {
+                                newObj[key] = typeof obj[key] === "string"
+                                    ? obj[key].replace(/<script>/g, "<$cript>").replace(/<\/script>/g, "</$cript>")
+                                    : obj[key];
+                            } else {
+                                newObj[key] = obj[key];
+                            }
+                        }
+                    }
+            
+                    return newObj;
+                });
+            }
+
+            // Remove ANSI escape codes
+            return JSON.stringify(replaceScriptTagsInArray(tests));
+        });
+    }
+
+    toString() {
+        return 'HTML Reporter';
+    }
+}
+
+/**
+ * Calculates the total execution time for an array of tests.
+ * @param {Object[]} tests - An array of test objects.
+ * @param {number} tests[].run_time - The execution time of each test in milliseconds.
+ * @returns {string} - The total execution time in a formatted duration string.
+ */
+function testExecutionSumTime(tests) {
+    const totalMilliseconds = tests.reduce((sum, test) => {
+        if (typeof test.run_time === 'number') {
+            return sum + test.run_time;
+        }
+        return sum;
+    }, 0);
+
+    return formatDuration(totalMilliseconds);
+}
+
+/**
+ * Removes ANSI color codes and converts newline characters to HTML line breaks in a given string.
+ * @param {string} str - The input string containing ANSI color codes.
+ * @returns {string} - The updated string with removed ANSI color codes and replaced newline characters.
+ */
+function removeAnsiColorCodes(str) {
+    let updatedStr = str.replace(ansiRegExp(), "");        
+    updatedStr = updatedStr.replace(/\n/g, '<br>');
+
+    return updatedStr;
+}
+
+/**
+ * Formats duration in milliseconds into a human-readable string representation.
+ * @param {number} duration - The duration in milliseconds.
+ * @returns {string} - The formatted duration string (e.g., "2h 30m 15s 500ms").
+ */
+function formatDuration(duration) {
+    const milliseconds = duration % 1000;
+    duration = (duration - milliseconds) / 1000;
+    const seconds = duration % 60;
+    duration = (duration - seconds) / 60;
+    const minutes = duration % 60;
+    const hours = (duration - minutes) / 60;
+
+    return `${hours}h ${minutes}m ${seconds}s ${milliseconds}ms`;
+}
+
+/**
+ * Retrieves the current date and time in a formatted string.
+ * @returns {string} - The formatted date and time string (e.g., "(01/01/2023 12:00:00)").
+ */
+function getCurrentDateTimeFormatted() {
+    const currentDate = new Date();
+    const day = currentDate.getDate().toString().padStart(2, '0');
+    const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+    const year = currentDate.getFullYear();
+    const hours = currentDate.getHours().toString().padStart(2, '0');
+    const minutes = currentDate.getMinutes().toString().padStart(2, '0');
+    const seconds = currentDate.getSeconds().toString().padStart(2, '0');
+
+    return `(${day}/${month}/${year} ${hours}:${minutes}:${seconds})`;
+}
+
+module.exports = HtmlPipe;

package/lib/pipe/index.js

@@ -6,6 +6,7 @@ const TestomatioPipe = require('./testomatio');
 const GitHubPipe = require('./github');
 const GitLabPipe = require('./gitlab');
 const CsvPipe = require('./csv');
+const HtmlPipe = require('./html');
 
 function PipeFactory(params, opts) {
   const extraPipes = [];
@@ -43,6 +44,7 @@ function PipeFactory(params, opts) {
     new GitHubPipe(params, opts),
     new GitLabPipe(params, opts),
     new CsvPipe(params, opts),
+    new HtmlPipe(params, opts),
     ...extraPipes,
   ];
 

package/lib/pipe/testomatio.js

@@ -5,10 +5,10 @@ const JsonCycle = require('json-cycle');
 const { APP_PREFIX, STATUS } = require('../constants');
 const { isValidUrl, foundedTestLog } = require('../utils/utils');
 const { parseFilterParams, generateFilterRequestParams, setS3Credentials, } = require('../utils/pipe_utils');
+const { TESTOMATIO } = require('../config');
 
-const { TESTOMATIO_RUN } = process.env;
-if (TESTOMATIO_RUN) {
-  process.env.runId = TESTOMATIO_RUN;
+if (process.env.TESTOMATIO_RUN) {
+  process.env.runId = process.env.TESTOMATIO_RUN;
 }
 
 /**
@@ -21,7 +21,7 @@ class TestomatioPipe {
   constructor(params, store) {
     this.isEnabled = false;
     this.url = params.testomatioUrl || process.env.TESTOMATIO_URL || 'https://app.testomat.io';
-    this.apiKey = params.apiKey || process.env.TESTOMATIO;
+    this.apiKey = params.apiKey || TESTOMATIO;
     debug('Testomatio Pipe: ', this.apiKey ? 'API KEY' : '*no api key*');
     if (!this.apiKey) {
       return;
@@ -33,6 +33,7 @@ class TestomatioPipe {
     this.sharedRun = !!process.env.TESTOMATIO_SHARED_RUN;
     this.groupTitle = params.groupTitle || process.env.TESTOMATIO_RUNGROUP_TITLE;
     this.env = process.env.TESTOMATIO_ENV;
+    this.label = process.env.TESTOMATIO_LABEL;
 
     this.axios = axios.create({
       baseURL: `${this.url.trim()}`,
@@ -131,6 +132,7 @@ class TestomatioPipe {
         jira_id: this.jiraId,
         env: this.env,
         title: this.title,
+        label: this.label,
         shared_run: this.sharedRun,
       }).filter(([, value]) => !!value),
     );

package/lib/storages/key-value-storage.js

@@ -28,7 +28,7 @@ class KeyValueStorage {
   /**
    * Returns key-values pairs for the test as object
    * @param {*} context testId or test context from test runner
-   * @returns {Object} key-values pairs as object
+   * @returns {Object} key-values pairs as object, e.g. {priority: 'high', browser: 'chrome'}
    */
   get(context) {
     if (!context) return null;

package/lib/storages/logger.js

@@ -187,12 +187,12 @@ class Logger {
     /* prevent multiple console interceptions (cause of infinite loop)
     actual only for "console", because its used as default output and is intercepted by default */
     const isUserLoggerConsole = userLogger.toString?.().toLowerCase() === '[object console]';
-    if (isUserLoggerConsole && process.env.TESTOMATIO_LOGGER_CONSOLE_INTERCEPTED) {
+    if (isUserLoggerConsole && global.TESTOMATIO_LOGGER_CONSOLE_INTERCEPTED) {
       debug(`Try to intercept console, but it is already intercepted`);
       return;
     }
 
-    process.env.TESTOMATIO_LOGGER_CONSOLE_INTERCEPTED = 'true';
+    global.TESTOMATIO_LOGGER_CONSOLE_INTERCEPTED = true;
     debug(isUserLoggerConsole ? 'console intercepted' : 'User logger intercepted');
 
     // override user logger (any, e.g. console) methods to intercept log messages

package/lib/template/template-draft.hbs

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/accordionjs@2.1.2/accordion.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+        <title>Report {{runId}} - Testomat.io</title>
+        <link rel="stylesheet" href="./style.css">
+        {{!-- TODO: styling create as a new additional file instead of template => copy default one --}}
+        <style>
+            body {
+                font-family: "Fira Sans", sans-serif;
+            }
+        </style>
+    </head>
+
+    <body class="bg-gray-50 pt-6 px-4 lg:pt-4 lg:px-40 h-full;">
+        <div id="testomatio_report">                
+            <div class="flex items-center flex-col space-y-4 md:flex-row md:justify-between md:h-14 mb-6">
+                <div class="flex flex-col md:flex-row space-x-3 items-center">
+                    <h2 class="text-gray-900 leading-none text-3xl font-semibold mb-0">{{runId}}
+                    </h2>
+                    {{!-- <span class="text-sm text-gray-500">
+                        {{executionDate}}
+                    </span> --}}
+                </div>
+                <div class="flex space-x-3 items-center">                       
+                    <a class="inline-flex items-center border border-transparent leading-none text-white bg-indigo-500 hover:bg-indigo-700 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer px-4 py-2 text-base leading-none" 
+                        style="min-height: 38px"
+                        href="{{runUrl}}" 
+                        target="_blank">
+                        Full Report
+                    </a>
+                </div>
+            </div>
+            <div class="bg-white border overflow-hidden rounded-lg divide-y divide-gray-200 mb-12">
+                <div class="flex flex-col lg:divide-x divide-gray-200 sm:flex-col md:flex-col lg:flex-row">
+                    <div class="w-full lg:w-1/2">
+                        <!-- Left chart section -->
+                        <div class="p-4">
+                            <h2 class="text-xl font-semibold mb-4">Testomatio Test Results</h2>
+                            <span class="text-sm text-gray-500 items-center">{{executionDate}}</span>
+                            <div class="hart-container" style="height: 200px;">
+                                <canvas id="testomatio_chart"></canvas>
+                                <div for="testomatio_chart"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="w-full lg:w-1/2">
+                        <!-- Right chart section -->
+                        <div class="p-4">
+                            <h2 class="text-xl font-semibold mb-4">Testomatio Run Info</h2>
+                            <dl>
+                                <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                                    <dt class="text-sm font-medium text-gray-500">
+                                        RUN Status
+                                    </dt>
+                                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none bg-green-200 text-green-600 rounded-full">
+                                            {{status}}
+                                        </span>
+                                    </dd>
+                                    </div>
+                                    <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                                    <dt class="text-sm font-medium text-gray-500">
+                                        Duration
+                                    </dt>
+                                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                        <span>
+                                            <i class="fa fa-clock-o"></i>
+                                        </span>
+                                        {{executionTime}}
+                                    </dd>
+                                    </div>
+                                </div>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="px-4 py-5 lg:px-20 lg:py-5">
+                <!-- TODO: maybe add a search section by test NAME!! -->
+                <div class="px-4 py-5 lg:px-20 lg:py-5 border rounded-md mb-4">
+                    <div class="mb-2">
+                        <h3 class="text-2xl leading-10 font-medium text-gray-900">
+                            Search and Summary
+                        </h3>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <div class="relative">
+                            <input type="text" id="search-input" placeholder="Search by test title..." class="border rounded-md py-1 px-2 w-48 focus:outline-none focus:ring focus:border-blue-300">
+
+                        </div>
+                        <div class="test-status">
+                            <div class="flex items-center">
+                                <span class="font-medium mr-2">All:</span>
+                                <span class="text-blue-600 font-semibold">{{tests.length}}</span>
+                                <span class="font-medium ml-4 mr-2">Passed:</span>
+                                <span class="text-green-600 font-semibold">{{getTestsByStatus tests "PASSED"}}</span>
+                                <span class="font-medium ml-4 mr-2">Failed:</span>
+                                <span class="text-red-600 font-semibold">{{getTestsByStatus tests "FAILED"}}</span>
+                                <span class="font-medium ml-4 mr-2">Skipped:</span>
+                                <span class="text-yellow-600 font-semibold">{{getTestsByStatus tests "SKIPPED"}}</span>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+
+                <ul class="accordionjs bg-gray-50 rounded-md divide-y divide-gray-200 text-gray-900">
+                    <li class="pl-3 pr-4 py-3 text-sm cursor-pointer">
+                        <h4 class="text-lg flex items-center space-x-1">
+                            <span class="font-medium">Passed</span>
+                            <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none bg-green-200 text-green-600 rounded-full">
+                            {{getTestsByStatus tests "PASSED"}}
+                            </span>
+                        </h4>
+                        <ul role="list" class="pl-2 divide-y divide-gray-200">
+                            {{#each tests}}
+                                <ul role="list" class="pl-2 divide-y divide-gray-200">                                
+                                    {{#eq status "passed"}}
+                                        <li class="py-3 flex justify-between items-center">
+                                            <div>
+                                                <div class="success"></div>
+                                                <a class="testrun hover:underline" data-toggle="test-{{test_id}}" data-target="test-code-{{test_id}}">
+                                                    {{title}} title
+                                                </a>                                     
+                                            </div>
+                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                                <span>
+                                                    <i class="fa fa-clock-o"></i>
+                                                </span>
+                                                {{#if run_time}}
+                                                    {{run_time}}ms
+                                                {{/if}}
+                                            </dd>
+                                        </li>
+                                        <li class="py-3 test-code-container test-code" id="test-code-{{test_id}}">
+                                            <pre>
+                                                <code>
+                                                    {{steps}}
+                                                </code>
+                                            </pre>
+                                        </li>
+                                    {{/eq}}
+                                </ul> 
+                            {{/each}}                               
+                        </ul>                            
+                    </li>
+
+                    <li class="pl-3 pr-4 py-3 text-sm cursor-pointer">
+                        <h4 class="text-lg flex items-center space-x-1">
+                            <span class="font-medium">Failed</span>
+                            <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-bold leading-none bg-red-200 text-red-500 rounded-full">
+                            {{getTestsByStatus tests "FAILED"}}
+                            </span>
+                        </h4>
+                
+                        <ul role="list" class="pl-2 divide-y divide-gray-200">
+                            {{#each tests}}
+                                {{#eq status "failed"}}
+                                    <li class="py-3 flex justify-between items-center">
+                                            <div>
+                                                <div class="fail"></div>
+                                                <a class="testrun hover:underline" data-toggle="test-{{test_id}}" data-target="test-code-{{test_id}}">
+                                                    {{title}} title
+                                                </a>                                     
+                                            </div>
+                                            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                                <span>
+                                                    <i class="fa fa-clock-o"></i>
+                                                </span>
+                                                {{#if run_time}}
+                                                    {{run_time}}ms
+                                                {{/if}}
+                                            </dd>
+                                        </li>
+                                        <li class="py-3 test-code-container test-code" id="test-code-{{test_id}}">
+                                            <pre>
+                                                <code>
+                                                    {{steps}}
+                                                </code>
+                                            </pre>
+                                        </li>
+                                {{/eq}}
+                            {{/each}}
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div
+            class="fixed bg-white border-t inset-x-0 bottom-0 mx-auto py-1 px-3 sm:px-6 lg:px-8 flex items-center justify-between flex-wrap">
+            <p class="ml-3 text-gray-500 text-xs lg:truncate">
+                This is a public report generated by <a class="hover:underline text-gray-700 font-semibold"
+                    href="https://testomat.io" target="_blank">Testomat.io</a>. Everyone who has accesse to this link can
+                see this report.<br>
+            </p>
+        </div>
+
+    </body>
+    <!-- Jquery from a CDN -->
+    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.2/chart.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/accordionjs@2.1.2/accordion.min.js"></script>
+    <!-- Chart.js from a CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <!-- Include Handlebars from a CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
+    <!-- Handlebars tamplate actions -->
+    <script>
+        $(document).ready(function ($) {
+            $(".accordionjs").accordionjs();
+
+            $('#copy-url').on('click', () => {
+                navigator.clipboard.writeText(window.location.href);
+            })
+        });
+        //Open code section handler
+        document.querySelectorAll('.test-code').forEach(element => {
+            element.style.display = 'none';
+        });
+        const testrunLinks = document.querySelectorAll('.testrun');
+
+        testrunLinks.forEach(link => {
+            link.addEventListener('click', function () {
+                // get "data-toggle" & "data-target" from link env
+                const toggleId = this.getAttribute('data-toggle');
+                const targetId = this.getAttribute('data-target');
+                
+                // get "tests.code" elements and change view
+                const targetElement = document.querySelector(`#${targetId}`);
+                
+                // SET "tests.code" viewing after each click
+                if (targetElement.style.display === 'none') {
+                    targetElement.style.display = 'block';
+                } else {
+                    targetElement.style.display = 'none';
+                }
+            });
+        });
+    </script>
+    <script type="text/javascript" src="./chart-my.js"></script>
+</html>