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

package/tests/cypress/e2e/patterns/patterns-in-pages.cy.ts

@@ -0,0 +1,367 @@
+/**
+ * Patterns in Pages - Functional E2E Tests
+ *
+ * Tests the integration of the patterns system with the page builder:
+ * - Patterns tab visibility and functionality
+ * - Pattern insertion into pages
+ * - Pattern reference rendering and interaction
+ * - Pattern nesting prevention (patterns tab hidden when editing patterns)
+ *
+ * Sample Patterns in DB (team-nextspark-001):
+ * - Newsletter CTA (slug: newsletter-cta, status: published)
+ * - Footer Links (slug: footer-links, status: published)
+ * - Hero Header (slug: hero-header, status: draft)
+ *
+ * Re-execution:
+ *   pnpm tags @patterns               # Run all patterns tests
+ *   pnpm tags @TC_PAT_001             # Run specific test
+ *   pnpm cy:run --spec "cypress/e2e/patterns/patterns-in-pages.cy.ts"
+ */
+
+import { PageBuilderPOM } from '../../src/features/PageBuilderPOM'
+import { loginAsDefaultDeveloper } from '../../src/session-helpers'
+
+const DEVELOPER_TEAM_ID = 'team-nextspark-001'
+
+describe('Patterns in Pages - Functional Tests', {
+  tags: ['@patterns', '@block-editor', '@functional']
+}, () => {
+  const pom = PageBuilderPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+    cy.window().then((win) => {
+      win.localStorage.setItem('activeTeamId', DEVELOPER_TEAM_ID)
+    })
+  })
+
+  // ===========================================================================
+  // TC_PAT_001: Can switch to Patterns tab in block picker
+  // ===========================================================================
+  describe('TC_PAT_001: Switch to Patterns Tab', { tags: '@TC_PAT_001' }, () => {
+    it('should display patterns tab when editing pages', { tags: '@TC_PAT_001_01' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+
+      // Patterns tab should be visible
+      cy.get('[data-cy="block-picker-tab-patterns"]')
+        .should('exist')
+        .and('be.visible')
+    })
+
+    it('should switch to patterns tab on click', { tags: '@TC_PAT_001_02' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+
+      // Click patterns tab
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+
+      // Patterns search and list should appear
+      cy.get('[data-cy="block-picker-patterns-search"]').should('be.visible')
+      cy.get('[data-cy="block-picker-patterns-list"]').should('be.visible')
+    })
+
+    it('should switch back to blocks tab', { tags: '@TC_PAT_001_03' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+
+      // Switch to patterns
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.get('[data-cy="block-picker-patterns-list"]').should('be.visible')
+
+      // Switch back to blocks
+      cy.get('[data-cy="block-picker-tab-blocks"]').click()
+      cy.get('[data-cy="block-picker-list"]').should('be.visible')
+    })
+  })
+
+  // ===========================================================================
+  // TC_PAT_002: Patterns tab shows sample patterns
+  // ===========================================================================
+  describe('TC_PAT_002: Display Sample Patterns', { tags: '@TC_PAT_002' }, () => {
+    beforeEach(() => {
+      pom.visitCreate()
+      pom.waitForEditor()
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.wait(500) // Wait for patterns to load
+    })
+
+    it('should display at least one published pattern', { tags: '@TC_PAT_002_01' }, () => {
+      // Check that at least one pattern card exists
+      cy.get('[data-cy^="block-picker-pattern-card-"]')
+        .should('have.length.at.least', 1)
+    })
+
+    it('should display pattern card with all elements', { tags: '@TC_PAT_002_02' }, () => {
+      // Get first pattern card
+      cy.get('[data-cy^="block-picker-pattern-card-"]').first().within(() => {
+        // Check for icon, title, description, insert button
+        cy.get('[data-cy^="block-picker-pattern-icon-"]').should('exist')
+        cy.get('[data-cy^="block-picker-pattern-title-"]').should('exist').and('not.be.empty')
+        cy.get('[data-cy^="block-picker-pattern-desc-"]').should('exist')
+        cy.get('[data-cy^="block-picker-pattern-insert-"]').should('exist').and('be.visible')
+      })
+    })
+
+    it('should filter patterns using search', { tags: '@TC_PAT_002_03' }, () => {
+      // Get initial count
+      cy.get('[data-cy^="block-picker-pattern-card-"]').then(($cards) => {
+        const initialCount = $cards.length
+
+        // Type search term
+        cy.get('[data-cy="block-picker-patterns-search"]').type('Newsletter')
+        cy.wait(300)
+
+        // Pattern list should be filtered
+        cy.get('[data-cy^="block-picker-pattern-card-"]').then(($filtered) => {
+          // Should have fewer or equal patterns after filtering
+          expect($filtered.length).to.be.at.most(initialCount)
+
+          // If newsletter pattern exists, it should be visible
+          if ($filtered.length > 0) {
+            cy.get('[data-cy^="block-picker-pattern-title-"]')
+              .first()
+              .should('contain.text', 'Newsletter')
+          }
+        })
+      })
+    })
+
+    it('should clear search filter', { tags: '@TC_PAT_002_04' }, () => {
+      // Search for something
+      cy.get('[data-cy="block-picker-patterns-search"]').type('Footer')
+      cy.wait(300)
+
+      // Clear search
+      cy.get('[data-cy="block-picker-patterns-search"]').clear()
+      cy.wait(300)
+
+      // All published patterns should be visible again
+      cy.get('[data-cy^="block-picker-pattern-card-"]')
+        .should('have.length.at.least', 1)
+    })
+  })
+
+  // ===========================================================================
+  // TC_PAT_003: Can insert a pattern into a page
+  // ===========================================================================
+  describe('TC_PAT_003: Insert Pattern into Page', { tags: '@TC_PAT_003' }, () => {
+    it('should insert pattern when clicking insert button', { tags: '@TC_PAT_003_01' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+      pom.switchToLayoutMode()
+
+      // Switch to patterns tab
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.wait(500)
+
+      // Click insert on first pattern
+      cy.get('[data-cy^="block-picker-pattern-insert-"]').first().click()
+
+      // Pattern reference should appear in layout canvas
+      cy.wait(1000)
+      cy.get('[data-cy^="sortable-block-"]').should('have.length.at.least', 1)
+    })
+
+    it('should show pattern reference in sortable blocks list', { tags: '@TC_PAT_003_02' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+      pom.switchToLayoutMode()
+
+      // Insert pattern
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.wait(500)
+      cy.get('[data-cy^="block-picker-pattern-insert-"]').first().click()
+      cy.wait(1000)
+
+      // Should see pattern reference block in layout canvas
+      // Pattern reference should have a distinct appearance (badge, etc.)
+      cy.get(pom.editorSelectors.sortableBlockGeneric)
+        .should('have.length.at.least', 1)
+    })
+
+    it('should allow inserting multiple patterns', { tags: '@TC_PAT_003_03' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+      pom.switchToLayoutMode()
+
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.wait(500)
+
+      // Get count of available patterns
+      cy.get('[data-cy^="block-picker-pattern-insert-"]').then(($buttons) => {
+        const patternCount = Math.min($buttons.length, 2) // Insert max 2 patterns
+
+        // Insert first pattern
+        cy.get('[data-cy^="block-picker-pattern-insert-"]').eq(0).click()
+        cy.wait(500)
+
+        if (patternCount > 1) {
+          // Insert second pattern if available
+          cy.get('[data-cy^="block-picker-pattern-insert-"]').eq(1).click()
+          cy.wait(500)
+
+          // Should have 2 blocks
+          cy.get(pom.editorSelectors.sortableBlockGeneric)
+            .should('have.length.at.least', 2)
+        }
+      })
+    })
+  })
+
+  // ===========================================================================
+  // TC_PAT_004: Pattern reference displays correctly in preview
+  // ===========================================================================
+  describe('TC_PAT_004: Pattern Reference in Preview', { tags: '@TC_PAT_004' }, () => {
+    beforeEach(() => {
+      pom.visitCreate()
+      pom.waitForEditor()
+      pom.switchToLayoutMode()
+
+      // Insert a pattern
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.wait(500)
+      cy.get('[data-cy^="block-picker-pattern-insert-"]').first().click()
+      cy.wait(1000)
+
+      // Switch to preview mode
+      pom.switchToPreviewMode()
+      cy.wait(500)
+    })
+
+    it('should render pattern reference container in preview', { tags: '@TC_PAT_004_01' }, () => {
+      // Pattern reference should be visible
+      cy.get('[data-cy^="pattern-reference-"]')
+        .should('exist')
+        .and('be.visible')
+    })
+
+    it('should display pattern reference badge', { tags: '@TC_PAT_004_02' }, () => {
+      // Badge should indicate this is a pattern reference
+      cy.get('[data-cy^="pattern-reference-badge-"]')
+        .should('exist')
+    })
+
+    it('should show pattern reference edit link', { tags: '@TC_PAT_004_03' }, () => {
+      // Edit link should allow navigating to pattern editor
+      cy.get('[data-cy^="pattern-reference-edit-link-"]')
+        .should('exist')
+        .and('be.visible')
+    })
+
+    it('should show remove button for pattern reference', { tags: '@TC_PAT_004_04' }, () => {
+      cy.get('[data-cy^="pattern-reference-remove-"]')
+        .should('exist')
+    })
+
+    it('should show locked state when pattern reference is selected', { tags: '@TC_PAT_004_05' }, () => {
+      // Click on pattern reference
+      cy.get('[data-cy^="pattern-reference-"]').first().click()
+      cy.wait(500)
+
+      // Locked indicator should appear
+      cy.get('[data-cy^="pattern-reference-locked-"]')
+        .should('exist')
+    })
+  })
+
+  // ===========================================================================
+  // TC_PAT_005: Can remove pattern reference from page
+  // ===========================================================================
+  describe('TC_PAT_005: Remove Pattern Reference', { tags: '@TC_PAT_005' }, () => {
+    it('should remove pattern reference when clicking remove button', { tags: '@TC_PAT_005_01' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+      pom.switchToLayoutMode()
+
+      // Insert pattern
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.wait(500)
+      cy.get('[data-cy^="block-picker-pattern-insert-"]').first().click()
+      cy.wait(1000)
+
+      // Get initial count
+      cy.get(pom.editorSelectors.sortableBlockGeneric).then(($blocks) => {
+        const initialCount = $blocks.length
+
+        // Switch to preview to access remove button
+        pom.switchToPreviewMode()
+        cy.wait(500)
+
+        // Click remove button
+        cy.get('[data-cy^="pattern-reference-remove-"]').first().click()
+        cy.wait(500)
+
+        // Switch back to layout mode to verify
+        pom.switchToLayoutMode()
+        cy.wait(500)
+
+        // Block count should decrease
+        cy.get(pom.editorSelectors.sortableBlockGeneric).should('have.length', initialCount - 1)
+      })
+    })
+
+    it('should remove pattern reference from layout mode', { tags: '@TC_PAT_005_02' }, () => {
+      pom.visitCreate()
+      pom.waitForEditor()
+      pom.switchToLayoutMode()
+
+      // Insert pattern
+      cy.get('[data-cy="block-picker-tab-patterns"]').click()
+      cy.wait(500)
+      cy.get('[data-cy^="block-picker-pattern-insert-"]').first().click()
+      cy.wait(1000)
+
+      // In layout mode, use standard block remove button
+      cy.get(pom.editorSelectors.sortableBlockGeneric).first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          const blockId = dataCy?.replace('sortable-block-', '') || ''
+          cy.get(pom.editorSelectors.removeBlock(blockId)).click()
+          cy.wait(500)
+
+          // Block should be removed
+          cy.get(pom.editorSelectors.sortableBlockGeneric).should('have.length', 0)
+        })
+    })
+  })
+
+  // ===========================================================================
+  // TC_PAT_006: Patterns tab is NOT shown when editing patterns entity
+  // ===========================================================================
+  describe('TC_PAT_006: Prevent Pattern Nesting', { tags: '@TC_PAT_006' }, () => {
+    it('should NOT show patterns tab when editing a pattern', { tags: '@TC_PAT_006_01' }, () => {
+      // Visit the patterns entity create page
+      cy.visit('/dashboard/patterns/create')
+      cy.wait(1000)
+
+      // Wait for editor to load
+      cy.get(pom.editorSelectors.container, { timeout: 15000 }).should('be.visible')
+
+      // Patterns tab should NOT exist (to prevent nesting patterns inside patterns)
+      cy.get('[data-cy="block-picker-tab-patterns"]').should('not.exist')
+    })
+
+    it('should only show blocks and config tabs when editing patterns', { tags: '@TC_PAT_006_02' }, () => {
+      cy.visit('/dashboard/patterns/create')
+      cy.wait(1000)
+      cy.get(pom.editorSelectors.container, { timeout: 15000 }).should('be.visible')
+
+      // Only Blocks and Config tabs should be visible
+      cy.get('[data-cy="block-picker-tab-blocks"]').should('exist').and('be.visible')
+      cy.get('[data-cy="block-picker-tab-config"]').should('exist').and('be.visible')
+      cy.get('[data-cy="block-picker-tab-patterns"]').should('not.exist')
+    })
+
+    it('should show patterns tab when editing pages (control test)', { tags: '@TC_PAT_006_03' }, () => {
+      // Visit pages create (should show patterns tab)
+      pom.visitCreate()
+      pom.waitForEditor()
+
+      // All three tabs should be visible
+      cy.get('[data-cy="block-picker-tab-blocks"]').should('exist').and('be.visible')
+      cy.get('[data-cy="block-picker-tab-patterns"]').should('exist').and('be.visible')
+      cy.get('[data-cy="block-picker-tab-config"]').should('exist').and('be.visible')
+    })
+  })
+})

package/tests/cypress/e2e/uat/_core/auth/app-roles/developer-login.bdd.md

@@ -0,0 +1,231 @@
+---
+feature: Developer App Role Authentication
+priority: critical
+tags: [auth, app-role, developer, dev-zone, security]
+grepTags: [uat, feat-auth, app-role, developer]
+coverage: 6
+---
+
+# Developer App Role Authentication
+
+> Tests for Developer app role login and specific access privileges. Developer is a global app role (not team-based) that grants access to the Dev Zone and inherits Sector7 access.
+
+## @test DEV-LOGIN-001: Developer Login and Dev Zone Access
+
+### Metadata
+- **Priority:** Critical
+- **Type:** Smoke
+- **Tags:** developer, login, dev-zone
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can login and access Dev Zone
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /dev
+Then the URL should include /dev
+And the Dev Zone home page should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede loguearse y acceder a Dev Zone
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /dev
+Then la URL deberia incluir /dev
+And la pagina principal de Dev Zone deberia estar visible
+```
+
+### Expected Results
+- Developer successfully logs in
+- Access to /dev is granted
+- Dev Zone home page renders correctly
+
+---
+
+## @test DEV-LOGIN-002: Developer Access to Style Gallery
+
+### Metadata
+- **Priority:** Normal
+- **Type:** Smoke
+- **Tags:** developer, style-gallery
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can access Style Gallery
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /dev/style
+Then the URL should include /dev/style
+And the Style Gallery page should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder a Style Gallery
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /dev/style
+Then la URL deberia incluir /dev/style
+And la pagina de Style Gallery deberia estar visible
+```
+
+### Expected Results
+- Style Gallery page loads successfully
+- All component sections available
+
+---
+
+## @test DEV-LOGIN-003: Developer Access to Test Cases
+
+### Metadata
+- **Priority:** Normal
+- **Type:** Smoke
+- **Tags:** developer, test-cases
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can access Test Cases viewer
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /dev/tests
+Then the URL should include /dev/tests
+And the Test Cases viewer should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder al visor de Test Cases
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /dev/tests
+Then la URL deberia incluir /dev/tests
+And el visor de Test Cases deberia estar visible
+```
+
+### Expected Results
+- Test Cases viewer loads successfully
+- File tree or empty state visible
+
+---
+
+## @test DEV-LOGIN-004: Developer Access to Config Viewer
+
+### Metadata
+- **Priority:** Normal
+- **Type:** Smoke
+- **Tags:** developer, config-viewer
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Developer can access Config Viewer
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /dev/config
+Then the URL should include /dev/config
+And the Config Viewer page should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder a Config Viewer
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /dev/config
+Then la URL deberia incluir /dev/config
+And la pagina de Config Viewer deberia estar visible
+```
+
+### Expected Results
+- Config Viewer loads successfully
+- Theme and Entities tabs available
+
+---
+
+## @test DEV-LOGIN-005: Developer Inherited Sector7 Access
+
+### Metadata
+- **Priority:** High
+- **Type:** Regression
+- **Tags:** developer, sector7, inherited
+
+```gherkin:en
+Scenario: Developer can access Sector7 (inherited privilege)
+
+Given I am logged in as Developer (developer@nextspark.dev)
+When I visit /sector7
+Then the URL should include /sector7
+And the Sector7 container should be visible
+```
+
+```gherkin:es
+Scenario: Developer puede acceder a Sector7 (privilegio heredado)
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+When visito /sector7
+Then la URL deberia incluir /sector7
+And el contenedor de Sector7 deberia estar visible
+```
+
+### Expected Results
+- Developer inherits superadmin privileges for Sector7
+- Sector7 control panel accessible
+- No access denied redirect
+
+---
+
+## @test DEV-LOGIN-006: Developer Logout Flow
+
+### Metadata
+- **Priority:** Normal
+- **Type:** Regression
+- **Tags:** developer, logout
+
+```gherkin:en
+Scenario: Developer can logout successfully
+
+Given I am logged in as Developer (developer@nextspark.dev)
+And I am on the dashboard
+When I click on user menu
+And I click on Sign Out
+Then I should be redirected to /login
+```
+
+```gherkin:es
+Scenario: Developer puede cerrar sesion correctamente
+
+Given estoy logueado como Developer (developer@nextspark.dev)
+And estoy en el dashboard
+When hago click en el menu de usuario
+And hago click en Sign Out
+Then deberia ser redirigido a /login
+```
+
+### Expected Results
+- User menu opens correctly
+- Sign out action works
+- Redirect to login page
+
+---
+
+## UI Elements
+
+| Element | Selector | Description |
+|---------|----------|-------------|
+| Dev Home Page | `[data-cy="dev-home-page"]` | Dev Zone home page container |
+| Dev Style Page | `[data-cy="dev-style-page"]` | Style Gallery page container |
+| Dev Tests Page | `[data-cy="dev-tests-page"]` | Test Cases viewer container |
+| Dev Config Page | `[data-cy="dev-config-page"]` | Config Viewer page container |
+| Sector7 Container | `[data-cy="sector7-container"]` | Sector7 main container |
+| User Menu Trigger | `[data-cy="topnav-user-menu-trigger"]` | User menu dropdown trigger |
+| Sign Out Button | `[data-cy="topnav-menu-signOut"]` | Sign out menu item |
+
+---
+
+## Summary
+
+| Test ID | Block | Description | Tags |
+|---------|-------|-------------|------|
+| DEV-LOGIN-001 | Login | Developer login + Dev Zone access | `@smoke` |
+| DEV-LOGIN-002 | Access | Style Gallery access | `@smoke` |
+| DEV-LOGIN-003 | Access | Test Cases viewer access | `@smoke` |
+| DEV-LOGIN-004 | Access | Config Viewer access | `@smoke` |
+| DEV-LOGIN-005 | Inherited | Sector7 access (inherited) | |
+| DEV-LOGIN-006 | Logout | Developer logout flow | |