chore: refs #8602 enhance Cypress support files with detailed comments and organization

test/cypress/support/commands.js

@@ -1,3 +1,29 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
 // DO NOT REMOVE
 // Imports Quasar Cypress AE predefined commands
 // import { registerCommands } from '@quasar/quasar-app-extension-testing-e2e-cypress';
@@ -10,6 +36,7 @@ Cypress.Commands.add('resetDB', () => {
 });
 
 Cypress.Commands.add('login', (user = 'developer') => {
+    //cy.visit('/#/login');
     cy.request({
         method: 'POST',
         url: '/api/accounts/login',
@@ -52,7 +79,7 @@ Cypress.Commands.add('getValue', (selector) => {
         if ($el.find('.q-checkbox__inner').length > 0) {
             return cy.get(selector + '.q-checkbox__inner');
         }
-
+        // Si es un QSelect
         if ($el.find('.q-select__dropdown-icon').length) {
             return cy
                 .get(
@@ -61,17 +88,18 @@ Cypress.Commands.add('getValue', (selector) => {
                 )
                 .invoke('val');
         }
-
+        // Si es un QSelect
         if ($el.find('span').length) {
             return cy.get(selector + ' span').then(($span) => {
                 return $span[0].innerText;
             });
         }
-
-        cy.log('no supported element');
+        // Puedes añadir un log o lanzar un error si el elemento no es reconocido
+        cy.log('Elemento no soportado');
     });
 });
 
+// Fill Inputs
 Cypress.Commands.add('selectOption', (selector, option, timeout = 2500) => {
     cy.waitForElement(selector, timeout);
 
@@ -101,6 +129,7 @@ function selectItem(selector, option, ariaControl, hasWrite = true) {
 }
 
 function getItems(ariaControl, startTime = Cypress._.now(), timeout = 2500) {
+    // Se intenta obtener la lista de opciones del desplegable de manera recursiva
     return cy
         .get('#' + ariaControl, { timeout })
         .should('exist')
@@ -161,6 +190,7 @@ Cypress.Commands.add('checkOption', (selector) => {
     cy.get(selector).find('.q-checkbox__inner').click();
 });
 
+// Global buttons
 Cypress.Commands.add('saveCard', () => {
     const dropdownArrow = '.q-btn-dropdown__arrow-container > .q-btn__content > .q-icon';
     cy.get('#st-actions').then(($el) => {
@@ -198,6 +228,7 @@ Cypress.Commands.add('selectRows', (rows) => {
 });
 
 Cypress.Commands.add('fillRow', (rowSelector, data) => {
+    // Usar el selector proporcionado para obtener la fila deseada
     cy.waitForElement('tbody');
     cy.get(rowSelector).as('currentRow');
 
@@ -252,6 +283,7 @@ Cypress.Commands.add('removeRow', (rowIndex) => {
             rowsBefore = length;
         })
         .then(() => {
+            // Check the existence of tbody before performing the second assertion.
             cy.get('tbody').then(($tbody) => {
                 if ($tbody.length > 0)
                     cy.get('tbody > tr').should('have.length', rowsBefore - 1);
@@ -367,22 +399,6 @@ Cypress.Commands.add('clickButtonWithIcon', (iconClass) => {
             cy.wrap($btn).click();
         });
 });
-
 Cypress.Commands.add('clickButtonWithText', (buttonText) => {
     cy.get('.q-btn').contains(buttonText).click();
 });
-
-Cypress.Commands.add('getOption', (index = 1) => {
-    cy.waitForElement('[role="listbox"]');
-    cy.get(`[role="listbox"] .q-item:nth-child(${index})`).click();
-});
-
-Cypress.Commands.add('searchBtnFilterPanel', () => {
-    cy.get(
-        '.q-scrollarea__content > .q-btn--standard > .q-btn__content > .q-icon',
-    ).click();
-});
-
-Cypress.Commands.add('waitRequest', (alias, cb) => {
-    cy.wait(alias).then(cb);
-});

test/cypress/support/index.js

@@ -1,3 +1,18 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your e2e test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
 import './commands';
 
 function randomString(options = { length: 10 }) {

test/cypress/support/unit.js

@@ -1,8 +1,27 @@
+// ***********************************************************
+// This example support/unit.js is processed and
+// loaded automatically before your unit test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
 import './commands';
 
+// Change this if you have a different entrypoint for the main scss.
 import 'src/css/app.scss';
+// Quasar styles
 import 'quasar/src/css/index.sass';
 
+// ICON SETS
+// If you use multiple or different icon-sets then the default, be sure to import them here.
 import 'quasar/dist/icon-set/material-icons.umd.prod';
 import '@quasar/extras/material-icons/material-icons.css';
 
@@ -10,10 +29,18 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-e2e-cy
 import { config } from '@vue/test-utils';
 import { Dialog } from 'quasar';
 
+// Example to import i18n from boot and use as plugin
+// import { i18n } from 'src/boot/i18n';
+
+// You can modify the global config here for all tests or pass in the configuration per test
+// For example use the actual i18n instance or mock it
+// config.global.plugins.push(i18n);
 config.global.mocks = {
     $t: () => '',
 };
 
+// Overwrite the transition and transition-group stubs which are stubbed by test-utils by default.
+// We do want transitions to show when doing visual testing :)
 config.global.stubs = {};
 
 installQuasarPlugin({ plugins: { Dialog } });