@nextsparkjs/theme-default 0.1.0-beta.17 → 0.1.0-beta.171

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

@@ -0,0 +1,76 @@
+---
+feature: Dashboard Sidebar UI Selectors Validation
+priority: medium
+tags: [selectors, sidebar, dashboard, ui-validation]
+grepTags: [ui-selectors, dashboard, sidebar, SEL_DBAR_001]
+coverage: 1
+---
+
+# Dashboard Sidebar UI Selectors Validation
+
+> Validates that dashboard sidebar component selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Runs as Phase 12 sub-gate before functional tests.
+
+**IMPORTANT:** Sidebar is only visible on desktop viewports (>= 1024px) when authenticated.
+
+**Login:** Uses Developer via `loginAsDefaultDeveloper()`.
+
+## @test SEL_DBAR_001: Sidebar Structure
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** sidebar, structure, desktop
+- **Grep:** `@ui-selectors` `@dashboard` `@sidebar` `@SEL_DBAR_001`
+- **Status:** Active (4 passing, 1 skipped)
+
+```gherkin:en
+Scenario: Dashboard sidebar has required structure selectors
+
+Given I am logged in as a developer user
+And I am viewing the dashboard on desktop viewport
+Then I should find the sidebar container
+And I should find the sidebar header
+And I should find the sidebar logo
+And I should find the sidebar content
+And I should find the sidebar footer (not implemented in component)
+```
+
+```gherkin:es
+Scenario: Sidebar del dashboard tiene selectores de estructura requeridos
+
+Given estoy logueado como usuario developer
+And estoy viendo el dashboard en viewport desktop
+Then deberia encontrar el contenedor del sidebar
+And deberia encontrar el header del sidebar
+And deberia encontrar el logo del sidebar
+And deberia encontrar el contenido del sidebar
+And deberia encontrar el footer del sidebar (no implementado en componente)
+```
+
+### Expected Results
+| Selector Path | POM Accessor | data-cy Value | Status |
+|---------------|--------------|---------------|--------|
+| dashboard.sidebar.container | dashboard.selectors.sidebarContainer | sidebar-main | Implemented |
+| dashboard.sidebar.header | dashboard.selectors.sidebarHeader | sidebar-header | Implemented |
+| dashboard.sidebar.logo | dashboard.selectors.sidebarLogo | sidebar-logo | Implemented |
+| dashboard.sidebar.content | dashboard.selectors.sidebarContent | sidebar-content | Implemented |
+| dashboard.sidebar.footer | dashboard.selectors.sidebarFooter | sidebar-footer | **NOT IMPLEMENTED** |
+
+### Notes
+- The sidebar footer selector is not currently implemented in Sidebar.tsx component
+- Sidebar is only visible on desktop viewports when authenticated
+- Component file: `packages/core/src/components/dashboard/Sidebar.tsx`
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| Sidebar | `packages/core/src/components/dashboard/Sidebar.tsx` | sidebar-main, sidebar-header, sidebar-logo, sidebar-content |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| DashboardPOM | `themes/default/tests/cypress/src/features/DashboardPOM.ts` | Sidebar selectors and methods |

package/tests/cypress/e2e/_utils/selectors/dashboard-sidebar.cy.ts

@@ -0,0 +1,68 @@
+/**
+ * UI Selectors Validation: Dashboard Sidebar
+ *
+ * This test validates that dashboard sidebar selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DashboardPOM sidebar selectors work correctly
+ * - Ensure all dashboard.sidebar.* selectors are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to dashboard (requires login)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * Test IDs:
+ * - SEL_DBAR_001: Sidebar Structure (4 selectors)
+ *
+ * Component: Sidebar.tsx
+ * Selectors:
+ * - dashboard.sidebar.container → 'sidebar-main'
+ * - dashboard.sidebar.header → 'sidebar-header'
+ * - dashboard.sidebar.logo → 'sidebar-logo'
+ * - dashboard.sidebar.content → 'sidebar-content'
+ * - dashboard.sidebar.footer → 'sidebar-footer' (not implemented in component)
+ *
+ * NOTE: Sidebar is only visible on desktop viewports when authenticated.
+ */
+
+import { DashboardPOM } from '../../../src/features/DashboardPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
+
+describe('Dashboard Sidebar Selectors Validation', { tags: ['@ui-selectors', '@dashboard', '@sidebar'] }, () => {
+  const dashboard = DashboardPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEL_DBAR_001: SIDEBAR STRUCTURE (4 selectors)
+  // ============================================
+  describe('SEL_DBAR_001: Sidebar Structure', { tags: '@SEL_DBAR_001' }, () => {
+    it('should find sidebar container', () => {
+      cy.get(dashboard.selectors.sidebarContainer).should('exist')
+    })
+
+    it('should find sidebar header', () => {
+      cy.get(dashboard.selectors.sidebarHeader).should('exist')
+    })
+
+    it('should find sidebar logo', () => {
+      cy.get(dashboard.selectors.sidebarLogo).should('exist')
+    })
+
+    it('should find sidebar content', () => {
+      cy.get(dashboard.selectors.sidebarContent).should('exist')
+    })
+
+    // Not implemented in Sidebar.tsx component
+    it.skip('should find sidebar footer (not implemented in component)', () => {
+      cy.get(dashboard.selectors.sidebarFooter).should('exist')
+    })
+  })
+})

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

@@ -0,0 +1,326 @@
+---
+feature: Dashboard Topnav UI Selectors Validation
+priority: high
+tags: [selectors, topnav, dashboard, ui-validation]
+grepTags: [ui-selectors, dashboard, topnav, SEL_TNAV_001, SEL_TNAV_002, SEL_TNAV_003, SEL_TNAV_004, SEL_TNAV_005, SEL_TNAV_006, SEL_TNAV_007]
+coverage: 7
+---
+
+# 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`.
+
+**Login:** Uses Developer via `loginAsDefaultDeveloper()`.
+
+## @test SEL_TNAV_001: Topnav Structure
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** topnav, structure, desktop
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_001`
+- **Status:** Active (3 passing, 0 skipped)
+
+```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 container
+And I should find the topnav actions container
+And I should find the topnav search container
+```
+
+```gherkin:es
+Scenario: Topnav del dashboard tiene estructura completa
+
+Given estoy logueado como usuario developer
+And navego al dashboard
+Then deberia encontrar el contenedor del topnav
+And deberia encontrar el contenedor de acciones del topnav
+And deberia encontrar el contenedor de busqueda del topnav
+```
+
+### Expected Results
+| Selector Path | POM Accessor | data-cy Value | Status |
+|---------------|--------------|---------------|--------|
+| dashboard.topnav.container | dashboard.selectors.topnavContainer | topnav-header | Implemented |
+| dashboard.topnav.actions | dashboard.selectors.topnavActions | topnav-actions | Implemented |
+| dashboard.topnav.searchContainer | dashboard.selectors.topnavSearchContainer | topnav-search-section | Implemented |
+
+---
+
+## @test SEL_TNAV_002: Topnav Actions
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** topnav, actions, buttons
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_002`
+- **Status:** Active (4 passing, 0 skipped)
+
+```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 trigger
+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 trigger de notificaciones
+And deberia encontrar el boton de ayuda
+And deberia encontrar el boton de cambio de tema
+```
+
+### Expected Results
+| Selector Path | POM Accessor | data-cy Value | Status |
+|---------------|--------------|---------------|--------|
+| dashboard.topnav.sidebarToggle | dashboard.selectors.topnavSidebarToggle | topnav-sidebar-toggle | Implemented |
+| dashboard.topnav.notificationsTrigger | dashboard.selectors.topnavNotificationsTrigger | topnav-notifications | Implemented |
+| dashboard.topnav.help | dashboard.selectors.topnavHelp | topnav-help | Implemented |
+| dashboard.topnav.themeToggle | dashboard.selectors.topnavThemeToggle | topnav-theme-toggle | Implemented |
+
+---
+
+## @test SEL_TNAV_003: Topnav Admin Links
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** topnav, admin, superadmin, devtools
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_003`
+- **Status:** Active (2 passing, 0 skipped)
+
+```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
+| Selector Path | POM Accessor | data-cy Value | Status |
+|---------------|--------------|---------------|--------|
+| dashboard.topnav.superadmin | dashboard.selectors.topnavSuperadmin | topnav-superadmin | Implemented |
+| dashboard.topnav.devtools | dashboard.selectors.topnavDevtools | topnav-devtools | Implemented |
+
+### Notes
+- Superadmin link: `superadminAccess.enabled && (isSuperAdmin || (isDeveloper && showToDevelopers))`
+- Devtools link: `devtoolsAccess.enabled && isDeveloper`
+
+---
+
+## @test SEL_TNAV_004: User Menu
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** topnav, user-menu, dropdown
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_004`
+- **Status:** Active (5 passing, 0 skipped)
+
+```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 content
+And I should find the profile menu item (user)
+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 contenido del menu de usuario
+And deberia encontrar el item de menu de perfil (user)
+And deberia encontrar el item de menu de configuracion
+And deberia encontrar la accion de cerrar sesion
+```
+
+### Expected Results
+| Selector Path | POM Accessor | data-cy Value | Status |
+|---------------|--------------|---------------|--------|
+| dashboard.topnav.userMenuTrigger | dashboard.selectors.topnavUserMenuTrigger | topnav-user-menu-trigger | Implemented |
+| dashboard.topnav.userMenuContent | dashboard.selectors.topnavUserMenuContent | topnav-user-menu | Implemented |
+| dashboard.topnav.userMenuItem(item) | dashboard.selectors.topnavUserMenuItem('user') | topnav-menu-item-user | Implemented |
+| dashboard.topnav.userMenuItem(item) | dashboard.selectors.topnavUserMenuItem('settings') | topnav-menu-item-settings | Implemented |
+| dashboard.topnav.userMenuAction(action) | dashboard.selectors.topnavUserMenuAction('signOut') | topnav-menu-action-signOut | Implemented |
+
+---
+
+## @test SEL_TNAV_005: Quick Create
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** topnav, quick-create, dropdown
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_005`
+- **Status:** Skipped (3 tests) - requires entity with create permission
+
+```gherkin:en
+Scenario: Quick create dropdown shows entity options
+
+Given I am logged in as a user with create permissions
+And I navigate to the dashboard
+Then I should find the quick create trigger
+When I click on the quick create trigger
+Then I should see the quick create content
+And I should find quick create links for entities (e.g., customers)
+```
+
+```gherkin:es
+Scenario: Dropdown de creacion rapida muestra opciones de entidad
+
+Given estoy logueado como usuario con permisos de crear
+And navego al dashboard
+Then deberia encontrar el trigger de creacion rapida
+When hago click en el trigger de creacion rapida
+Then deberia ver el contenido de creacion rapida
+And deberia encontrar links de creacion rapida para entidades (ej. customers)
+```
+
+### Expected Results
+| Selector Path | POM Accessor | data-cy Value | Status |
+|---------------|--------------|---------------|--------|
+| dashboard.topnav.quickCreateTrigger | dashboard.selectors.topnavQuickCreateTrigger | topnav-quick-create-trigger | **Skipped** |
+| dashboard.topnav.quickCreateContent | dashboard.selectors.topnavQuickCreateContent | topnav-quick-create-content | **Skipped** |
+| dashboard.topnav.quickCreateLink(entity) | dashboard.selectors.topnavQuickCreateLink('customers') | topnav-quick-create-customers | **Skipped** |
+
+### Notes
+- Component renders null if user has no create permissions on any entity
+- Developer role may not have quickCreate entities configured
+- Tests skipped because they require entity with create permission
+
+---
+
+## @test SEL_TNAV_006: Loading State
+
+### Metadata
+- **Priority:** Low
+- **Type:** Selector Validation
+- **Tags:** topnav, loading, skeleton
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_006`
+- **Status:** Skipped (1 test) - 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
+| Selector Path | POM Accessor | data-cy Value | Status |
+|---------------|--------------|---------------|--------|
+| dashboard.topnav.userLoading | dashboard.selectors.topnavUserLoading | topnav-user-loading | **Skipped** |
+
+### Notes
+- This transient state is only visible during auth loading
+- Difficult to test reliably in normal flow
+
+---
+
+## @test SEL_TNAV_007: Settings Menu
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** topnav, settings-menu, dropdown
+- **Grep:** `@ui-selectors` `@dashboard` `@topnav` `@SEL_TNAV_007`
+- **Status:** Active (3 passing, 0 skipped)
+
+```gherkin:en
+Scenario: Settings menu opens and shows links
+
+Given I am logged in as a developer user
+And the settings menu is enabled in theme config
+And I navigate to the dashboard
+Then I should find the settings menu trigger
+When I click on the settings menu trigger
+Then I should see the settings menu content
+And I should find settings menu links (e.g., patterns)
+```
+
+```gherkin:es
+Scenario: Menu de configuracion se abre y muestra links
+
+Given estoy logueado como usuario developer
+And el menu de configuracion esta habilitado en la config del tema
+And navego al dashboard
+Then deberia encontrar el trigger del menu de configuracion
+When hago click en el trigger del menu de configuracion
+Then deberia ver el contenido del menu de configuracion
+And deberia encontrar links del menu de configuracion (ej. patrones)
+```
+
+### Expected Results
+| Test ID | Selector Path | POM Accessor | data-cy Value | Status |
+|---------|---------------|--------------|---------------|--------|
+| SEL_TNAV_007_01 | dashboard.topnav.settingsMenu.trigger | dashboard.selectors.topnavSettingsMenuTrigger | topnav-settings-menu-trigger | Implemented |
+| SEL_TNAV_007_02 | dashboard.topnav.settingsMenu.content | dashboard.selectors.topnavSettingsMenuContent | topnav-settings-menu | Implemented |
+| SEL_TNAV_007_03 | dashboard.topnav.settingsMenu.link(index) | dashboard.selectors.topnavSettingsMenuLink(0) | topnav-settings-link-0 | Implemented |
+
+### Notes
+- Settings menu must be enabled in theme config (TOPBAR_CONFIG.settingsMenu)
+- Links are dynamically generated from config
+- Common links include: Patterns
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| Topnav | `packages/core/src/components/dashboard/Topnav.tsx` | topnav-header, topnav-actions, topnav-search-section |
+| TopnavActions | `packages/core/src/components/dashboard/TopnavActions.tsx` | topnav-sidebar-toggle, topnav-notifications, topnav-help, topnav-theme-toggle |
+| TopnavUserMenu | `packages/core/src/components/dashboard/TopnavUserMenu.tsx` | topnav-user-menu-trigger, topnav-user-menu, topnav-menu-item-*, topnav-menu-action-* |
+| TopnavQuickCreate | `packages/core/src/components/dashboard/TopnavQuickCreate.tsx` | topnav-quick-create-trigger, topnav-quick-create-content, topnav-quick-create-* |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| DashboardPOM | `themes/default/tests/cypress/src/features/DashboardPOM.ts` | Topnav selectors and methods |

package/tests/cypress/e2e/_utils/selectors/dashboard-topnav.cy.ts

@@ -0,0 +1,177 @@
+/**
+ * UI Selectors Validation: Dashboard Topnav
+ *
+ * This test validates that dashboard topnav selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DashboardPOM topnav selectors work correctly
+ * - Ensure all dashboard.topnav.* selectors are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to dashboard (requires login)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * 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_005: Quick Create (3 selectors)
+ * - SEL_TNAV_006: Loading State (1 skipped - transient state)
+ * - SEL_TNAV_007: Settings Menu (3 selectors)
+ *
+ * NOTE: Public navbar tests (logo, signin, signup) are in public.cy.ts
+ */
+
+import { DashboardPOM } from '../../../src/features/DashboardPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
+
+describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors', '@dashboard', '@topnav'] }, () => {
+  const dashboard = DashboardPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEL_TNAV_001: TOPNAV STRUCTURE (3 selectors)
+  // NOTE: Logo test moved to public.cy.ts (only visible when not logged in)
+  // ============================================
+  describe('SEL_TNAV_001: Topnav Structure', { tags: '@SEL_TNAV_001' }, () => {
+    it('should find topnav container', () => {
+      cy.get(dashboard.selectors.topnavContainer).should('exist')
+    })
+
+    it('should find topnav actions container', () => {
+      cy.get(dashboard.selectors.topnavActions).should('exist')
+    })
+
+    it('should find topnav search container', () => {
+      cy.get(dashboard.selectors.topnavSearchContainer).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_TNAV_002: TOPNAV ACTIONS (4 selectors)
+  // ============================================
+  describe('SEL_TNAV_002: Topnav Actions', { tags: '@SEL_TNAV_002' }, () => {
+    it('should find sidebar toggle button', () => {
+      cy.get(dashboard.selectors.topnavSidebarToggle).should('exist')
+    })
+
+    it('should find notifications trigger', () => {
+      cy.get(dashboard.selectors.topnavNotificationsTrigger).should('exist')
+    })
+
+    it('should find help button', () => {
+      cy.get(dashboard.selectors.topnavHelp).should('exist')
+    })
+
+    it('should find theme toggle button', () => {
+      cy.get(dashboard.selectors.topnavThemeToggle).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_TNAV_003: TOPNAV ADMIN LINKS (2 selectors)
+  // NOTE: Developer user has access (showToDevelopers: true by default)
+  // ============================================
+  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('should find devtools link (developer role)', () => {
+      // Config: devtoolsAccess.enabled && isDeveloper
+      cy.get(dashboard.selectors.topnavDevtools).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_TNAV_004: USER MENU (4+ selectors)
+  // ============================================
+  describe('SEL_TNAV_004: User Menu', { tags: '@SEL_TNAV_004' }, () => {
+    it('should find user menu trigger', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).should('exist')
+    })
+
+    it('should find user menu content when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavUserMenuContent).should('be.visible')
+    })
+
+    it('should find profile menu item when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavUserMenuItem('user')).should('exist')
+    })
+
+    it('should find settings menu item when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavUserMenuItem('settings')).should('exist')
+    })
+
+    it('should find signOut action when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      // Action is 'signOut' per dashboard.config.ts
+      cy.get(dashboard.selectors.topnavUserMenuAction('signOut')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_TNAV_005: QUICK CREATE (3 selectors)
+  // NOTE: Component renders null if user has no create permissions on any entity.
+  // Developer role may not have quickCreate entities configured.
+  // ============================================
+  describe('SEL_TNAV_005: Quick Create', { tags: '@SEL_TNAV_005' }, () => {
+    it.skip('should find quick create trigger (requires entity with create permission)', () => {
+      cy.get(dashboard.selectors.topnavQuickCreateTrigger).should('exist')
+    })
+
+    it.skip('should find quick create content when opened (requires entity with create permission)', () => {
+      cy.get(dashboard.selectors.topnavQuickCreateTrigger).click()
+      cy.get(dashboard.selectors.topnavQuickCreateContent).should('be.visible')
+    })
+
+    it.skip('should find quick create link for entity when opened (requires entity with create permission)', () => {
+      cy.get(dashboard.selectors.topnavQuickCreateTrigger).click()
+      // Test with 'customers' entity (common in default theme)
+      cy.get(dashboard.selectors.topnavQuickCreateLink('customers')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_TNAV_006: LOADING STATE SELECTOR (1 selector)
+  // NOTE: Only visible during auth loading - transient state
+  // ============================================
+  describe('SEL_TNAV_006: Loading State', { tags: '@SEL_TNAV_006' }, () => {
+    it.skip('SEL_TNAV_006_01: should find user loading state (only visible during auth loading)', { tags: '@SEL_TNAV_006_01' }, () => {
+      cy.get(dashboard.selectors.topnavUserLoading).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_TNAV_007: SETTINGS MENU (3 selectors)
+  // NOTE: settingsMenu must be enabled in theme config
+  // ============================================
+  describe('SEL_TNAV_007: Settings Menu', { tags: '@SEL_TNAV_007' }, () => {
+    it('SEL_TNAV_007_01: should find settings menu trigger', { tags: '@SEL_TNAV_007_01' }, () => {
+      cy.get(dashboard.selectors.topnavSettingsMenuTrigger).should('exist')
+    })
+
+    it('SEL_TNAV_007_02: should find settings menu content when opened', { tags: '@SEL_TNAV_007_02' }, () => {
+      cy.get(dashboard.selectors.topnavSettingsMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavSettingsMenuContent).should('be.visible')
+    })
+
+    it('SEL_TNAV_007_03: should find settings menu link when opened', { tags: '@SEL_TNAV_007_03' }, () => {
+      cy.get(dashboard.selectors.topnavSettingsMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavSettingsMenuLink(0)).should('exist')
+    })
+  })
+})