@nextsparkjs/theme-default 0.1.0-beta.51 → 0.1.0-beta.52

package/package.json

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

package/tests/cypress/e2e/_utils/selectors/patterns.cy.ts

@@ -0,0 +1,392 @@
+/**
+ * UI Selectors Validation: Patterns
+ *
+ * This test validates that patterns-specific selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate PatternsPOM and PageBuilderPOM selectors work correctly
+ * - Ensure all patterns-specific selectors are implemented
+ * - Validate KEY DIFFERENCES from standard entity editor:
+ *   - NO slug input (patterns don't have slugs)
+ *   - NO patterns tab in block picker (to prevent recursive patterns)
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to patterns pages (requires login)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * Test IDs:
+ * - SEL_PAT_001: Patterns List Page Selectors (5 selectors)
+ * - SEL_PAT_002: Patterns List Table Actions (4 selectors)
+ * - SEL_PAT_003: Patterns Editor Header - KEY DIFFERENCES (5 selectors)
+ * - SEL_PAT_004: Patterns Editor Block Picker - KEY DIFFERENCES (5 selectors)
+ * - SEL_PAT_005: Patterns Reports Page (4 selectors)
+ * - SEL_PAT_006: Pattern Usage Stats (3 selectors)
+ * - SEL_PAT_007: Pattern Usage Report Controls (5 selectors)
+ * - SEL_PAT_008: Pattern Usage Table (3 selectors)
+ *
+ * DEPENDENCIES:
+ * - Sample patterns must exist (from seed data)
+ * - At least one pattern must have usages (for reports tests)
+ */
+
+import { PatternsPOM } from '../../../src/entities/PatternsPOM'
+import { cySelector } from '../../../src/selectors'
+import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
+
+describe('Patterns Selectors Validation', { tags: ['@ui-selectors', '@patterns'] }, () => {
+  const patterns = PatternsPOM.create()
+
+  // ============================================
+  // SEL_PAT_001: PATTERNS LIST PAGE SELECTORS (5 selectors)
+  // ============================================
+  describe('SEL_PAT_001: Patterns List Page Selectors', { tags: '@SEL_PAT_001' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+    })
+
+    it('should find page container', () => {
+      cy.get(patterns.selectors.page).should('exist')
+    })
+
+    it('should find page title', () => {
+      cy.get(patterns.selectors.title).should('exist')
+    })
+
+    it('should find add button', () => {
+      cy.get(patterns.selectors.addBtn).should('exist')
+    })
+
+    it('should find search container', () => {
+      cy.get(patterns.selectors.searchContainer).should('exist')
+    })
+
+    it('should find table container', () => {
+      cy.get(patterns.selectors.table).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_002: PATTERNS LIST TABLE ACTIONS (4 selectors)
+  // REQUIRES: At least one pattern in the database
+  // ============================================
+  describe('SEL_PAT_002: Patterns List Table Actions', { tags: '@SEL_PAT_002' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+    })
+
+    it('should find row menu for first pattern', () => {
+      // Get first pattern row and find its menu
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).should('exist')
+        }
+      })
+    })
+
+    it('should find edit action in row menu', () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('edit', patternId)).should('exist')
+        }
+      })
+    })
+
+    it('should find delete action in row menu', () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('delete', patternId)).should('exist')
+        }
+      })
+    })
+
+    it('should find usages quick action in row menu', () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).should('exist')
+        }
+      })
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_003: PATTERNS EDITOR HEADER - KEY DIFFERENCES (5 selectors)
+  // NOTE: Patterns editor does NOT have slug input (unlike pages/posts)
+  // ============================================
+  describe('SEL_PAT_003: Patterns Editor Header', { tags: '@SEL_PAT_003' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      // Navigate to create a new pattern
+      cy.visit('/dashboard/patterns/create', { timeout: 60000 })
+      // Wait for editor to load using block editor selector
+      cy.get(cySelector('blockEditor.header.container'), { timeout: 15000 }).should('be.visible')
+    })
+
+    it('should find header container', () => {
+      cy.get(cySelector('blockEditor.header.container')).should('exist')
+    })
+
+    it('should find title input', () => {
+      cy.get(cySelector('blockEditor.header.titleInput')).should('exist')
+    })
+
+    it('should NOT have slug input (patterns-specific)', () => {
+      // KEY DIFFERENCE: Patterns do not have slugs
+      cy.get(cySelector('blockEditor.header.slugInput')).should('not.exist')
+    })
+
+    it('should find save button', () => {
+      cy.get(cySelector('blockEditor.header.saveButton')).should('exist')
+    })
+
+    it('should find view mode toggle', () => {
+      cy.get(cySelector('blockEditor.header.viewToggle')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_004: PATTERNS EDITOR BLOCK PICKER - KEY DIFFERENCES (5 selectors)
+  // NOTE: Patterns block picker does NOT have patterns tab (to prevent recursion)
+  // ============================================
+  describe('SEL_PAT_004: Patterns Editor Block Picker', { tags: '@SEL_PAT_004' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      cy.visit('/dashboard/patterns/create', { timeout: 60000 })
+      cy.get(cySelector('blockEditor.header.container'), { timeout: 15000 }).should('be.visible')
+    })
+
+    it('should find block picker container', () => {
+      cy.get(cySelector('blockEditor.blockPicker.container')).should('exist')
+    })
+
+    it('should find blocks tab', () => {
+      cy.get(cySelector('blockEditor.blockPicker.tabBlocks')).should('exist')
+    })
+
+    it('should NOT have patterns tab (patterns-specific)', () => {
+      // KEY DIFFERENCE: Patterns cannot contain other patterns (prevent recursion)
+      cy.get(cySelector('blockEditor.blockPicker.tabPatterns')).should('not.exist')
+    })
+
+    it('should find config tab', () => {
+      cy.get(cySelector('blockEditor.blockPicker.tabConfig')).should('exist')
+    })
+
+    it('should find search input', () => {
+      cy.get(cySelector('blockEditor.blockPicker.searchInput')).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_005: PATTERNS REPORTS PAGE (4 selectors)
+  // REQUIRES: A pattern with usages for meaningful tests
+  // ============================================
+  describe('SEL_PAT_005: Patterns Reports Page', { tags: '@SEL_PAT_005' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+    })
+
+    it('should navigate to pattern usages and find report container', () => {
+      // Click usages action on first pattern
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          // Wait for page to load and find report container
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('should find back button on usages page', () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+          // Back button should exist on the page
+          cy.get(patterns.selectors.backButton).should('exist')
+        }
+      })
+    })
+
+    it('should find page title on usages page', () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+          cy.get(patterns.selectors.headerTitle).should('exist')
+        }
+      })
+    })
+
+    it('should find edit button on usages page', () => {
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+          cy.get(patterns.selectors.editButton).should('exist')
+        }
+      })
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_006: PATTERN USAGE STATS (3 selectors)
+  // ============================================
+  describe('SEL_PAT_006: Pattern Usage Stats', { tags: '@SEL_PAT_006' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+      // Navigate to first pattern's usages
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('should find stats container', () => {
+      cy.get(patterns.patternSelectors.usageStats.container).should('exist')
+    })
+
+    it('should find total usage card', () => {
+      cy.get(patterns.patternSelectors.usageStats.total).should('exist')
+    })
+
+    it('should find usage by type cards (if usages exist)', () => {
+      // This might not exist if pattern has no usages, so check for either stats or loading
+      cy.get('body').then(($body) => {
+        if ($body.find(patterns.patternSelectors.usageStats.byType('pages')).length > 0) {
+          cy.get(patterns.patternSelectors.usageStats.byType('pages')).should('exist')
+        } else if ($body.find(patterns.patternSelectors.usageStats.byType('posts')).length > 0) {
+          cy.get(patterns.patternSelectors.usageStats.byType('posts')).should('exist')
+        } else {
+          // No usage by type cards, which is fine if pattern has no usages
+          cy.log('No usage by type cards found - pattern may have no usages')
+        }
+      })
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_007: PATTERN USAGE REPORT CONTROLS (5 selectors)
+  // ============================================
+  describe('SEL_PAT_007: Pattern Usage Report Controls', { tags: '@SEL_PAT_007' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+      // Navigate to first pattern's usages
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('should find report container', () => {
+      cy.get(patterns.patternSelectors.usageReport.container).should('exist')
+    })
+
+    it('should find filter select', () => {
+      cy.get(patterns.patternSelectors.usageReport.filterSelect).should('exist')
+    })
+
+    it('should find pagination container', () => {
+      cy.get(patterns.patternSelectors.usageReport.pagination).should('exist')
+    })
+
+    it('should find prev page button', () => {
+      cy.get(patterns.patternSelectors.usageReport.prevPage).should('exist')
+    })
+
+    it('should find next page button', () => {
+      cy.get(patterns.patternSelectors.usageReport.nextPage).should('exist')
+    })
+
+    it('should find results info', () => {
+      cy.get(patterns.patternSelectors.usageReport.resultsInfo).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEL_PAT_008: PATTERN USAGE TABLE (3 selectors)
+  // ============================================
+  describe('SEL_PAT_008: Pattern Usage Table', { tags: '@SEL_PAT_008' }, () => {
+    beforeEach(() => {
+      loginAsDefaultDeveloper()
+      patterns.visitList()
+      patterns.waitForList()
+      // Navigate to first pattern's usages
+      cy.get('[data-cy^="patterns-row-"]').first().then(($row) => {
+        const dataCy = $row.attr('data-cy')
+        const patternId = dataCy?.replace('patterns-row-', '')
+        if (patternId) {
+          cy.get(patterns.selectors.rowMenu(patternId)).click()
+          cy.get(patterns.selectors.rowAction('usages', patternId)).click()
+          cy.get(patterns.patternSelectors.usageReport.container, { timeout: 15000 }).should('exist')
+        }
+      })
+    })
+
+    it('should find usage table container (or empty state)', () => {
+      cy.get('body').then(($body) => {
+        // Either the table exists or the empty state
+        if ($body.find(patterns.patternSelectors.usageTable.container).length > 0) {
+          cy.get(patterns.patternSelectors.usageTable.container).should('exist')
+        } else {
+          cy.get(patterns.patternSelectors.usageTable.empty).should('exist')
+        }
+      })
+    })
+
+    it.skip('should find usage row (requires pattern with usages)', () => {
+      // This test requires the pattern to have actual usages
+      cy.get('[data-cy^="pattern-usage-row-"]').first().should('exist')
+    })
+
+    it.skip('should find view link in usage row (requires pattern with usages)', () => {
+      // This test requires the pattern to have actual usages
+      cy.get('[data-cy^="pattern-usage-view-"]').first().should('exist')
+    })
+  })
+})