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

package/lib/selectors.ts

@@ -134,11 +134,15 @@ export const DEVTOOLS_SELECTORS = {
 
 /**
  * Complete theme selectors merging core and blocks.
+ * NOTE: devtools must be MERGED (not replaced) to keep CORE_SELECTORS.devtools
  */
 export const THEME_SELECTORS = {
   ...CORE_SELECTORS,
   blocks: BLOCK_SELECTORS,
-  devtools: DEVTOOLS_SELECTORS,
+  devtools: {
+    ...CORE_SELECTORS.devtools,
+    ...DEVTOOLS_SELECTORS,
+  },
 } as const
 
 // =============================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/theme-default",
-  "version": "0.1.0-beta.31",
+  "version": "0.1.0-beta.35",
   "private": false,
   "type": "module",
   "main": "./config/theme.config.ts",
@@ -17,7 +17,7 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "zod": "^4.0.0",
-    "@nextsparkjs/core": "0.1.0-beta.31"
+    "@nextsparkjs/core": "0.1.0-beta.36"
   },
   "nextspark": {
     "type": "theme",

package/tests/cypress/e2e/{_devtools → _utils/devtools}/access.cy.ts

@@ -1,13 +1,13 @@
 /// <reference types="cypress" />
 
 import * as allure from 'allure-cypress'
-import { DevtoolsPOM } from '../../src/features/DevtoolsPOM'
+import { DevtoolsPOM } from '../../../src/features/DevtoolsPOM'
 import {
   loginAsDefaultDeveloper,
   loginAsDefaultSuperadmin,
   loginAsDefaultMember,
   CORE_USERS
-} from '../../src/session-helpers'
+} from '../../../src/session-helpers'
 
 /**
  * DevTools Access Control Tests
@@ -25,7 +25,7 @@ import {
  */
 
 describe('DevTools - Access Control', {
-  tags: ['@uat', '@feat-devtools', '@smoke', '@regression']
+  tags: ['@uat', '@area-devtools', '@smoke', '@regression']
 }, () => {
   const devtools = DevtoolsPOM.create()
 

package/tests/cypress/e2e/{_devtools → _utils/devtools}/navigation.cy.ts

@@ -1,8 +1,8 @@
 /// <reference types="cypress" />
 
 import * as allure from 'allure-cypress'
-import { DevtoolsPOM } from '../../src/features/DevtoolsPOM'
-import { loginAsDefaultDeveloper } from '../../src/session-helpers'
+import { DevtoolsPOM } from '../../../src/features/DevtoolsPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
 
 /**
  * DevTools Navigation Tests
@@ -18,7 +18,7 @@ import { loginAsDefaultDeveloper } from '../../src/session-helpers'
  */
 
 describe('DevTools - Navigation', {
-  tags: ['@uat', '@feat-devtools', '@regression']
+  tags: ['@uat', '@area-devtools', '@regression']
 }, () => {
   const devtools = DevtoolsPOM.create()
 

package/tests/cypress/e2e/{_devtools → _utils/devtools}/pages.cy.ts

@@ -1,8 +1,8 @@
 /// <reference types="cypress" />
 
 import * as allure from 'allure-cypress'
-import { DevtoolsPOM } from '../../src/features/DevtoolsPOM'
-import { loginAsDefaultDeveloper } from '../../src/session-helpers'
+import { DevtoolsPOM } from '../../../src/features/DevtoolsPOM'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
 
 /**
  * DevTools Page Content Tests
@@ -18,7 +18,7 @@ import { loginAsDefaultDeveloper } from '../../src/session-helpers'
  */
 
 describe('DevTools - Page Content', {
-  tags: ['@uat', '@feat-devtools', '@regression']
+  tags: ['@uat', '@area-devtools', '@regression']
 }, () => {
   const devtools = DevtoolsPOM.create()
 

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

@@ -0,0 +1,354 @@
+---
+feature: Auth UI Selectors Validation
+priority: high
+tags: [selectors, auth, ui-validation]
+grepTags: [ui-selectors, auth, SEL_AUTH_001, SEL_AUTH_002, SEL_AUTH_003, SEL_AUTH_004, SEL_AUTH_005, SEL_AUTH_006, SEL_AUTH_007]
+coverage: 7
+---
+
+# Auth UI Selectors Validation
+
+> Validates that authentication 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.
+
+## @test SEL_AUTH_001: Login Card Structure
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** login, card, structure
+- **Grep:** `@ui-selectors` `@SEL_AUTH_001`
+- **Status:** Active - 6 tests
+
+```gherkin:en
+Scenario: Login page has complete card structure
+
+Given I navigate to the login page
+And the login card is visible
+Then I should find the login card element
+And I should find the login header
+And I should find the login footer
+And I should find the signup link
+And I should find the Google signin button
+And I should find the show email button
+```
+
+```gherkin:es
+Scenario: Pagina de login tiene estructura de card completa
+
+Given navego a la pagina de login
+And la card de login esta visible
+Then deberia encontrar el elemento card de login
+And deberia encontrar el header de login
+And deberia encontrar el footer de login
+And deberia encontrar el link de signup
+And deberia encontrar el boton de Google signin
+And deberia encontrar el boton de mostrar email
+```
+
+### Expected Results
+- `auth.login.card` selector exists
+- `auth.login.header` selector exists
+- `auth.login.footer` selector exists
+- `auth.login.signupLink` selector exists
+- `auth.login.googleButton` selector exists
+- `auth.login.showEmailButton` selector exists
+
+---
+
+## @test SEL_AUTH_002: Login Form Inputs
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** login, form, inputs
+- **Grep:** `@ui-selectors` `@SEL_AUTH_002`
+- **Status:** Active - 11 tests
+
+```gherkin:en
+Scenario: Login form has all required input selectors
+
+Given I navigate to the login page
+And I click the show email button
+And the login form is visible
+Then I should find the login form element
+And I should find the email input
+And I should find the password input
+And I should find the submit button
+And I should find the forgot password link
+And I should find the hide email button
+And I should find the remember checkbox
+When I click submit without filling fields
+Then I should find the email error message
+When I fill email and click submit
+Then I should find the password error message
+When I fill both fields with invalid credentials and submit
+Then I should find the login error alert
+```
+
+```gherkin:es
+Scenario: Formulario de login tiene todos los selectores de input requeridos
+
+Given navego a la pagina de login
+And hago clic en el boton de mostrar email
+And el formulario de login esta visible
+Then deberia encontrar el elemento formulario de login
+And deberia encontrar el input de email
+And deberia encontrar el input de password
+And deberia encontrar el boton de submit
+And deberia encontrar el link de olvide password
+And deberia encontrar el boton de ocultar email
+And deberia encontrar el checkbox de recordar
+When hago clic en submit sin llenar campos
+Then deberia encontrar el mensaje de error de email
+When lleno email y hago clic en submit
+Then deberia encontrar el mensaje de error de password
+When lleno ambos campos con credenciales invalidas y envio
+Then deberia encontrar la alerta de error de login
+```
+
+### Expected Results
+- `auth.login.form` selector exists
+- `auth.login.options` selector exists
+- `auth.login.emailInput` selector exists
+- `auth.login.passwordInput` selector exists
+- `auth.login.submitButton` selector exists
+- `auth.login.forgotPasswordLink` selector exists
+- `auth.login.hideEmailButton` selector exists
+- `auth.login.rememberCheckbox` selector exists
+- `auth.login.emailError` selector appears on validation failure
+- `auth.login.passwordError` selector appears on validation failure
+- `auth.login.error` selector appears after failed login attempt
+
+---
+
+## @test SEL_AUTH_003: Signup Form
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** signup, form, inputs
+- **Grep:** `@ui-selectors` `@SEL_AUTH_003`
+- **Status:** Partial - 9 passing, 1 skipped (Google button)
+
+```gherkin:en
+Scenario: Signup form has all required input selectors
+
+Given I navigate to the signup page
+And the signup form is visible
+Then I should find the signup form element
+And I should find the first name input
+And I should find the last name input
+And I should find the email input
+And I should find the password input
+And I should find the confirm password input
+And I should find the submit button
+And I should find the Google signup button
+And I should find the login link
+When I fill the form with an existing email and submit
+Then I should find the signup error message
+```
+
+```gherkin:es
+Scenario: Formulario de signup tiene todos los selectores de input requeridos
+
+Given navego a la pagina de signup
+And el formulario de signup esta visible
+Then deberia encontrar el elemento formulario de signup
+And deberia encontrar el input de nombre
+And deberia encontrar el input de apellido
+And deberia encontrar el input de email
+And deberia encontrar el input de password
+And deberia encontrar el input de confirmar password
+And deberia encontrar el boton de submit
+And deberia encontrar el boton de Google signup
+And deberia encontrar el link de login
+When lleno el formulario con un email existente y envio
+Then deberia encontrar el mensaje de error de signup
+```
+
+### Expected Results
+- `auth.signup.form` selector exists
+- `auth.signup.firstNameInput` selector exists
+- `auth.signup.lastNameInput` selector exists
+- `auth.signup.emailInput` selector exists
+- `auth.signup.passwordInput` selector exists
+- `auth.signup.confirmPasswordInput` selector exists
+- `auth.signup.submitButton` selector exists
+- `auth.signup.googleButton` selector exists
+- `auth.signup.loginLink` selector exists
+- `auth.signup.error` selector appears when email already exists
+
+---
+
+## @test SEL_AUTH_004: Forgot Password
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** forgot-password, form
+- **Grep:** `@ui-selectors` `@SEL_AUTH_004`
+- **Status:** Partial - 4 passing, 4 skipped (require states)
+
+```gherkin:en
+Scenario: Forgot password page has all required selectors
+
+Given I navigate to the forgot password page
+And the forgot password form is visible
+Then I should find the forgot password form element
+And I should find the email input
+And I should find the submit button
+And I should find the back to login link
+```
+
+```gherkin:es
+Scenario: Pagina de olvide password tiene todos los selectores requeridos
+
+Given navego a la pagina de olvide password
+And el formulario de olvide password esta visible
+Then deberia encontrar el elemento formulario de olvide password
+And deberia encontrar el input de email
+And deberia encontrar el boton de submit
+And deberia encontrar el link de volver a login
+```
+
+### Expected Results
+- `auth.forgotPassword.form` selector exists
+- `auth.forgotPassword.emailInput` selector exists
+- `auth.forgotPassword.submitButton` selector exists
+- `auth.forgotPassword.backLink` selector exists
+
+### Skipped Tests (require specific states)
+- `auth.forgotPassword.success` - requires successful email submission
+- `auth.forgotPassword.successBackLink` - requires success state
+- `auth.forgotPassword.retryButton` - requires success state
+- `auth.forgotPassword.error` - requires server error
+
+---
+
+## @test SEL_AUTH_005: DevKeyring
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** devkeyring, development
+- **Grep:** `@ui-selectors` `@SEL_AUTH_005`
+- **Status:** Active - 4 tests
+
+```gherkin:en
+Scenario: DevKeyring component has all required selectors
+
+Given I navigate to the login page
+And the login card is visible
+Then I should find the devkeyring container
+And I should find the devkeyring trigger
+When I click the devkeyring trigger
+Then I should find the devkeyring content
+And I should find at least one devkeyring user option
+```
+
+```gherkin:es
+Scenario: Componente DevKeyring tiene todos los selectores requeridos
+
+Given navego a la pagina de login
+And la card de login esta visible
+Then deberia encontrar el contenedor de devkeyring
+And deberia encontrar el trigger de devkeyring
+When hago clic en el trigger de devkeyring
+Then deberia encontrar el contenido de devkeyring
+And deberia encontrar al menos una opcion de usuario de devkeyring
+```
+
+### Expected Results
+- `auth.devKeyring.container` selector exists
+- `auth.devKeyring.trigger` selector exists
+- `auth.devKeyring.content` selector exists when opened
+- `auth.devKeyring.user(0)` selector exists (at least one user)
+
+---
+
+## @test SEL_AUTH_006: Reset Password
+
+### Metadata
+- **Priority:** Low
+- **Type:** Selector Validation
+- **Tags:** reset-password, form
+- **Grep:** `@ui-selectors` `@SEL_AUTH_006`
+- **Status:** Skipped - requires valid reset token
+
+```gherkin:en
+Scenario: Reset password page has all required selectors
+
+Given I have a valid password reset token
+And I navigate to the reset password page with the token
+Then I should find the reset password form element
+And I should find the password input
+And I should find the confirm password input
+And I should find the submit button
+```
+
+```gherkin:es
+Scenario: Pagina de reset password tiene todos los selectores requeridos
+
+Given tengo un token valido de reset password
+And navego a la pagina de reset password con el token
+Then deberia encontrar el elemento formulario de reset password
+And deberia encontrar el input de password
+And deberia encontrar el input de confirmar password
+And deberia encontrar el boton de submit
+```
+
+### Expected Results (when token is valid)
+- `auth.resetPassword.form` selector exists
+- `auth.resetPassword.password` selector exists
+- `auth.resetPassword.confirmPassword` selector exists
+- `auth.resetPassword.submitButton` selector exists
+- `auth.resetPassword.error` selector appears on validation failure
+
+### Notes
+All tests in this section are skipped because they require a valid reset token which cannot be generated in automated tests without email access.
+
+---
+
+## @test SEL_AUTH_007: Verify Email
+
+### Metadata
+- **Priority:** Low
+- **Type:** Selector Validation
+- **Tags:** verify-email, email
+- **Grep:** `@ui-selectors` `@SEL_AUTH_007`
+- **Status:** Skipped - requires pending verification state
+
+```gherkin:en
+Scenario: Verify email page has all required selectors
+
+Given I have just signed up and need to verify email
+And I am on the verify email page
+Then I should find the verify email container
+And I should find the resend button
+When verification is complete
+Then I should find the success message
+When verification fails
+Then I should find the error message
+```
+
+```gherkin:es
+Scenario: Pagina de verificar email tiene todos los selectores requeridos
+
+Given acabo de registrarme y necesito verificar email
+And estoy en la pagina de verificar email
+Then deberia encontrar el contenedor de verificar email
+And deberia encontrar el boton de reenviar
+When la verificacion se completa
+Then deberia encontrar el mensaje de exito
+When la verificacion falla
+Then deberia encontrar el mensaje de error
+```
+
+### Expected Results (when in verification state)
+- `auth.verifyEmail.container` selector exists
+- `auth.verifyEmail.resendButton` selector exists
+- `auth.verifyEmail.success` selector appears on successful verification
+- `auth.verifyEmail.error` selector appears on verification failure
+
+### Notes
+All tests in this section are skipped because they require a pending email verification state which cannot be reliably set up in automated tests.

package/tests/cypress/e2e/{_selectors → _utils/selectors}/auth.cy.ts

@@ -13,20 +13,28 @@
  * - Navigate to auth pages (NO login required - public pages)
  * - Assert elements exist in DOM (no form submissions)
  * - Fast execution (< 30 seconds per describe block)
+ *
+ * Test IDs:
+ * - SEL_AUTH_001: Login Card Structure
+ * - SEL_AUTH_002: Login Form Inputs
+ * - SEL_AUTH_003: Signup Form
+ * - SEL_AUTH_004: Forgot Password
+ * - SEL_AUTH_005: DevKeyring
+ * - SEL_AUTH_006: Reset Password (skipped - requires token)
+ * - SEL_AUTH_007: Verify Email (skipped - requires state)
  */
 
-import { AuthPOM } from '../../src/core/AuthPOM'
+import { AuthPOM } from '../../../src/core/AuthPOM'
 
-describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+describe('Auth Selectors Validation', { tags: ['@ui-selectors', '@auth'] }, () => {
   const auth = AuthPOM.create()
 
   // ============================================
-  // LOGIN PAGE SELECTORS (18 selectors)
+  // SEL_AUTH_001: LOGIN CARD STRUCTURE
   // ============================================
-  describe('Login Page Selectors - Card & Structure', () => {
+  describe('SEL_AUTH_001: Login Card Structure', { tags: '@SEL_AUTH_001' }, () => {
     beforeEach(() => {
       auth.visitLogin()
-      // Wait for card to be visible (form may not be visible by default)
       cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
     })
 
@@ -54,16 +62,17 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
       cy.get(auth.selectors.loginShowEmail).should('exist')
     })
 
-    // Note: Invite banner only shows when invited
     it.skip('should find invite banner (requires invite token)', () => {
       cy.get(auth.selectors.loginInviteBanner).should('exist')
     })
   })
 
-  describe('Login Page Selectors - Email Form', () => {
+  // ============================================
+  // SEL_AUTH_002: LOGIN FORM INPUTS
+  // ============================================
+  describe('SEL_AUTH_002: Login Form Inputs', { tags: '@SEL_AUTH_002' }, () => {
     beforeEach(() => {
       auth.visitLogin()
-      // Wait for card and click show email to reveal form
       cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
       cy.get(auth.selectors.loginShowEmail).click()
       cy.get(auth.selectors.loginForm, { timeout: 5000 }).should('be.visible')
@@ -101,7 +110,6 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
       cy.get(auth.selectors.loginRememberCheckbox).should('exist')
     })
 
-    // Note: Error selectors only appear when there's an error
     it('should find email error when validation fails', () => {
       cy.get(auth.selectors.loginSubmit).click()
       cy.get(auth.selectors.loginEmailError).should('exist')
@@ -122,9 +130,9 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
   })
 
   // ============================================
-  // SIGNUP PAGE SELECTORS (11 selectors)
+  // SEL_AUTH_003: SIGNUP FORM
   // ============================================
-  describe('Signup Page Selectors', () => {
+  describe('SEL_AUTH_003: Signup Form', { tags: '@SEL_AUTH_003' }, () => {
     beforeEach(() => {
       auth.visitSignup()
       auth.waitForSignupForm()
@@ -158,8 +166,7 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
       cy.get(auth.selectors.signupSubmit).should('exist')
     })
 
-    // Note: Google signup button not implemented in current SignupForm
-    it.skip('should find Google signup button (not implemented)', () => {
+    it('should find Google signup button', () => {
       cy.get(auth.selectors.signupGoogle).should('exist')
     })
 
@@ -167,21 +174,28 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
       cy.get(auth.selectors.signupLoginLink).should('exist')
     })
 
-    // Note: Invite banner only shows when invited
     it.skip('should find invite banner (requires invite token)', () => {
       cy.get(auth.selectors.signupInviteBanner).should('exist')
     })
 
-    // Note: Error message selector not implemented in current SignupForm
-    it.skip('should find error message (selector not implemented)', () => {
-      cy.get(auth.selectors.signupError).should('exist')
+    it('should find error message when email already exists', () => {
+      const existingEmail = Cypress.env('DEVELOPER_EMAIL') || 'developer@nextspark.dev'
+
+      cy.get(auth.selectors.signupFirstName).type('Test')
+      cy.get(auth.selectors.signupLastName).type('User')
+      cy.get(auth.selectors.signupEmail).type(existingEmail)
+      cy.get(auth.selectors.signupPassword).type('Test1234!')
+      cy.get(auth.selectors.signupConfirmPassword).type('Test1234!')
+      cy.get('[data-cy="signup-terms-checkbox"]').click()
+      cy.get(auth.selectors.signupSubmit).click()
+      cy.get(auth.selectors.signupError, { timeout: 10000 }).should('exist')
     })
   })
 
   // ============================================
-  // FORGOT PASSWORD SELECTORS (8 selectors)
+  // SEL_AUTH_004: FORGOT PASSWORD
   // ============================================
-  describe('Forgot Password Selectors', () => {
+  describe('SEL_AUTH_004: Forgot Password', { tags: '@SEL_AUTH_004' }, () => {
     beforeEach(() => {
       auth.visitForgotPassword()
       cy.get(auth.selectors.forgotPasswordForm, { timeout: 10000 }).should('be.visible')
@@ -203,34 +217,29 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
       cy.get(auth.selectors.forgotPasswordBack).should('exist')
     })
 
-    // Note: Success message only appears after successful submission
     it.skip('should find success message (requires successful submission)', () => {
       cy.get(auth.selectors.forgotPasswordSuccess).should('exist')
     })
 
-    // Note: Success back link only appears in success state
     it.skip('should find success back link (requires success state)', () => {
       cy.get(auth.selectors.forgotPasswordSuccessBack).should('exist')
     })
 
-    // Note: Retry button only appears in success state
     it.skip('should find retry button (requires success state)', () => {
       cy.get(auth.selectors.forgotPasswordRetry).should('exist')
     })
 
-    // Note: Error only appears on server error response
     it.skip('should find error message (requires server error)', () => {
       cy.get(auth.selectors.forgotPasswordError).should('exist')
     })
   })
 
   // ============================================
-  // DEV KEYRING SELECTORS (4 selectors)
+  // SEL_AUTH_005: DEVKEYRING
   // ============================================
-  describe('DevKeyring Selectors', () => {
+  describe('SEL_AUTH_005: DevKeyring', { tags: '@SEL_AUTH_005' }, () => {
     beforeEach(() => {
       auth.visitLogin()
-      // Wait for login card (not form - form may not be visible by default)
       cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
     })
 
@@ -249,19 +258,15 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
 
     it('should find devkeyring user options', () => {
       auth.openDevKeyring()
-      // Test first user option (index 0)
       cy.get(auth.selectors.devKeyringUser(0)).should('exist')
     })
   })
 
   // ============================================
-  // RESET PASSWORD SELECTORS (5 selectors) - SKIP
-  // Requires valid token from email
+  // SEL_AUTH_006: RESET PASSWORD (skipped - requires token)
   // ============================================
-  describe('Reset Password Selectors', () => {
+  describe('SEL_AUTH_006: Reset Password', { tags: '@SEL_AUTH_006' }, () => {
     it.skip('should find reset password form (requires valid token)', () => {
-      // These tests are skipped because they require a valid reset token
-      // To test: auth.visitResetPassword('valid-token')
       cy.get(auth.selectors.resetPasswordForm).should('exist')
     })
 
@@ -283,10 +288,9 @@ describe('Auth Selectors Validation', { tags: ['@ui-selectors'] }, () => {
   })
 
   // ============================================
-  // VERIFY EMAIL SELECTORS (4 selectors) - SKIP
-  // Requires pending verification state
+  // SEL_AUTH_007: VERIFY EMAIL (skipped - requires state)
   // ============================================
-  describe('Verify Email Selectors', () => {
+  describe('SEL_AUTH_007: Verify Email', { tags: '@SEL_AUTH_007' }, () => {
     it.skip('should find verify email container (requires pending verification)', () => {
       cy.get(auth.selectors.verifyEmailContainer).should('exist')
     })