@nextsparkjs/theme-default 0.1.0-beta.1 → 0.1.0-beta.100

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

@@ -0,0 +1,52 @@
+/**
+ * UI Selectors Validation: Dashboard Container
+ *
+ * This test validates that the dashboard container selector exists in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DashboardPOM container selector works correctly
+ * - Ensure dashboard.container selector is implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to dashboard (requires login)
+ * - Assert main container exists in DOM
+ * - Fast execution (< 10 seconds)
+ *
+ * Test IDs:
+ * - SEL_DCNT_001: Dashboard Container Structure (1 selector)
+ *
+ * Component: DashboardShell.tsx
+ * Selector: dashboard.container → 'dashboard-container'
+ */
+
+import { DashboardPOM } from '../../../src/features/DashboardPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
+
+describe('Dashboard Container Selectors Validation', { tags: ['@ui-selectors', '@dashboard', '@container'] }, () => {
+  const dashboard = DashboardPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEL_DCNT_001: DASHBOARD CONTAINER (1 selector)
+  // ============================================
+  describe('SEL_DCNT_001: Dashboard Container', { tags: '@SEL_DCNT_001' }, () => {
+    it('should find dashboard main container', () => {
+      cy.get(dashboard.selectors.container).should('exist')
+    })
+
+    it('should have dashboard container visible', () => {
+      cy.get(dashboard.selectors.container).should('be.visible')
+    })
+
+    it('should have correct data-cy attribute value', () => {
+      cy.get('[data-cy="dashboard-container"]').should('exist')
+    })
+  })
+})

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

@@ -0,0 +1,205 @@
+---
+feature: Dashboard Mobile UI Selectors Validation
+priority: medium
+tags: [selectors, mobile, dashboard, ui-validation]
+grepTags: [ui-selectors, mobile, SEL_DMOB_DOC, SEL_DMOB_001, SEL_DMOB_002, SEL_DMOB_003, SEL_DMOB_004]
+coverage: 5
+---
+
+# Dashboard Mobile UI Selectors Validation
+
+> Validates that dashboard mobile component selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. All tests are skipped because they require mobile viewport (< 1024px).
+
+**IMPORTANT:** Mobile selectors are ONLY visible on small viewports. Desktop tests will not find these elements. To test: add `cy.viewport('iphone-x')` or run with `--config viewportWidth=375,viewportHeight=812`.
+
+## @test SEL_DMOB_DOC: Mobile Testing Documentation
+
+### Metadata
+- **Priority:** Low
+- **Type:** Documentation
+- **Tags:** mobile, documentation
+- **Grep:** `@ui-selectors` `@SEL_DMOB_DOC`
+- **Status:** Active
+
+```gherkin:en
+Scenario: Document all dashboard mobile selectors
+
+Given the mobile selector tests are running
+Then the test should log all mobile selectors
+And document viewport requirements for each section
+```
+
+```gherkin:es
+Scenario: Documentar todos los selectores mobile del dashboard
+
+Given los tests de selectores mobile estan corriendo
+Then el test deberia loguear todos los selectores mobile
+And documentar los requisitos de viewport para cada seccion
+```
+
+### Expected Results
+- Test logs all mobile selectors for reference
+- Documents viewport requirements (<1024px)
+
+---
+
+## @test SEL_DMOB_001: Mobile Topbar Selectors
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** mobile, topbar, navigation
+- **Grep:** `@ui-selectors` `@SEL_DMOB_001`
+- **Status:** Skipped - requires mobile viewport
+
+```gherkin:en
+Scenario: Mobile topbar has all required selectors
+
+Given I am viewing the dashboard on a mobile viewport
+And I am logged in as a valid user
+Then I should find the mobile topbar header
+And I should find the user profile button
+And I should find the notifications button
+And I should find the theme toggle button
+```
+
+```gherkin:es
+Scenario: Topbar mobile tiene todos los selectores requeridos
+
+Given estoy viendo el dashboard en viewport mobile
+And estoy logueado como usuario valido
+Then deberia encontrar el header del topbar mobile
+And deberia encontrar el boton de perfil de usuario
+And deberia encontrar el boton de notificaciones
+And deberia encontrar el boton de cambio de tema
+```
+
+### Expected Results
+- `mobile-topbar-header` selector exists
+- `mobile-topbar-user-profile` selector exists
+- `mobile-topbar-notifications` selector exists
+- `mobile-topbar-theme-toggle` selector exists
+
+### Notes
+All selectors have `lg:hidden` CSS class - only visible on screens < 1024px.
+
+---
+
+## @test SEL_DMOB_002: Mobile Bottom Nav Selectors
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** mobile, bottom-nav, navigation
+- **Grep:** `@ui-selectors` `@SEL_DMOB_002`
+- **Status:** Skipped - requires mobile viewport
+
+```gherkin:en
+Scenario: Mobile bottom navigation has all required selectors
+
+Given I am viewing the dashboard on a mobile viewport
+And I am logged in as a valid user
+Then I should find the bottom navigation bar
+And I should find bottom nav items for key sections
+```
+
+```gherkin:es
+Scenario: Navegacion inferior mobile tiene todos los selectores requeridos
+
+Given estoy viendo el dashboard en viewport mobile
+And estoy logueado como usuario valido
+Then deberia encontrar la barra de navegacion inferior
+And deberia encontrar items de navegacion para secciones clave
+```
+
+### Expected Results
+- `mobile-bottom-nav` selector exists
+- `mobile-bottom-nav-item-{slug}` selectors exist (dashboard, entities, create, more)
+
+### Notes
+Bottom nav replaces sidebar on mobile. Shows 4 main navigation items.
+
+---
+
+## @test SEL_DMOB_003: Mobile More Sheet Selectors
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** mobile, sheet, navigation
+- **Grep:** `@ui-selectors` `@SEL_DMOB_003`
+- **Status:** Skipped - requires mobile viewport
+
+```gherkin:en
+Scenario: Mobile more sheet has all required selectors
+
+Given I am viewing the dashboard on a mobile viewport
+And I am logged in as a valid user
+And I tap on the "More" button in bottom nav
+Then I should find the more sheet content
+And I should find more sheet items for each section
+And I should find the superadmin link (if permitted)
+And I should find the team switcher
+And I should find the signout button
+```
+
+```gherkin:es
+Scenario: Sheet de mas opciones mobile tiene todos los selectores requeridos
+
+Given estoy viendo el dashboard en viewport mobile
+And estoy logueado como usuario valido
+And toco el boton "Mas" en la navegacion inferior
+Then deberia encontrar el contenido del sheet de mas opciones
+And deberia encontrar items del sheet para cada seccion
+And deberia encontrar el link de superadmin (si esta permitido)
+And deberia encontrar el selector de equipo
+And deberia encontrar el boton de cerrar sesion
+```
+
+### Expected Results
+- `mobile-more-sheet-content` selector exists
+- `mobile-more-sheet-item-{slug}` selectors exist
+- `mobile-more-sheet-superadmin` selector exists
+- `mobile-more-sheet-team-switcher` selector exists
+- `mobile-more-sheet-signout` selector exists
+
+### Notes
+More sheet opens from bottom of screen as a sheet/drawer component.
+
+---
+
+## @test SEL_DMOB_004: Mobile Quick Create Selectors
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** mobile, sheet, quick-create
+- **Grep:** `@ui-selectors` `@SEL_DMOB_004`
+- **Status:** Skipped - requires mobile viewport
+
+```gherkin:en
+Scenario: Mobile quick create sheet has all required selectors
+
+Given I am viewing the dashboard on a mobile viewport
+And I am logged in as a valid user
+And I tap on the "Create" button in bottom nav
+Then I should find the quick create sheet content
+And I should find quick create items for each entity type
+```
+
+```gherkin:es
+Scenario: Sheet de creacion rapida mobile tiene todos los selectores requeridos
+
+Given estoy viendo el dashboard en viewport mobile
+And estoy logueado como usuario valido
+And toco el boton "Crear" en la navegacion inferior
+Then deberia encontrar el contenido del sheet de creacion rapida
+And deberia encontrar items de creacion rapida para cada tipo de entidad
+```
+
+### Expected Results
+- `mobile-quick-create-content` selector exists
+- `mobile-quick-create-item-{slug}` selectors exist (tasks, customers, posts, pages, etc.)
+
+### Notes
+Quick create sheet shows available entity types for fast creation on mobile.

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

@@ -0,0 +1,137 @@
+/**
+ * UI Selectors Validation: Dashboard Mobile
+ *
+ * This test validates that dashboard mobile selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DashboardPOM mobile selectors work correctly
+ * - Ensure all dashboard.mobile.* 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)
+ *
+ * Test IDs:
+ * - SEL_DMOB_DOC: Mobile Testing Documentation
+ * - SEL_DMOB_001: Mobile Topbar Selectors (skipped - requires mobile viewport)
+ * - SEL_DMOB_002: Mobile Bottom Nav Selectors (skipped - requires mobile viewport)
+ * - SEL_DMOB_003: Mobile More Sheet Selectors (skipped - requires mobile viewport)
+ * - SEL_DMOB_004: Mobile Quick Create Selectors (skipped - requires mobile viewport)
+ *
+ * IMPORTANT: Mobile selectors are ONLY visible on small viewports (< 1024px).
+ * All tests are marked as skip for desktop testing.
+ * To test mobile, use: cy.viewport('iphone-x') or similar.
+ */
+
+import { DashboardPOM } from '../../../src/features/DashboardPOM'
+
+describe('Dashboard Mobile Selectors Validation', { tags: ['@ui-selectors', '@dashboard', '@mobile'] }, () => {
+  const dashboard = DashboardPOM.create()
+
+  // ============================================
+  // SEL_DMOB_DOC: DOCUMENTATION
+  // ============================================
+  describe('SEL_DMOB_DOC: Mobile Testing Documentation', { tags: '@SEL_DMOB_DOC' }, () => {
+    it('should document how to test mobile selectors', () => {
+      cy.log('=== DASHBOARD MOBILE SELECTORS ===')
+      cy.log('')
+      cy.log('IMPORTANT: Mobile selectors require viewport < 1024px')
+      cy.log('To test: Add cy.viewport("iphone-x") in beforeEach')
+      cy.log('Or run with: --config viewportWidth=375,viewportHeight=812')
+      cy.log('')
+      cy.log('Mobile Topbar (lg:hidden):')
+      cy.log('- mobile-topbar-header, mobile-topbar-user-profile')
+      cy.log('- mobile-topbar-notifications, mobile-topbar-theme-toggle')
+      cy.log('')
+      cy.log('Mobile Bottom Nav:')
+      cy.log('- mobile-bottom-nav, mobile-bottom-nav-item-{slug}')
+      cy.log('')
+      cy.log('Mobile More Sheet:')
+      cy.log('- mobile-more-sheet-content, mobile-more-sheet-item-{slug}')
+      cy.log('- mobile-more-sheet-superadmin, mobile-more-sheet-team-switcher')
+      cy.log('- mobile-more-sheet-signout')
+      cy.log('')
+      cy.log('Mobile Quick Create:')
+      cy.log('- mobile-quick-create-content, mobile-quick-create-item-{slug}')
+      cy.wrap(true).should('be.true')
+    })
+  })
+
+  // ============================================
+  // SEL_DMOB_001: MOBILE TOPBAR (4 selectors)
+  // NOTE: Only visible on mobile viewports
+  // ============================================
+  describe('SEL_DMOB_001: Mobile Topbar Selectors', { tags: '@SEL_DMOB_001' }, () => {
+    it.skip('should find mobile topbar container (requires mobile viewport)', () => {
+      // Requires: cy.viewport('iphone-x')
+      cy.get(dashboard.selectors.mobileTopbarContainer).should('exist')
+    })
+
+    it.skip('should find mobile user profile button (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileTopbarUserProfile).should('exist')
+    })
+
+    it.skip('should find mobile notifications button (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileTopbarNotifications).should('exist')
+    })
+
+    it.skip('should find mobile theme toggle (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileTopbarThemeToggle).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DMOB_002: MOBILE BOTTOM NAV (2 selectors)
+  // ============================================
+  describe('SEL_DMOB_002: Mobile Bottom Nav Selectors', { tags: '@SEL_DMOB_002' }, () => {
+    it.skip('should find mobile bottom nav container (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileBottomNavContainer).should('exist')
+    })
+
+    it.skip('should find mobile bottom nav item (requires mobile viewport)', () => {
+      // Example: dashboard, entities, create, more
+      cy.get(dashboard.selectors.mobileBottomNavItem('dashboard')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DMOB_003: MOBILE MORE SHEET (5 selectors)
+  // ============================================
+  describe('SEL_DMOB_003: Mobile More Sheet Selectors', { tags: '@SEL_DMOB_003' }, () => {
+    it.skip('should find mobile more sheet container (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileMoreSheetContainer).should('exist')
+    })
+
+    it.skip('should find mobile more sheet item (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileMoreSheetItem('settings')).should('exist')
+    })
+
+    it.skip('should find mobile more sheet superadmin link (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileMoreSheetSuperadminLink).should('exist')
+    })
+
+    it.skip('should find mobile more sheet team switcher (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileMoreSheetTeamSwitcher).should('exist')
+    })
+
+    it.skip('should find mobile more sheet signout button (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileMoreSheetSignoutButton).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DMOB_004: MOBILE QUICK CREATE SHEET (2 selectors)
+  // ============================================
+  describe('SEL_DMOB_004: Mobile Quick Create Selectors', { tags: '@SEL_DMOB_004' }, () => {
+    it.skip('should find mobile quick create sheet container (requires mobile viewport)', () => {
+      cy.get(dashboard.selectors.mobileQuickCreateSheetContainer).should('exist')
+    })
+
+    it.skip('should find mobile quick create sheet item (requires mobile viewport)', () => {
+      // Example: tasks, customers, posts, pages
+      cy.get(dashboard.selectors.mobileQuickCreateSheetItem('tasks')).should('exist')
+    })
+  })
+})

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

@@ -0,0 +1,147 @@
+---
+feature: Dashboard Navigation UI Selectors Validation
+priority: high
+tags: [selectors, dashboard, navigation, ui-validation]
+grepTags: [ui-selectors, dashboard, SEL_DASH_001, SEL_DASH_002, SEL_DASH_003]
+coverage: 3
+---
+
+# Dashboard Navigation UI Selectors Validation
+
+> Validates that dashboard navigation 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.
+
+## @test SEL_DASH_001: Navigation Structure
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** navigation, structure, sidebar
+- **Grep:** `@ui-selectors` `@SEL_DASH_001`
+- **Status:** Active
+
+```gherkin:en
+Scenario: Dashboard navigation has complete structure
+
+Given I am logged in as developer
+And I navigate to the dashboard
+Then I should find the main navigation container
+And I should find the dashboard link
+```
+
+```gherkin:es
+Scenario: Navegacion del dashboard tiene estructura completa
+
+Given estoy logueado como developer
+And navego al dashboard
+Then deberia encontrar el contenedor principal de navegacion
+And deberia encontrar el link de dashboard
+```
+
+### Expected Results
+- `dashboard.navigation.main` selector exists (nav-main)
+- `dashboard.navigation.dashboardLink` selector exists (nav-link-dashboard)
+
+---
+
+## @test SEL_DASH_002: Entity Links
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** navigation, entities, links
+- **Grep:** `@ui-selectors` `@SEL_DASH_002`
+- **Status:** Active
+
+```gherkin:en
+Scenario: Dashboard navigation has entity links
+
+Given I am logged in as developer
+And I navigate to the dashboard
+Then I should find the tasks entity link
+And I should find the customers entity link
+And I should find the posts entity link
+And I should find the pages entity link
+```
+
+```gherkin:es
+Scenario: Navegacion del dashboard tiene links de entidades
+
+Given estoy logueado como developer
+And navego al dashboard
+Then deberia encontrar el link de entidad tasks
+And deberia encontrar el link de entidad customers
+And deberia encontrar el link de entidad posts
+And deberia encontrar el link de entidad pages
+```
+
+### Expected Results
+- `dashboard.navigation.entityLink` with slug `tasks` exists (nav-link-entity-tasks)
+- `dashboard.navigation.entityLink` with slug `customers` exists (nav-link-entity-customers)
+- `dashboard.navigation.entityLink` with slug `posts` exists (nav-link-entity-posts)
+- `dashboard.navigation.entityLink` with slug `pages` exists (nav-link-entity-pages)
+
+### Notes
+Entity links are dynamic based on:
+- Entity configuration (enabled, showInMenu)
+- User permissions
+- Theme configuration
+
+---
+
+## @test SEL_DASH_003: Navigation Sections
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** navigation, sections, dynamic
+- **Grep:** `@ui-selectors` `@SEL_DASH_003`
+- **Status:** Skipped - requires customSidebarSections in app.config.ts
+
+```gherkin:en
+Scenario: Dashboard navigation has section structure
+
+Given I am logged in as developer
+And I navigate to the dashboard
+And the theme has custom sidebar sections configured
+Then I should find section containers by ID
+And I should find section labels
+And I should find section items
+```
+
+```gherkin:es
+Scenario: Navegacion del dashboard tiene estructura de secciones
+
+Given estoy logueado como developer
+And navego al dashboard
+And el tema tiene secciones de sidebar personalizadas configuradas
+Then deberia encontrar contenedores de seccion por ID
+And deberia encontrar etiquetas de seccion
+And deberia encontrar items de seccion
+```
+
+### Expected Results (when sections are configured)
+- `dashboard.navigation.section` with ID exists (nav-section-{id})
+- `dashboard.navigation.sectionLabel` with ID exists (nav-section-label-{id})
+- `dashboard.navigation.sectionItem` with IDs exists (nav-section-item-{sectionId}-{itemId})
+
+### Notes
+All tests in this section are skipped because:
+- Requires `customSidebarSections` to be defined in `app.config.ts`
+- **IMPORTANT:** Enabling `customSidebarSections` REPLACES the default entity-based navigation entirely
+- The sidebar will only show items defined in the sections (no automatic entity links)
+- Requires translation keys for each section and item (e.g., `navigation.content`, `navigation.posts`)
+- For themes with custom sections (e.g., LMS themes), enable these tests with the actual section/item IDs
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| DynamicNavigation | `packages/core/src/components/dashboard/navigation/DynamicNavigation.tsx` | nav-main, nav-link-dashboard, nav-link-entity-{slug}, nav-section-{id}, nav-section-label-{id}, nav-section-item-{sectionId}-{itemId} |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| DashboardPOM | `themes/default/tests/cypress/src/features/DashboardPOM.ts` | Navigation selectors and methods |

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

@@ -0,0 +1,114 @@
+/**
+ * UI Selectors Validation: Dashboard Navigation
+ *
+ * This test validates that dashboard navigation selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DashboardPOM navigation selectors work correctly
+ * - Ensure all dashboard.navigation.* 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_DASH_001: Navigation Structure
+ * - SEL_DASH_002: Entity Links
+ * - SEL_DASH_003: Navigation Sections (skipped - requires customSidebarSections which replaces default nav)
+ *
+ * NOTE: Entity links are dynamic based on permissions.
+ * Section selectors require knowing the exact section IDs from theme config.
+ */
+
+import { DashboardPOM } from '../../../src/features/DashboardPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
+
+describe('Dashboard Navigation Selectors Validation', { tags: ['@ui-selectors', '@dashboard', '@navigation'] }, () => {
+  const dashboard = DashboardPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEL_DASH_001: NAVIGATION STRUCTURE
+  // ============================================
+  describe('SEL_DASH_001: Navigation Structure', { tags: '@SEL_DASH_001' }, () => {
+    it('should find nav container', () => {
+      cy.get(dashboard.selectors.navContainer).should('exist')
+    })
+
+    it('should find dashboard link', () => {
+      cy.get(dashboard.selectors.navDashboard).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DASH_002: ENTITY LINKS
+  // ============================================
+  describe('SEL_DASH_002: Entity Links', { tags: '@SEL_DASH_002' }, () => {
+    it('should find tasks entity link', () => {
+      cy.get(dashboard.selectors.navEntity('tasks')).should('exist')
+    })
+
+    it('should find customers entity link', () => {
+      cy.get(dashboard.selectors.navEntity('customers')).should('exist')
+    })
+
+    it('should find posts entity link', () => {
+      cy.get(dashboard.selectors.navEntity('posts')).should('exist')
+    })
+
+    it('should find pages entity link', () => {
+      cy.get(dashboard.selectors.navEntity('pages')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DASH_003: NAVIGATION SECTIONS
+  // ============================================
+  /**
+   * SKIPPED: These tests require `customSidebarSections` in app.config.ts
+   *
+   * IMPORTANT: Enabling `customSidebarSections` REPLACES the default entity-based
+   * navigation entirely. The sidebar will only show what's defined in the sections.
+   *
+   * Requirements to enable these tests:
+   * 1. Add `customSidebarSections` array to app.config.ts
+   * 2. Add all required translation keys (navigation.{sectionId}, navigation.{itemId})
+   * 3. Update tests with the actual section/item IDs from your config
+   *
+   * Example config:
+   * ```
+   * customSidebarSections: [
+   *   {
+   *     id: 'content',
+   *     labelKey: 'navigation.content',
+   *     icon: 'FileText',
+   *     order: 1,
+   *     items: [
+   *       { id: 'posts', labelKey: 'navigation.posts', href: '/dashboard/posts', icon: 'Newspaper' },
+   *     ],
+   *   },
+   * ]
+   * ```
+   */
+  describe('SEL_DASH_003: Navigation Sections', { tags: '@SEL_DASH_003' }, () => {
+    it.skip('should find section by ID (requires customSidebarSections in app.config.ts)', () => {
+      // cy.get(dashboard.selectors.navSection('content')).should('exist')
+    })
+
+    it.skip('should find section label (requires customSidebarSections in app.config.ts)', () => {
+      // cy.get(dashboard.selectors.navSectionLabel('content')).should('exist')
+    })
+
+    it.skip('should find section item (requires customSidebarSections in app.config.ts)', () => {
+      // cy.get(dashboard.selectors.navSectionItem('content', 'posts')).should('exist')
+    })
+  })
+})