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

package/tests/cypress/e2e/uat/entities/pages/block-crud.cy.ts

@@ -0,0 +1,486 @@
+/// <reference types="cypress" />
+
+/**
+ * Block CRUD - Admin UI Tests
+ *
+ * Tests for adding, editing, duplicating, removing, and reordering
+ * blocks within the page editor.
+ *
+ * Tags: @uat, @feat-pages, @block-crud, @page-builder, @regression
+ */
+
+import * as allure from 'allure-cypress'
+import { PageBuilderPOM, loginAsOwner } from '../../../../src'
+
+// Team ID for logged-in user (carlos.mendoza is owner of team-everpoint-001)
+const OWNER_TEAM_ID = 'team-everpoint-001'
+
+describe('Block CRUD - Admin UI', {
+  tags: ['@uat', '@feat-pages', '@block-crud', '@page-builder', '@regression']
+}, () => {
+  let testPageId: string
+
+  beforeEach(() => {
+    allure.epic('Page Builder')
+    allure.feature('Block CRUD')
+
+    // Setup API intercepts BEFORE login
+    PageBuilderPOM.setupApiIntercepts()
+    loginAsOwner()
+
+    // Visit dashboard first to ensure session cookies are active
+    cy.visit('/dashboard', { timeout: 30000 })
+    cy.url().should('include', '/dashboard')
+
+    // Create a test page for each test via session auth
+    // x-team-id header is required by API even with session auth
+    const timestamp = Date.now()
+    cy.request({
+      method: 'POST',
+      url: '/api/v1/pages',
+      headers: {
+        'x-team-id': OWNER_TEAM_ID,
+        'Content-Type': 'application/json'
+      },
+      body: {
+        title: `Block CRUD Test ${timestamp}`,
+        slug: `block-crud-test-${timestamp}`,
+        locale: 'en',
+        published: false,
+        blocks: []
+      }
+    }).then((response) => {
+      testPageId = response.body.data.id
+    })
+  })
+
+  afterEach(() => {
+    // Cleanup test page
+    if (testPageId) {
+      cy.request({
+        method: 'DELETE',
+        url: `/api/v1/pages/${testPageId}`,
+        headers: { 'x-team-id': OWNER_TEAM_ID },
+        failOnStatusCode: false
+      })
+    }
+  })
+
+  // ============================================================
+  // Add Block Tests
+  // ============================================================
+  describe('Add Block', () => {
+    it('PB-BLOCK-001: Should add Hero block', { tags: '@smoke' }, () => {
+      allure.story('Add Block')
+      allure.severity('critical')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        // Switch to layout mode (editor defaults to preview mode)
+        PageBuilderPOM.switchToLayoutMode()
+
+        // Initially canvas should be empty
+        PageBuilderPOM.assertCanvasEmpty()
+
+        // Add hero block
+        PageBuilderPOM.addBlock('hero')
+
+        // Verify block was added
+        PageBuilderPOM.assertBlockCount(1)
+
+        cy.log('Hero block added successfully')
+      })
+    })
+
+    it('PB-BLOCK-002: Should add Features Grid block', () => {
+      allure.story('Add Block')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('features-grid')
+        PageBuilderPOM.assertBlockCount(1)
+
+        cy.log('Features Grid block added')
+      })
+    })
+
+    it('PB-BLOCK-003: Should add CTA Section block', () => {
+      allure.story('Add Block')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('cta-section')
+        PageBuilderPOM.assertBlockCount(1)
+
+        cy.log('CTA Section block added')
+      })
+    })
+
+    it('PB-BLOCK-004: Should add Testimonials block', () => {
+      allure.story('Add Block')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('testimonials')
+        PageBuilderPOM.assertBlockCount(1)
+
+        cy.log('Testimonials block added')
+      })
+    })
+
+    it('PB-BLOCK-005: Should add Text Content block', () => {
+      allure.story('Add Block')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('text-content')
+        PageBuilderPOM.assertBlockCount(1)
+
+        cy.log('Text Content block added')
+      })
+    })
+
+    it('PB-BLOCK-006: Should add multiple blocks', { tags: '@smoke' }, () => {
+      allure.story('Add Block')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+
+        // Add multiple blocks
+        PageBuilderPOM.addBlock('hero')
+        PageBuilderPOM.addBlock('features-grid')
+        PageBuilderPOM.addBlock('cta-section')
+
+        // Verify all blocks added
+        PageBuilderPOM.assertBlockCount(3)
+
+        cy.log('Multiple blocks added successfully')
+      })
+    })
+  })
+
+  // ============================================================
+  // Edit Block Props Tests
+  // ============================================================
+  describe('Edit Block Props', () => {
+    it('PB-BLOCK-007: Should edit block title prop', { tags: '@smoke' }, () => {
+      allure.story('Edit Props')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('hero')
+
+        // Edit title in settings panel
+        cy.get(PageBuilderPOM.editorSelectors.fieldInput('title')).then(($field) => {
+          if ($field.length > 0) {
+            PageBuilderPOM.fillField('title', 'Custom Hero Title')
+
+            // Save and wait for API
+            PageBuilderPOM.savePage()
+            PageBuilderPOM.api.waitForUpdate()
+
+            // Verify via API (session auth with team header)
+            cy.request({
+              method: 'GET',
+              url: `/api/v1/pages/${testPageId}`,
+              headers: { 'x-team-id': OWNER_TEAM_ID }
+            }).then((response) => {
+              const heroBlock = response.body.data.blocks[0]
+              expect(heroBlock.props.title).to.eq('Custom Hero Title')
+
+              cy.log('Block props edited and saved')
+            })
+          } else {
+            cy.log('Title field not found - block may have different field structure')
+          }
+        })
+      })
+    })
+  })
+
+  // ============================================================
+  // Duplicate Block Tests
+  // ============================================================
+  describe('Duplicate Block', () => {
+    it('PB-BLOCK-008: Should duplicate existing block', () => {
+      allure.story('Duplicate Block')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('hero')
+
+        // Get the block ID
+        cy.get(PageBuilderPOM.editorSelectors.sortableBlockGeneric).first()
+          .invoke('attr', 'data-cy')
+          .then((dataCy) => {
+            if (dataCy) {
+              const blockId = dataCy.replace('sortable-block-', '')
+
+              // Duplicate the block
+              PageBuilderPOM.duplicateBlock(blockId)
+
+              // Verify we now have 2 blocks
+              PageBuilderPOM.assertBlockCount(2)
+
+              cy.log('Block duplicated successfully')
+            }
+          })
+      })
+    })
+  })
+
+  // ============================================================
+  // Remove Block Tests
+  // ============================================================
+  describe('Remove Block', () => {
+    it('PB-BLOCK-009: Should remove block from canvas', { tags: '@smoke' }, () => {
+      allure.story('Remove Block')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('hero')
+
+        // Verify block exists
+        PageBuilderPOM.assertBlockCount(1)
+
+        // Get block ID and remove
+        cy.get(PageBuilderPOM.editorSelectors.sortableBlockGeneric).first()
+          .invoke('attr', 'data-cy')
+          .then((dataCy) => {
+            if (dataCy) {
+              const blockId = dataCy.replace('sortable-block-', '')
+
+              PageBuilderPOM.removeBlock(blockId)
+
+              // Verify block removed
+              PageBuilderPOM.assertCanvasEmpty()
+
+              cy.log('Block removed successfully')
+            }
+          })
+      })
+    })
+  })
+
+  // ============================================================
+  // Reorder Block Tests - Edit Mode (Drag & Drop)
+  // ============================================================
+  describe('Reorder Blocks - Edit Mode', () => {
+    it('PB-BLOCK-010: Should reorder blocks with drag and drop', () => {
+      allure.story('Reorder Blocks')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+
+        // Add multiple blocks
+        PageBuilderPOM.addBlock('hero')
+        PageBuilderPOM.addBlock('cta-section')
+
+        // Get first block slug before reorder
+        cy.get(PageBuilderPOM.editorSelectors.sortableBlockGeneric).first()
+          .should('contain.text', 'hero')
+
+        // Note: Actual drag and drop testing requires special handling
+        // This test validates the structure for drag and drop
+        cy.get(PageBuilderPOM.editorSelectors.sortableBlockGeneric)
+          .should('have.length', 2)
+
+        cy.log('Blocks ready for drag and drop reordering')
+      })
+    })
+  })
+
+  // ============================================================
+  // Reorder Block Tests - Preview Mode (Buttons)
+  // ============================================================
+  describe('Reorder Blocks - Preview Mode', () => {
+    it('PB-BLOCK-011: Should reorder blocks with move buttons in Preview mode', () => {
+      allure.story('Reorder Blocks')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        // Switch to layout mode first to add blocks
+        PageBuilderPOM.switchToLayoutMode()
+
+        // Add multiple blocks
+        PageBuilderPOM.addBlock('hero')
+        PageBuilderPOM.addBlock('cta-section')
+
+        // Switch to preview mode
+        PageBuilderPOM.switchToPreviewMode()
+
+        // Get first block and try to move down
+        cy.get(PageBuilderPOM.editorSelectors.previewBlockGeneric).first()
+          .invoke('attr', 'data-cy')
+          .then((dataCy) => {
+            if (dataCy) {
+              const blockId = dataCy.replace('preview-block-', '')
+
+              // Hover to show controls
+              cy.get(PageBuilderPOM.editorSelectors.previewBlock(blockId)).trigger('mouseenter')
+
+              // Click move down
+              cy.get(PageBuilderPOM.editorSelectors.moveDownBtn(blockId)).then(($btn) => {
+                if ($btn.length > 0 && !$btn.is(':disabled')) {
+                  PageBuilderPOM.moveBlockDown(blockId)
+
+                  cy.log('Block moved down in Preview mode')
+                } else {
+                  cy.log('Move button not available or disabled')
+                }
+              })
+            }
+          })
+      })
+    })
+
+    it('PB-BLOCK-012: Should disable move up for first block', () => {
+      allure.story('Reorder Blocks')
+      allure.severity('minor')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        // Switch to layout mode first to add blocks
+        PageBuilderPOM.switchToLayoutMode()
+
+        // Add blocks
+        PageBuilderPOM.addBlock('hero')
+        PageBuilderPOM.addBlock('cta-section')
+
+        // Switch to preview mode
+        PageBuilderPOM.switchToPreviewMode()
+
+        // Get first block
+        cy.get(PageBuilderPOM.editorSelectors.previewBlockGeneric).first()
+          .invoke('attr', 'data-cy')
+          .then((dataCy) => {
+            if (dataCy) {
+              const blockId = dataCy.replace('preview-block-', '')
+
+              // Hover to show controls
+              cy.get(PageBuilderPOM.editorSelectors.previewBlock(blockId)).trigger('mouseenter')
+
+              // Move up should be disabled for first block
+              cy.get(PageBuilderPOM.editorSelectors.moveUpBtn(blockId)).should('be.disabled')
+
+              cy.log('Move up correctly disabled for first block')
+            }
+          })
+      })
+    })
+  })
+
+  // ============================================================
+  // Reset Props Tests
+  // ============================================================
+  describe('Reset Block Props', () => {
+    it('PB-BLOCK-013: Should reset block props to defaults', () => {
+      allure.story('Reset Props')
+      allure.severity('minor')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+        PageBuilderPOM.addBlock('hero')
+
+        // Modify a field
+        cy.get(PageBuilderPOM.editorSelectors.fieldInput('title')).then(($field) => {
+          if ($field.length > 0) {
+            PageBuilderPOM.fillField('title', 'Modified Title')
+
+            // Reset props
+            cy.get(PageBuilderPOM.editorSelectors.resetPropsBtn).then(($btn) => {
+              if ($btn.length > 0) {
+                PageBuilderPOM.resetBlockProps()
+
+                cy.log('Block props reset to defaults')
+              } else {
+                cy.log('Reset button not available')
+              }
+            })
+          }
+        })
+      })
+    })
+  })
+
+  // ============================================================
+  // Array Field Tests
+  // ============================================================
+  describe('Array Fields', () => {
+    it('PB-BLOCK-014: Should add items to array field', () => {
+      allure.story('Array Fields')
+      allure.severity('normal')
+
+      cy.then(() => {
+        PageBuilderPOM.visitEdit(testPageId)
+        PageBuilderPOM.waitForEditorLoad()
+
+        PageBuilderPOM.switchToLayoutMode()
+
+        // Add features-grid block (has array field)
+        PageBuilderPOM.addBlock('features-grid')
+
+        // Look for array add button
+        cy.get('[data-cy*="add-item"]').then(($btn) => {
+          if ($btn.length > 0) {
+            // Add an item
+            cy.get('[data-cy*="add-item"]').first().click()
+
+            // Verify item was added
+            cy.get('[data-cy*="item-"]').should('have.length.at.least', 1)
+
+            cy.log('Array item added successfully')
+          } else {
+            cy.log('Array add button not found - checking alternative selectors')
+          }
+        })
+      })
+    })
+  })
+})