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

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

package/tests/cypress/e2e/_utils/selectors/devtools.cy.ts

@@ -0,0 +1,273 @@
+/**
+ * UI Selectors Validation: DevTools (DevTools)
+ *
+ * This test validates that devtools selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DevtoolsPOM selectors work correctly
+ * - Ensure all dev.* selectors are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to /devtools pages (requires developer role)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * Test IDs:
+ * - SEL_DEVT_001: Navigation Structure
+ * - SEL_DEVT_002: Home Page
+ * - SEL_DEVT_003: Style Gallery Page
+ * - SEL_DEVT_004: Config Viewer Page
+ * - SEL_DEVT_005: Test Cases Page
+ *
+ * IMPORTANT: DevTools is only accessible to users with 'developer' app role.
+ */
+
+import { DevtoolsPOM } from '../../../src/features/DevtoolsPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
+
+describe('DevTools Selectors Validation', { tags: ['@ui-selectors', '@devtools'] }, () => {
+  const dev = DevtoolsPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+  })
+
+  // ============================================
+  // SEL_DEVT_001: NAVIGATION STRUCTURE (8 selectors)
+  // ============================================
+  describe('SEL_DEVT_001: Navigation Structure', { tags: '@SEL_DEVT_001' }, () => {
+    beforeEach(() => {
+      cy.visit('/devtools', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools')
+    })
+
+    it('should find sidebar container', () => {
+      cy.get(dev.selectors.sidebar).should('exist')
+    })
+
+    it('should find sidebar collapse toggle', () => {
+      cy.get(dev.selectors.sidebarCollapseToggle).should('exist')
+    })
+
+    it('should find nav home item', () => {
+      cy.get(dev.selectors.navHome).should('exist')
+    })
+
+    it('should find nav style gallery item', () => {
+      cy.get(dev.selectors.navStyleGallery).should('exist')
+    })
+
+    it('should find nav test cases item', () => {
+      cy.get(dev.selectors.navTestCases).should('exist')
+    })
+
+    it('should find nav config item', () => {
+      cy.get(dev.selectors.navConfig).should('exist')
+    })
+
+    it('should find exit to dashboard link', () => {
+      cy.get(dev.selectors.exitToDashboard).should('exist')
+    })
+
+    it('should find go to admin link', () => {
+      cy.get(dev.selectors.goToAdmin).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DEVT_002: HOME PAGE (4 selectors)
+  // ============================================
+  describe('SEL_DEVT_002: Home Page', { tags: '@SEL_DEVT_002' }, () => {
+    beforeEach(() => {
+      cy.visit('/devtools', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools')
+    })
+
+    it('should find home page container', () => {
+      cy.get(dev.selectors.homePage).should('exist')
+    })
+
+    it('should find style gallery quick link', () => {
+      cy.get(dev.selectors.homeStyleLink).should('exist')
+    })
+
+    it('should find tests quick link', () => {
+      cy.get(dev.selectors.homeTestsLink).should('exist')
+    })
+
+    it('should find config quick link', () => {
+      cy.get(dev.selectors.homeConfigLink).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DEVT_003: STYLE GALLERY PAGE (8 selectors)
+  // ============================================
+  describe('SEL_DEVT_003: Style Gallery Page', { tags: '@SEL_DEVT_003' }, () => {
+    beforeEach(() => {
+      cy.visit('/devtools/style', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools/style')
+    })
+
+    it('should find style page container', () => {
+      cy.get(dev.selectors.stylePage).should('exist')
+    })
+
+    it('should find components tab', () => {
+      cy.get(dev.selectors.styleTabComponents).should('exist')
+    })
+
+    it('should find field types tab', () => {
+      cy.get(dev.selectors.styleTabFieldTypes).should('exist')
+    })
+
+    it('should find theme tab', () => {
+      cy.get(dev.selectors.styleTabTheme).should('exist')
+    })
+
+    it('should find guidelines tab', () => {
+      cy.get(dev.selectors.styleTabGuidelines).should('exist')
+    })
+
+    it('should find component gallery (default tab content)', () => {
+      cy.get(dev.selectors.styleComponentGallery).should('exist')
+    })
+
+    it('should find field types content when tab clicked', () => {
+      cy.get(dev.selectors.styleTabFieldTypes).click()
+      cy.get(dev.selectors.styleFieldTypes).should('exist')
+    })
+
+    it('should find theme preview when tab clicked', () => {
+      cy.get(dev.selectors.styleTabTheme).click()
+      cy.get(dev.selectors.styleThemePreview).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DEVT_004: CONFIG VIEWER PAGE (8 selectors)
+  // ============================================
+  describe('SEL_DEVT_004: Config Viewer Page', { tags: '@SEL_DEVT_004' }, () => {
+    beforeEach(() => {
+      cy.visit('/devtools/config', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools/config')
+    })
+
+    it('should find config page container', () => {
+      cy.get(dev.selectors.configPage).should('exist')
+    })
+
+    it('should find config viewer container', () => {
+      cy.get(dev.selectors.configViewer).should('exist')
+    })
+
+    it('should find theme tab', () => {
+      cy.get(dev.selectors.configTabTheme).should('exist')
+    })
+
+    it('should find entities tab', () => {
+      cy.get(dev.selectors.configTabEntities).should('exist')
+    })
+
+    it('should find theme content (default tab)', () => {
+      cy.get(dev.selectors.configThemeContent).should('exist')
+    })
+
+    it('should find entities content when tab clicked', () => {
+      cy.get(dev.selectors.configTabEntities).click()
+      cy.get(dev.selectors.configEntitiesContent).should('exist')
+    })
+
+    it('should find copy theme button', () => {
+      cy.get(dev.selectors.configCopyTheme).should('exist')
+    })
+
+    it('should find copy entities button when on entities tab', () => {
+      cy.get(dev.selectors.configTabEntities).click()
+      // Wait for entities to load before checking button
+      cy.get(dev.selectors.configEntitiesContent, { timeout: 10000 }).should('exist')
+      cy.get(dev.selectors.configCopyEntities).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DEVT_005: TEST CASES PAGE (3 selectors)
+  // NOTE: Tests page components may not implement all data-cy selectors
+  // ============================================
+  describe('SEL_DEVT_005: Test Cases Page', { tags: '@SEL_DEVT_005' }, () => {
+    beforeEach(() => {
+      cy.visit('/devtools/tests', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools/tests')
+    })
+
+    it('should find tests page container', () => {
+      cy.get(dev.selectors.testsPage).should('exist')
+    })
+
+    it('should find tests viewer container', () => {
+      cy.get(dev.selectors.testsViewer).should('exist')
+    })
+
+    it('should find tests tree', () => {
+      cy.get(dev.selectors.testsTree).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_DEVT_006: TEST COVERAGE DASHBOARD (9 selectors)
+  // ============================================
+  describe('SEL_DEVT_006: Test Coverage Dashboard', { tags: '@SEL_DEVT_006' }, () => {
+    beforeEach(() => {
+      cy.visit('/devtools/tests', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools/tests')
+    })
+
+    it('should find dashboard container (no file selected)', () => {
+      cy.get(dev.selectors.testsDashboard).should('exist')
+    })
+
+    it('should find dashboard stats container', () => {
+      cy.get(dev.selectors.testsDashboardStats).should('exist')
+    })
+
+    it('should find features stat card', () => {
+      cy.get(dev.selectors.testsDashboardStatFeatures).should('exist')
+    })
+
+    it('should find flows stat card', () => {
+      cy.get(dev.selectors.testsDashboardStatFlows).should('exist')
+    })
+
+    it('should find files stat card', () => {
+      cy.get(dev.selectors.testsDashboardStatFiles).should('exist')
+    })
+
+    it('should find tags stat card', () => {
+      cy.get(dev.selectors.testsDashboardStatTags).should('exist')
+    })
+
+    it('should find coverage gaps container', () => {
+      cy.get(dev.selectors.testsDashboardGaps).should('exist')
+    })
+
+    it('should find dashboard button when file selected', () => {
+      // First expand a folder to reveal files
+      cy.get(dev.selectors.testsTree).find('[data-cy*="folder"]').first().click()
+      // Then select a file
+      cy.get(dev.selectors.testsTree).find('[data-cy*="file"]').first().click()
+      cy.get(dev.selectors.testsDashboardButton).should('exist')
+    })
+
+    it('should return to dashboard when button clicked', () => {
+      // Expand folder and select a file
+      cy.get(dev.selectors.testsTree).find('[data-cy*="folder"]').first().click()
+      cy.get(dev.selectors.testsTree).find('[data-cy*="file"]').first().click()
+      // Click dashboard button
+      cy.get(dev.selectors.testsDashboardButton).click()
+      // Dashboard should be visible again
+      cy.get(dev.selectors.testsDashboard).should('exist')
+    })
+  })
+})

package/tests/cypress/e2e/_utils/selectors/global-search.bdd.md

@@ -0,0 +1,115 @@
+---
+feature: Global Search UI Selectors Validation
+priority: medium
+tags: [selectors, search, modal, ui-validation]
+grepTags: [ui-selectors, search, SEL_GSRCH_001, SEL_GSRCH_002, SEL_GSRCH_003]
+coverage: 3
+---
+
+# Global Search UI Selectors Validation
+
+> Validates that global search component selectors exist in the DOM. This is a lightweight test that ONLY checks selector presence, not functionality. Most selectors require the search modal to be open.
+
+## @test SEL_GSRCH_001: Search Trigger
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** search, trigger, button
+- **Grep:** `@ui-selectors` `@SEL_GSRCH_001`
+- **Status:** Skipped - selector not implemented
+
+```gherkin:en
+Scenario: Search trigger button is accessible
+
+Given I am logged in as a valid user
+And I navigate to the dashboard
+Then I should find the search trigger button
+```
+
+```gherkin:es
+Scenario: Boton de trigger de busqueda es accesible
+
+Given estoy logueado como usuario valido
+And navego al dashboard
+Then deberia encontrar el boton de trigger de busqueda
+```
+
+### Expected Results
+- `global-search-trigger` selector exists
+
+---
+
+## @test SEL_GSRCH_002: Search Modal (when open)
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** search, modal, input
+- **Grep:** `@ui-selectors` `@SEL_GSRCH_002`
+- **Status:** Partial - 1 passing, 3 skipped
+
+```gherkin:en
+Scenario: Search modal has required components when opened
+
+Given I am logged in as a valid user
+And I navigate to the dashboard
+When I press Cmd+K to open the search modal
+Then I should find the search modal container
+And I should find the search input
+And I should find the search results container (when query entered)
+And I should find search result items (when results available)
+```
+
+```gherkin:es
+Scenario: Modal de busqueda tiene componentes requeridos cuando esta abierto
+
+Given estoy logueado como usuario valido
+And navego al dashboard
+When presiono Cmd+K para abrir el modal de busqueda
+Then deberia encontrar el contenedor del modal de busqueda
+And deberia encontrar el input de busqueda
+And deberia encontrar el contenedor de resultados (cuando hay query)
+And deberia encontrar items de resultados (cuando hay resultados)
+```
+
+### Expected Results
+- `global-search-modal` skipped - selector not implemented
+- `global-search-input` selector exists (WORKING)
+- `global-search-results` skipped - requires search query
+- `global-search-result` skipped - requires results
+
+---
+
+## @test SEL_GSRCH_003: Search Modal (opened via click)
+
+### Metadata
+- **Priority:** Low
+- **Type:** Selector Validation
+- **Tags:** search, modal, click
+- **Grep:** `@ui-selectors` `@SEL_GSRCH_003`
+- **Status:** Skipped - trigger selector not implemented
+
+```gherkin:en
+Scenario: Search modal opens via click on trigger
+
+Given I am logged in as a valid user
+And I navigate to the dashboard
+When I click on the search trigger button
+Then the search modal should open
+And I should find the search input
+```
+
+```gherkin:es
+Scenario: Modal de busqueda se abre via click en trigger
+
+Given estoy logueado como usuario valido
+And navego al dashboard
+When hago click en el boton de trigger de busqueda
+Then el modal de busqueda deberia abrirse
+And deberia encontrar el input de busqueda
+```
+
+### Expected Results
+- Search modal opens when trigger is clicked
+- `global-search-input` selector exists inside modal