@nextsparkjs/theme-default 0.1.0-beta.44 → 0.1.0-beta.45

package/tests/cypress/e2e/_utils/selectors/posts-editor.cy.ts

@@ -1,350 +0,0 @@
-/**
- * POC Test: Posts Block Editor Selectors Validation
- *
- * This test validates that the new POM architecture with dynamic selectors
- * works correctly for the block-based page builder.
- *
- * Purpose:
- * - Validate selectors from BlockEditorBasePOM work correctly
- * - Ensure dynamic selector generation produces valid CSS selectors
- * - Test before migrating existing tests to new architecture
- *
- * Scope:
- * - Only login and navigate
- * - Assert elements exist in DOM (no full CRUD operations)
- *
- * Test IDs:
- * - SEL_PTED_001: Posts List Page Selectors
- * - SEL_PTED_002: Block Editor Core Selectors
- * - SEL_PTED_003: Block Picker Selectors
- * - SEL_PTED_004: Block Canvas Selectors
- * - SEL_PTED_005: Settings Panel Selectors
- * - SEL_PTED_006: Status Selector
- * - SEL_PTED_007: Block Manipulation Selectors
- * - SEL_PTED_008: Post-Specific Selectors
- * - SEL_PTED_009: Edit Existing Post
- */
-
-import { PostEditorPOM } from '../../../src/features/PostEditorPOM'
-import { PostsPOM } from '../../../src/entities/PostsPOM'
-import { loginAsDefaultDeveloper } from '../../../src/session-helpers'
-
-// Team ID for developer's team (NextSpark Team)
-const DEVELOPER_TEAM_ID = 'team-nextspark-001'
-
-describe('Posts Block Editor Selectors Validation', { tags: ['@ui-selectors', '@posts', '@editor'] }, () => {
-  const postEditor = PostEditorPOM.create()
-  const posts = PostsPOM.create()
-
-  beforeEach(() => {
-    loginAsDefaultDeveloper()
-    // Set team context for entity API calls (posts is team-based)
-    cy.window().then((win) => {
-      win.localStorage.setItem('activeTeamId', DEVELOPER_TEAM_ID)
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_001: POSTS LIST PAGE SELECTORS
-  // ============================================
-  describe('SEL_PTED_001: Posts List Page Selectors', { tags: '@SEL_PTED_001' }, () => {
-    beforeEach(() => {
-      posts.visitList()
-      posts.waitForList()
-    })
-
-    it('should find posts table container', () => {
-      cy.get(posts.selectors.tableContainer).should('exist')
-    })
-
-    it('should find posts add button', () => {
-      cy.get(posts.selectors.addButton).should('exist')
-    })
-
-    it('should find posts search input', () => {
-      cy.get(posts.selectors.search).should('exist')
-    })
-
-    // NOTE: Pagination only shows when there are posts
-    // This test is conditional - passes if data exists, otherwise logs warning
-    it('should find posts pagination (requires sample data)', () => {
-      cy.get('body').then(($body) => {
-        // Check if rows exist (not empty state)
-        if ($body.find('[data-cy^="posts-row-"]').length === 0) {
-          cy.log('⚠️ No posts found - pagination not visible (add sample data)')
-          return // Skip gracefully
-        }
-        cy.get(posts.selectors.pagination).should('exist')
-      })
-    })
-
-    // NOTE: Conditional test - requires sample posts data
-    it('should find at least one post row (requires sample data)', () => {
-      cy.get('body').then(($body) => {
-        // Check if rows exist
-        if ($body.find('[data-cy^="posts-row-"]').length === 0) {
-          cy.log('⚠️ No posts found - skipping row test (add sample data)')
-          return // Skip gracefully
-        }
-        cy.get(posts.selectors.rowGeneric).should('have.length.at.least', 1)
-      })
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_002: BLOCK EDITOR CORE SELECTORS
-  // ============================================
-  describe('SEL_PTED_002: Block Editor Core Selectors', { tags: '@SEL_PTED_002' }, () => {
-    beforeEach(() => {
-      postEditor.visitCreate()
-      postEditor.waitForEditor()
-    })
-
-    it('should find editor container', () => {
-      cy.get(postEditor.editorSelectors.container).should('exist')
-    })
-
-    it('should find title input', () => {
-      cy.get(postEditor.editorSelectors.titleInput).should('exist')
-    })
-
-    it('should find slug input', () => {
-      cy.get(postEditor.editorSelectors.slugInput).should('exist')
-    })
-
-    it('should find save button', () => {
-      cy.get(postEditor.editorSelectors.saveButton).should('exist')
-    })
-
-    it('should find status badge', () => {
-      cy.get(postEditor.editorSelectors.statusBadge).should('exist')
-    })
-
-    it('should find left sidebar toggle', () => {
-      cy.get(postEditor.editorSelectors.leftSidebarToggle).should('exist')
-    })
-
-    it('should find view mode toggle', () => {
-      cy.get(postEditor.editorSelectors.viewModeToggle).should('exist')
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_003: BLOCK PICKER SELECTORS
-  // ============================================
-  describe('SEL_PTED_003: Block Picker Selectors', { tags: '@SEL_PTED_003' }, () => {
-    beforeEach(() => {
-      postEditor.visitCreate()
-      postEditor.waitForEditor()
-    })
-
-    it('should find block picker container', () => {
-      cy.get(postEditor.editorSelectors.blockPicker).should('exist')
-    })
-
-    it('should find block search input', () => {
-      cy.get(postEditor.editorSelectors.blockSearch).should('exist')
-    })
-
-    it('should find category "All" button', () => {
-      cy.get(postEditor.editorSelectors.categoryAll).should('exist')
-    })
-
-    it('should find block items with dynamic selectors', () => {
-      // Test a known block slug - post-content is the main content block for posts
-      cy.get(postEditor.editorSelectors.blockItem('post-content')).should('exist')
-      cy.get(postEditor.editorSelectors.addBlock('post-content')).should('exist')
-    })
-
-    it('should find category selectors', () => {
-      // Categories should be visible
-      cy.get(postEditor.editorSelectors.category('content')).should('exist')
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_004: BLOCK CANVAS SELECTORS
-  // ============================================
-  describe('SEL_PTED_004: Block Canvas Selectors', { tags: '@SEL_PTED_004' }, () => {
-    beforeEach(() => {
-      postEditor.visitCreate()
-      postEditor.waitForEditor()
-    })
-
-    it('should find empty state when no blocks added', () => {
-      cy.get(postEditor.editorSelectors.blockCanvasEmpty).should('exist')
-    })
-
-    it('should find block canvas container when block is added', () => {
-      // Add a block - canvas container appears
-      postEditor.addBlock('post-content')
-      cy.get(postEditor.editorSelectors.blockCanvas).should('exist')
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_005: SETTINGS PANEL SELECTORS
-  // ============================================
-  describe('SEL_PTED_005: Settings Panel Selectors', { tags: '@SEL_PTED_005' }, () => {
-    beforeEach(() => {
-      postEditor.visitCreate()
-      postEditor.waitForEditor()
-    })
-
-    it('should find settings panel empty state when no block selected', () => {
-      // When no block is selected, empty state is shown
-      cy.get(postEditor.editorSelectors.settingsPanelEmpty).should('exist')
-    })
-
-    it('should find settings panel container when block is selected', () => {
-      // Add a block first - settings panel appears with block selected
-      postEditor.addBlock('post-content')
-      cy.get(postEditor.editorSelectors.settingsPanel).should('exist')
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_006: STATUS SELECTOR
-  // ============================================
-  describe('SEL_PTED_006: Status Selector', { tags: '@SEL_PTED_006' }, () => {
-    beforeEach(() => {
-      postEditor.visitCreate()
-      postEditor.waitForEditor()
-    })
-
-    it('should find status selector trigger', () => {
-      cy.get(postEditor.editorSelectors.statusSelector).should('exist')
-    })
-
-    it('should find status options when clicked', () => {
-      // Scroll into view and click - the selector may be hidden due to sidebar
-      cy.get(postEditor.editorSelectors.statusSelector).scrollIntoView().click({ force: true })
-      cy.get(postEditor.editorSelectors.statusOption('draft')).should('exist')
-      cy.get(postEditor.editorSelectors.statusOption('published')).should('exist')
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_007: BLOCK MANIPULATION SELECTORS
-  // ============================================
-  describe('SEL_PTED_007: Block Manipulation Selectors', { tags: '@SEL_PTED_007' }, () => {
-    beforeEach(() => {
-      postEditor.visitCreate()
-      postEditor.waitForEditor()
-    })
-
-    it('should find preview block controls after adding a block', () => {
-      // Add a post-content block
-      postEditor.addBlock('post-content')
-
-      // Wait for block to appear using preview-block pattern (not sortable-block)
-      // The editor uses preview-block-{id} for the canvas blocks
-      cy.get('[data-cy^="preview-block-"]')
-        .first()
-        .invoke('attr', 'data-cy')
-        .then((dataCy) => {
-          // Extract ID - format is preview-block-{uuid}
-          const match = dataCy?.match(/^preview-block-([a-f0-9-]+)$/)
-          const blockId = match ? match[1] : ''
-          expect(blockId).to.not.be.empty
-
-          // Validate preview block selectors (actual selectors in DOM)
-          cy.get(postEditor.editorSelectors.previewBlock(blockId)).should('exist')
-          cy.get(postEditor.editorSelectors.previewMoveUp(blockId)).should('exist')
-          cy.get(postEditor.editorSelectors.previewMoveDown(blockId)).should('exist')
-        })
-    })
-
-    // NOTE: sortable-block, drag-handle, duplicate-block selectors don't exist in current implementation
-    // The editor uses preview-block pattern instead. Skipping these tests.
-    it.skip('should find sortable block controls (sortable-block selectors not implemented)', () => {
-      postEditor.addBlock('post-content')
-      cy.get('[data-cy^="sortable-block-"]').first().should('exist')
-    })
-
-    it('should find settings panel and tabs after adding a block', () => {
-      // Add a post-content block - settings panel appears automatically
-      postEditor.addBlock('post-content')
-
-      // Settings panel should appear with tabs
-      cy.get(postEditor.editorSelectors.settingsPanel).should('exist')
-      cy.get(postEditor.editorSelectors.tabContent).should('exist')
-      cy.get(postEditor.editorSelectors.tabDesign).should('exist')
-      cy.get(postEditor.editorSelectors.tabAdvanced).should('exist')
-    })
-
-    it('should find block settings actions', () => {
-      postEditor.addBlock('post-content')
-
-      // Settings panel actions
-      cy.get(postEditor.editorSelectors.resetProps).should('exist')
-      cy.get(postEditor.editorSelectors.removeBlockSettings).should('exist')
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_008: POST-SPECIFIC SELECTORS
-  // ============================================
-  describe('SEL_PTED_008: Post-Specific Selectors', { tags: '@SEL_PTED_008' }, () => {
-    beforeEach(() => {
-      postEditor.visitCreate()
-      postEditor.waitForEditor()
-      // Switch to "Campos" tab to see entity fields
-      cy.get('[data-cy="sidebar-fields"]').click()
-    })
-
-    it('should find excerpt input', () => {
-      cy.get(postEditor.postSelectors.excerptInput).should('exist')
-    })
-
-    it('should find featured image input', () => {
-      cy.get(postEditor.postSelectors.featuredImage).should('exist')
-    })
-
-    // NOTE: Categories and Locale selectors don't have data-cy attributes yet
-    // These tests are skipped until the component adds proper selectors
-    it.skip('should find categories select (missing data-cy)', () => {
-      cy.get(postEditor.postSelectors.categoriesSelect).should('exist')
-    })
-
-    it.skip('should find locale select (missing data-cy)', () => {
-      cy.get(postEditor.postSelectors.localeSelect).should('exist')
-    })
-  })
-
-  // ============================================
-  // SEL_PTED_009: EDIT EXISTING POST
-  // ============================================
-  describe('SEL_PTED_009: Edit Existing Post', { tags: '@SEL_PTED_009' }, () => {
-    it('should find editor elements when editing an existing post (requires sample data)', () => {
-      // Get a post ID from the list
-      posts.visitList()
-      posts.waitForList()
-
-      // Conditional: skip if no posts exist
-      cy.get('body').then(($body) => {
-        // Check if rows exist
-        if ($body.find('[data-cy^="posts-row-"]').length === 0) {
-          cy.log('⚠️ No posts found - skipping edit test (add sample data)')
-          return // Skip gracefully
-        }
-
-        cy.get(posts.selectors.rowGeneric)
-          .first()
-          .invoke('attr', 'data-cy')
-          .then((dataCy) => {
-            const id = dataCy?.replace('posts-row-', '') || ''
-
-            // Navigate to edit
-            postEditor.visitEdit(id)
-            postEditor.waitForEditor()
-
-            // Validate editor is loaded with existing content
-            cy.get(postEditor.editorSelectors.container).should('exist')
-            cy.get(postEditor.editorSelectors.titleInput).should('exist')
-            cy.get(postEditor.editorSelectors.saveButton).should('exist')
-          })
-      })
-    })
-  })
-})