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

package/tests/cypress/e2e/_devtools/navigation.bdd.md

@@ -0,0 +1,261 @@
+---
+feature: DevTools Navigation
+priority: high
+tags: [dev-area, navigation, sidebar]
+grepTags: [uat, feat-dev-area, regression]
+coverage: 7
+---
+
+# DevTools Navigation
+
+> Navigation functionality tests within the /devtools area. Validates sidebar navigation items, clickable links, and exit navigation to Dashboard and Admin.
+
+## @test NAV-001: Sidebar navigation works
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** sidebar, navigation, display
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: All sidebar navigation items are displayed
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools home
+Then all navigation items should be visible in sidebar
+And exit links (Dashboard, Admin) should be visible
+```
+
+```gherkin:es
+Scenario: Todos los items de navegacion del sidebar estan visibles
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools home
+Then todos los items de navegacion deberian estar visibles en el sidebar
+And los enlaces de salida (Dashboard, Admin) deberian estar visibles
+```
+
+### Expected Results
+- Home, Style Gallery, Test Cases, Config links visible
+- Exit to Dashboard link visible
+- Go to Admin link visible
+
+---
+
+## @test NAV-002a: Navigate to Style Gallery via sidebar
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** navigate, style-gallery
+
+```gherkin:en
+Scenario: Navigate to Style Gallery via sidebar
+
+Given I am on /devtools home
+When I click Style Gallery nav item
+Then the URL should include /devtools/style
+And the style page should be visible
+```
+
+```gherkin:es
+Scenario: Navegar a Style Gallery via sidebar
+
+Given estoy en /devtools home
+When hago clic en el item de navegacion Style Gallery
+Then la URL deberia incluir /devtools/style
+And la pagina de estilos deberia estar visible
+```
+
+### Expected Results
+- Navigation completes successfully
+- Style Gallery page loads
+
+---
+
+## @test NAV-002b: Navigate to Test Cases via sidebar
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** navigate, test-cases
+
+```gherkin:en
+Scenario: Navigate to Test Cases via sidebar
+
+Given I am on /devtools home
+When I click Test Cases nav item
+Then the URL should include /devtools/tests
+And the tests page should be visible
+```
+
+```gherkin:es
+Scenario: Navegar a Test Cases via sidebar
+
+Given estoy en /devtools home
+When hago clic en el item de navegacion Test Cases
+Then la URL deberia incluir /devtools/tests
+And la pagina de tests deberia estar visible
+```
+
+### Expected Results
+- Navigation completes successfully
+- Test Cases viewer page loads
+
+---
+
+## @test NAV-002c: Navigate to Config Viewer via sidebar
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** navigate, config
+
+```gherkin:en
+Scenario: Navigate to Config Viewer via sidebar
+
+Given I am on /devtools home
+When I click Config nav item
+Then the URL should include /devtools/config
+And the config page should be visible
+```
+
+```gherkin:es
+Scenario: Navegar a Config Viewer via sidebar
+
+Given estoy en /devtools home
+When hago clic en el item de navegacion Config
+Then la URL deberia incluir /devtools/config
+And la pagina de config deberia estar visible
+```
+
+### Expected Results
+- Navigation completes successfully
+- Config Viewer page loads
+
+---
+
+## @test NAV-002d: Navigate back to Home via sidebar
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** navigate, home
+
+```gherkin:en
+Scenario: Navigate back to Home via sidebar
+
+Given I am on /devtools/style
+When I click Home nav item
+Then the URL should be /devtools
+And the home page should be visible
+```
+
+```gherkin:es
+Scenario: Navegar de vuelta a Home via sidebar
+
+Given estoy en /devtools/style
+When hago clic en el item de navegacion Home
+Then la URL deberia ser /devtools
+And la pagina home deberia estar visible
+```
+
+### Expected Results
+- Navigation completes successfully
+- Home page loads
+
+---
+
+## @test NAV-003: Back to Dashboard link works
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** exit, dashboard
+
+```gherkin:en
+Scenario: Navigate to Dashboard when clicking exit link
+
+Given I am on /devtools home
+When I click "Exit to Dashboard" link
+Then the URL should include /dashboard
+And the URL should not include /devtools
+And the dashboard container should be visible
+```
+
+```gherkin:es
+Scenario: Navegar a Dashboard al hacer clic en enlace de salida
+
+Given estoy en /devtools home
+When hago clic en el enlace "Exit to Dashboard"
+Then la URL deberia incluir /dashboard
+And la URL no deberia incluir /devtools
+And el contenedor del dashboard deberia estar visible
+```
+
+### Expected Results
+- Exit navigation works correctly
+- User lands on main dashboard
+- No /devtools in URL
+
+---
+
+## @test NAV-004: Go to Admin link works
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** exit, admin
+
+```gherkin:en
+Scenario: Navigate to Admin when clicking exit link
+
+Given I am on /devtools home
+When I click "Go to Admin" link
+Then the URL should include /admin
+And the Admin container should be visible
+```
+
+```gherkin:es
+Scenario: Navegar a Admin al hacer clic en enlace de salida
+
+Given estoy en /devtools home
+When hago clic en el enlace "Go to Admin"
+Then la URL deberia incluir /admin
+And el contenedor de Admin deberia estar visible
+```
+
+### Expected Results
+- Exit to Admin works correctly
+- Developer can access Admin (inherited privileges)
+- Admin control panel visible
+
+---
+
+## UI Elements
+
+| Element | Selector | Description |
+|---------|----------|-------------|
+| Nav Home | `[data-cy="dev-nav-home"]` | Home navigation item |
+| Nav Style Gallery | `[data-cy="dev-nav-stylegallery"]` | Style Gallery navigation item |
+| Nav Test Cases | `[data-cy="dev-nav-testcases"]` | Test Cases navigation item |
+| Nav Config | `[data-cy="dev-nav-config"]` | Config navigation item |
+| Exit to Dashboard | `[data-cy="dev-sidebar-exit-to-dashboard"]` | Exit to dashboard link |
+| Go to Admin | `[data-cy="dev-sidebar-go-to-admin"]` | Go to Admin link |
+| Dashboard Container | `[data-cy="dashboard-container"]` | Main dashboard container |
+| Admin Container | `[data-cy="admin-container"]` | Admin main container |
+
+---
+
+## Summary
+
+| Test ID | Block | Description | Tags |
+|---------|-------|-------------|------|
+| NAV-001 | Sidebar Display | All navigation items visible | `@smoke` |
+| NAV-002a | Navigate | Style Gallery via sidebar | |
+| NAV-002b | Navigate | Test Cases via sidebar | |
+| NAV-002c | Navigate | Config Viewer via sidebar | |
+| NAV-002d | Navigate | Back to Home via sidebar | |
+| NAV-003 | Exit Links | Back to Dashboard works | |
+| NAV-004 | Exit Links | Go to Admin works | |

package/tests/cypress/e2e/_devtools/navigation.cy.ts

@@ -0,0 +1,157 @@
+/// <reference types="cypress" />
+
+import * as allure from 'allure-cypress'
+import { DevtoolsPOM } from '../../src/features/DevtoolsPOM'
+import { loginAsDefaultDeveloper } from '../../src/session-helpers'
+
+/**
+ * DevTools Navigation Tests
+ *
+ * Tests the navigation functionality within the /devtools area:
+ * - Sidebar navigation items work correctly
+ * - All nav links are clickable and navigate to correct pages
+ * - Exit links (Dashboard, Admin) work
+ * - URL changes reflect navigation
+ *
+ * Test User:
+ * - Developer: developer@nextspark.dev (via loginAsDefaultDeveloper)
+ */
+
+describe('DevTools - Navigation', {
+  tags: ['@uat', '@feat-devtools', '@regression']
+}, () => {
+  const devtools = DevtoolsPOM.create()
+
+  beforeEach(() => {
+    allure.epic('UAT')
+    allure.feature('DevTools')
+    allure.story('Navigation')
+
+    // Login as developer before each test
+    loginAsDefaultDeveloper()
+  })
+
+  describe('NAV-001: Sidebar navigation works', () => {
+    it('should display all sidebar navigation items', () => {
+      allure.severity('high')
+
+      // 1. Visit /devtools home
+      devtools.visitHome()
+
+      // 2. Verify all navigation items are visible
+      devtools.assertSidebarNavigationVisible()
+
+      // 3. Verify exit links are visible
+      devtools.assertExitLinksVisible()
+
+      cy.log(`✅ Sidebar navigation displayed correctly`)
+    })
+  })
+
+  describe('NAV-002: All nav links are clickable', () => {
+    it('should navigate to Style Gallery via sidebar', () => {
+      allure.severity('high')
+
+      // 1. Start at /devtools home
+      devtools.visitHome()
+
+      // 2. Click Style Gallery nav item
+      devtools.clickNavStyleGallery()
+
+      // 3. Verify navigation to /devtools/style
+      devtools.assertOnStyleGallery()
+      devtools.assertStylePageVisible()
+
+      cy.log(`✅ Style Gallery navigation works`)
+    })
+
+    it('should navigate to Test Cases via sidebar', () => {
+      allure.severity('high')
+
+      // 1. Start at /devtools home
+      devtools.visitHome()
+
+      // 2. Click Test Cases nav item
+      devtools.clickNavTestCases()
+
+      // 3. Verify navigation to /devtools/tests
+      devtools.assertOnTestCases()
+      devtools.assertTestsPageVisible()
+
+      cy.log(`✅ Test Cases navigation works`)
+    })
+
+    it('should navigate to Config Viewer via sidebar', () => {
+      allure.severity('high')
+
+      // 1. Start at /devtools home
+      devtools.visitHome()
+
+      // 2. Click Config nav item
+      devtools.clickNavConfig()
+
+      // 3. Verify navigation to /devtools/config
+      devtools.assertOnConfig()
+      devtools.assertConfigPageVisible()
+
+      cy.log(`✅ Config Viewer navigation works`)
+    })
+
+    it('should navigate back to Home via sidebar', () => {
+      allure.severity('high')
+
+      // 1. Start at /devtools/style
+      devtools.visitStyleGallery()
+
+      // 2. Click Home nav item
+      devtools.clickNavHome()
+
+      // 3. Verify navigation to /devtools
+      devtools.assertOnDevtoolsHome()
+      devtools.assertHomePageVisible()
+
+      cy.log(`✅ Home navigation works`)
+    })
+  })
+
+  describe('NAV-003: Back to Dashboard link works', () => {
+    it('should navigate to Dashboard when clicking exit link', () => {
+      allure.severity('high')
+
+      // 1. Start at /devtools home
+      devtools.visitHome()
+
+      // 2. Click "Exit to Dashboard" link
+      devtools.clickExitToDashboard()
+
+      // 3. Verify navigation to /dashboard
+      cy.url().should('include', '/dashboard')
+      cy.url().should('not.include', '/devtools')
+      cy.get('[data-cy="dashboard-container"]').should('be.visible')
+
+      cy.log(`✅ Exit to Dashboard works`)
+    })
+  })
+
+  describe('NAV-004: Go to Admin link works', () => {
+    it('should navigate to Admin when clicking exit link', () => {
+      allure.severity('high')
+
+      // 1. Start at /devtools home
+      devtools.visitHome()
+
+      // 2. Click "Go to Admin" link
+      devtools.clickGoToAdmin()
+
+      // 3. Verify navigation to /admin
+      devtools.assertOnAdmin()
+      cy.get('[data-cy="admin-container"]').should('be.visible')
+
+      cy.log(`✅ Go to Admin works`)
+    })
+  })
+
+  after(() => {
+    cy.log('✅ DevTools navigation tests completed')
+  })
+})

package/tests/cypress/e2e/_devtools/pages.bdd.md

@@ -0,0 +1,303 @@
+---
+feature: DevTools Page Content
+priority: high
+tags: [dev-area, pages, content]
+grepTags: [uat, feat-dev-area, regression]
+coverage: 6
+---
+
+# DevTools Page Content
+
+> Tests the content and functionality of each /devtools page including Home quick links, Style Gallery components, Test Cases viewer, and Config viewer tabs.
+
+## @test PAGE-001: Home page renders quick links
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** home, quick-links
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Display all quick link cards on home page
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools home
+Then the home page container should be visible
+And all quick links should be visible (Style, Tests, Config)
+
+When I click Style Gallery quick link
+Then I should be on /devtools/style
+
+When I go back to /devtools home
+And I click Test Cases quick link
+Then I should be on /devtools/tests
+
+When I go back to /devtools home
+And I click Config Viewer quick link
+Then I should be on /devtools/config
+```
+
+```gherkin:es
+Scenario: Mostrar todas las tarjetas de enlaces rapidos en home
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools home
+Then el contenedor de home page deberia estar visible
+And todos los enlaces rapidos deberian estar visibles (Style, Tests, Config)
+
+When hago clic en el enlace rapido Style Gallery
+Then deberia estar en /devtools/style
+
+When vuelvo a /devtools home
+And hago clic en el enlace rapido Test Cases
+Then deberia estar en /devtools/tests
+
+When vuelvo a /devtools home
+And hago clic en el enlace rapido Config Viewer
+Then deberia estar en /devtools/config
+```
+
+### Expected Results
+- Home page container visible
+- All 3 quick link cards displayed
+- Each quick link navigates correctly
+- All target pages load successfully
+
+---
+
+## @test PAGE-002: Style Gallery loads components
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** style-gallery, components, tabs
+
+```gherkin:en
+Scenario: Display all Style Gallery sections
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools/style
+Then the style page should be visible
+
+And I verify all tab sections by clicking through them:
+| Tab | Content Section |
+| Components | Component Gallery |
+| Field Types | Field Types Gallery |
+| Theme | Theme Preview |
+```
+
+```gherkin:es
+Scenario: Mostrar todas las secciones de Style Gallery
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools/style
+Then la pagina de estilos deberia estar visible
+
+And verifico todas las secciones de tabs haciendo clic en cada una:
+| Tab | Seccion de Contenido |
+| Components | Component Gallery |
+| Field Types | Field Types Gallery |
+| Theme | Theme Preview |
+```
+
+### Expected Results
+- Style page container visible
+- Components tab visible by default
+- Field Types tab content loads on click
+- Theme tab content loads on click
+
+---
+
+## @test PAGE-003a: Test Cases viewer shows file tree
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** test-cases, file-tree
+
+```gherkin:en
+Scenario: Display test cases viewer with file tree
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools/tests
+Then the tests page should be visible
+And the viewer container should be visible
+And either file tree or empty state should be displayed
+```
+
+```gherkin:es
+Scenario: Mostrar visor de test cases con arbol de archivos
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools/tests
+Then la pagina de tests deberia estar visible
+And el contenedor del visor deberia estar visible
+And deberia mostrarse el arbol de archivos o estado vacio
+```
+
+### Expected Results
+- Tests page container visible
+- Viewer component rendered
+- File tree shows .bdd.md files (or empty state)
+
+---
+
+## @test PAGE-003b: Test Cases viewer shows markdown content
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Regression
+- **Tags:** test-cases, markdown, file-select
+
+```gherkin:en
+Scenario: Show markdown content when selecting a file
+
+Given I am on /devtools/tests
+When I check if file tree has files
+And files exist
+And I click on the first file
+Then the content area should be visible
+And markdown content should be rendered
+```
+
+```gherkin:es
+Scenario: Mostrar contenido markdown al seleccionar un archivo
+
+Given estoy en /devtools/tests
+When verifico si el arbol de archivos tiene archivos
+And existen archivos
+And hago clic en el primer archivo
+Then el area de contenido deberia estar visible
+And el contenido markdown deberia estar renderizado
+```
+
+### Expected Results
+- File selection works
+- Markdown content loads
+- Content is properly formatted
+
+---
+
+## @test PAGE-004a: Config viewer shows tabs
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** config, tabs
+
+```gherkin:en
+Scenario: Display config viewer with tabs
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /devtools/config
+Then the config page should be visible
+And config tabs should be visible (Theme, Entities)
+
+When I click Theme tab
+Then Theme content should be visible
+
+When I click Entities tab
+Then Entities content should be visible
+```
+
+```gherkin:es
+Scenario: Mostrar visor de config con tabs
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /devtools/config
+Then la pagina de config deberia estar visible
+And los tabs de config deberian estar visibles (Theme, Entities)
+
+When hago clic en el tab Theme
+Then el contenido de Theme deberia estar visible
+
+When hago clic en el tab Entities
+Then el contenido de Entities deberia estar visible
+```
+
+### Expected Results
+- Config page container visible
+- Theme and Entities tabs visible
+- Tab switching works correctly
+- Each tab shows correct content
+
+---
+
+## @test PAGE-004b: Config viewer shows copy buttons
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Regression
+- **Tags:** config, copy-buttons
+
+```gherkin:en
+Scenario: Display copy buttons in config viewer
+
+Given I am on /devtools/config
+When I click Theme tab
+Then copy button for theme config should be visible
+
+When I click Entities tab
+Then copy button for entities config should be visible
+```
+
+```gherkin:es
+Scenario: Mostrar botones de copia en el visor de config
+
+Given estoy en /devtools/config
+When hago clic en el tab Theme
+Then el boton de copia para config de theme deberia estar visible
+
+When hago clic en el tab Entities
+Then el boton de copia para config de entities deberia estar visible
+```
+
+### Expected Results
+- Copy buttons present in both tabs
+- Copy functionality available for developers
+
+---
+
+## UI Elements
+
+| Element | Selector | Description |
+|---------|----------|-------------|
+| Home Page | `[data-cy="dev-home-page"]` | Dev home page container |
+| Home Style Link | `[data-cy="dev-home-style-link"]` | Quick link to Style Gallery |
+| Home Tests Link | `[data-cy="dev-home-tests-link"]` | Quick link to Test Cases |
+| Home Config Link | `[data-cy="dev-home-config-link"]` | Quick link to Config Viewer |
+| Style Page | `[data-cy="dev-style-page"]` | Style Gallery page container |
+| Style Tab Components | `[data-cy="dev-style-tab-components"]` | Components tab trigger |
+| Style Tab Field Types | `[data-cy="dev-style-tab-field-types"]` | Field Types tab trigger |
+| Style Tab Theme | `[data-cy="dev-style-tab-theme"]` | Theme tab trigger |
+| Style Component Gallery | `[data-cy="dev-style-component-gallery"]` | Components tab content |
+| Style Field Types | `[data-cy="dev-style-field-types"]` | Field Types tab content |
+| Style Theme Preview | `[data-cy="dev-style-theme-preview"]` | Theme tab content |
+| Tests Page | `[data-cy="dev-tests-page"]` | Test Cases page container |
+| Tests Viewer | `[data-cy="dev-tests-viewer"]` | Test viewer container |
+| Tests Tree | `[data-cy="dev-tests-tree"]` | File tree component |
+| Tests Empty State | `[data-cy="dev-tests-empty-state"]` | Empty state when no files |
+| Tests Content | `[data-cy="dev-tests-content"]` | Content display area |
+| Tests Markdown | `[data-cy="dev-tests-markdown-content"]` | Rendered markdown content |
+| Config Page | `[data-cy="dev-config-page"]` | Config Viewer page container |
+| Config Viewer | `[data-cy="dev-config-viewer"]` | Config viewer container |
+| Config Tab Theme | `[data-cy="dev-config-tab-theme"]` | Theme tab trigger |
+| Config Tab Entities | `[data-cy="dev-config-tab-entities"]` | Entities tab trigger |
+| Config Theme Content | `[data-cy="dev-config-theme-content"]` | Theme config content |
+| Config Entities Content | `[data-cy="dev-config-entities-content"]` | Entities config content |
+| Config Copy Theme | `[data-cy="dev-config-copy-theme"]` | Copy theme config button |
+| Config Copy Entities | `[data-cy="dev-config-copy-entities"]` | Copy entities config button |
+
+---
+
+## Summary
+
+| Test ID | Block | Description | Tags |
+|---------|-------|-------------|------|
+| PAGE-001 | Home Page | Quick links display and work | `@smoke` |
+| PAGE-002 | Style Gallery | All tab sections load | |
+| PAGE-003a | Test Cases | File tree viewer works | |
+| PAGE-003b | Test Cases | Markdown content renders | |
+| PAGE-004a | Config Viewer | Tabs display and switch | |
+| PAGE-004b | Config Viewer | Copy buttons available | |