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

package/tests/cypress/e2e/uat/entities/pages/public-rendering.cy.ts

@@ -0,0 +1,340 @@
+/// <reference types="cypress" />
+
+/**
+ * Public Page Rendering Tests
+ *
+ * Tests for public page rendering including block visibility,
+ * content validation, SEO metadata, and i18n support.
+ *
+ * Tags: @uat, @feat-pages, @public, @page-builder
+ */
+
+import * as allure from 'allure-cypress'
+import { PublicPagePOM } from '../../../../src/components'
+import pageBuilderFixtures from '../../../../fixtures/page-builder.json'
+
+describe('Public Page Rendering', {
+  tags: ['@uat', '@feat-pages', '@public', '@page-builder']
+}, () => {
+  beforeEach(() => {
+    allure.epic('Page Builder')
+    allure.feature('Public Rendering')
+  })
+
+  // ============================================================
+  // Published Page Tests
+  // ============================================================
+  describe('Published Page Rendering', () => {
+    it('PB_PUBLIC_001: Should render published page with HTTP 200', { tags: '@smoke' }, () => {
+      allure.story('Page Rendering')
+      allure.severity('critical')
+
+      // Visit about-us page (exists from sample data)
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      // Visit the page directly - cy.visit() already validates the page loads successfully
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+      PublicPagePOM.assertPageExists()
+
+      // Verify page has correct slug attribute
+      cy.get(`[data-page-slug="${slug}"]`).should('exist')
+
+      cy.log('Published page rendered successfully')
+    })
+
+    it('PB_PUBLIC_002: Should display Hero block with content', () => {
+      allure.story('Block Rendering')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      // Hero block should be visible
+      PublicPagePOM.assertHeroVisible()
+
+      // Verify hero has content
+      cy.get(PublicPagePOM.heroElements.title).should('exist')
+
+      cy.log('Hero block rendered with content')
+    })
+
+    it('PB_PUBLIC_003: Should display Features Grid block', () => {
+      allure.story('Block Rendering')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      PublicPagePOM.assertFeaturesVisible()
+
+      cy.log('Features Grid block rendered')
+    })
+
+    it('PB_PUBLIC_004: Should display CTA Section block', () => {
+      allure.story('Block Rendering')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      PublicPagePOM.assertCtaVisible()
+
+      cy.log('CTA Section block rendered')
+    })
+
+    it('PB_PUBLIC_005: Should display Testimonials block', () => {
+      allure.story('Block Rendering')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      PublicPagePOM.assertTestimonialsVisible()
+
+      cy.log('Testimonials block rendered')
+    })
+
+    it('PB_PUBLIC_006: Should display all expected blocks', () => {
+      allure.story('Block Rendering')
+
+      const { slug, expectedBlocks } = pageBuilderFixtures.existingPages.aboutUs
+
+      if (expectedBlocks) {
+        PublicPagePOM.validatePage(slug, expectedBlocks)
+        cy.log(`All ${expectedBlocks.length} expected blocks rendered`)
+      } else {
+        PublicPagePOM.visit(slug)
+        PublicPagePOM.waitForPageLoad()
+        cy.log('Page rendered (no specific blocks expected)')
+      }
+    })
+  })
+
+  // ============================================================
+  // Draft Page Tests
+  // ============================================================
+  describe('Draft Page Handling', () => {
+    it('PB_PUBLIC_007: Should return 404 for draft page', () => {
+      allure.story('Access Control')
+
+      // Create a draft page via API
+      const timestamp = Date.now()
+      const draftSlug = `draft-test-${timestamp}`
+
+      cy.request({
+        method: 'POST',
+        url: '/api/v1/pages',
+        headers: {
+          'x-api-key': 'test_api_key_for_testing_purposes_only_not_a_real_secret_key_abc123',
+          'Content-Type': 'application/json'
+        },
+        body: {
+          title: `Draft Test ${timestamp}`,
+          slug: draftSlug,
+          locale: 'en',
+          published: false, // Draft
+          blocks: []
+        }
+      }).then((createResponse) => {
+        const pageId = createResponse.body.data.id
+
+        // Try to access draft page publicly
+        cy.request({
+          url: `/${draftSlug}`,
+          failOnStatusCode: false
+        }).then((response) => {
+          expect(response.status).to.eq(404)
+          cy.log('Draft page correctly returns 404')
+        })
+
+        // Cleanup
+        cy.request({
+          method: 'DELETE',
+          url: `/api/v1/pages/${pageId}`,
+          headers: {
+            'x-api-key': 'test_api_key_for_testing_purposes_only_not_a_real_secret_key_abc123'
+          }
+        })
+      })
+    })
+  })
+
+  // ============================================================
+  // SEO Metadata Tests
+  // ============================================================
+  describe('SEO Metadata', () => {
+    it('PB_PUBLIC_008: Should have correct meta title', () => {
+      allure.story('SEO')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      // Check page title exists
+      cy.title().should('not.be.empty')
+
+      cy.log('Meta title present')
+    })
+
+    it('PB_PUBLIC_009: Should have meta description', () => {
+      allure.story('SEO')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      // Check meta description exists
+      cy.get('meta[name="description"]').should('exist')
+
+      cy.log('Meta description present')
+    })
+  })
+
+  // ============================================================
+  // i18n Tests
+  // ============================================================
+  describe('Internationalization', () => {
+    it('PB_PUBLIC_010: Should render Spanish version of page', { tags: '@i18n' }, () => {
+      allure.story('i18n')
+
+      const spanishSlug = pageBuilderFixtures.existingPages.sobreNosotros?.slug
+
+      if (spanishSlug) {
+        // Try Spanish locale path
+        cy.request({
+          url: `/es/${spanishSlug}`,
+          failOnStatusCode: false
+        }).then((response) => {
+          if (response.status === 200) {
+            PublicPagePOM.visitSpanish(spanishSlug)
+            PublicPagePOM.waitForPageLoad()
+            PublicPagePOM.assertPageExists()
+
+            cy.log('Spanish page rendered successfully')
+          } else {
+            // Try without locale prefix (might be default locale)
+            cy.request({
+              url: `/${spanishSlug}`,
+              failOnStatusCode: false
+            }).then((altResponse) => {
+              expect(altResponse.status).to.eq(200)
+              cy.log('Spanish page rendered at root path')
+            })
+          }
+        })
+      } else {
+        cy.log('No Spanish page configured in fixtures - skipping')
+      }
+    })
+  })
+
+  // ============================================================
+  // Block Interaction Tests
+  // ============================================================
+  describe('Block Interactions', () => {
+    it('PB_PUBLIC_011: Should have clickable CTA button', () => {
+      allure.story('Block Interactions')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      // Check if CTA section has clickable links
+      cy.get(PublicPagePOM.ctaElements.section).then(($section) => {
+        if ($section.length > 0) {
+          cy.get(PublicPagePOM.ctaElements.primaryButton).then(($btn) => {
+            if ($btn.length > 0) {
+              cy.wrap($btn).should('have.attr', 'href')
+              cy.log('CTA button is clickable with href')
+            }
+          })
+        }
+      })
+    })
+
+    it('PB_PUBLIC_012: Should have clickable Hero CTA', () => {
+      allure.story('Block Interactions')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      cy.get(PublicPagePOM.heroElements.ctaButton).then(($btn) => {
+        if ($btn.length > 0) {
+          cy.wrap($btn).should('have.attr', 'href')
+          cy.log('Hero CTA is clickable')
+        } else {
+          cy.log('Hero CTA not present on this page')
+        }
+      })
+    })
+  })
+
+  // ============================================================
+  // Page Structure Tests
+  // ============================================================
+  describe('Page Structure', () => {
+    it('PB_PUBLIC_013: Should have correct page data attributes', () => {
+      allure.story('Page Structure')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      // Verify page has data attributes
+      cy.get('[data-page-id]').should('exist')
+      cy.get('[data-page-slug]').should('have.attr', 'data-page-slug', slug)
+
+      cy.log('Page data attributes correct')
+    })
+
+    it('PB_PUBLIC_014: Should have block data attributes', () => {
+      allure.story('Page Structure')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      // Verify blocks have data attributes
+      cy.get('[data-block-id]').should('have.length.at.least', 1)
+      cy.get('[data-block-slug]').should('have.length.at.least', 1)
+
+      cy.log('Block data attributes present')
+    })
+  })
+
+  // ============================================================
+  // Performance Tests
+  // ============================================================
+  describe('Performance', () => {
+    it('PB_PUBLIC_015: Should load page within reasonable time', () => {
+      allure.story('Performance')
+
+      const slug = pageBuilderFixtures.existingPages.aboutUs.slug
+      const startTime = Date.now()
+
+      PublicPagePOM.visit(slug)
+      PublicPagePOM.waitForPageLoad()
+
+      cy.then(() => {
+        const loadTime = Date.now() - startTime
+
+        // Page should load within 5 seconds
+        expect(loadTime).to.be.lessThan(5000)
+
+        cy.log(`Page loaded in ${loadTime}ms`)
+      })
+    })
+  })
+})

package/tests/cypress/e2e/uat/entities/posts/categories-api-aware.bdd.md

@@ -0,0 +1,161 @@
+---
+feature: API-Aware Testing Pattern
+priority: medium
+tags: [posts, categories, api-aware, patterns, testing]
+grepTags: [uat, feat-posts, api, patterns]
+coverage: 3
+---
+
+# API-Aware Testing Pattern - Demo
+
+> Test suite demonstrating API-aware POM patterns for deterministic waits instead of arbitrary delays. Shows how to replace `cy.wait(ms)` with API intercepts for more reliable and faster tests.
+
+## Background
+
+```gherkin:en
+Given I am logged in as Owner (owner@nextspark.dev)
+And I have the ApiInterceptor utility available
+And deterministic API waits replace arbitrary delays
+```
+
+```gherkin:es
+Given estoy logueado como Owner (owner@nextspark.dev)
+And tengo la utilidad ApiInterceptor disponible
+And las esperas deterministicas de API reemplazan delays arbitrarios
+```
+
+---
+
+## @test APIAWARE-001: Navigate with deterministic API wait
+
+### Metadata
+- **Priority:** High
+- **Type:** Smoke
+- **Tags:** navigation, api-wait, patterns
+- **Grep:** `@smoke`
+
+```gherkin:en
+Scenario: Navigate with deterministic API wait
+
+Given I am logged in as Owner
+When I use the API-aware navigation method
+Then the page should be visible
+And at least 1 category row should exist
+
+Note: This replaces the pattern:
+  visitCategoriesPage() + waitForPageLoad() + cy.wait(2000)
+With:
+  visitWithApiWait()
+```
+
+```gherkin:es
+Scenario: Navegar con espera deterministica de API
+
+Given estoy logueado como Owner
+When uso el metodo de navegacion consciente de API
+Then la pagina deberia estar visible
+And al menos 1 fila de categoria deberia existir
+
+Nota: Esto reemplaza el patron:
+  visitCategoriesPage() + waitForPageLoad() + cy.wait(2000)
+Con:
+  visitWithApiWait()
+```
+
+### Expected Results
+- Navigation completes with API wait
+- Page loads with data from API response
+- No arbitrary delays needed
+- Test is faster and more reliable
+
+---
+
+## @test APIAWARE-002: Create category with deterministic waits
+
+### Metadata
+- **Priority:** High
+- **Type:** Regression
+- **Tags:** crud, create, api-wait
+
+```gherkin:en
+Scenario: Create category with deterministic waits
+
+Given I am logged in as Owner
+And I have navigated with API wait
+When I create a category using the API-aware method
+Then the category should appear in the list
+
+Note: This replaces the pattern:
+  createCategory() + cy.wait(2000)
+With:
+  createCategoryWithApiWait()
+```
+
+```gherkin:es
+Scenario: Crear categoria con esperas deterministicas
+
+Given estoy logueado como Owner
+And he navegado con espera de API
+When creo una categoria usando el metodo consciente de API
+Then la categoria deberia aparecer en la lista
+
+Nota: Esto reemplaza el patron:
+  createCategory() + cy.wait(2000)
+Con:
+  createCategoryWithApiWait()
+```
+
+### Expected Results
+- Create operation waits for POST response
+- List refreshes after create
+- New category appears in list
+- No arbitrary delays needed
+
+---
+
+## @test APIAWARE-003: Direct ApiInterceptor usage for custom flows
+
+### Metadata
+- **Priority:** Medium
+- **Type:** Regression
+- **Tags:** api-interceptor, custom-flow, manual-setup
+
+```gherkin:en
+Scenario: Direct ApiInterceptor usage
+
+Given I am logged in as Owner
+And I have setup API intercepts manually
+When I navigate to categories page
+And I wait for the page to load
+And I wait for the initial list via api.waitForList()
+And I open the create dialog
+And I fill the form with test data
+And I save the category
+And I wait for create via api.waitForCreate()
+And I wait for refresh via api.waitForRefresh()
+And the dialog closes
+Then the category should be visible in the list
+```
+
+```gherkin:es
+Scenario: Uso directo de ApiInterceptor
+
+Given estoy logueado como Owner
+And he configurado intercepts de API manualmente
+When navego a la pagina de categorias
+And espero que la pagina cargue
+And espero la lista inicial via api.waitForList()
+And abro el dialogo de crear
+And completo el formulario con datos de prueba
+And guardo la categoria
+And espero create via api.waitForCreate()
+And espero refresh via api.waitForRefresh()
+And el dialogo cierra
+Then la categoria deberia estar visible en la lista
+```
+
+### Expected Results
+- Manual API intercept setup works
+- Each wait method targets specific API call
+- Full control over wait timing
+- Complex flows can be orchestrated with precision

package/tests/cypress/e2e/uat/entities/posts/categories-api-aware.cy.ts

@@ -0,0 +1,104 @@
+/// <reference types="cypress" />
+
+/**
+ * Categories API-Aware Tests
+ *
+ * Demonstrates the new API-aware POM pattern with deterministic waits
+ * using cy.intercept() instead of cy.wait(ms).
+ *
+ * Tags: @uat, @feat-posts, @api-aware, @categories
+ */
+
+import * as allure from 'allure-cypress'
+import { CategoriesPOM, loginAsOwner } from '../../../../src'
+
+describe('Categories - API-Aware Pattern Demo', {
+  tags: ['@uat', '@feat-posts', '@api-aware', '@categories']
+}, () => {
+  beforeEach(() => {
+    allure.epic('Posts System')
+    allure.feature('API-Aware Testing Pattern')
+
+    loginAsOwner()
+  })
+
+  describe('API-Aware Navigation', () => {
+    it('APIAWARE-001: Should navigate with deterministic API wait', { tags: '@smoke' }, () => {
+      allure.story('API-Aware Navigation')
+      allure.severity('critical')
+
+      // Use the new API-aware navigation method
+      // This replaces: visitCategoriesPage() + waitForPageLoad() + cy.wait(2000)
+      CategoriesPOM.visitWithApiWait()
+
+      // Assertions
+      CategoriesPOM.assertPageVisible()
+      cy.get(CategoriesPOM.listSelectors.rowGeneric).should('have.length.at.least', 1)
+
+      cy.log('API-aware navigation works correctly')
+    })
+  })
+
+  describe('API-Aware CRUD', () => {
+    it('APIAWARE-002: Should create category with deterministic waits', () => {
+      allure.story('API-Aware Create')
+
+      const uniqueId = Math.random().toString(36).substring(2, 8)
+      const testData = {
+        name: `APITest${uniqueId}`,
+        slug: `apitest${uniqueId}`
+      }
+
+      // Navigate with API wait
+      CategoriesPOM.visitWithApiWait()
+
+      // Create with API-aware method
+      // This replaces: createCategory() + cy.wait(2000)
+      CategoriesPOM.createCategoryWithApiWait(testData)
+
+      // Verify category was created
+      CategoriesPOM.assertCategoryInList(testData.name)
+
+      cy.log('API-aware create works correctly')
+    })
+
+    it('APIAWARE-003: Should use ApiInterceptor directly for custom flows', () => {
+      allure.story('Direct ApiInterceptor Usage')
+
+      const uniqueId = Math.random().toString(36).substring(2, 8)
+      const testData = {
+        name: `DirectAPI${uniqueId}`,
+        slug: `directapi${uniqueId}`
+      }
+
+      // Setup intercepts manually
+      CategoriesPOM.setupApiIntercepts()
+
+      // Navigate
+      CategoriesPOM.visitCategoriesPage()
+      CategoriesPOM.waitForPageLoad()
+
+      // Wait for initial list using api directly
+      CategoriesPOM.api.waitForList()
+
+      // Open dialog and fill form
+      CategoriesPOM.clickCreate()
+      CategoriesPOM.waitForDialogOpen()
+      CategoriesPOM.fillName(testData.name)
+      CategoriesPOM.fillSlug(testData.slug)
+      CategoriesPOM.saveCategory()
+
+      // Wait for create + refresh using api directly
+      CategoriesPOM.api.waitForCreate()
+      CategoriesPOM.api.waitForRefresh()
+
+      // Wait for dialog to close
+      CategoriesPOM.waitForDialogClose()
+
+      // Verify
+      CategoriesPOM.assertCategoryInList(testData.name)
+
+      cy.log('Direct ApiInterceptor usage works correctly')
+    })
+  })
+})