@testomatio/reporter 1.2.1-beta → 1.2.1-beta.codecept-id

package/lib/services/logger.js

@@ -0,0 +1,311 @@
+const chalk = require('chalk');
+const debug = require('debug')('@testomatio/reporter:services-logger');
+const { dataStorage } = require('../data-storage');
+
+const LOG_METHODS = ['assert', 'debug', 'error', 'info', 'log', 'trace', 'warn'];
+const LEVELS = {
+  ALL: { severity: 1, color: '' },
+  VERBOSE: { severity: 3, color: 'grey' },
+  TRACE: { severity: 5, color: 'grey' },
+  DEBUG: { severity: 7, color: 'cyan' },
+  INFO: { severity: 9, color: 'black' },
+  LOG: { severity: 11, color: 'black' },
+  WARN: { severity: 13, color: 'yellow' },
+  ERROR: { severity: 15, color: 'red' },
+};
+
+// ! DON'T use console.log, console.warn, etc in this file, because it will lead to infinite loop
+// use debug() instead
+
+/**
+ * Logger allows to intercept logs from any logger (console.log, tracer, pino, etc)
+ * and save in the testomatio reporter.
+ * Supports different syntaxes to satisfy any user preferences.
+ */
+class Logger {
+  // set default logger to be used in log, warn, error, etc methods
+  #originalUserLogger = { ...console };
+
+  #userLoggerWithOverridenMethods;
+
+  static #instance;
+
+  /**
+   *
+   * @returns {Logger}
+   */
+  static getInstance() {
+    if (!this.#instance) {
+      this.#instance = new Logger();
+    }
+    return this.#instance;
+  }
+
+  logLevel = process?.env?.LOG_LEVEL?.toUpperCase() || 'ALL';
+
+  constructor() {
+    if (!dataStorage.isFileStorage || process.env.TESTOMATIO_INTERCEPT_CONSOLE_LOGS) this.intercept(console);
+  }
+
+  /**
+   * Allows you to define a step inside a test. Step name is attached to the report and
+   * helps to understand the test flow.
+   * @param {*} strings
+   * @param  {...any} values
+   */
+  step(strings, ...values) {
+    let logs = '';
+    for (let i = 0; i < strings.length; i++) {
+      logs += strings[i];
+      if (i < values.length) {
+        logs += values[i];
+      }
+    }
+    logs = chalk.blue(`> ${logs}`);
+    dataStorage.putData('log', logs);
+  }
+
+  /**
+   *
+   * @param {string} context testId or test context from test runner
+   * @returns {string[]}
+   */
+  getLogs(context) {
+    const logs = dataStorage.getData('log', context);
+    if (!logs) return [];
+    return logs;
+  }
+
+  #stringifyLogs(...args) {
+    const logs = [];
+    // stringify everything except strings
+    for (const arg of args) {
+      // ignore empty strings
+      if (arg === '') continue;
+      if (typeof arg === 'string') {
+        logs.push(arg);
+      } else if (Array.isArray(arg)) {
+        logs.push(arg.join(' '));
+      } else {
+        try {
+          // eslint-disable-next-line no-unused-expressions
+          this.prettyObjects ? logs.push(JSON.stringify(arg, null, 2)) : logs.push(JSON.stringify(arg));
+        } catch (e) {
+          debug('Error while stringify object', e);
+          logs.push(arg);
+        }
+      }
+    }
+    return logs.join(' ');
+  }
+
+  /**
+   * Tagget template literal. Allows to use different syntaxes:
+   * 1. Tagget template: log`text ${someVar}`
+   * 2. Standard: log(`text ${someVar}`)
+   * 3. Standard with multiple arguments: log('text', someVar)
+   */
+  _templateLiteralLog(strings, ...args) {
+    if (Array.isArray(strings)) strings = strings.filter(item => item !== '').map(item => item.trim());
+    if (Array.isArray(args)) args = args.filter(item => item !== '');
+
+    let logs;
+    // this block means tagged template is used (syntax like $`text ${someVar}`)
+    if (Array.isArray(strings) && strings.length === args.length + 1) {
+      logs = strings.reduce(
+        (result, current, index) =>
+          result +
+          current +
+          // strings are splitted by args when use tagged template, thus we add arg after each string
+          // it looks like: `string1 arg1 string2 arg2 string3`
+          (args[index] !== undefined // eslint-disable-line no-nested-ternary
+            ? typeof args[index] === 'string'
+              ? args[index] // add arg as it is
+              : this.#stringifyLogs(args[index]) // stringify arg
+            : ''),
+        // initial accumulator value
+        '',
+      );
+    } else {
+      // this block means arguments syntax is used (syntax like $('text', someVar))
+      // in this case strings represents just a first argument
+      logs = this.#stringifyLogs(strings, ...args);
+    }
+    this.#originalUserLogger.log(logs);
+    dataStorage.putData('log', logs);
+  }
+
+  /**
+   * This function is a wrapper for each logging methods (log, warn, error etc) (not to repeat the same code)
+   * @param {*} argsArray
+   * @param {*} level
+   * @returns
+   */
+  #logWrapper(argsArray, level) {
+    if (!argsArray.length) return;
+
+    const severity = LEVELS[level].severity;
+    if (severity < LEVELS[this.logLevel]?.severity) return;
+
+    const logs = this.#stringifyLogs(...argsArray);
+
+    const colorizedLogs = chalk[LEVELS[level].color](logs);
+    // do not attach logs from testomatio reporter itself
+    if (!logs.includes('[TESTOMATIO]')) {
+      dataStorage.putData('log', colorizedLogs);
+    }
+
+    try {
+      // level.toLowerCase() represents method name (log, warn, error, etc)
+      this.#originalUserLogger[level.toLowerCase()](colorizedLogs);
+    } catch (e) {
+      // method could be unexisting, ignore error
+    }
+  }
+
+  assert(...args) {
+    this.#logWrapper(args, 'ERROR');
+  }
+
+  debug(...args) {
+    this.#logWrapper(args, 'DEBUG');
+  }
+
+  error(...args) {
+    this.#logWrapper(args, 'ERROR');
+  }
+
+  info(...args) {
+    this.#logWrapper(args, 'INFO');
+  }
+
+  log(...args) {
+    this.#logWrapper(args, 'LOG');
+  }
+
+  trace(...args) {
+    this.#logWrapper(args, 'TRACE');
+  }
+
+  warn(...args) {
+    this.#logWrapper(args, 'WARN');
+  }
+
+  /**
+   * Intercepts user logger messages.
+   * When call this method, Logger start to control the user logger
+   * @param {*} userLogger
+   */
+  intercept(userLogger) {
+    // STEP 1: reset previously intercepted logger methods to original
+    if (this.#userLoggerWithOverridenMethods) {
+      for (const method of LOG_METHODS) {
+        this.#userLoggerWithOverridenMethods[method] = this.#originalUserLogger[method];
+      }
+    }
+
+    // STEP 2: intercept new logger
+    this.#originalUserLogger = { ...userLogger };
+
+    const isUserLoggerConsole = userLogger.toString?.().toLowerCase() === '[object console]';
+    debug(`Intercepting ${isUserLoggerConsole ? 'console' : 'some user'} logger}`);
+
+    // override user logger (any, e.g. console) methods to intercept log messages
+    for (const method of LOG_METHODS) {
+      /*
+      its better to create method even if it does not exist in user logger;
+      on method invocation, we will store the data anyway and catch block will prevent potential errors
+      while trying to output the message to terminal
+      */
+      // if (!this._loggerToIntercept[method]) continue;
+      userLogger[method] = (...args) => this[method](...args);
+    }
+
+    this.#userLoggerWithOverridenMethods = userLogger;
+
+    /*
+    Initial idea was to intercept any logger (tracer, pino, etc),
+    intercept message and provide output by the same logger.
+    But reality brings some problems: the same messages are intercepted multiple times
+    (because of multiple loggers are created at the same terminal process).
+    Also its difficult to understand (actually did not find the way to do it) if logger was already intercepted or not.
+    Thus, decided to intercept only console by default and provide output by default console.
+    It means, if user uses his own logger, its messages will be intercepted,
+    but the output will be always provided by console.
+    TODO: try to implement the providing output to terminal by user logger
+    */
+  }
+
+  stopInterception() {
+    debug('Stop ntercepting logs');
+
+    // restore original user logger
+    if (this.#userLoggerWithOverridenMethods) {
+      for (const method of LOG_METHODS) {
+        this.#userLoggerWithOverridenMethods[method] = this.#originalUserLogger[method];
+      }
+    }
+  }
+
+  /**
+   * Allows to configure logger. Make sure you do it before the logger usage in your code.
+   *
+   * @param {Object} [config={}] - The configuration object.
+   * @param {string} [config.logLevel] - The desired log level. Valid values are 'DEBUG', 'INFO', 'WARN', and 'ERROR'.
+   * @param {boolean} [config.prettyObjects] - Specifies whether to enable pretty printing of objects.
+   * @returns {void}
+   */
+  configure(config = {}) {
+    if (!config) return;
+    if (config.prettyObjects === false || config.prettyObjects === true) this.prettyObjects = config.prettyObjects;
+    if (config.logLevel) this.logLevel = config.logLevel.toUpperCase();
+  }
+}
+
+module.exports.logger = Logger.getInstance();
+
+// TODO: parse passed arguments as {level: 'str', message: 'str'} because some loggers use such syntax;
+// upd: did not face such loggers, but still could be useful
+
+/* Cypress
+There is no listener like "after:test" in cypress, only "after:spec" is available.
+Thus, cannot separate logs even when I gather them (because I don't know when the test is done, just know about suite).
+Also there is no easy way to access the message from cy.log() function.
+(Using testomatio logger – logger.log() is not convenient because Cypress chains its commands,
+thus such command will interrupt the chain.)
+
+(Could not implement intercepting of cy.log('message'));
+I found the only ability to get any logs using .task('log', 'message') (this is custom, not default cypress command)
+and then intercept it with:
+  on('task', {
+    log (message) {
+      return null
+    }
+  })
+
+but:
+1) it does not solve problem with getting current running testId;
+2) leads to warning "Warning: Multiple attempts to register the following task(s):".)
+
+My way to get test id:
+add cypress command to save test title to file)):
+  Cypress.Commands.add('writeTestTitleToFile', () => {
+    const testTitle = cy.state('runnable').title;
+    cy.writeFile('testomatio_test_title', testTitle);
+  });
+
+Finally, in the test it will look like:
+    cy
+      .writeTestTitleToFile() // <<<
+      .task('log', 'This is a log message from the test') // <<<
+
+      .get('element)
+      .type('text')
+      .click()
+
+
+Parallelization in Cypress is only available if using Cypress Dashboard??
+*/
+
+// TODO: add time to logs
+// TODO: add logger name to logs?

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>