@testomatio/reporter 1.2.2 → 1.2.3-beta-batch-upload

package/lib/fileUploader.js

@@ -20,7 +20,6 @@ const keys = [
   'S3_BUCKET',
   'S3_ACCESS_KEY_ID',
   'S3_SECRET_ACCESS_KEY',
-  'S3_SESSION_TOKEN',
   'TESTOMATIO_DISABLE_ARTIFACTS',
   'TESTOMATIO_PRIVATE_ARTIFACTS',
   'S3_FORCE_PATH_STYLE',
@@ -75,8 +74,7 @@ const _getFileExtBase64 = str => {
 };
 
 const _getS3Config = () => {
-  const { S3_REGION, S3_SESSION_TOKEN, S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, S3_FORCE_PATH_STYLE, S3_ENDPOINT } =
-    getConfig();
+  const { S3_REGION, S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, S3_FORCE_PATH_STYLE, S3_ENDPOINT } = getConfig();
 
   const cfg = {
     region: S3_REGION,
@@ -87,10 +85,6 @@ const _getS3Config = () => {
     },
   };
 
-  if (S3_SESSION_TOKEN) {
-    cfg.credentials.sessionToken = S3_SESSION_TOKEN;
-  }
-
   if (S3_ENDPOINT) {
     cfg.endpoint = S3_ENDPOINT;
   }

package/lib/pipe/html.js

@@ -91,7 +91,7 @@ class HtmlPipe {
       // GENERATE HTML reports based on the results data
       this.buildReport({
         runParams,
-        // TODO: this.tests=[] in case of Mocha, need retest by Vitalii
+        // TODO: this.tests=[] in case of Mocha
         tests: this.tests,
         outputPath: this.htmlOutputPath,
         templatePath: this.templateHtmlPath,
@@ -123,31 +123,30 @@ class HtmlPipe {
     }
 
     tests.forEach(test => {
-      if (!test.message?.trim()) {
+      if (!test.message || test.message.trim() === '') {
         test.message = "This test has no 'message' code";
       }
 
-      if (!test.suite_title?.trim()) {
+      if (!test.suite_title || test.suite_title.trim() === '') {
         test.suite_title = 'Unknown suite';
       }
 
-      if (!test.title?.trim()) {
+      if (!test.title || test.title.trim() === '') {
         test.title = 'Unknown test title';
       }
 
-      if (!test.files?.length) {
+      if (!test.files || test.files.length === 0) {
         test.files = 'This test has no files';
       }
 
-      if (!test.steps?.trim()) {
-        test.steps = "This test has no 'steps' code";
-      } else {
-        test.steps = removeAnsiColorCodes(test.steps);
+      if (test.steps) {
+        if (!test.steps || test.steps.trim() === '') {
+          test.steps = "This test has no 'steps' code";
+        } else {
+          test.steps = removeAnsiColorCodes(test.steps);
+        }
       }
 
-      // TODO: future-proof: currently there is no need to display Artifacts and Metadata in HTML
-      test.artifacts = test.artifacts || [];
-      test.meta = test.meta || {};
       // TODO: u can added an additional test values to this checks in the future
     });
 
@@ -200,8 +199,7 @@ class HtmlPipe {
 
       return template(data);
     } catch (e) {
-      console.log(chalk.red('❌ Oops! An unknown error occurred when generating an HTML report'));
-      console.log(chalk.red(e));
+      console.log('Unknown HTML report generation error: ', e);
     }
   }
 
@@ -211,77 +209,42 @@ class HtmlPipe {
       (tests, status) => tests.filter(test => test.status.toLowerCase() === status.toLowerCase()).length,
     );
 
-    handlebars.registerHelper(
-      'selectComponent',
-      () =>
-        new handlebars.SafeString(
-          `<select style="width: 70px;height: 38px;" class="form-select" aria-label="Tests counter on page">
-          <option value="0">10</option>
-          <option value="1">25</option>
-          <option value="2">50</option>
-        </select>`,
-        ),
-    );
-
-    handlebars.registerHelper(
-      'emptyDataComponent',
-      () =>
-        new handlebars.SafeString(
-          `<div class="noData m-0">
-          NO MATCHING TESTS
-        </div>`,
-        ),
-    );
-
-    handlebars.registerHelper('pageDispleyElements', tests => {
-      // We wrapp the lines to the HTML format we need
-      const totalTests = JSON.parse(
-        JSON.stringify(tests)
-          .replace(/<script>/g, '&lt;script&gt;')
-          .replace(/<\/script>/g, '&lt;/script&gt;'), // eslint-disable-line
-      );
-
-      const paginationOptions = {
-        0: 10,
-        1: 25,
-        2: 50,
-      };
-      const statuses = ['all', 'passed', 'failed', 'skipped'];
-      const pageItemGroups = {
-        all: {},
-        passed: {},
-        failed: {},
-        skipped: {},
-        totalTests,
-      };
-
-      function paginateItems(items, pageSize) {
-        const paginatedItems = [];
-        for (let i = 0; i < items.length; i += pageSize) {
-          paginatedItems.push(items.slice(i, i + pageSize));
-        }
-        return paginatedItems;
-      }
-
-      statuses.forEach(status => {
-        for (const option in paginationOptions) {
-          // eslint-disable-next-line no-prototype-builtins
-          if (paginationOptions.hasOwnProperty(option)) {
-            const pageSize = paginationOptions[option];
-            let filteredItems = totalTests;
-
-            if (status !== 'all') {
-              filteredItems = totalTests.filter(item => item.status === status);
+    handlebars.registerHelper('json', tests => {
+      // TODO: please refactor the code below, add meaningful variable names, separate into functions
+      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];
+              }
             }
-
-            pageItemGroups[status][option] = paginateItems(filteredItems, pageSize);
           }
-        }
-      });
 
-      pageItemGroups.totalTests = totalTests;
+          return newObj;
+        });
+      }
 
-      return JSON.stringify(pageItemGroups);
+      // Remove ANSI escape codes
+      return JSON.stringify(replaceScriptTagsInArray(tests));
     });
   }
 
@@ -298,7 +261,7 @@ class HtmlPipe {
  */
 function testExecutionSumTime(tests) {
   const totalMilliseconds = tests.reduce((sum, test) => {
-    if (typeof test.run_time === 'number' && !Number.isNaN(test.run_time)) {
+    if (typeof test.run_time === 'number') {
       return sum + test.run_time;
     }
     return sum;

package/lib/pipe/testomatio.js

@@ -4,7 +4,6 @@ const chalk = require('chalk');
 const axiosRetry = require('axios-retry');
 // Default axios instance
 const axios = require('axios');
-const JsonCycle = require('json-cycle');
 
 const { APP_PREFIX, STATUS, AXIOS_TIMEOUT, AXIOS_RETRY_TIMEOUT } = require('../constants');
 const { isValidUrl, foundedTestLog } = require('../utils/utils');
@@ -22,6 +21,12 @@ if (process.env.TESTOMATIO_RUN) {
  * @implements {Pipe}
  */
 class TestomatioPipe {
+  batch = {
+    tests: [],
+    intervalFunction: null,
+    intervalTime: 5000, // how often tests are sent
+  };
+
   constructor(params, store) {
     this.isEnabled = false;
     this.url = params.testomatioUrl || process.env.TESTOMATIO_URL || 'https://app.testomat.io';
@@ -122,6 +127,7 @@ class TestomatioPipe {
   async createRun() {
     debug('Creating run...');
     if (!this.isEnabled) return;
+    this.batch.intervalFunction = setInterval(this.#batchUpload, this.batch.intervalTime);
 
     let buildUrl = process.env.BUILD_URL || process.env.CI_JOB_URL || process.env.CIRCLE_BUILD_URL;
 
@@ -194,24 +200,29 @@ class TestomatioPipe {
     debug('"createRun" function finished');
   }
 
-  addTest(data) {
-    if (!this.isEnabled) return;
-    if (!this.runId) return;
-    data.api_key = this.apiKey;
-    data.create = this.createNewTests;
-    const json = JsonCycle.stringify(data);
+  /**
+   * Uploads tests as a batch (multiple tests at once). Intended to be used with a setInterval
+   */
+  #batchUpload = async () => {
+    if (!this.batch.tests.length) return;
 
-    debug('Adding test', json);
+    // get tests from batch and clear batch
+    const testsToSend = this.batch.tests.splice(0);
+    debug('📨 Batch upload', testsToSend.length, 'tests');
 
     return this.axios
-      .post(`/api/reporter/${this.runId}/testrun`, json, {
-        maxContentLength: Infinity,
-        maxBodyLength: Infinity,
-        headers: {
-          // Overwrite Axios's automatically set Content-Type
-          'Content-Type': 'application/json',
+      .post(
+        `/api/reporter/${this.runId}/testrun`,
+        { api_key: this.apiKey, tests: testsToSend },
+        {
+          maxContentLength: Infinity,
+          maxBodyLength: Infinity,
+          headers: {
+            // Overwrite Axios's automatically set Content-Type
+            'Content-Type': 'application/json',
+          },
         },
-      })
+      )
       .catch(err => {
         if (err.response) {
           if (err.response.status >= 400) {
@@ -219,7 +230,7 @@ class TestomatioPipe {
             console.log(
               APP_PREFIX,
               chalk.yellow(`Warning: ${responseData.message} (${err.response.status})`),
-              chalk.grey(data?.title || ''),
+              // chalk.grey(data?.title || ''),
             );
             if (err.response.data.message.includes('could not be matched')) {
               this.hasUnmatchedTests = true;
@@ -228,13 +239,30 @@ class TestomatioPipe {
           }
           console.log(
             APP_PREFIX,
-            chalk.yellow(`Warning: ${data?.title || ''} (${err.response?.status})`),
+            chalk.yellow(`Warning: (${err.response?.status})`),
             `Report couldn't be processed: ${err?.response?.data?.message}`,
           );
         } else {
-          console.log(APP_PREFIX, chalk.blue(data?.title || ''), "Report couldn't be processed", err);
+          console.log(APP_PREFIX, "Report couldn't be processed", err);
         }
       });
+  };
+
+  /**
+   * Adds a test to the batch uploader
+   */
+  addTest(data) {
+    if (!this.isEnabled) return;
+    if (!this.runId) return;
+    data.api_key = this.apiKey;
+    data.create = this.createNewTests;
+    // const json = JsonCycle.stringify(data);
+    // debug('Adding test', JSON.stringify(data));
+
+    this.batch.tests.push(data);
+
+    // if test is added after run already finished
+    if (!this.batch.intervalFunction) this.#batchUpload();
   }
 
   /**
@@ -242,6 +270,9 @@ class TestomatioPipe {
    * @returns
    */
   async finishRun(params) {
+    this.#batchUpload();
+    if (this.batch.intervalFunction) clearInterval(this.batch.intervalFunction);
+
     debug('Finishing run...');
     if (!this.isEnabled) return;
 

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>