@nextsparkjs/theme-default 0.1.0-beta.20 → 0.1.0-beta.21

package/tests/cypress/e2e/_selectors/dashboard-topnav.cy.ts

@@ -0,0 +1,146 @@
+/**
+ * UI Selectors Validation: Dashboard Topnav
+ *
+ * This test validates that dashboard topnav selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DashboardPOM topnav selectors work correctly
+ * - Ensure all dashboard.topnav.* 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)
+ *
+ * NOTE: Some selectors require specific states (user menu open, specific roles).
+ * signin/signup selectors only visible when NOT logged in.
+ */
+
+import { DashboardPOM } from '../../src/features/DashboardPOM'
+import { loginAsDefaultOwner } from '../../src/session-helpers'
+
+describe('Dashboard Topnav Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  const dashboard = DashboardPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultOwner()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // TOPNAV STRUCTURE (4 selectors)
+  // ============================================
+  describe('Topnav Structure', () => {
+    it('should find topnav header', () => {
+      cy.get(dashboard.selectors.topnavHeader).should('exist')
+    })
+
+    // NOTE: Logo only visible when NOT logged in
+    it.skip('should find topnav logo (only visible when not logged in)', () => {
+      cy.get(dashboard.selectors.topnavLogo).should('exist')
+    })
+
+    it('should find topnav actions container', () => {
+      cy.get(dashboard.selectors.topnavActions).should('exist')
+    })
+
+    it('should find topnav search section', () => {
+      cy.get(dashboard.selectors.topnavSearchSection).should('exist')
+    })
+  })
+
+  // ============================================
+  // TOPNAV ACTIONS (4 selectors)
+  // ============================================
+  describe('Topnav Actions', () => {
+    it('should find sidebar toggle button', () => {
+      cy.get(dashboard.selectors.topnavSidebarToggle).should('exist')
+    })
+
+    it('should find notifications button', () => {
+      cy.get(dashboard.selectors.topnavNotifications).should('exist')
+    })
+
+    it('should find help button', () => {
+      cy.get(dashboard.selectors.topnavHelp).should('exist')
+    })
+
+    it('should find theme toggle button', () => {
+      cy.get(dashboard.selectors.topnavThemeToggle).should('exist')
+    })
+  })
+
+  // ============================================
+  // TOPNAV ADMIN LINKS (2 selectors)
+  // NOTE: Requires superadmin (sector7) or developer role (devzone)
+  // Default owner does NOT have these roles
+  // ============================================
+  describe('Topnav Admin Links', () => {
+    it.skip('should find sector7 link (requires superadmin or developer with sector7 enabled)', () => {
+      // Requires: sector7Config?.enabled && (isSuperAdmin || (isDeveloper && sector7Config?.showToDevelopers))
+      cy.get(dashboard.selectors.topnavSuperadmin).should('exist')
+    })
+
+    it.skip('should find devzone link (requires developer role)', () => {
+      // Requires: devZoneConfig?.enabled && isDeveloper
+      cy.get(dashboard.selectors.topnavDevzone).should('exist')
+    })
+  })
+
+  // ============================================
+  // USER MENU (4+ selectors)
+  // ============================================
+  describe('User Menu', () => {
+    it('should find user menu trigger', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).should('exist')
+    })
+
+    it('should find user menu when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavUserMenu).should('be.visible')
+    })
+
+    it('should find profile menu item when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavMenuItem('user')).should('exist')
+    })
+
+    it('should find settings menu item when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      cy.get(dashboard.selectors.topnavMenuItem('settings')).should('exist')
+    })
+
+    it('should find signOut action when opened', () => {
+      cy.get(dashboard.selectors.topnavUserMenuTrigger).click()
+      // Action is 'signOut' per dashboard.config.ts
+      cy.get(dashboard.selectors.topnavMenuAction('signOut')).should('exist')
+    })
+  })
+
+  // ============================================
+  // PUBLIC NAVBAR SELECTORS (2 selectors)
+  // NOTE: Only visible when NOT logged in - skip for logged-in tests
+  // ============================================
+  describe('Public Navbar Selectors', () => {
+    it.skip('should find signin button (only visible when not logged in)', () => {
+      cy.get(dashboard.selectors.topnavSignin).should('exist')
+    })
+
+    it.skip('should find signup button (only visible when not logged in)', () => {
+      cy.get(dashboard.selectors.topnavSignup).should('exist')
+    })
+  })
+
+  // ============================================
+  // LOADING STATE SELECTOR (1 selector)
+  // NOTE: Only visible during auth loading
+  // ============================================
+  describe('Loading State Selectors', () => {
+    it.skip('should find user loading state (only visible during auth loading)', () => {
+      cy.get(dashboard.selectors.topnavUserLoading).should('exist')
+    })
+  })
+})

package/tests/cypress/e2e/_selectors/devtools.cy.ts

@@ -0,0 +1,210 @@
+/**
+ * UI Selectors Validation: DevTools (DevTools)
+ *
+ * This test validates that devtools selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate DevtoolsPOM selectors work correctly
+ * - Ensure all dev.* selectors are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to /devtools pages (requires developer role)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * IMPORTANT: DevTools is only accessible to users with 'developer' app role.
+ */
+
+import { DevtoolsPOM } from '../../src/features/DevtoolsPOM'
+import { loginAsDefaultDeveloper } from '../../src/session-helpers'
+
+describe('DevTools Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  const dev = DevtoolsPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultDeveloper()
+  })
+
+  // ============================================
+  // NAVIGATION STRUCTURE (8 selectors)
+  // ============================================
+  describe('Navigation Structure', () => {
+    beforeEach(() => {
+      cy.visit('/devtools', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools')
+    })
+
+    it('should find sidebar container', () => {
+      cy.get(dev.selectors.sidebar).should('exist')
+    })
+
+    it('should find sidebar collapse toggle', () => {
+      cy.get(dev.selectors.sidebarCollapseToggle).should('exist')
+    })
+
+    it('should find nav home item', () => {
+      cy.get(dev.selectors.navHome).should('exist')
+    })
+
+    it('should find nav style gallery item', () => {
+      cy.get(dev.selectors.navStyleGallery).should('exist')
+    })
+
+    it('should find nav test cases item', () => {
+      cy.get(dev.selectors.navTestCases).should('exist')
+    })
+
+    it('should find nav config item', () => {
+      cy.get(dev.selectors.navConfig).should('exist')
+    })
+
+    it('should find exit to dashboard link', () => {
+      cy.get(dev.selectors.exitToDashboard).should('exist')
+    })
+
+    it('should find go to admin link', () => {
+      cy.get(dev.selectors.goToAdmin).should('exist')
+    })
+  })
+
+  // ============================================
+  // HOME PAGE (4 selectors)
+  // ============================================
+  describe('Home Page', () => {
+    beforeEach(() => {
+      cy.visit('/devtools', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools')
+    })
+
+    it('should find home page container', () => {
+      cy.get(dev.selectors.homePage).should('exist')
+    })
+
+    it('should find style gallery quick link', () => {
+      cy.get(dev.selectors.homeStyleLink).should('exist')
+    })
+
+    it('should find tests quick link', () => {
+      cy.get(dev.selectors.homeTestsLink).should('exist')
+    })
+
+    it('should find config quick link', () => {
+      cy.get(dev.selectors.homeConfigLink).should('exist')
+    })
+  })
+
+  // ============================================
+  // STYLE GALLERY PAGE (8 selectors)
+  // ============================================
+  describe('Style Gallery Page', () => {
+    beforeEach(() => {
+      cy.visit('/devtools/style', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools/style')
+    })
+
+    it('should find style page container', () => {
+      cy.get(dev.selectors.stylePage).should('exist')
+    })
+
+    it('should find components tab', () => {
+      cy.get(dev.selectors.styleTabComponents).should('exist')
+    })
+
+    it('should find field types tab', () => {
+      cy.get(dev.selectors.styleTabFieldTypes).should('exist')
+    })
+
+    it('should find theme tab', () => {
+      cy.get(dev.selectors.styleTabTheme).should('exist')
+    })
+
+    it('should find guidelines tab', () => {
+      cy.get(dev.selectors.styleTabGuidelines).should('exist')
+    })
+
+    it('should find component gallery (default tab content)', () => {
+      cy.get(dev.selectors.styleComponentGallery).should('exist')
+    })
+
+    it('should find field types content when tab clicked', () => {
+      cy.get(dev.selectors.styleTabFieldTypes).click()
+      cy.get(dev.selectors.styleFieldTypes).should('exist')
+    })
+
+    it('should find theme preview when tab clicked', () => {
+      cy.get(dev.selectors.styleTabTheme).click()
+      cy.get(dev.selectors.styleThemePreview).should('exist')
+    })
+  })
+
+  // ============================================
+  // CONFIG VIEWER PAGE (8 selectors)
+  // ============================================
+  describe('Config Viewer Page', () => {
+    beforeEach(() => {
+      cy.visit('/devtools/config', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools/config')
+    })
+
+    it('should find config page container', () => {
+      cy.get(dev.selectors.configPage).should('exist')
+    })
+
+    it('should find config viewer container', () => {
+      cy.get(dev.selectors.configViewer).should('exist')
+    })
+
+    it('should find theme tab', () => {
+      cy.get(dev.selectors.configTabTheme).should('exist')
+    })
+
+    it('should find entities tab', () => {
+      cy.get(dev.selectors.configTabEntities).should('exist')
+    })
+
+    it('should find theme content (default tab)', () => {
+      cy.get(dev.selectors.configThemeContent).should('exist')
+    })
+
+    it('should find entities content when tab clicked', () => {
+      cy.get(dev.selectors.configTabEntities).click()
+      cy.get(dev.selectors.configEntitiesContent).should('exist')
+    })
+
+    it('should find copy theme button', () => {
+      cy.get(dev.selectors.configCopyTheme).should('exist')
+    })
+
+    it('should find copy entities button when on entities tab', () => {
+      cy.get(dev.selectors.configTabEntities).click()
+      // Wait for entities to load before checking button
+      cy.get(dev.selectors.configEntitiesContent, { timeout: 10000 }).should('exist')
+      cy.get(dev.selectors.configCopyEntities).should('exist')
+    })
+  })
+
+  // ============================================
+  // TEST CASES PAGE (3 selectors)
+  // NOTE: Conditional states (loading, empty, error) removed - not testable in selector validation
+  // ============================================
+  describe('Test Cases Page', () => {
+    beforeEach(() => {
+      cy.visit('/devtools/tests', { timeout: 60000, failOnStatusCode: false })
+      cy.url().should('include', '/devtools/tests')
+    })
+
+    it('should find tests page container', () => {
+      cy.get(dev.selectors.testsPage).should('exist')
+    })
+
+    it('should find tests viewer container', () => {
+      cy.get(dev.selectors.testsViewer).should('exist')
+    })
+
+    it('should find tests tree', () => {
+      cy.get(dev.selectors.testsTree).should('exist')
+    })
+  })
+})

package/tests/cypress/e2e/_selectors/global-search.cy.ts

@@ -0,0 +1,88 @@
+/**
+ * UI Selectors Validation: Global Search
+ *
+ * This test validates that global search selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate globalSearch.* selectors work correctly
+ * - Ensure search modal and components are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to dashboard (requires login)
+ * - Open search modal
+ * - Assert elements exist in DOM (no actual search)
+ *
+ * NOTE: Search modal must be opened via keyboard shortcut or trigger button.
+ */
+
+import { cySelector } from '../../src/selectors'
+import { loginAsDefaultOwner } from '../../src/session-helpers'
+
+describe('Global Search Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  // Define selectors locally since globalSearch might not be in selectors.ts
+  const selectors = {
+    modal: cySelector('globalSearch.modal'),
+    trigger: cySelector('globalSearch.trigger'),
+    input: cySelector('globalSearch.input'),
+    results: cySelector('globalSearch.results'),
+    result: cySelector('globalSearch.result'),
+  }
+
+  beforeEach(() => {
+    loginAsDefaultOwner()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // SEARCH TRIGGER (1 selector)
+  // ============================================
+  describe('Search Trigger', () => {
+    it.skip('should find search trigger button (selector not implemented)', () => {
+      cy.get(selectors.trigger).should('exist')
+    })
+  })
+
+  // ============================================
+  // SEARCH MODAL (4 selectors)
+  // These require the modal to be open
+  // ============================================
+  describe('Search Modal (when open)', () => {
+    beforeEach(() => {
+      // Try to open search modal via keyboard shortcut (Cmd+K or Ctrl+K)
+      cy.get('body').type('{meta}k')
+      // Wait a bit for modal to open
+      cy.wait(500)
+    })
+
+    it.skip('should find search modal container (selector not implemented)', () => {
+      cy.get(selectors.modal).should('exist')
+    })
+
+    it('should find search input', () => {
+      cy.get(selectors.input).should('exist')
+    })
+
+    it.skip('should find search results container (requires search query)', () => {
+      cy.get(selectors.results).should('exist')
+    })
+
+    it.skip('should find search result item (requires search query with results)', () => {
+      cy.get(selectors.result).should('exist')
+    })
+  })
+
+  // ============================================
+  // ALTERNATIVE: Open via click
+  // ============================================
+  describe('Search Modal (opened via click)', () => {
+    it.skip('should open search modal when clicking trigger (trigger selector not implemented)', () => {
+      cy.get(selectors.trigger).click()
+      cy.wait(500)
+      cy.get(selectors.modal).should('exist')
+      cy.get(selectors.input).should('exist')
+    })
+  })
+})

package/tests/cypress/e2e/_selectors/pages-editor.cy.ts

@@ -0,0 +1,179 @@
+/**
+ * POC Test: Pages Block Editor Selectors Validation
+ *
+ * This test validates selectors specific to the Page Builder that are NOT
+ * available in the Posts editor:
+ * - Page Settings panel
+ * - SEO settings (meta title, description, keywords)
+ * - Locale selector
+ *
+ * Purpose:
+ * - Validate selectors from BlockEditorBasePOM work correctly for pages
+ * - Test page-specific features (SEO, locale)
+ *
+ * Scope:
+ * - Only login and navigate
+ * - Assert elements exist in DOM (no full CRUD operations)
+ */
+
+import { PageBuilderPOM } from '../../src/features/PageBuilderPOM'
+import { PagesPOM } from '../../src/entities/PagesPOM'
+import { loginAsDefaultOwner } from '../../src/session-helpers'
+
+describe('Pages Block Editor Selectors Validation', { tags: ['@ui-selectors'] }, ()
+    => {
+  const pageBuilder = PageBuilderPOM.create()
+  const pages = PagesPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultOwner()
+  })
+
+  describe('Pages List Page Selectors (Entity POM)', () => {
+    beforeEach(() => {
+      pages.visitList()
+      pages.waitForList()
+    })
+
+    it('should find pages table container', () => {
+      cy.get(pages.selectors.tableContainer).should('exist')
+    })
+
+    it('should find pages add button', () => {
+      cy.get(pages.selectors.addButton).should('exist')
+    })
+
+    it('should find at least one page row', () => {
+      cy.get(pages.selectors.rowGeneric).should('have.length.at.least', 1)
+    })
+  })
+
+  describe('Block Editor Core Selectors (Pages)', () => {
+    beforeEach(() => {
+      pageBuilder.visitCreate()
+      pageBuilder.waitForEditor()
+    })
+
+    it('should find editor container', () => {
+      cy.get(pageBuilder.editorSelectors.container).should('exist')
+    })
+
+    it('should find title input', () => {
+      cy.get(pageBuilder.editorSelectors.titleInput).should('exist')
+    })
+
+    it('should find slug input', () => {
+      cy.get(pageBuilder.editorSelectors.slugInput).should('exist')
+    })
+
+    it('should find save button', () => {
+      cy.get(pageBuilder.editorSelectors.saveButton).should('exist')
+    })
+  })
+
+  describe('Page Settings Selectors (Pages-specific)', () => {
+    beforeEach(() => {
+      // Navigate to edit an existing page to see page settings and SEO
+      pages.visitList()
+      pages.waitForList()
+
+      cy.get(pages.selectors.rowGeneric)
+        .first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          const id = dataCy?.replace('pages-row-', '') || ''
+          pageBuilder.visitEdit(id)
+          pageBuilder.waitForEditor()
+        })
+    })
+
+    it('should find entity fields sidebar in edit mode', () => {
+      // Switch to "Campos" tab to see entity fields
+      cy.get('[data-cy="sidebar-fields"]').click()
+      // Uses entity-fields-sidebar instead of page-settings-panel
+      cy.get(pageBuilder.editorSelectors.entityFieldsSidebar).should('exist')
+    })
+
+    // NOTE: SEO settings are not yet implemented in the page editor
+    // These tests are skipped until the SEO section is added
+    it.skip('should find SEO trigger in edit mode (SEO not implemented)', () => {
+      cy.get('[data-cy="sidebar-fields"]').click()
+      cy.get(pageBuilder.editorSelectors.seoTrigger).should('exist')
+    })
+
+    it.skip('should find SEO fields when expanded (SEO not implemented)', () => {
+      cy.get('[data-cy="sidebar-fields"]').click()
+      pageBuilder.openSeoSettings()
+      cy.get(pageBuilder.editorSelectors.metaTitle).should('exist')
+      cy.get(pageBuilder.editorSelectors.metaDescription).should('exist')
+    })
+
+    it('should find locale selector', () => {
+      cy.get('[data-cy="sidebar-fields"]').click()
+      // Uses field-locale pattern from entity fields
+      cy.get(pageBuilder.pageSelectors.localeSelect).should('exist')
+    })
+  })
+
+  describe('Block Picker Selectors (Pages)', () => {
+    beforeEach(() => {
+      pageBuilder.visitCreate()
+      pageBuilder.waitForEditor()
+    })
+
+    it('should find block picker container', () => {
+      cy.get(pageBuilder.editorSelectors.blockPicker).should('exist')
+    })
+
+    it('should find hero block (common in pages)', () => {
+      cy.get(pageBuilder.editorSelectors.blockItem('hero')).should('exist')
+      cy.get(pageBuilder.editorSelectors.addBlock('hero')).should('exist')
+    })
+  })
+
+  describe('Block Canvas and Settings (Pages)', () => {
+    beforeEach(() => {
+      pageBuilder.visitCreate()
+      pageBuilder.waitForEditor()
+    })
+
+    it('should find empty state when no blocks added', () => {
+      cy.get(pageBuilder.editorSelectors.blockCanvasEmpty).should('exist')
+    })
+
+    it('should find block canvas and settings when block is added', () => {
+      // Add a hero block
+      pageBuilder.addBlock('hero')
+
+      // Canvas and settings should appear
+      cy.get(pageBuilder.editorSelectors.blockCanvas).should('exist')
+      cy.get(pageBuilder.editorSelectors.settingsPanel).should('exist')
+      cy.get(pageBuilder.editorSelectors.tabContent).should('exist')
+      cy.get(pageBuilder.editorSelectors.tabDesign).should('exist')
+    })
+  })
+
+  describe('Edit Existing Page Selectors', () => {
+    it('should find editor elements when editing an existing page', () => {
+      // Get a page ID from the list
+      pages.visitList()
+      pages.waitForList()
+
+      cy.get(pages.selectors.rowGeneric)
+        .first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          const id = dataCy?.replace('pages-row-', '') || ''
+
+          // Navigate to edit
+          pageBuilder.visitEdit(id)
+          pageBuilder.waitForEditor()
+
+          // Validate editor is loaded with existing content
+          cy.get(pageBuilder.editorSelectors.container).should('exist')
+          cy.get(pageBuilder.editorSelectors.titleInput).should('exist')
+          cy.get(pageBuilder.editorSelectors.saveButton).should('exist')
+        })
+    })
+  })
+})