@nextsparkjs/theme-default 0.1.0-beta.31 → 0.1.0-beta.35

package/tests/cypress/e2e/_utils/selectors/dashboard-topnav.bdd.md

@@ -0,0 +1,200 @@
+---
+feature: Dashboard Topnav UI Selectors Validation
+priority: high
+tags: [selectors, topnav, dashboard, ui-validation]
+grepTags: [ui-selectors, topnav, SEL_TNAV_001, SEL_TNAV_002, SEL_TNAV_003, SEL_TNAV_004, SEL_TNAV_006]
+coverage: 5
+---
+
+# Dashboard Topnav UI Selectors Validation
+
+> Validates that dashboard topnav component selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Uses `loginAsDefaultDeveloper()` which has access to superadmin and devtools links.
+
+**NOTE:** Public navbar tests (logo, signin, signup) are in `public.cy.ts`.
+
+## @test SEL_TNAV_001: Topnav Structure
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** topnav, structure, desktop
+- **Grep:** `@ui-selectors` `@SEL_TNAV_001`
+- **Status:** Active - 3 tests
+
+```gherkin:en
+Scenario: Dashboard topnav has complete structure
+
+Given I am logged in as a developer user
+And I navigate to the dashboard
+Then I should find the topnav header
+And I should find the topnav actions container
+And I should find the topnav search section
+```
+
+```gherkin:es
+Scenario: Topnav del dashboard tiene estructura completa
+
+Given estoy logueado como usuario developer
+And navego al dashboard
+Then deberia encontrar el header del topnav
+And deberia encontrar el contenedor de acciones del topnav
+And deberia encontrar la seccion de busqueda del topnav
+```
+
+### Expected Results
+- `topnav-header` selector exists
+- `topnav-actions` selector exists
+- `topnav-search-section` selector exists
+
+---
+
+## @test SEL_TNAV_002: Topnav Actions
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** topnav, actions, buttons
+- **Grep:** `@ui-selectors` `@SEL_TNAV_002`
+- **Status:** Active - 4 passing
+
+```gherkin:en
+Scenario: Dashboard topnav has all action buttons
+
+Given I am logged in as a valid user
+And I navigate to the dashboard
+Then I should find the sidebar toggle button
+And I should find the notifications button
+And I should find the help button
+And I should find the theme toggle button
+```
+
+```gherkin:es
+Scenario: Topnav del dashboard tiene todos los botones de accion
+
+Given estoy logueado como usuario valido
+And navego al dashboard
+Then deberia encontrar el boton de toggle del sidebar
+And deberia encontrar el boton de notificaciones
+And deberia encontrar el boton de ayuda
+And deberia encontrar el boton de cambio de tema
+```
+
+### Expected Results
+- `topnav-sidebar-toggle` selector exists
+- `topnav-notifications` selector exists
+- `topnav-help` selector exists
+- `topnav-theme-toggle` selector exists
+
+---
+
+## @test SEL_TNAV_003: Topnav Admin Links
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** topnav, admin, superadmin, devtools
+- **Grep:** `@ui-selectors` `@SEL_TNAV_003`
+- **Status:** Active - 2 tests
+
+```gherkin:en
+Scenario: Topnav shows admin links for developer users
+
+Given I am logged in as a developer user
+And superadminAccess.showToDevelopers is enabled (default: true)
+And devtoolsAccess is enabled (default: true)
+And I navigate to the dashboard
+Then I should find the superadmin link
+And I should find the devtools link
+```
+
+```gherkin:es
+Scenario: Topnav muestra links de admin para usuarios developer
+
+Given estoy logueado como usuario developer
+And superadminAccess.showToDevelopers esta habilitado (default: true)
+And devtoolsAccess esta habilitado (default: true)
+And navego al dashboard
+Then deberia encontrar el link de superadmin
+And deberia encontrar el link de devtools
+```
+
+### Expected Results
+- `topnav-superadmin` selector exists (developer sees with showToDevelopers: true)
+- `topnav-devtools` selector exists (developer has access)
+
+---
+
+## @test SEL_TNAV_004: User Menu
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** topnav, user-menu, dropdown
+- **Grep:** `@ui-selectors` `@SEL_TNAV_004`
+- **Status:** Active - 5 passing
+
+```gherkin:en
+Scenario: User menu opens and shows all items
+
+Given I am logged in as a valid user
+And I navigate to the dashboard
+Then I should find the user menu trigger
+When I click on the user menu trigger
+Then I should see the user menu dropdown
+And I should find the profile menu item
+And I should find the settings menu item
+And I should find the signOut action
+```
+
+```gherkin:es
+Scenario: Menu de usuario se abre y muestra todos los items
+
+Given estoy logueado como usuario valido
+And navego al dashboard
+Then deberia encontrar el trigger del menu de usuario
+When hago click en el trigger del menu de usuario
+Then deberia ver el dropdown del menu de usuario
+And deberia encontrar el item de menu de perfil
+And deberia encontrar el item de menu de configuracion
+And deberia encontrar la accion de cerrar sesion
+```
+
+### Expected Results
+- `topnav-user-menu-trigger` selector exists
+- `topnav-user-menu` visible when opened
+- `topnav-menu-item-user` selector exists
+- `topnav-menu-item-settings` selector exists
+- `topnav-menu-action-signOut` selector exists
+
+---
+
+## @test SEL_TNAV_006: Loading State
+
+### Metadata
+- **Priority:** Low
+- **Type:** Selector Validation
+- **Tags:** topnav, loading, skeleton
+- **Grep:** `@ui-selectors` `@SEL_TNAV_006`
+- **Status:** 1 Skipped - transient state cannot be reliably tested
+
+```gherkin:en
+Scenario: Topnav shows loading state during auth
+
+Given the authentication state is loading
+And I navigate to the dashboard
+Then I should find the user loading state indicator
+```
+
+```gherkin:es
+Scenario: Topnav muestra estado de carga durante autenticacion
+
+Given el estado de autenticacion esta cargando
+And navego al dashboard
+Then deberia encontrar el indicador de estado de carga del usuario
+```
+
+### Expected Results
+- `topnav-user-loading` - only visible during auth loading
+
+### Notes
+This transient state is difficult to test in normal flow.

package/tests/cypress/e2e/{_selectors → _utils/selectors}/dashboard-topnav.cy.ts

@@ -14,35 +14,37 @@
  * - Assert elements exist in DOM (no form submissions)
  * - Fast execution (< 30 seconds per describe block)
  *
- * NOTE: Some selectors require specific states (user menu open, specific roles).
- * signin/signup selectors only visible when NOT logged in.
+ * Test IDs:
+ * - SEL_TNAV_001: Topnav Structure (3 selectors)
+ * - SEL_TNAV_002: Topnav Actions (4 selectors)
+ * - SEL_TNAV_003: Topnav Admin Links (2 selectors - developer has access)
+ * - SEL_TNAV_004: User Menu (5 selectors)
+ * - SEL_TNAV_006: Loading State (1 skipped - transient state)
+ *
+ * NOTE: Public navbar tests (logo, signin, signup) are in public.cy.ts
  */
 
-import { DashboardPOM } from '../../src/features/DashboardPOM'
-import { loginAsDefaultOwner } from '../../src/session-helpers'
+import { DashboardPOM } from '../../../src/features/DashboardPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
 
-describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors', '@topnav'] }, () => {
   const dashboard = DashboardPOM.create()
 
   beforeEach(() => {
-    loginAsDefaultOwner()
+    loginAsDefaultDeveloper()
     cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
     cy.url().should('include', '/dashboard')
   })
 
   // ============================================
-  // TOPNAV STRUCTURE (4 selectors)
+  // SEL_TNAV_001: TOPNAV STRUCTURE (3 selectors)
+  // NOTE: Logo test moved to public.cy.ts (only visible when not logged in)
   // ============================================
-  describe('Topnav Structure', () => {
+  describe('SEL_TNAV_001: Topnav Structure', { tags: '@SEL_TNAV_001' }, () => {
     it('should find topnav header', () => {
       cy.get(dashboard.selectors.topnavHeader).should('exist')
     })
 
-    // NOTE: Logo only visible when NOT logged in
-    it.skip('should find topnav logo (only visible when not logged in)', () => {
-      cy.get(dashboard.selectors.topnavLogo).should('exist')
-    })
-
     it('should find topnav actions container', () => {
       cy.get(dashboard.selectors.topnavActions).should('exist')
     })
@@ -53,9 +55,9 @@ describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors'] }, (
   })
 
   // ============================================
-  // TOPNAV ACTIONS (4 selectors)
+  // SEL_TNAV_002: TOPNAV ACTIONS (4 selectors)
   // ============================================
-  describe('Topnav Actions', () => {
+  describe('SEL_TNAV_002: Topnav Actions', { tags: '@SEL_TNAV_002' }, () => {
     it('should find sidebar toggle button', () => {
       cy.get(dashboard.selectors.topnavSidebarToggle).should('exist')
     })
@@ -74,26 +76,25 @@ describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors'] }, (
   })
 
   // ============================================
-  // TOPNAV ADMIN LINKS (2 selectors)
-  // NOTE: Requires superadmin (sector7) or developer role (devzone)
-  // Default owner does NOT have these roles
+  // SEL_TNAV_003: TOPNAV ADMIN LINKS (2 selectors)
+  // NOTE: Developer user has access (showToDevelopers: true by default)
   // ============================================
-  describe('Topnav Admin Links', () => {
-    it.skip('should find sector7 link (requires superadmin or developer with sector7 enabled)', () => {
-      // Requires: sector7Config?.enabled && (isSuperAdmin || (isDeveloper && sector7Config?.showToDevelopers))
+  describe('SEL_TNAV_003: Topnav Admin Links', { tags: '@SEL_TNAV_003' }, () => {
+    it('should find superadmin link (developer sees with showToDevelopers)', () => {
+      // Config: superadminAccess.enabled && (isSuperAdmin || (isDeveloper && showToDevelopers))
       cy.get(dashboard.selectors.topnavSuperadmin).should('exist')
     })
 
-    it.skip('should find devzone link (requires developer role)', () => {
-      // Requires: devZoneConfig?.enabled && isDeveloper
-      cy.get(dashboard.selectors.topnavDevzone).should('exist')
+    it('should find devtools link (developer role)', () => {
+      // Config: devtoolsAccess.enabled && isDeveloper
+      cy.get(dashboard.selectors.topnavDevtools).should('exist')
     })
   })
 
   // ============================================
-  // USER MENU (4+ selectors)
+  // SEL_TNAV_004: USER MENU (4+ selectors)
   // ============================================
-  describe('User Menu', () => {
+  describe('SEL_TNAV_004: User Menu', { tags: '@SEL_TNAV_004' }, () => {
     it('should find user menu trigger', () => {
       cy.get(dashboard.selectors.topnavUserMenuTrigger).should('exist')
     })
@@ -121,24 +122,10 @@ describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors'] }, (
   })
 
   // ============================================
-  // PUBLIC NAVBAR SELECTORS (2 selectors)
-  // NOTE: Only visible when NOT logged in - skip for logged-in tests
-  // ============================================
-  describe('Public Navbar Selectors', () => {
-    it.skip('should find signin button (only visible when not logged in)', () => {
-      cy.get(dashboard.selectors.topnavSignin).should('exist')
-    })
-
-    it.skip('should find signup button (only visible when not logged in)', () => {
-      cy.get(dashboard.selectors.topnavSignup).should('exist')
-    })
-  })
-
-  // ============================================
-  // LOADING STATE SELECTOR (1 selector)
-  // NOTE: Only visible during auth loading
+  // SEL_TNAV_006: LOADING STATE SELECTOR (1 selector)
+  // NOTE: Only visible during auth loading - transient state
   // ============================================
-  describe('Loading State Selectors', () => {
+  describe('SEL_TNAV_006: Loading State', { tags: '@SEL_TNAV_006' }, () => {
     it.skip('should find user loading state (only visible during auth loading)', () => {
       cy.get(dashboard.selectors.topnavUserLoading).should('exist')
     })

package/tests/cypress/e2e/_utils/selectors/devtools.bdd.md

@@ -0,0 +1,306 @@
+---
+feature: DevTools UI Selectors Validation
+priority: medium
+tags: [selectors, devtools, developer, ui-validation]
+grepTags: [ui-selectors, devtools, SEL_DEVT_001, SEL_DEVT_002, SEL_DEVT_003, SEL_DEVT_004, SEL_DEVT_005, SEL_DEVT_006]
+coverage: 6
+---
+
+# DevTools UI Selectors Validation
+
+> Validates that DevTools (devzone) component selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality.
+
+**IMPORTANT:** DevTools is only accessible to users with 'developer' app role. All tests use `loginAsDefaultDeveloper()`.
+
+## @test SEL_DEVT_001: Navigation Structure
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** devtools, navigation, sidebar
+- **Grep:** `@ui-selectors` `@SEL_DEVT_001`
+- **Status:** Active - 8 tests
+
+```gherkin:en
+Scenario: DevTools navigation has complete structure
+
+Given I am logged in as a developer user
+And I navigate to /devtools
+Then I should find the sidebar container
+And I should find the sidebar collapse toggle
+And I should find the nav home item
+And I should find the nav style gallery item
+And I should find the nav test cases item
+And I should find the nav config item
+And I should find the exit to dashboard link
+And I should find the go to admin link
+```
+
+```gherkin:es
+Scenario: Navegacion de DevTools tiene estructura completa
+
+Given estoy logueado como usuario developer
+And navego a /devtools
+Then deberia encontrar el contenedor del sidebar
+And deberia encontrar el toggle de colapso del sidebar
+And deberia encontrar el item de navegacion home
+And deberia encontrar el item de navegacion style gallery
+And deberia encontrar el item de navegacion test cases
+And deberia encontrar el item de navegacion config
+And deberia encontrar el link de salir al dashboard
+And deberia encontrar el link de ir a admin
+```
+
+### Expected Results
+- `devtools-sidebar` selector exists
+- `devtools-sidebar-collapse` selector exists
+- `devtools-nav-home` selector exists
+- `devtools-nav-style` selector exists
+- `devtools-nav-tests` selector exists
+- `devtools-nav-config` selector exists
+- `devtools-exit-dashboard` selector exists
+- `devtools-go-admin` selector exists
+
+---
+
+## @test SEL_DEVT_002: Home Page
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** devtools, home, quicklinks
+- **Grep:** `@ui-selectors` `@SEL_DEVT_002`
+- **Status:** Active - 4 tests
+
+```gherkin:en
+Scenario: DevTools home page has quick links
+
+Given I am logged in as a developer user
+And I navigate to /devtools
+Then I should find the home page container
+And I should find the style gallery quick link
+And I should find the tests quick link
+And I should find the config quick link
+```
+
+```gherkin:es
+Scenario: Pagina home de DevTools tiene links rapidos
+
+Given estoy logueado como usuario developer
+And navego a /devtools
+Then deberia encontrar el contenedor de la pagina home
+And deberia encontrar el link rapido a style gallery
+And deberia encontrar el link rapido a tests
+And deberia encontrar el link rapido a config
+```
+
+### Expected Results
+- `devtools-home-page` selector exists
+- `devtools-home-style-link` selector exists
+- `devtools-home-tests-link` selector exists
+- `devtools-home-config-link` selector exists
+
+---
+
+## @test SEL_DEVT_003: Style Gallery Page
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** devtools, style, gallery, tabs
+- **Grep:** `@ui-selectors` `@SEL_DEVT_003`
+- **Status:** Active - 8 tests
+
+```gherkin:en
+Scenario: DevTools style gallery has all tabs and content
+
+Given I am logged in as a developer user
+And I navigate to /devtools/style
+Then I should find the style page container
+And I should find the components tab
+And I should find the field types tab
+And I should find the theme tab
+And I should find the guidelines tab
+And I should find the component gallery (default tab)
+When I click the field types tab
+Then I should find the field types content
+When I click the theme tab
+Then I should find the theme preview
+```
+
+```gherkin:es
+Scenario: Style gallery de DevTools tiene todas las tabs y contenido
+
+Given estoy logueado como usuario developer
+And navego a /devtools/style
+Then deberia encontrar el contenedor de la pagina style
+And deberia encontrar la tab de components
+And deberia encontrar la tab de field types
+And deberia encontrar la tab de theme
+And deberia encontrar la tab de guidelines
+And deberia encontrar la galeria de componentes (tab por defecto)
+When hago click en la tab de field types
+Then deberia encontrar el contenido de field types
+When hago click en la tab de theme
+Then deberia encontrar el preview del tema
+```
+
+### Expected Results
+- `devtools-style-page` selector exists
+- `devtools-style-tab-components` selector exists
+- `devtools-style-tab-fieldtypes` selector exists
+- `devtools-style-tab-theme` selector exists
+- `devtools-style-tab-guidelines` selector exists
+- `devtools-style-component-gallery` selector exists
+- `devtools-style-fieldtypes` selector exists (when tab clicked)
+- `devtools-style-theme-preview` selector exists (when tab clicked)
+
+---
+
+## @test SEL_DEVT_004: Config Viewer Page
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** devtools, config, viewer, tabs
+- **Grep:** `@ui-selectors` `@SEL_DEVT_004`
+- **Status:** Active - 8 tests
+
+```gherkin:en
+Scenario: DevTools config viewer has all tabs and actions
+
+Given I am logged in as a developer user
+And I navigate to /devtools/config
+Then I should find the config page container
+And I should find the config viewer container
+And I should find the theme tab
+And I should find the entities tab
+And I should find the theme content (default tab)
+And I should find the copy theme button
+When I click the entities tab
+Then I should find the entities content
+And I should find the copy entities button
+```
+
+```gherkin:es
+Scenario: Config viewer de DevTools tiene todas las tabs y acciones
+
+Given estoy logueado como usuario developer
+And navego a /devtools/config
+Then deberia encontrar el contenedor de la pagina config
+And deberia encontrar el contenedor del config viewer
+And deberia encontrar la tab de theme
+And deberia encontrar la tab de entities
+And deberia encontrar el contenido de theme (tab por defecto)
+And deberia encontrar el boton de copiar theme
+When hago click en la tab de entities
+Then deberia encontrar el contenido de entities
+And deberia encontrar el boton de copiar entities
+```
+
+### Expected Results
+- `devtools-config-page` selector exists
+- `devtools-config-viewer` selector exists
+- `devtools-config-tab-theme` selector exists
+- `devtools-config-tab-entities` selector exists
+- `devtools-config-theme-content` selector exists
+- `devtools-config-copy-theme` selector exists
+- `devtools-config-entities-content` selector exists (when tab clicked)
+- `devtools-config-copy-entities` selector exists (when tab clicked)
+
+---
+
+## @test SEL_DEVT_005: Test Cases Page
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** devtools, tests, viewer
+- **Grep:** `@ui-selectors` `@SEL_DEVT_005`
+- **Status:** Active - 3 tests
+
+```gherkin:en
+Scenario: DevTools test cases page has viewer components
+
+Given I am logged in as a developer user
+And I navigate to /devtools/tests
+Then I should find the tests page container
+And I should find the tests viewer container
+And I should find the tests tree
+```
+
+```gherkin:es
+Scenario: Pagina test cases de DevTools tiene componentes del viewer
+
+Given estoy logueado como usuario developer
+And navego a /devtools/tests
+Then deberia encontrar el contenedor de la pagina tests
+And deberia encontrar el contenedor del tests viewer
+And deberia encontrar el arbol de tests
+```
+
+### Expected Results
+- `devtools-tests-page` selector exists
+- `devtools-tests-viewer` selector exists
+- `devtools-tests-tree` selector exists
+
+### Notes
+Conditional states (loading, empty, error) are not tested in selector validation.
+
+---
+
+## @test SEL_DEVT_006: Test Coverage Dashboard
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** devtools, tests, dashboard, coverage
+- **Grep:** `@ui-selectors` `@SEL_DEVT_006`
+- **Status:** Active - 9 tests
+
+```gherkin:en
+Scenario: DevTools test coverage dashboard has all components
+
+Given I am logged in as a developer user
+And I navigate to /devtools/tests
+Then I should find the dashboard container
+And I should find the dashboard stats container
+And I should find the features stat card
+And I should find the flows stat card
+And I should find the files stat card
+And I should find the tags stat card
+And I should find the coverage gaps container
+When I select a test file from the tree
+Then I should find the dashboard button in sidebar
+When I click the dashboard button
+Then I should see the dashboard again
+```
+
+```gherkin:es
+Scenario: Dashboard de cobertura de DevTools tiene todos los componentes
+
+Given estoy logueado como usuario developer
+And navego a /devtools/tests
+Then deberia encontrar el contenedor del dashboard
+And deberia encontrar el contenedor de estadisticas
+And deberia encontrar la tarjeta de estadisticas de features
+And deberia encontrar la tarjeta de estadisticas de flows
+And deberia encontrar la tarjeta de estadisticas de files
+And deberia encontrar la tarjeta de estadisticas de tags
+And deberia encontrar el contenedor de gaps de cobertura
+When selecciono un archivo de test del arbol
+Then deberia encontrar el boton de dashboard en el sidebar
+When hago click en el boton de dashboard
+Then deberia ver el dashboard nuevamente
+```
+
+### Expected Results
+- `devtools-tests-dashboard` selector exists (when no file selected)
+- `devtools-tests-dashboard-stats` selector exists
+- `devtools-tests-dashboard-stat-features` selector exists
+- `devtools-tests-dashboard-stat-flows` selector exists
+- `devtools-tests-dashboard-stat-files` selector exists
+- `devtools-tests-dashboard-stat-tags` selector exists
+- `devtools-tests-dashboard-gaps` selector exists
+- `devtools-tests-dashboard-button` selector exists (when file selected)
+- Dashboard button returns to dashboard view