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

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/_utils/selectors/auth.cy.ts

@@ -0,0 +1,310 @@
+/**
+ * UI Selectors Validation: Authentication
+ *
+ * This test validates that authentication component selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate AuthPOM selectors work correctly
+ * - Ensure all auth.* selectors from CORE_SELECTORS are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - 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'
+
+describe('Auth Selectors Validation', { tags: ['@ui-selectors', '@auth'] }, () => {
+  const auth = AuthPOM.create()
+
+  // ============================================
+  // SEL_AUTH_001: LOGIN CARD STRUCTURE
+  // ============================================
+  describe('SEL_AUTH_001: Login Card Structure', { tags: '@SEL_AUTH_001' }, () => {
+    beforeEach(() => {
+      auth.visitLogin()
+      cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
+    })
+
+    it('should find login card', () => {
+      cy.get(auth.selectors.loginCard).should('exist')
+    })
+
+    it('should find login header', () => {
+      cy.get(auth.selectors.loginHeader).should('exist')
+    })
+
+    it('should find login footer', () => {
+      cy.get(auth.selectors.loginFooter).should('exist')
+    })
+
+    it('should find signup link', () => {
+      cy.get(auth.selectors.loginSignupLink).should('exist')
+    })
+
+    it('should find Google signin button', () => {
+      cy.get(auth.selectors.loginGoogle).should('exist')
+    })
+
+    it('should find show email button', () => {
+      cy.get(auth.selectors.loginShowEmail).should('exist')
+    })
+
+    it.skip('should find invite banner (requires invite token)', () => {
+      cy.get(auth.selectors.loginInviteBanner).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_AUTH_002: LOGIN FORM INPUTS
+  // ============================================
+  describe('SEL_AUTH_002: Login Form Inputs', { tags: '@SEL_AUTH_002' }, () => {
+    beforeEach(() => {
+      auth.visitLogin()
+      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')
+    })
+
+    it('should find login form', () => {
+      cy.get(auth.selectors.loginForm).should('exist')
+    })
+
+    it('should find login options', () => {
+      cy.get(auth.selectors.loginOptions).should('exist')
+    })
+
+    it('should find email input', () => {
+      cy.get(auth.selectors.loginEmail).should('exist')
+    })
+
+    it('should find password input', () => {
+      cy.get(auth.selectors.loginPassword).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(auth.selectors.loginSubmit).should('exist')
+    })
+
+    it('should find forgot password link', () => {
+      cy.get(auth.selectors.loginForgotPassword).should('exist')
+    })
+
+    it('should find hide email button', () => {
+      cy.get(auth.selectors.loginHideEmail).should('exist')
+    })
+
+    it('should find remember checkbox', () => {
+      cy.get(auth.selectors.loginRememberCheckbox).should('exist')
+    })
+
+    it('should find email error when validation fails', () => {
+      cy.get(auth.selectors.loginSubmit).click()
+      cy.get(auth.selectors.loginEmailError).should('exist')
+    })
+
+    it('should find password error when validation fails', () => {
+      cy.get(auth.selectors.loginEmail).type('test@example.com')
+      cy.get(auth.selectors.loginSubmit).click()
+      cy.get(auth.selectors.loginPasswordError).should('exist')
+    })
+
+    it('should find error alert after failed login', () => {
+      cy.get(auth.selectors.loginEmail).type('nonexistent@example.com')
+      cy.get(auth.selectors.loginPassword).type('wrongpassword')
+      cy.get(auth.selectors.loginSubmit).click()
+      cy.get(auth.selectors.loginError, { timeout: 10000 }).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_AUTH_003: SIGNUP FORM
+  // ============================================
+  describe('SEL_AUTH_003: Signup Form', { tags: '@SEL_AUTH_003' }, () => {
+    beforeEach(() => {
+      auth.visitSignup()
+      auth.waitForSignupForm()
+    })
+
+    it('should find signup form', () => {
+      cy.get(auth.selectors.signupForm).should('exist')
+    })
+
+    it('should find first name input', () => {
+      cy.get(auth.selectors.signupFirstName).should('exist')
+    })
+
+    it('should find last name input', () => {
+      cy.get(auth.selectors.signupLastName).should('exist')
+    })
+
+    it('should find email input', () => {
+      cy.get(auth.selectors.signupEmail).should('exist')
+    })
+
+    it('should find password input', () => {
+      cy.get(auth.selectors.signupPassword).should('exist')
+    })
+
+    it('should find confirm password input', () => {
+      cy.get(auth.selectors.signupConfirmPassword).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(auth.selectors.signupSubmit).should('exist')
+    })
+
+    it('should find Google signup button', () => {
+      cy.get(auth.selectors.signupGoogle).should('exist')
+    })
+
+    it('should find login link', () => {
+      cy.get(auth.selectors.signupLoginLink).should('exist')
+    })
+
+    it.skip('should find invite banner (requires invite token)', () => {
+      cy.get(auth.selectors.signupInviteBanner).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')
+    })
+  })
+
+  // ============================================
+  // SEL_AUTH_004: FORGOT PASSWORD
+  // ============================================
+  describe('SEL_AUTH_004: Forgot Password', { tags: '@SEL_AUTH_004' }, () => {
+    beforeEach(() => {
+      auth.visitForgotPassword()
+      cy.get(auth.selectors.forgotPasswordForm, { timeout: 10000 }).should('be.visible')
+    })
+
+    it('should find forgot password form', () => {
+      cy.get(auth.selectors.forgotPasswordForm).should('exist')
+    })
+
+    it('should find email input', () => {
+      cy.get(auth.selectors.forgotPasswordEmail).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(auth.selectors.forgotPasswordSubmit).should('exist')
+    })
+
+    it('should find back to login link', () => {
+      cy.get(auth.selectors.forgotPasswordBack).should('exist')
+    })
+
+    it.skip('should find success message (requires successful submission)', () => {
+      cy.get(auth.selectors.forgotPasswordSuccess).should('exist')
+    })
+
+    it.skip('should find success back link (requires success state)', () => {
+      cy.get(auth.selectors.forgotPasswordSuccessBack).should('exist')
+    })
+
+    it.skip('should find retry button (requires success state)', () => {
+      cy.get(auth.selectors.forgotPasswordRetry).should('exist')
+    })
+
+    it.skip('should find error message (requires server error)', () => {
+      cy.get(auth.selectors.forgotPasswordError).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_AUTH_005: DEVKEYRING
+  // ============================================
+  describe('SEL_AUTH_005: DevKeyring', { tags: '@SEL_AUTH_005' }, () => {
+    beforeEach(() => {
+      auth.visitLogin()
+      cy.get(auth.selectors.loginCard, { timeout: 10000 }).should('be.visible')
+    })
+
+    it('should find devkeyring container', () => {
+      cy.get(auth.selectors.devKeyring).should('exist')
+    })
+
+    it('should find devkeyring trigger', () => {
+      cy.get(auth.selectors.devKeyringTrigger).should('exist')
+    })
+
+    it('should find devkeyring content when opened', () => {
+      auth.openDevKeyring()
+      cy.get(auth.selectors.devKeyringContent).should('be.visible')
+    })
+
+    it('should find devkeyring user options', () => {
+      auth.openDevKeyring()
+      cy.get(auth.selectors.devKeyringUser(0)).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_AUTH_006: RESET PASSWORD (skipped - requires token)
+  // ============================================
+  describe('SEL_AUTH_006: Reset Password', { tags: '@SEL_AUTH_006' }, () => {
+    it.skip('should find reset password form (requires valid token)', () => {
+      cy.get(auth.selectors.resetPasswordForm).should('exist')
+    })
+
+    it.skip('should find password input (requires valid token)', () => {
+      cy.get(auth.selectors.resetPasswordPassword).should('exist')
+    })
+
+    it.skip('should find confirm password input (requires valid token)', () => {
+      cy.get(auth.selectors.resetPasswordConfirm).should('exist')
+    })
+
+    it.skip('should find submit button (requires valid token)', () => {
+      cy.get(auth.selectors.resetPasswordSubmit).should('exist')
+    })
+
+    it.skip('should find error message (requires valid token)', () => {
+      cy.get(auth.selectors.resetPasswordError).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_AUTH_007: VERIFY EMAIL (skipped - requires state)
+  // ============================================
+  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')
+    })
+
+    it.skip('should find resend button (requires pending verification)', () => {
+      cy.get(auth.selectors.verifyEmailResend).should('exist')
+    })
+
+    it.skip('should find success message (requires verification complete)', () => {
+      cy.get(auth.selectors.verifyEmailSuccess).should('exist')
+    })
+
+    it.skip('should find error message (requires verification failure)', () => {
+      cy.get(auth.selectors.verifyEmailError).should('exist')
+    })
+  })
+})