@nextsparkjs/core 0.1.0-beta.13 → 0.1.0-beta.131

package/templates/contents/themes/starter/tests/cypress/e2e/_utils/selectors/teams.bdd.md

@@ -0,0 +1,278 @@
+---
+feature: Teams UI Selectors Validation
+priority: high
+tags: [selectors, teams, ui-validation, multi-tenant]
+grepTags: [ui-selectors, teams, SEL_TEAM_001, SEL_TEAM_003, SEL_TEAM_004, SEL_TEAM_006, SEL_TEAM_007, SEL_TEAM_008, multi-team, mobile]
+coverage: 6
+---
+
+# Teams UI Selectors Validation
+
+> Validates that teams 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_TEAM_001: Team Switcher Selectors
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** teams, switcher, sidebar
+- **Grep:** `@ui-selectors` `@SEL_TEAM_001`
+- **Status:** Active (5 passing)
+
+```gherkin:en
+Scenario: Team switcher has complete structure
+
+Given I am logged in as developer
+And I navigate to the dashboard
+And the sidebar is expanded
+Then I should find the team switcher compact trigger
+When I click the team switcher trigger
+Then I should find the team switcher dropdown
+And I should find at least one team option
+And I should find the manage teams link
+```
+
+```gherkin:es
+Scenario: El switcher de equipos tiene estructura completa
+
+Given estoy logueado como developer
+And navego al dashboard
+And el sidebar esta expandido
+Then deberia encontrar el trigger del team switcher compacto
+When hago click en el trigger del team switcher
+Then deberia encontrar el dropdown del team switcher
+And deberia encontrar al menos una opcion de equipo
+And deberia encontrar el link de administrar equipos
+```
+
+### Expected Results
+- `teams.switcher.compact` selector exists (team-switcher-compact) ✅
+- `teams.switcher.dropdown` selector exists when opened (team-switcher-dropdown) ✅
+- `teams.switcher.option` selector exists for team options (team-option-{slug}) ✅
+- `teams.switcher.manageLink` selector exists (manage-teams-link) ✅
+- Create button documentation ✅
+
+---
+
+## @test SEL_TEAM_003: Create Team Dialog Documentation
+
+### Metadata
+- **Priority:** Low
+- **Type:** Documentation
+- **Tags:** teams, create, dialog
+- **Grep:** `@ui-selectors` `@SEL_TEAM_003`
+- **Status:** Active (documentation only)
+
+```gherkin:en
+Scenario: Create Team Dialog selectors are documented
+
+Given the Create Team Dialog is on the settings/teams page
+Then the following selectors are tested in settings-teams.cy.ts:
+| Selector | Value |
+| create-team-dialog | Dialog container |
+| team-name-input | Name input field |
+| team-slug-input | Slug input field |
+| team-description-input | Description input |
+| cancel-create-team | Cancel button |
+| submit-create-team | Submit button |
+```
+
+```gherkin:es
+Scenario: Los selectores del dialogo de crear equipo estan documentados
+
+Given el dialogo de crear equipo esta en la pagina settings/teams
+Then los siguientes selectores se prueban en settings-teams.cy.ts:
+| Selector | Valor |
+| create-team-dialog | Contenedor del dialogo |
+| team-name-input | Campo de nombre |
+| team-slug-input | Campo de slug |
+| team-description-input | Campo de descripcion |
+| cancel-create-team | Boton cancelar |
+| submit-create-team | Boton enviar |
+```
+
+### Notes
+This test documents that Create Team Dialog selectors are tested in `settings-teams.cy.ts`, not here.
+
+---
+
+## @test SEL_TEAM_004: Dashboard Sidebar Selectors
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** sidebar, dashboard
+- **Grep:** `@ui-selectors` `@SEL_TEAM_004`
+- **Status:** Active (2 passing)
+
+```gherkin:en
+Scenario: Dashboard sidebar has required selectors
+
+Given I am logged in as developer
+And I navigate to the dashboard
+Then I should find the sidebar main container
+And I should find the sidebar toggle button
+```
+
+```gherkin:es
+Scenario: El sidebar del dashboard tiene los selectores requeridos
+
+Given estoy logueado como developer
+And navego al dashboard
+Then deberia encontrar el contenedor principal del sidebar
+And deberia encontrar el boton toggle del sidebar
+```
+
+### Expected Results
+- `dashboard.sidebar.main` selector exists ✅
+- `dashboard.topnav.sidebarToggle` selector exists ✅
+
+---
+
+## @test SEL_TEAM_006: Team Members Documentation
+
+### Metadata
+- **Priority:** Low
+- **Type:** Documentation
+- **Tags:** teams, members, settings
+- **Grep:** `@ui-selectors` `@SEL_TEAM_006`
+- **Status:** Active (documentation only)
+
+```gherkin:en
+Scenario: Team members selectors are documented
+
+Given team members management is on the settings/teams page
+Then the team members selectors are tested in settings-teams.cy.ts
+And the path is /dashboard/settings/teams
+```
+
+```gherkin:es
+Scenario: Los selectores de miembros del equipo estan documentados
+
+Given la gestion de miembros del equipo esta en la pagina settings/teams
+Then los selectores de miembros del equipo se prueban en settings-teams.cy.ts
+And la ruta es /dashboard/settings/teams
+```
+
+### Notes
+This test documents that Team Members selectors are tested in `settings-teams.cy.ts`, not here.
+
+---
+
+## @test SEL_TEAM_007: Multi-Team Switch Modal
+
+### Metadata
+- **Priority:** High
+- **Type:** Selector Validation
+- **Tags:** teams, modal, switch, multi-team
+- **Grep:** `@ui-selectors` `@SEL_TEAM_007` `@multi-team`
+- **Status:** Active (2 passing)
+- **User:** Carlos Mendoza (loginAsDefaultOwner) - has multiple teams
+
+```gherkin:en
+Scenario: Team switch modal appears during team change
+
+Given I am logged in as Carlos Mendoza (owner with multiple teams)
+And I navigate to the dashboard
+And the sidebar is expanded
+When I open the team switcher dropdown
+Then I should find at least 2 team options
+When I click on a different team
+Then I should find the team switch modal
+```
+
+```gherkin:es
+Scenario: El modal de cambio de equipo aparece durante el cambio
+
+Given estoy logueado como Carlos Mendoza (owner con multiples equipos)
+And navego al dashboard
+And el sidebar esta expandido
+When abro el dropdown del team switcher
+Then deberia encontrar al menos 2 opciones de equipo
+When hago click en un equipo diferente
+Then deberia encontrar el modal de cambio de equipo
+```
+
+### Expected Results
+- Multiple team options exist (at least 2) ✅
+- `teams.switchModal.container` selector exists during switch (team-switch-modal) ✅
+
+### Notes
+This test uses `loginAsDefaultOwner()` which logs in as Carlos Mendoza, a user with multiple teams:
+- Carlos Personal (personal team)
+- Everpoint Labs (owner)
+- Other teams where he has membership
+
+---
+
+## @test SEL_TEAM_008: Mobile Team Switcher
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Selector Validation
+- **Tags:** teams, mobile, responsive
+- **Grep:** `@ui-selectors` `@SEL_TEAM_008` `@mobile`
+- **Status:** Active (3 passing)
+- **Viewport:** iphone-x (375x812)
+
+```gherkin:en
+Scenario: Mobile team switcher has required selectors
+
+Given I set the viewport to iphone-x
+And I am logged in as developer
+And I navigate to the dashboard
+Then I should find the mobile more button
+When I tap the more button
+Then I should find the mobile more sheet
+And I should find the mobile team switcher inside the sheet
+```
+
+```gherkin:es
+Scenario: El team switcher movil tiene los selectores requeridos
+
+Given configuro el viewport a iphone-x
+And estoy logueado como developer
+And navego al dashboard
+Then deberia encontrar el boton more movil
+When toco el boton more
+Then deberia encontrar el sheet more movil
+And deberia encontrar el team switcher movil dentro del sheet
+```
+
+### Expected Results
+- `dashboard.mobile.bottomNav.item` with id `more` exists ✅
+- `dashboard.mobile.moreSheet.content` exists when opened ✅
+- `dashboard.mobile.moreSheet.teamSwitcher` exists in sheet ✅
+
+### Notes
+This test uses `cy.viewport('iphone-x')` before login to ensure the mobile layout is rendered.
+
+---
+
+## Related Components
+
+| Component | File | Selectors |
+|-----------|------|-----------|
+| TeamSwitcherCompact | `packages/core/src/components/teams/TeamSwitcherCompact.tsx` | team-switcher-compact, team-switcher-dropdown, team-option-{slug}, manage-teams-link |
+| TeamSwitchModal | `packages/core/src/components/teams/TeamSwitchModal.tsx` | team-switch-modal |
+| Sidebar | `packages/core/src/components/dashboard/layouts/Sidebar.tsx` | sidebar-main |
+| TopNavbar | `packages/core/src/components/dashboard/layouts/TopNavbar.tsx` | topnav-sidebar-toggle |
+| MobileMoreSheet | `packages/core/src/components/dashboard/mobile/MobileMoreSheet.tsx` | mobile-more-sheet, mobile-more-sheet-team-switcher |
+
+## Related POMs
+
+| POM | File | Usage |
+|-----|------|-------|
+| TeamSwitcherPOM | `themes/default/tests/cypress/src/components/TeamSwitcherPOM.ts` | Team switcher interactions and selectors |
+
+## Test Summary
+
+| Test ID | Description | Status | Tests |
+|---------|-------------|--------|-------|
+| SEL_TEAM_001 | Team Switcher Selectors | Active | 5 |
+| SEL_TEAM_003 | Create Team Dialog Documentation | Active | 1 |
+| SEL_TEAM_004 | Dashboard Sidebar Selectors | Active | 2 |
+| SEL_TEAM_006 | Team Members Documentation | Active | 1 |
+| SEL_TEAM_007 | Multi-Team Switch Modal | Active | 2 |
+| SEL_TEAM_008 | Mobile Team Switcher | Active | 3 |
+| **Total** | | **All Active** | **14** |

package/templates/contents/themes/starter/tests/cypress/e2e/_utils/selectors/teams.cy.ts

@@ -0,0 +1,195 @@
+/**
+ * UI Selectors Validation: Teams
+ *
+ * This test validates that teams selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate TeamSwitcherPOM selectors work correctly
+ * - Ensure all teams.* selectors are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to dashboard (requires login)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * Test IDs:
+ * - SEL_TEAM_001: Team Switcher Selectors
+ * - SEL_TEAM_003: Create Team Dialog Documentation
+ * - SEL_TEAM_004: Dashboard Sidebar Selectors
+ * - SEL_TEAM_006: Team Members Documentation
+ * - SEL_TEAM_007: Multi-Team Switch Modal (Carlos Mendoza - multiple teams)
+ * - SEL_TEAM_008: Mobile Team Switcher (iphone-x viewport)
+ *
+ * NOTE: Some selectors require specific states (dialog open, team selected).
+ * Many selectors from CORE_SELECTORS are dynamically scoped.
+ */
+
+import { TeamSwitcherPOM } from '../../../src/components/TeamSwitcherPOM'
+import { loginAsDefaultDeveloper, loginAsDefaultOwner } from '../../../src/session-helpers'
+
+describe('Teams Selectors Validation', { tags: ['@ui-selectors', '@teams'] }, () => {
+  const teamSwitcher = TeamSwitcherPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEL_TEAM_001: TEAM SWITCHER SELECTORS
+  // ============================================
+  describe('SEL_TEAM_001: Team Switcher Selectors', { tags: '@SEL_TEAM_001' }, () => {
+    beforeEach(() => {
+      teamSwitcher.ensureSidebarExpanded()
+    })
+
+    it('should find team switcher compact trigger', () => {
+      cy.get(teamSwitcher.selectors.trigger).should('exist')
+    })
+
+    it('should find team switcher dropdown when opened', () => {
+      teamSwitcher.open()
+      cy.get(teamSwitcher.selectors.dropdown).should('be.visible')
+    })
+
+    it('should find team option in dropdown', () => {
+      teamSwitcher.open()
+      cy.get(teamSwitcher.selectors.teamOption).should('have.length.at.least', 1)
+    })
+
+    it('should find manage teams link', () => {
+      teamSwitcher.open()
+      cy.get(teamSwitcher.selectors.manageTeamsLink).should('exist')
+    })
+
+    // NOTE: Create team button is NOT in TeamSwitcherCompact
+    // It is in the full TeamSwitcher (used in settings/teams page)
+    // That button is tested in settings-teams.cy.ts
+    it('should document that create button is in settings', () => {
+      cy.log('Create Team button is in TeamSwitcher (full version)')
+      cy.log('Tested at: /dashboard/settings/teams via settings-teams.cy.ts')
+      cy.wrap(true).should('be.true')
+    })
+  })
+
+  // ============================================
+  // SEL_TEAM_003: CREATE TEAM DIALOG DOCUMENTATION
+  // NOTE: Create Team Dialog is opened from settings/teams page
+  // Those selectors are tested in settings-teams.cy.ts
+  // ============================================
+  describe('SEL_TEAM_003: Create Team Dialog Documentation', { tags: '@SEL_TEAM_003' }, () => {
+    it('should document that Create Team Dialog is in settings', () => {
+      cy.log('Create Team Dialog selectors:')
+      cy.log('- create-team-dialog')
+      cy.log('- team-name-input')
+      cy.log('- team-slug-input')
+      cy.log('- team-description-input')
+      cy.log('- cancel-create-team')
+      cy.log('- submit-create-team')
+      cy.log('Tested at: /dashboard/settings/teams')
+      cy.wrap(true).should('be.true')
+    })
+  })
+
+  // ============================================
+  // SEL_TEAM_004: DASHBOARD SIDEBAR SELECTORS
+  // ============================================
+  describe('SEL_TEAM_004: Dashboard Sidebar Selectors', { tags: '@SEL_TEAM_004' }, () => {
+    it('should find sidebar main container', () => {
+      cy.get(teamSwitcher.selectors.sidebar).should('exist')
+    })
+
+    it('should find sidebar toggle button', () => {
+      cy.get(teamSwitcher.selectors.sidebarToggle).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_TEAM_006: TEAM MEMBERS DOCUMENTATION
+  // These are tested in settings-teams.cy.ts
+  // ============================================
+  describe('SEL_TEAM_006: Team Members Documentation', { tags: '@SEL_TEAM_006' }, () => {
+    it('should document team members are in settings', () => {
+      cy.log('Team members selectors are tested in settings-teams.cy.ts')
+      cy.log('Path: /dashboard/settings/teams')
+      cy.wrap(true).should('be.true')
+    })
+  })
+})
+
+// ============================================
+// MULTI-TEAM USER TESTS (Carlos Mendoza - Owner)
+// Uses a separate session with multiple teams
+// ============================================
+describe('Teams Selectors - Multi-Team User', { tags: ['@ui-selectors', '@teams', '@multi-team'] }, () => {
+  const teamSwitcher = TeamSwitcherPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultOwner()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEL_TEAM_007: TEAM SWITCH MODAL (Multi-Team)
+  // Carlos Mendoza has multiple teams to test switching
+  // ============================================
+  describe('SEL_TEAM_007: Team Switch Modal', { tags: '@SEL_TEAM_007' }, () => {
+    beforeEach(() => {
+      teamSwitcher.ensureSidebarExpanded()
+    })
+
+    it('should find multiple team options in dropdown', () => {
+      teamSwitcher.open()
+      cy.get(teamSwitcher.selectors.teamOption).should('have.length.at.least', 2)
+    })
+
+    it('should find switch modal when changing teams', () => {
+      teamSwitcher.open()
+      // Get the second team option (different from current)
+      cy.get(teamSwitcher.selectors.teamOption).eq(1).click()
+      // Switch modal should appear during team change
+      cy.get(teamSwitcher.selectors.switchModal, { timeout: 10000 }).should('exist')
+    })
+  })
+})
+
+// ============================================
+// MOBILE VIEWPORT TESTS
+// Uses mobile viewport to test responsive selectors
+// ============================================
+describe('Teams Selectors - Mobile Viewport', { tags: ['@ui-selectors', '@teams', '@mobile'] }, () => {
+  const teamSwitcher = TeamSwitcherPOM.create()
+
+  beforeEach(() => {
+    // Set mobile viewport BEFORE login/visit
+    cy.viewport('iphone-x')
+    loginAsDefaultDeveloper()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEL_TEAM_008: MOBILE TEAM SWITCHER SELECTORS
+  // Tests mobile-specific UI elements
+  // ============================================
+  describe('SEL_TEAM_008: Mobile Team Switcher', { tags: '@SEL_TEAM_008' }, () => {
+    it('should find mobile more button', () => {
+      cy.get(teamSwitcher.selectors.mobileMoreButton).should('exist')
+    })
+
+    it('should find mobile more sheet when opened', () => {
+      cy.get(teamSwitcher.selectors.mobileMoreButton).click()
+      cy.get(teamSwitcher.selectors.mobileMoreSheet).should('be.visible')
+    })
+
+    it('should find mobile team switcher in sheet', () => {
+      cy.get(teamSwitcher.selectors.mobileMoreButton).click()
+      cy.get(teamSwitcher.selectors.mobileMoreSheet).should('be.visible')
+      cy.get(teamSwitcher.selectors.mobileTeamSwitcher).should('exist')
+    })
+  })
+})