@nextsparkjs/theme-default 0.1.0-beta.17 → 0.1.0-beta.170

package/tests/cypress/src/features/PageBuilderPOM.ts

@@ -0,0 +1,283 @@
+/**
+ * PageBuilderPOM - Page Object Model for Page Builder (create/edit pages with blocks)
+ *
+ * Extends BlockEditorBasePOM with page-specific functionality:
+ * - Page settings (locale, status)
+ * - SEO settings
+ * - Page-specific workflows
+ *
+ * For list operations (search, filter, delete), use PagesPOM from entities/.
+ *
+ * @example
+ * // Create a new page
+ * PageBuilderPOM.create()
+ *   .visitCreate()
+ *   .waitForEditor()
+ *   .setTitle('About Us')
+ *   .setSlug('about-us')
+ *   .addBlock('hero-section')
+ *   .addBlock('text-content')
+ *   .setStatus('published')
+ *   .save()
+ *
+ * // Edit existing page
+ * PageBuilderPOM.create()
+ *   .visitEdit(pageId)
+ *   .waitForEditor()
+ *   .setTitle('New Title')
+ *   .saveWithWait()
+ */
+
+import { BlockEditorBasePOM } from '../core/BlockEditorBasePOM'
+import { cySelector } from '../selectors'
+import entitiesConfig from '../../fixtures/entities.json'
+
+export interface PageFormData {
+  title: string
+  slug: string
+  locale?: 'en' | 'es'
+  status?: 'draft' | 'published' | 'scheduled' | 'archived'
+  metaTitle?: string
+  metaDescription?: string
+  metaKeywords?: string
+}
+
+export interface BlockData {
+  slug: string
+  props?: Record<string, unknown>
+}
+
+export class PageBuilderPOM extends BlockEditorBasePOM {
+  protected entitySlug = entitiesConfig.entities.pages.slug
+
+  // ============================================
+  // FACTORY METHOD
+  // ============================================
+
+  static create(): PageBuilderPOM {
+    return new PageBuilderPOM()
+  }
+
+  // ============================================
+  // PAGE-SPECIFIC SELECTORS
+  // ============================================
+
+  get pageSelectors() {
+    return {
+      // Locale (pages only) - uses centralized selectors
+      localeSelect: cySelector('blockEditor.localeField.select'),
+      localeOption: (locale: string) => cySelector('blockEditor.localeField.option', { locale })
+    }
+  }
+
+  // ============================================
+  // PAGE-SPECIFIC METHODS
+  // ============================================
+
+  /**
+   * Set page locale
+   */
+  setLocale(locale: 'en' | 'es') {
+    cy.get(this.pageSelectors.localeSelect).click()
+    cy.get(this.pageSelectors.localeOption(locale)).click()
+    return this
+  }
+
+  /**
+   * Save the page
+   */
+  savePage() {
+    // Wait for any pending state updates after adding blocks
+    cy.wait(500)
+    this.save()
+    return this
+  }
+
+  /**
+   * Save page with API wait
+   */
+  savePageWithApiWait() {
+    this.setupApiIntercepts()
+    this.savePage()
+    this.api.waitForUpdate()
+    return this
+  }
+
+  /**
+   * Publish the page (set status to published and save)
+   */
+  publishPage() {
+    this.setStatus('published')
+    this.save()
+    return this
+  }
+
+  /**
+   * Publish with API wait
+   */
+  publishPageWithWait() {
+    this.setupApiIntercepts()
+    this.setStatus('published')
+    this.save()
+    this.api.waitForUpdate()
+    return this
+  }
+
+  /**
+   * Unpublish the page (set status to draft)
+   */
+  unpublishPage() {
+    this.setStatus('draft')
+    this.save()
+    return this
+  }
+
+  /**
+   * Archive the page
+   */
+  archivePage() {
+    this.setStatus('archived')
+    this.save()
+    return this
+  }
+
+  // ============================================
+  // WORKFLOW METHODS
+  // ============================================
+
+  /**
+   * Create a new page with specified data and blocks
+   */
+  createPage(data: PageFormData, blocks: BlockData[] = []) {
+    this.visitCreate()
+    this.waitForEditor()
+
+    // Set page settings
+    this.setTitle(data.title)
+    this.setSlug(data.slug)
+
+    if (data.locale) {
+      this.setLocale(data.locale)
+    }
+
+    // Add blocks
+    blocks.forEach((block) => {
+      this.addBlock(block.slug)
+    })
+
+    // Set status if provided
+    if (data.status) {
+      this.setStatus(data.status)
+    }
+
+    // Set SEO if provided
+    if (data.metaTitle || data.metaDescription || data.metaKeywords) {
+      this.openSeoSettings()
+      if (data.metaTitle) this.setMetaTitle(data.metaTitle)
+      if (data.metaDescription) this.setMetaDescription(data.metaDescription)
+      if (data.metaKeywords) this.setMetaKeywords(data.metaKeywords)
+    }
+
+    this.save()
+    return this
+  }
+
+  /**
+   * Create page with API waits (deterministic)
+   */
+  createPageWithApiWait(data: PageFormData, blocks: BlockData[] = []) {
+    this.setupApiIntercepts()
+    this.visitCreate()
+    this.waitForEditor()
+
+    this.setTitle(data.title)
+    this.setSlug(data.slug)
+
+    if (data.locale) this.setLocale(data.locale)
+
+    blocks.forEach((block) => this.addBlock(block.slug))
+
+    if (data.status) this.setStatus(data.status)
+
+    if (data.metaTitle || data.metaDescription || data.metaKeywords) {
+      this.openSeoSettings()
+      if (data.metaTitle) this.setMetaTitle(data.metaTitle)
+      if (data.metaDescription) this.setMetaDescription(data.metaDescription)
+      if (data.metaKeywords) this.setMetaKeywords(data.metaKeywords)
+    }
+
+    this.save()
+    this.api.waitForCreate()
+    return this
+  }
+
+  /**
+   * Edit an existing page
+   */
+  editPage(id: string, updates: Partial<PageFormData>) {
+    this.visitEdit(id)
+    this.waitForEditor()
+
+    if (updates.title) this.setTitle(updates.title)
+    if (updates.slug) this.setSlug(updates.slug)
+    if (updates.locale) this.setLocale(updates.locale)
+    if (updates.status) this.setStatus(updates.status)
+
+    if (updates.metaTitle || updates.metaDescription || updates.metaKeywords) {
+      this.openSeoSettings()
+      if (updates.metaTitle) this.setMetaTitle(updates.metaTitle)
+      if (updates.metaDescription) this.setMetaDescription(updates.metaDescription)
+      if (updates.metaKeywords) this.setMetaKeywords(updates.metaKeywords)
+    }
+
+    this.save()
+    return this
+  }
+
+  /**
+   * Edit page with API waits
+   */
+  editPageWithApiWait(id: string, updates: Partial<PageFormData>) {
+    this.setupApiIntercepts()
+    this.editPage(id, updates)
+    this.api.waitForUpdate()
+    return this
+  }
+
+  // ============================================
+  // PAGE-SPECIFIC ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert page status badge shows specific status
+   */
+  assertPageStatus(status: 'draft' | 'published' | 'scheduled' | 'archived') {
+    return this.assertStatus(status)
+  }
+
+  /**
+   * Assert locale is selected
+   */
+  assertLocale(locale: 'en' | 'es') {
+    cy.get(this.pageSelectors.localeSelect).should('contain.text', locale)
+    return this
+  }
+
+  /**
+   * Assert save was successful
+   */
+  assertSaveSuccess() {
+    cy.contains('saved', { matchCase: false }).should('be.visible')
+    return this
+  }
+
+  /**
+   * Assert publish was successful
+   */
+  assertPublishSuccess() {
+    this.assertStatus('published')
+    return this
+  }
+}
+
+export default PageBuilderPOM

package/tests/cypress/src/features/PostEditorPOM.ts

@@ -0,0 +1,313 @@
+/**
+ * PostEditorPOM - Page Object Model for Post Editor (create/edit posts with blocks)
+ *
+ * Extends BlockEditorBasePOM with post-specific functionality:
+ * - Excerpt
+ * - Featured image
+ * - Categories
+ * - Post-specific workflows
+ *
+ * For list operations (search, filter, delete), use PostsPOM from entities/.
+ *
+ * @example
+ * // Create a new post
+ * PostEditorPOM.create()
+ *   .visitCreate()
+ *   .waitForEditor()
+ *   .setTitle('My Blog Post')
+ *   .setSlug('my-blog-post')
+ *   .setExcerpt('A brief summary...')
+ *   .addBlock('text-content')
+ *   .setStatus('published')
+ *   .save()
+ *
+ * // Edit existing post
+ * PostEditorPOM.create()
+ *   .visitEdit(postId)
+ *   .waitForEditor()
+ *   .setTitle('Updated Title')
+ *   .saveWithWait()
+ */
+
+import { BlockEditorBasePOM } from '../core/BlockEditorBasePOM'
+import { cySelector } from '../selectors'
+import entitiesConfig from '../../fixtures/entities.json'
+
+export interface PostFormData {
+  title: string
+  slug: string
+  excerpt?: string
+  featuredImage?: string
+  categoryIds?: string[]
+  status?: 'draft' | 'published' | 'archived'
+  locale?: 'en' | 'es'
+}
+
+export interface BlockData {
+  slug: string
+  props?: Record<string, unknown>
+}
+
+export class PostEditorPOM extends BlockEditorBasePOM {
+  protected entitySlug = entitiesConfig.entities.posts.slug
+
+  // ============================================
+  // FACTORY METHOD
+  // ============================================
+
+  static create(): PostEditorPOM {
+    return new PostEditorPOM()
+  }
+
+  // ============================================
+  // POST-SPECIFIC SELECTORS
+  // ============================================
+
+  get postSelectors() {
+    return {
+      // Post-specific fields (using centralized selectors)
+      excerptInput: cySelector('blockEditor.postFields.excerpt'),
+      featuredImage: cySelector('blockEditor.postFields.featuredImage'),
+      featuredImageUpload: cySelector('blockEditor.postFields.featuredImageUpload'),
+      categoriesSelect: cySelector('blockEditor.postFields.categories'),
+      categoryOption: (id: string) => cySelector('blockEditor.postFields.categoryOption', { id }),
+      categoryBadge: (id: string) => cySelector('blockEditor.postFields.categoryBadge', { id }),
+      categoryRemove: (id: string) => cySelector('blockEditor.postFields.categoryRemove', { id }),
+
+      // Locale (posts may also have locale)
+      localeSelect: cySelector('blockEditor.localeField.select'),
+      localeOption: (locale: string) => cySelector('blockEditor.localeField.option', { locale })
+    }
+  }
+
+  // ============================================
+  // POST-SPECIFIC METHODS
+  // ============================================
+
+  /**
+   * Set post excerpt
+   */
+  setExcerpt(excerpt: string) {
+    cy.get(this.postSelectors.excerptInput).clear().type(excerpt)
+    return this
+  }
+
+  /**
+   * Set featured image URL
+   */
+  setFeaturedImage(url: string) {
+    cy.get(this.postSelectors.featuredImage).clear().type(url)
+    return this
+  }
+
+  /**
+   * Select categories for the post
+   */
+  selectCategories(categoryIds: string[]) {
+    cy.get(this.postSelectors.categoriesSelect).click()
+    categoryIds.forEach((id) => {
+      cy.get(this.postSelectors.categoryOption(id)).click()
+    })
+    // Close dropdown by clicking outside
+    cy.get(this.editorSelectors.container).click()
+    return this
+  }
+
+  /**
+   * Remove a category from the post
+   */
+  removeCategory(categoryId: string) {
+    cy.get(this.postSelectors.categoryRemove(categoryId)).click()
+    return this
+  }
+
+  /**
+   * Set post locale
+   */
+  setLocale(locale: 'en' | 'es') {
+    cy.get(this.postSelectors.localeSelect).click()
+    cy.get(this.postSelectors.localeOption(locale)).click()
+    return this
+  }
+
+  /**
+   * Publish the post (set status to published and save)
+   */
+  publishPost() {
+    this.setStatus('published')
+    this.save()
+    return this
+  }
+
+  /**
+   * Publish with API wait
+   */
+  publishPostWithWait() {
+    this.setupApiIntercepts()
+    this.setStatus('published')
+    this.save()
+    this.api.waitForUpdate()
+    return this
+  }
+
+  /**
+   * Unpublish the post (set status to draft)
+   */
+  unpublishPost() {
+    this.setStatus('draft')
+    this.save()
+    return this
+  }
+
+  // ============================================
+  // WORKFLOW METHODS
+  // ============================================
+
+  /**
+   * Create a new post with specified data and blocks
+   */
+  createPost(data: PostFormData, blocks: BlockData[] = []) {
+    this.visitCreate()
+    this.waitForEditor()
+
+    // Set post settings
+    this.setTitle(data.title)
+    this.setSlug(data.slug)
+
+    if (data.excerpt) {
+      this.setExcerpt(data.excerpt)
+    }
+
+    if (data.featuredImage) {
+      this.setFeaturedImage(data.featuredImage)
+    }
+
+    if (data.categoryIds && data.categoryIds.length > 0) {
+      this.selectCategories(data.categoryIds)
+    }
+
+    if (data.locale) {
+      this.setLocale(data.locale)
+    }
+
+    // Add blocks
+    blocks.forEach((block) => {
+      this.addBlock(block.slug)
+    })
+
+    // Set status if provided
+    if (data.status) {
+      this.setStatus(data.status)
+    }
+
+    this.save()
+    return this
+  }
+
+  /**
+   * Create post with API waits (deterministic)
+   */
+  createPostWithApiWait(data: PostFormData, blocks: BlockData[] = []) {
+    this.setupApiIntercepts()
+    this.visitCreate()
+    this.waitForEditor()
+
+    this.setTitle(data.title)
+    this.setSlug(data.slug)
+
+    if (data.excerpt) this.setExcerpt(data.excerpt)
+    if (data.featuredImage) this.setFeaturedImage(data.featuredImage)
+    if (data.categoryIds && data.categoryIds.length > 0) this.selectCategories(data.categoryIds)
+    if (data.locale) this.setLocale(data.locale)
+
+    blocks.forEach((block) => this.addBlock(block.slug))
+
+    if (data.status) this.setStatus(data.status)
+
+    this.save()
+    this.api.waitForCreate()
+    return this
+  }
+
+  /**
+   * Edit an existing post
+   */
+  editPost(id: string, updates: Partial<PostFormData>) {
+    this.visitEdit(id)
+    this.waitForEditor()
+
+    if (updates.title) this.setTitle(updates.title)
+    if (updates.slug) this.setSlug(updates.slug)
+    if (updates.excerpt) this.setExcerpt(updates.excerpt)
+    if (updates.featuredImage) this.setFeaturedImage(updates.featuredImage)
+    if (updates.categoryIds) this.selectCategories(updates.categoryIds)
+    if (updates.locale) this.setLocale(updates.locale)
+    if (updates.status) this.setStatus(updates.status)
+
+    this.save()
+    return this
+  }
+
+  /**
+   * Edit post with API waits
+   */
+  editPostWithApiWait(id: string, updates: Partial<PostFormData>) {
+    this.setupApiIntercepts()
+    this.editPost(id, updates)
+    this.api.waitForUpdate()
+    return this
+  }
+
+  // ============================================
+  // POST-SPECIFIC ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert post status badge shows specific status
+   */
+  assertPostStatus(status: 'draft' | 'published' | 'archived') {
+    return this.assertStatus(status)
+  }
+
+  /**
+   * Assert excerpt value
+   */
+  assertExcerpt(excerpt: string) {
+    cy.get(this.postSelectors.excerptInput).should('have.value', excerpt)
+    return this
+  }
+
+  /**
+   * Assert featured image URL
+   */
+  assertFeaturedImage(url: string) {
+    cy.get(this.postSelectors.featuredImage).should('have.value', url)
+    return this
+  }
+
+  /**
+   * Assert category is selected
+   */
+  assertCategorySelected(categoryId: string) {
+    cy.get(this.postSelectors.categoryBadge(categoryId)).should('be.visible')
+    return this
+  }
+
+  /**
+   * Assert save was successful
+   */
+  assertSaveSuccess() {
+    cy.contains('saved', { matchCase: false }).should('be.visible')
+    return this
+  }
+
+  /**
+   * Assert publish was successful
+   */
+  assertPublishSuccess() {
+    this.assertStatus('published')
+    return this
+  }
+}
+
+export default PostEditorPOM