@jahia/cypress 6.3.0 → 6.4.0

package/src/utils/Logger.ts

@@ -13,13 +13,91 @@
  *       It tells the logger to log only messages with the given level and above.
  */
 
-// ENV variable to store the logging verbosity level
+/**
+ * ENV variable to store the logging verbosity level
+ */
 const envVarLoggingVerbosity = '__LOG_VERBOSITY__';
 
 /**
- * Logging levels enumerator.
+ * Logging levels enumerator
+ */
+enum LEVEL { DEBUG, INFO, WARNING }
+
+/**
+ * Base colors for each log level
+ */
+const LOGGER_COLORS = [
+    {name: 'DEBUG', color: '#686868'},
+    {name: 'INFO', color: '#10b981'},
+    {name: 'WARNING', color: '#fbbf24'}
+];
+
+/**
+ * Unique style ID to identify the logger styles in the document head
  */
-enum LEVEL { DEBUG, INFO }
+const LOGGER_STYLE_ID = 'jahia-cypress-ptf-logger-styles';
+
+/**
+ * Helper function to convert hex colors to rgb
+ * @param {string} hex - hex color
+ * @returns {string} - rgb color in format "r g b"
+ * @example hex2rgb("#ffffff") => "255 255 255"
+ */
+function hex2rgb(hex: string):string {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+
+    return `${r} ${g} ${b}`;
+}
+
+/**
+ * Creates a custom logger styles and attaches them to the document head.
+ * Basically - attaches CSS styles to Cypress browser window to style the log messages.
+ */
+function attachLoggerStyles() {
+    // Check if style tag with the corresponding attribute exists in the document head to avoid duplicating styles
+    if (Cypress.$(window.top.document.head).find(`style[data-id="${LOGGER_STYLE_ID}"]`).length > 0) {
+        return;
+    }
+
+    // Create style element
+    const styleSheet = document.createElement('style');
+    // Add marker attribute to identify the style tag
+    styleSheet.setAttribute('data-id', LOGGER_STYLE_ID);
+
+    // Build styles for each log level
+    LOGGER_COLORS.forEach(logger => {
+        const name = logger.name.toLowerCase();
+        const color = hex2rgb(logger.color);
+        styleSheet.textContent += `
+        .command.command-name-ptf-${name} span.command-method {
+            margin-right: 0.5rem;
+            border-radius: 0.125rem;
+            border-width: 1px;
+            padding: 0.125rem 0.375rem;
+            text-transform: uppercase;
+
+            border-color: rgb(${color} / 1);
+            background-color: rgb(${color} / 0.2);
+            color: rgb(${color} / 1) !important;
+        }
+
+        .command.command-name-ptf-${name} span.command-message {
+            color: rgb(${color} / 1);
+            font-weight: normal;
+        }
+
+        .command.command-name-ptf-${name} span.command-message strong,
+        .command.command-name-ptf-${name} span.command-message em { 
+            color: rgb(${color} / 1);
+        }
+    `;
+    });
+
+    // Attach styles to the document head
+    Cypress.$(window.top.document.head).append(styleSheet);
+}
 
 /**
  * Return the current logging verbosity level.
@@ -58,6 +136,15 @@ function debug(message: string): Cypress.Chainable {
     return _send_(Log.LEVEL.DEBUG, message);
 }
 
+/**
+ * Logs WARNING message
+ * @param {string} message - log message
+ * @returns {Cypress.Chainable} - Cypress chainable object
+ */
+function warning(message: string): Cypress.Chainable {
+    return _send_(Log.LEVEL.WARNING, message);
+}
+
 /**
  * Logs JSON object with logging level given
  * @param {LEVEL} level - log level (e.g. 'INFO', 'DEBUG')
@@ -85,6 +172,9 @@ function _send_(level: LEVEL, message: string): Cypress.Chainable {
         throw new Error(`Log level "${level}" is not supported. Supported levels are: ${Log.LEVEL}`);
     }
 
+    // Attach logger styles to the document head (done only once)
+    attachLoggerStyles();
+
     // Check if the log level is enabled,
     // take into account the log level set in Cypress.env('LOG_LEVEL') and the log level set in the Log.LEVEL variable.
     // If the log level is enabled, send the message to Cypress log.
@@ -93,8 +183,8 @@ function _send_(level: LEVEL, message: string): Cypress.Chainable {
         // use cy.then() to ensure that the log message is sent in the correct order
         // and use cy.wrap() to return the Cypress chainable object
         return cy.then(() => {
-            Cypress.log({displayName: `[ ${Log.LEVEL[level].toUpperCase()} ]`, message: `${message}`});
-        }).then(cy.wrap);
+            Cypress.log({name: `ptf-${Log.LEVEL[level].toLowerCase()}`, displayName: `${Log.LEVEL[level].toUpperCase()}`, message: `${message}`});
+        }).then(() => cy.wrap(null, {log: false}));
     }
 }
 
@@ -102,6 +192,7 @@ function _send_(level: LEVEL, message: string): Cypress.Chainable {
 export const Log = {
     info,
     debug,
+    warning,
     json,
     setVerbosity,
     LEVEL