@jahia/cypress 6.4.1 → 6.4.2

package/dist/support/jsErrorsLogger.d.ts

@@ -1,7 +1,3 @@
-/**
- * Module for monitoring and reporting JavaScript errors and warnings in Cypress tests.
- * Provides methods to enable, disable, and check logger status.
- */
 /**
  * Strategy for handling JavaScript errors and warnings in Cypress tests.
  *

package/dist/support/jsErrorsLogger.js

@@ -1,10 +1,6 @@
 "use strict";
 /* eslint-disable brace-style */
 /* eslint-disable max-statements-per-line */
-/**
- * Module for monitoring and reporting JavaScript errors and warnings in Cypress tests.
- * Provides methods to enable, disable, and check logger status.
- */
 var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
         to[j] = from[i];
@@ -12,6 +8,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 };
 exports.__esModule = true;
 exports.jsErrorsLogger = void 0;
+/**
+ * Module for monitoring and reporting JavaScript errors and warnings in Cypress tests.
+ * Provides methods to enable, disable, and check logger status.
+ */
 var envVarDisableAll = 'JAHIA_HOOKS_DISABLE';
 var envVarDisableJsLogger = 'JAHIA_HOOKS_DISABLE_JS_LOGGER';
 var envVarCollector = '__JS_LOGGER_FAILURES__';
@@ -99,27 +99,26 @@ function setAllowedJsWarnings(warnings) { Cypress.env(envVarAllowedWarnings, war
  */
 function attachJsInterceptor() {
     /**
-     * Custom 'window:before:load' hook to attach interceptors before the page is loaded,
-     * allowing us to spy on console messages.
+     * Custom 'window:before:load' hook to attach interceptors before the page is loaded and spy on console messages.
      */
-    Cypress.on('window:before:load', function (window) {
+    cy.on('window:before:load', function (window) {
         // Skip 'window:before:load' hook if the logger is disabled
         if (isDisabled()) {
             return;
         }
-        // Spy on console.error and console.warn to capture errors and warnings
+        // Spy on console.error and console.warn methods to capture errors and warnings
         cy.spy(window.console, 'error').as('errors');
         cy.spy(window.console, 'warn').as('warnings');
     });
     /**
      * Custom 'window:load' hook to collect JavaScript errors and warnings right after the page is loaded.
      */
-    Cypress.on('window:load', function (win) {
+    cy.on('window:load', function (win) {
         // Skip 'window:load' hook if the logger is disabled
         if (isDisabled()) {
             return;
         }
-        // Collect issues immediately after the window is loaded and analyze them
+        // Collect errors and warnings after the page is fully loaded
         collectIssues(win);
     });
 }
@@ -128,9 +127,7 @@ function attachJsInterceptor() {
  * @returns {Cypress.Chainable} - Cypress chainable object that resolves when issues are collected.
  */
 function collectIssues(win) {
-    var allowedWarnings = getAllowedJsWarnings();
     var consoleIssues = [];
-    var url = win.location.href;
     // Look for console errors and warnings, collected by the spies
     return cy.get('@errors')
         .invoke('getCalls')
@@ -139,10 +136,11 @@ function collectIssues(win) {
         consoleIssues = errorCalls.flatMap(function (call) { return call.args.map(function (arg) { return ({ type: 'error', msg: String(arg) }); }); });
     })
         .then(function () {
-        // Analyze warnings
-        cy.get('@warnings')
+        // Analyze warnings - return the chain to maintain proper async flow
+        return cy.get('@warnings')
             .invoke('getCalls')
             .then(function (warningCalls) {
+            var allowedWarnings = getAllowedJsWarnings();
             warningCalls.flatMap(function (call) { return call.args; }).forEach(function (arg) {
                 // Only warnings not in the allowed list should be collected
                 if (!allowedWarnings.some(function (item) { return arg.includes(item); })) {
@@ -155,7 +153,7 @@ function collectIssues(win) {
         // Update the Cypress environment variable with the collected issues
         if (consoleIssues.length > 0) {
             setCollectedIssues(__spreadArray(__spreadArray([], getCollectedIssues()), [
-                { url: url, test: Cypress.currentTest.title, errors: consoleIssues }
+                { url: win.location.href, test: Cypress.currentTest.title, errors: consoleIssues }
             ]));
         }
     });
@@ -164,8 +162,7 @@ function collectIssues(win) {
  * Analyzes collected JavaScript errors and warnings and throws an error if any were found.
  */
 function analyzeIssues() {
-    cy.then(function () {
-        var failures = getCollectedIssues();
+    return cy.wrap(getCollectedIssues()).then(function (failures) {
         if (failures.length > 0) {
             // Group all issues by test title
             var groupedByTest = failures.reduce(function (acc, failure) {
@@ -202,16 +199,22 @@ function disable() { Cypress.env(envVarDisableJsLogger, true); }
  * and throws an error if any issues are found after each or all tests are executed (depending on the strategy chosen).
  */
 function enable() {
-    // Ensure the logger is enabled by default
+    // Ensure the logger is enabled
     Cypress.env(envVarDisableJsLogger, false);
-    // Attach errors and warnings collector
-    attachJsInterceptor();
+    /**
+     * Attach Cypress hooks forconsole messages collecting before EACH test execution.
+     * Use 'beforeEach' hook and local (cy) context instead of global (Cypress) one
+     * to ensure proper async flow and avoid events and hooks flakiness.
+     */
+    before(function () {
+        attachJsInterceptor();
+    });
     /**
      * Custom 'afterEach' hook to analyze JavaScript errors and warnings after EACH test execution.
      */
     afterEach(function () {
         // Skip the hook if the logger is disabled or if the strategy is not failAfterEach
-        if (isDisabled() || getStrategy() !== STRATEGY.failAfterEach) {
+        if (isDisabled() || (getStrategy() !== STRATEGY.failAfterEach)) {
             return;
         }
         // Analyze collected errors and warnings
@@ -222,7 +225,7 @@ function enable() {
      */
     after(function () {
         // Skip the hook if the logger is disabled or if the strategy is not failAfterAll
-        if (isDisabled() || getStrategy() !== STRATEGY.failAfterAll) {
+        if (isDisabled() || (getStrategy() !== STRATEGY.failAfterAll)) {
             return;
         }
         // Analyze collected errors and warnings

package/docs/js-errors-logger.md

@@ -28,6 +28,47 @@ The logger supports three distinct strategies for handling JavaScript errors and
 - **Use Case**: Ideal for CI/CD environments where you want a complete test run overview
 - **Pros**: Complete test suite execution with comprehensive error reporting
 - **Cons**: Error reporting may be confusing as the last test will be marked as failed, since the errors analysis and reporting is done in after() hook
+- **Hint:** To make reporting less confusing, dummy test can be added by the end of the spec to provide more clarity on why the spec failed, e.g:
+
+```typescript
+describe('Tests for the UI module', () => {
+  it('Should validate flow A', () => { ... });
+
+  it('Should validate flow B', () => { ... });
+
+  it('Should validate flow C', () => { ... });
+  ...
+
+  // Dummy test to fail if any errors or warnings appear in the browser console,
+  // providing clearer insight into execution and failure reasons.
+  // Analysis itself will happen inside jsErrorsLogger module (if one is enabled).
+  it('Should ensure errors and warnings absense in browser console', () => { 
+    cy.log('Analyze console messages');
+  });
+});
+```
+Say, there were JavaScript errors and warnings in all tests. Without that dummy test, the very last test in spec will be marked by Cypress as failed, even though it might pass:
+```
+✓ Should validate flow A
+✓ Should validate flow B
+- Should validate flow C
+  ... <errors/warnings list for each visited url, grouped by test> ...
+```
+But with that dummy test it will be much clearer what exactly happened:
+```
+✓ Should validate flow A
+✓ Should validate flow B
+✓ Should validate flow C
+- Should ensure errors and warnings absence in browser console during spec execution
+  ... <errors/warnings list for each visited url, grouped by test> ...
+```
+And in case of JavaScript errors and warnings absense (and all tests passed) it will also be much clearer - what validations were performed:
+```
+✓ Should validate flow A
+✓ Should validate flow B
+✓ Should validate flow C
+✓ Should ensure errors and warnings absense in browser console during spec execution
+```
 
 ## Usage
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jahia/cypress",
-  "version": "6.4.1",
+  "version": "6.4.2",
   "scripts": {
     "build": "tsc",
     "lint": "eslint src -c .eslintrc.json --ext .ts --max-warnings=0"

package/src/support/jsErrorsLogger.ts

@@ -1,5 +1,6 @@
 /* eslint-disable brace-style */
 /* eslint-disable max-statements-per-line */
+
 /**
  * Module for monitoring and reporting JavaScript errors and warnings in Cypress tests.
  * Provides methods to enable, disable, and check logger status.
@@ -108,13 +109,12 @@ function setAllowedJsWarnings(warnings: string[]): void { Cypress.env(envVarAllo
  */
 function attachJsInterceptor(): void {
     /**
-     * Custom 'window:before:load' hook to attach interceptors before the page is loaded,
-     * allowing us to spy on console messages.
+     * Custom 'window:before:load' hook to attach interceptors before the page is loaded and spy on console messages.
      */
-    Cypress.on('window:before:load', window => {
+    cy.on('window:before:load', window => {
         // Skip 'window:before:load' hook if the logger is disabled
         if (isDisabled()) { return; }
-        // Spy on console.error and console.warn to capture errors and warnings
+        // Spy on console.error and console.warn methods to capture errors and warnings
         cy.spy(window.console, 'error').as('errors');
         cy.spy(window.console, 'warn').as('warnings');
     });
@@ -122,10 +122,10 @@ function attachJsInterceptor(): void {
     /**
      * Custom 'window:load' hook to collect JavaScript errors and warnings right after the page is loaded.
      */
-    Cypress.on('window:load', win => {
+    cy.on('window:load', win => {
         // Skip 'window:load' hook if the logger is disabled
         if (isDisabled()) { return; }
-        // Collect issues immediately after the window is loaded and analyze them
+        // Collect errors and warnings after the page is fully loaded
         collectIssues(win);
     });
 }
@@ -135,9 +135,7 @@ function attachJsInterceptor(): void {
  * @returns {Cypress.Chainable} - Cypress chainable object that resolves when issues are collected.
  */
 function collectIssues(win: Cypress.AUTWindow): Cypress.Chainable {
-    const allowedWarnings = getAllowedJsWarnings();
     let consoleIssues: {type: string, msg: string}[] = [];
-    const url = win.location.href;
 
     // Look for console errors and warnings, collected by the spies
     return cy.get('@errors')
@@ -147,10 +145,11 @@ function collectIssues(win: Cypress.AUTWindow): Cypress.Chainable {
             consoleIssues = errorCalls.flatMap((call: { args: unknown[] }) => call.args.map((arg: string) => ({type: 'error', msg: String(arg)})));
         })
         .then(() => {
-            // Analyze warnings
-            cy.get('@warnings')
+            // Analyze warnings - return the chain to maintain proper async flow
+            return cy.get('@warnings')
                 .invoke('getCalls')
                 .then(warningCalls => {
+                    const allowedWarnings = getAllowedJsWarnings();
                     warningCalls.flatMap((call: { args: unknown[] }) => call.args).forEach((arg: string) => {
                         // Only warnings not in the allowed list should be collected
                         if (!allowedWarnings.some((item: string) => arg.includes(item))) { consoleIssues.push({type: 'warn', msg: String(arg)}); }
@@ -162,7 +161,7 @@ function collectIssues(win: Cypress.AUTWindow): Cypress.Chainable {
             if (consoleIssues.length > 0) {
                 setCollectedIssues([
                     ...getCollectedIssues(),
-                    {url: url, test: Cypress.currentTest.title, errors: consoleIssues}
+                    {url: win.location.href, test: Cypress.currentTest.title, errors: consoleIssues}
                 ]);
             }
         });
@@ -171,10 +170,8 @@ function collectIssues(win: Cypress.AUTWindow): Cypress.Chainable {
 /**
  * Analyzes collected JavaScript errors and warnings and throws an error if any were found.
  */
-function analyzeIssues(): void {
-    cy.then(() => {
-        const failures = getCollectedIssues();
-
+function analyzeIssues(): Cypress.Chainable {
+    return cy.wrap(getCollectedIssues()).then(failures => {
         if (failures.length > 0) {
             // Group all issues by test title
             const groupedByTest = failures.reduce((acc: Record<string, CollectorItem[]>, failure) => {
@@ -220,18 +217,24 @@ function disable(): void { Cypress.env(envVarDisableJsLogger, true); }
  * and throws an error if any issues are found after each or all tests are executed (depending on the strategy chosen).
  */
 function enable(): void {
-    // Ensure the logger is enabled by default
+    // Ensure the logger is enabled
     Cypress.env(envVarDisableJsLogger, false);
 
-    // Attach errors and warnings collector
-    attachJsInterceptor();
+    /**
+     * Attach Cypress hooks forconsole messages collecting before EACH test execution.
+     * Use 'beforeEach' hook and local (cy) context instead of global (Cypress) one
+     * to ensure proper async flow and avoid events and hooks flakiness.
+     */
+    before(() => {
+        attachJsInterceptor();
+    });
 
     /**
      * Custom 'afterEach' hook to analyze JavaScript errors and warnings after EACH test execution.
      */
     afterEach(() => {
         // Skip the hook if the logger is disabled or if the strategy is not failAfterEach
-        if (isDisabled() || getStrategy() !== STRATEGY.failAfterEach) { return; }
+        if (isDisabled() || (getStrategy() !== STRATEGY.failAfterEach)) { return; }
         // Analyze collected errors and warnings
         analyzeIssues();
     });
@@ -241,7 +244,7 @@ function enable(): void {
      */
     after(() => {
         // Skip the hook if the logger is disabled or if the strategy is not failAfterAll
-        if (isDisabled() || getStrategy() !== STRATEGY.failAfterAll) { return; }
+        if (isDisabled() || (getStrategy() !== STRATEGY.failAfterAll)) { return; }
         // Analyze collected errors and warnings
         analyzeIssues();
     });