@nextsparkjs/theme-default 0.1.0-beta.20 → 0.1.0-beta.21

package/tests/cypress/src/pages/dashboard/DashboardStats.js

@@ -0,0 +1,546 @@
+/**
+ * DashboardStats - Page Object Model Class
+ * 
+ * Encapsula funcionalidad específica de las estadísticas del dashboard
+ * Mapea test cases: DASH_009-016 de dashboard-main.cy.md
+ */
+export class DashboardStats {
+  static selectors = {
+    // Grid principal de estadísticas - selector correcto del dashboard real
+    statsGrid: '.grid.gap-4.md\\:grid-cols-2.lg\\:grid-cols-4',
+    
+    // Tarjetas individuales
+    statCard: '.rounded-lg.border',
+    statTitle: '.text-sm.font-medium',
+    statValue: '.text-2xl.font-bold',
+    statIcon: '.h-4.w-4',
+    statTrend: '.text-xs.text-muted-foreground',
+    
+    // Estadísticas específicas (usando data attributes cuando estén disponibles)
+    accountStatus: '[data-stat="account-status"]',
+    planInfo: '[data-stat="plan"]',
+    teamMembers: '[data-stat="team-members"]', 
+    usage: '[data-stat="usage"]',
+    
+    // Estados de las tarjetas
+    loadingCard: '.animate-pulse',
+    errorCard: '.border-destructive',
+    successCard: '.border-green-500',
+    
+    // Elementos interactivos
+    clickableCard: '.cursor-pointer',
+    cardHover: '.hover\\:shadow-md',
+    
+    // Métricas específicas (usando contenido de texto como fallback)
+    activeStatus: ':contains("Active")',
+    verifiedBadge: ':contains("Verified")',
+    premiumPlan: ':contains("Premium")',
+    memberCount: '[data-metric="member-count"]',
+    usagePercentage: '[data-metric="usage-percentage"]',
+  }
+
+  /**
+   * Valida que las estadísticas están cargadas
+   */
+  validateStatsLoaded() {
+    cy.get(DashboardStats.selectors.statsGrid).should('be.visible')
+    cy.get(DashboardStats.selectors.statCard).should('have.length.at.least', 3)
+    
+    return this
+  }
+
+  /**
+   * Valida estadística de estado de cuenta
+   */
+  validateAccountStatus(expectedStatus = 'Active') {
+    cy.get(DashboardStats.selectors.accountStatus).within(() => {
+      cy.get(DashboardStats.selectors.statTitle).should('contain.text', 'Account Status')
+      cy.get(DashboardStats.selectors.statValue).should('contain.text', expectedStatus)
+      cy.get(DashboardStats.selectors.statIcon).should('be.visible')
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida información del plan
+   */
+  validatePlanInfo(expectedPlan = 'Premium') {
+    cy.get(DashboardStats.selectors.planInfo).within(() => {
+      cy.get(DashboardStats.selectors.statTitle).should('contain.text', 'Plan')
+      cy.get(DashboardStats.selectors.statValue).should('contain.text', expectedPlan)
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida estadística de miembros del equipo
+   */
+  validateTeamMembers(expectedCount) {
+    cy.get(DashboardStats.selectors.teamMembers).within(() => {
+      cy.get(DashboardStats.selectors.statTitle).should('contain.text', 'Team Members')
+      if (expectedCount) {
+        cy.get(DashboardStats.selectors.statValue).should('contain.text', expectedCount)
+      }
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida estadística de uso
+   */
+  validateUsageStats(expectedUsage) {
+    cy.get(DashboardStats.selectors.usage).within(() => {
+      cy.get(DashboardStats.selectors.statTitle).should('contain.text', 'Usage')
+      if (expectedUsage) {
+        cy.get(DashboardStats.selectors.statValue).should('contain.text', expectedUsage)
+      }
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida todos los componentes básicos de una tarjeta de estadística
+   */
+  validateStatCardStructure(cardSelector) {
+    cy.get(cardSelector).within(() => {
+      cy.get(DashboardStats.selectors.statTitle).should('be.visible')
+      cy.get(DashboardStats.selectors.statValue).should('be.visible')
+      cy.get(DashboardStats.selectors.statIcon).should('be.visible')
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida estados de loading en las estadísticas
+   */
+  validateLoadingState() {
+    cy.get(DashboardStats.selectors.loadingCard).should('be.visible')
+    
+    return this
+  }
+
+  /**
+   * Valida que el loading ha terminado
+   */
+  validateLoadingCompleted() {
+    cy.get(DashboardStats.selectors.loadingCard).should('not.exist')
+    cy.get(DashboardStats.selectors.statValue).should('not.be.empty')
+    
+    return this
+  }
+
+  /**
+   * Valida comportamiento de hover en tarjetas
+   */
+  validateHoverEffects() {
+    cy.get(DashboardStats.selectors.statCard).first().trigger('mouseover')
+    cy.get(DashboardStats.selectors.cardHover).should('exist')
+    
+    return this
+  }
+
+  /**
+   * Valida clicks en tarjetas interactivas
+   */
+  validateCardInteractivity() {
+    cy.get(DashboardStats.selectors.clickableCard).first().click()
+    // Verificar que navega o abre modal según el comportamiento esperado
+    
+    return this
+  }
+
+  /**
+   * Valida estadísticas para diferentes roles de usuario
+   */
+  validateStatsForRole(userRole) {
+    this.validateStatsLoaded()
+    
+    if (userRole === 'superadmin') {
+      // Superadmin ve estadísticas adicionales
+      cy.get(DashboardStats.selectors.statsGrid).within(() => {
+        cy.get(DashboardStats.selectors.statCard).should('have.length.at.least', 4)
+      })
+    } else if (userRole === 'member') {
+      // Member ve estadísticas básicas
+      cy.get(DashboardStats.selectors.statsGrid).within(() => {
+        cy.get(DashboardStats.selectors.statCard).should('have.length.at.least', 3)
+      })
+    }
+    
+    return this
+  }
+
+  /**
+   * Valida trends y métricas de cambio
+   */
+  validateTrends() {
+    cy.get(DashboardStats.selectors.statTrend).should('be.visible')
+    
+    // Verificar que los trends muestran información útil
+    cy.get(DashboardStats.selectors.statTrend).each(($trend) => {
+      cy.wrap($trend).should('not.be.empty')
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida estado de error en estadísticas
+   */
+  validateErrorState() {
+    cy.get(DashboardStats.selectors.errorCard).should('be.visible')
+    cy.get(DashboardStats.selectors.errorCard).within(() => {
+      cy.contains('Error loading stats').should('be.visible')
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida actualización de estadísticas en tiempo real
+   */
+  validateRealTimeUpdates() {
+    // Capturar valor inicial
+    cy.get(DashboardStats.selectors.statValue).first().then(($value) => {
+      const initialValue = $value.text()
+      
+      // Simular actualización (esto dependería de la implementación real)
+      cy.wait(1000)
+      
+      // Verificar que puede haber cambiado o permanecido igual
+      cy.get(DashboardStats.selectors.statValue).first().should('exist')
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida comportamiento responsive de las estadísticas
+   */
+  validateResponsiveBehavior() {
+    // Desktop: 4 columnas
+    cy.viewport(1200, 800)
+    cy.get(DashboardStats.selectors.statsGrid)
+      .should('have.class', 'lg:grid-cols-4')
+    
+    // Tablet: 2 columnas  
+    cy.viewport(768, 1024)
+    cy.get(DashboardStats.selectors.statsGrid)
+      .should('have.class', 'sm:grid-cols-2')
+    
+    // Mobile: 1 columna
+    cy.viewport(375, 667)
+    cy.get(DashboardStats.selectors.statsGrid)
+      .should('have.class', 'grid-cols-1')
+    
+    return this
+  }
+
+  /**
+   * Valida accesibilidad de las estadísticas
+   */
+  validateAccessibility() {
+    cy.get(DashboardStats.selectors.statCard).each(($card) => {
+      cy.wrap($card).within(() => {
+        // Verificar que tienen estructura semántica apropiada
+        cy.get(DashboardStats.selectors.statTitle).should('have.attr', 'role')
+          .or('be.focused')
+        
+        // Verificar que los iconos tienen labels apropiados
+        cy.get(DashboardStats.selectors.statIcon).should('have.attr', 'aria-label')
+          .or('have.attr', 'aria-hidden', 'true')
+      })
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida datos mock vs datos reales
+   */
+  validateDataAccuracy() {
+    // Verificar que los valores no son placeholders
+    cy.get(DashboardStats.selectors.statValue).each(($value) => {
+      cy.wrap($value).should('not.contain.text', 'Loading...')
+      cy.wrap($value).should('not.contain.text', '--')
+      cy.wrap($value).should('not.be.empty')
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida colores y temas en las estadísticas
+   */
+  validateThemeSupport() {
+    // Verificar que las tarjetas respetan el tema actual
+    cy.get(DashboardStats.selectors.statCard).should('have.css', 'background-color')
+    
+    // Si hay toggle de tema disponible, probarlo
+    cy.get('[data-cy="topnav-theme-toggle"]').then(($toggle) => {
+      if ($toggle.length > 0) {
+        cy.wrap($toggle).click()
+        cy.get(DashboardStats.selectors.statCard).should('have.css', 'background-color')
+      }
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida exportación de datos de estadísticas
+   */
+  validateDataExport() {
+    // Si hay funcionalidad de export, validarla
+    cy.get('[data-cy="export-stats"]').then(($export) => {
+      if ($export.length > 0) {
+        cy.wrap($export).click()
+        // Verificar descarga o modal de export
+      }
+    })
+    
+    return this
+  }
+
+  /**
+   * Valida badges y indicadores especiales
+   */
+  validateBadges() {
+    cy.get(DashboardStats.selectors.verifiedBadge).should('be.visible')
+    
+    return this
+  }
+
+  /**
+   * Valida métricas numéricas específicas
+   */
+  validateNumericMetrics() {
+    // Verificar que los números son válidos
+    cy.get(DashboardStats.selectors.memberCount).then(($count) => {
+      if ($count.length > 0) {
+        const count = parseInt($count.text())
+        expect(count).to.be.a('number')
+        expect(count).to.be.at.least(0)
+      }
+    })
+    
+    cy.get(DashboardStats.selectors.usagePercentage).then(($usage) => {
+      if ($usage.length > 0) {
+        const usage = parseInt($usage.text())
+        expect(usage).to.be.a('number')
+        expect(usage).to.be.within(0, 100)
+      }
+    })
+    
+    return this
+  }
+
+  // ========================================
+  // MÉTODOS REQUERIDOS POR LOS TESTS
+  // ========================================
+
+  /**
+   * Valida que las estadísticas se actualizaron
+   */
+  validateUpdatedStats() {
+    cy.get(DashboardStats.selectors.container).should('be.visible')
+    cy.get(DashboardStats.selectors.loadingIndicator).should('not.exist')
+    cy.get(DashboardStats.selectors.memberCount).should('be.visible')
+    cy.get(DashboardStats.selectors.taskCompletedCount).should('be.visible')
+    cy.get(DashboardStats.selectors.usagePercentage).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida error en estadísticas
+   */
+  validateStatsError() {
+    cy.get(DashboardStats.selectors.errorCard).should('be.visible')
+    return this
+  }
+
+  // ========================================
+  // MÉTODOS FALTANTES REQUERIDOS POR LOS TESTS
+  // ========================================
+
+  /**
+   * Valida sección de estadísticas
+   */
+  validateStatsSection() {
+    cy.get(DashboardStats.selectors.statsGrid).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida todas las tarjetas de stats
+   */
+  validateAllStatsCards() {
+    cy.get(DashboardStats.selectors.statCard).should('have.length.at.least', 3)
+    return this
+  }
+
+  /**
+   * Valida loading de stats
+   */
+  validateStatsLoading() {
+    cy.get(DashboardStats.selectors.loadingCard).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida datos de stats
+   */
+  validateStatsData() {
+    cy.get(DashboardStats.selectors.statValue).should('not.be.empty')
+    return this
+  }
+
+  /**
+   * Valida tarjeta de total tasks
+   */
+  validateTasksStatCard() {
+    cy.get(DashboardStats.selectors.statCard).first().should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida contador de tasks
+   */
+  validateTasksCount() {
+    cy.get(DashboardStats.selectors.statValue).first().should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida icono de tasks stat
+   */
+  validateTasksStatIcon() {
+    cy.get(DashboardStats.selectors.statIcon).first().should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida link de tasks stat
+   */
+  validateTasksStatLink() {
+    cy.get(DashboardStats.selectors.statCard).first().should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida tarjeta de tasks completadas
+   */
+  validateCompletedTasksCard() {
+    cy.get(DashboardStats.selectors.statCard).eq(1).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida contador de tasks completadas
+   */
+  validateCompletedTasksCount() {
+    cy.get(DashboardStats.selectors.statValue).eq(1).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida porcentaje de tasks completadas
+   */
+  validateCompletedTasksPercentage() {
+    cy.get(DashboardStats.selectors.statBadge).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida tarjeta de tasks pendientes
+   */
+  validatePendingTasksCard() {
+    cy.get(DashboardStats.selectors.statCard).eq(2).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida contador de tasks pendientes
+   */
+  validatePendingTasksCount() {
+    cy.get(DashboardStats.selectors.statValue).eq(2).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida prioridad de tasks pendientes
+   */
+  validatePendingTasksPriority() {
+    cy.get(DashboardStats.selectors.statBadge).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida tarjeta de productividad
+   */
+  validateProductivityCard() {
+    cy.get(DashboardStats.selectors.statCard).eq(3).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida score de productividad
+   */
+  validateProductivityScore() {
+    cy.get(DashboardStats.selectors.statValue).eq(3).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida trend de productividad
+   */
+  validateProductivityTrend() {
+    cy.get(DashboardStats.selectors.statBadge).should('be.visible')
+    return this
+  }
+
+  /**
+   * Click en tarjeta de tasks stat
+   */
+  clickTasksStatCard() {
+    cy.get(DashboardStats.selectors.statCard).first().click()
+    return this
+  }
+
+  /**
+   * Valida estadísticas iniciales
+   */
+  validateInitialStats() {
+    cy.get(DashboardStats.selectors.statsGrid).should('be.visible')
+    return this
+  }
+
+  /**
+   * Refresca stats
+   */
+  refreshStats() {
+    cy.reload()
+    return this
+  }
+
+  /**
+   * Valida que stats se refrescaron
+   */
+  validateStatsRefreshed() {
+    cy.get(DashboardStats.selectors.statsGrid).should('be.visible')
+    return this
+  }
+
+  /**
+   * Valida mensaje de error específico
+   */
+  validateErrorMessage(message) {
+    cy.get(DashboardStats.selectors.errorCard).should('contain.text', message)
+    return this
+  }
+}

package/tests/cypress/src/pages/dashboard/index.js

@@ -0,0 +1,6 @@
+/**
+ * Dashboard Pages - Page Object Model Classes
+ */
+export { Dashboard } from './Dashboard.js'
+export { DashboardPage } from './DashboardPage.js'
+export { DashboardStats } from './DashboardStats.js'

package/tests/cypress/src/pages/index.js

@@ -0,0 +1,5 @@
+/**
+ * Theme Default Pages - Page Object Model Classes
+ */
+export * from './dashboard/index.js'
+export * from './public/index.js'

package/tests/cypress/src/pages/public/FeaturesPage.js

@@ -0,0 +1,28 @@
+/**
+ * FeaturesPage - Page Object Model Class
+ */
+export class FeaturesPage {
+  static selectors = {
+    container: '.features-page',
+    featuresList: '.features-list',
+    featureItem: '.feature-item',
+    demoButton: '[data-cy="feature-demo"]'
+  }
+
+  validateFeaturesPageLoaded() {
+    cy.get(FeaturesPage.selectors.container).should('be.visible')
+    cy.url().should('include', '/features')
+    return this
+  }
+
+  validateFeaturesList() {
+    cy.get(FeaturesPage.selectors.featuresList).should('be.visible')
+    cy.get(FeaturesPage.selectors.featureItem).should('have.length.at.least', 1)
+    return this
+  }
+
+  clickFeatureDemo() {
+    cy.get(FeaturesPage.selectors.demoButton).first().click()
+    return this
+  }
+}

package/tests/cypress/src/pages/public/LandingPage.js

@@ -0,0 +1,69 @@
+/**
+ * LandingPage - Page Object Model Class
+ * 
+ * Encapsula funcionalidad de la página principal pública
+ * Mapea test cases: PUB_001-008 de public-pages.cy.md
+ */
+export class LandingPage {
+  static selectors = {
+    // Hero section
+    heroSection: '.hero-section',
+    heroTitle: 'h1',
+    heroSubtitle: '.subtitle',
+    ctaButton: '[data-cy="cta-signup"]',
+    
+    // Navigation
+    navbar: '[data-cy="public-navbar"]',
+    loginLink: '[data-cy="nav-login"]',
+    signupLink: '[data-cy="nav-signup"]',
+    
+    // Features section
+    featuresSection: '.features-section',
+    featureCard: '.feature-card',
+    
+    // Footer
+    footer: '[data-cy="public-footer"]',
+    footerLinks: '.footer-links a',
+  }
+
+  visit() {
+    cy.visit('/')
+    return this
+  }
+
+  validateLandingPageLoaded() {
+    cy.get(LandingPage.selectors.heroSection).should('be.visible')
+    cy.get(LandingPage.selectors.heroTitle).should('be.visible')
+    cy.url().should('eq', Cypress.config().baseUrl + '/')
+    return this
+  }
+
+  clickSignupCTA() {
+    cy.get(LandingPage.selectors.ctaButton).click()
+    cy.url().should('include', '/signup')
+    return this
+  }
+
+  clickSignupButton() {
+    // Alias for clickSignupCTA for consistency
+    return this.clickSignupCTA()
+  }
+
+  navigateToLogin() {
+    cy.get(LandingPage.selectors.loginLink).click()
+    cy.url().should('include', '/login')
+    return this
+  }
+
+  validateFeatures() {
+    cy.get(LandingPage.selectors.featuresSection).should('be.visible')
+    cy.get(LandingPage.selectors.featureCard).should('have.length.at.least', 3)
+    return this
+  }
+
+  validateFooter() {
+    cy.get(LandingPage.selectors.footer).should('be.visible')
+    cy.get(LandingPage.selectors.footerLinks).should('have.length.at.least', 1)
+    return this
+  }
+}

package/tests/cypress/src/pages/public/PricingPage.js

@@ -0,0 +1,33 @@
+/**
+ * PricingPage - Page Object Model Class
+ */
+export class PricingPage {
+  static selectors = {
+    container: '.pricing-page',
+    pricingCards: '.pricing-card',
+    selectPlanButton: '[data-cy="select-plan"]',
+    monthlyToggle: '[data-cy="monthly-toggle"]',
+    yearlyToggle: '[data-cy="yearly-toggle"]'
+  }
+
+  validatePricingPageLoaded() {
+    cy.get(PricingPage.selectors.container).should('be.visible')
+    cy.url().should('include', '/pricing')
+    return this
+  }
+
+  validatePricingCards() {
+    cy.get(PricingPage.selectors.pricingCards).should('have.length.at.least', 2)
+    return this
+  }
+
+  selectPlan(planIndex = 0) {
+    cy.get(PricingPage.selectors.selectPlanButton).eq(planIndex).click()
+    return this
+  }
+
+  toggleToYearly() {
+    cy.get(PricingPage.selectors.yearlyToggle).click()
+    return this
+  }
+}

package/tests/cypress/src/pages/public/index.js

@@ -0,0 +1,6 @@
+/**
+ * Public Pages - Page Object Model Classes
+ */
+export { FeaturesPage } from './FeaturesPage.js'
+export { LandingPage } from './LandingPage.js'
+export { PricingPage } from './PricingPage.js'