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

package/tests/cypress/src/core/DashboardEntityPOM.ts

@@ -0,0 +1,41 @@
+/**
+ * DashboardEntityPOM - Theme-specific base class for entity Page Object Models
+ *
+ * Extends DashboardEntityPOMCore from @nextsparkjs/testing and implements
+ * the abstract cySelector method with theme-specific selectors.
+ *
+ * Adds theme-specific functionality:
+ * - Entity config validation from fixtures
+ * - Convenience aliases (goToList, goToCreate, etc.)
+ * - Additional assertions
+ *
+ * @example
+ * class TasksPOM extends DashboardEntityPOM {
+ *   constructor() {
+ *     super('tasks')
+ *   }
+ *
+ *   fillTaskForm(data: TaskFormData) {
+ *     // Entity-specific form handling
+ *   }
+ * }
+ */
+
+import { DashboardEntityPOMCore, type EntityConfig } from '@nextsparkjs/testing/pom'
+import { type Replacements } from '@nextsparkjs/core/selectors'
+import { cySelector } from '../selectors'
+
+export abstract class DashboardEntityPOM extends DashboardEntityPOMCore {
+  /**
+   * Implement abstract method from BasePOMCore
+   * Uses theme-specific selectors (THEME_SELECTORS)
+   */
+  protected cySelector(path: string, replacements?: Replacements): string {
+    return cySelector(path, replacements)
+  }
+}
+
+export default DashboardEntityPOM
+
+// Re-export EntityConfig for convenience
+export type { EntityConfig }

package/tests/cypress/src/core/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Core POM exports
+ *
+ * Base classes for building Page Object Models:
+ * - BasePOM: Utility methods for all POMs
+ * - DashboardEntityPOM: Base for entity CRUD POMs
+ * - BlockEditorBasePOM: Base for page/post builder POMs
+ * - AuthPOM: Authentication pages POM
+ */
+
+export { BasePOM } from './BasePOM'
+export { DashboardEntityPOM, type EntityConfig } from './DashboardEntityPOM'
+export { BlockEditorBasePOM } from './BlockEditorBasePOM'
+export { AuthPOM, type SignupData } from './AuthPOM'

package/tests/cypress/src/entities/CustomersPOM.ts

@@ -0,0 +1,172 @@
+/**
+ * CustomersPOM - Page Object Model for Customers entity
+ *
+ * Extends DashboardEntityPOM with customer-specific form handling and workflows.
+ *
+ * @example
+ * // Instance usage with chaining
+ * CustomersPOM.create()
+ *   .visitList()
+ *   .waitForList()
+ *   .clickAdd()
+ *   .fillCustomerForm({ name: 'Acme Inc', account: 'ACC001', office: 'HQ' })
+ *   .submitForm()
+ *
+ * // API-aware workflow
+ * const customers = new CustomersPOM()
+ * customers.createCustomerWithApiWait({
+ *   name: 'Acme Inc',
+ *   account: 'ACC001',
+ *   office: 'Main Office'
+ * })
+ */
+
+import { DashboardEntityPOM } from '../core/DashboardEntityPOM'
+import entitiesConfig from '../../fixtures/entities.json'
+
+export interface CustomerFormData {
+  name: string
+  account: string
+  office: string
+  phone?: string
+  salesRep?: string
+  visitDays?: string[]
+  contactDays?: string[]
+}
+
+export class CustomersPOM extends DashboardEntityPOM {
+  constructor() {
+    super(entitiesConfig.entities.customers.slug)
+  }
+
+  // ============================================
+  // FACTORY METHOD
+  // ============================================
+
+  static create(): CustomersPOM {
+    return new CustomersPOM()
+  }
+
+  // ============================================
+  // ENTITY-SPECIFIC FORM METHODS
+  // ============================================
+
+  /**
+   * Fill customer form with provided data
+   * Only fills fields that are provided in the data object
+   */
+  fillCustomerForm(data: CustomerFormData) {
+    if (data.name) {
+      this.fillTextField('name', data.name)
+    }
+    if (data.account) {
+      this.fillTextField('account', data.account)
+    }
+    if (data.office) {
+      this.fillTextField('office', data.office)
+    }
+    if (data.phone) {
+      this.fillTextField('phone', data.phone)
+    }
+    if (data.salesRep) {
+      this.fillTextField('salesRep', data.salesRep)
+    }
+    return this
+  }
+
+  // ============================================
+  // WORKFLOW METHODS
+  // ============================================
+
+  /**
+   * Complete create flow without API waits
+   */
+  createCustomer(data: CustomerFormData) {
+    this.visitCreate()
+    this.waitForForm()
+    this.fillCustomerForm(data)
+    this.submitForm()
+    return this
+  }
+
+  /**
+   * Create customer with API intercepts and waits
+   * Deterministic: waits for actual API responses
+   */
+  createCustomerWithApiWait(data: CustomerFormData) {
+    this.setupApiIntercepts()
+    this.clickAdd()
+    this.waitForForm()
+    this.fillCustomerForm(data)
+    this.submitForm()
+    this.api.waitForCreate()
+    return this
+  }
+
+  /**
+   * Create customer from list page and wait for refresh
+   */
+  createCustomerFromListWithApiWait(data: CustomerFormData) {
+    this.setupApiIntercepts()
+    this.clickAdd()
+    this.waitForForm()
+    this.fillCustomerForm(data)
+    this.submitForm()
+    this.api.waitForCreateAndRefresh()
+    return this
+  }
+
+  /**
+   * Update customer with API waits
+   */
+  updateCustomerWithApiWait(data: Partial<CustomerFormData>) {
+    this.fillCustomerForm(data as CustomerFormData)
+    this.submitForm()
+    this.api.waitForUpdate()
+    return this
+  }
+
+  /**
+   * Delete customer with API waits
+   * Flow: Navigate to detail -> Delete -> Confirm
+   */
+  deleteCustomerWithApiWait(id: string) {
+    this.visitDetailWithApiWait(id)
+    this.clickDelete()
+    this.confirmDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  /**
+   * Delete customer by finding it in the list by name
+   */
+  deleteCustomerByNameWithApiWait(name: string) {
+    this.clickRowByText(name)
+    this.waitForDetail()
+    this.clickDelete()
+    this.confirmDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  // ============================================
+  // ENTITY-SPECIFIC ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert customer appears in list
+   */
+  assertCustomerInList(name: string) {
+    return this.assertInList(name)
+  }
+
+  /**
+   * Assert customer does not appear in list
+   */
+  assertCustomerNotInList(name: string) {
+    return this.assertNotInList(name)
+  }
+}
+
+export default CustomersPOM

package/tests/cypress/src/entities/PagesPOM.ts

@@ -0,0 +1,137 @@
+/**
+ * PagesPOM - Page Object Model for Pages entity (List operations)
+ *
+ * Extends DashboardEntityPOM for list page operations.
+ * For editing pages with the block editor, use PageBuilderPOM from features/.
+ *
+ * @example
+ * // List operations
+ * PagesPOM.create()
+ *   .visitList()
+ *   .waitForList()
+ *   .search('About Us')
+ *   .selectFilter('status', 'published')
+ *
+ * // For editing pages, use PageBuilderPOM
+ * import { PageBuilderPOM } from '../features/PageBuilderPOM'
+ * PageBuilderPOM.create().visitEdit(pageId).setTitle('New Title').save()
+ */
+
+import { DashboardEntityPOM } from '../core/DashboardEntityPOM'
+import entitiesConfig from '../../fixtures/entities.json'
+
+export interface PageListFilters {
+  status?: 'draft' | 'published' | 'archived'
+  locale?: 'en' | 'es'
+}
+
+export class PagesPOM extends DashboardEntityPOM {
+  constructor() {
+    super(entitiesConfig.entities.pages.slug)
+  }
+
+  // ============================================
+  // FACTORY METHOD
+  // ============================================
+
+  static create(): PagesPOM {
+    return new PagesPOM()
+  }
+
+  // ============================================
+  // PAGE-SPECIFIC LIST METHODS
+  // ============================================
+
+  /**
+   * Filter pages by status
+   */
+  filterByStatus(status: 'draft' | 'published' | 'archived') {
+    return this.selectFilter('status', status)
+  }
+
+  /**
+   * Apply multiple filters at once
+   */
+  applyFilters(filters: PageListFilters) {
+    if (filters.status) {
+      this.filterByStatus(filters.status)
+    }
+    if (filters.locale) {
+      this.selectFilter('locale', filters.locale)
+    }
+    return this
+  }
+
+  // ============================================
+  // WORKFLOW METHODS
+  // ============================================
+
+  /**
+   * Navigate to create page
+   * Note: Pages use block editor, so this redirects to the editor
+   */
+  navigateToCreate() {
+    this.clickAdd()
+    return this
+  }
+
+  /**
+   * Navigate to edit page for a page
+   * Note: Pages use block editor, so this redirects to the editor
+   */
+  navigateToEdit(id: string) {
+    this.clickRowAction('edit', id)
+    return this
+  }
+
+  /**
+   * Delete page from list with API waits
+   */
+  deletePageWithApiWait(id: string) {
+    this.visitDetailWithApiWait(id)
+    this.clickDelete()
+    this.confirmDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  /**
+   * Delete page by finding it in the list by title
+   */
+  deletePageByTitleWithApiWait(title: string) {
+    this.clickRowByText(title)
+    this.waitForDetail()
+    this.clickDelete()
+    this.confirmDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  // ============================================
+  // ENTITY-SPECIFIC ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert page appears in list
+   */
+  assertPageInList(title: string) {
+    return this.assertInList(title)
+  }
+
+  /**
+   * Assert page does not appear in list
+   */
+  assertPageNotInList(title: string) {
+    return this.assertNotInList(title)
+  }
+
+  /**
+   * Assert page has specific status badge
+   */
+  assertPageStatus(id: string, status: string) {
+    cy.get(this.selectors.row(id)).should('contain.text', status)
+    return this
+  }
+}
+
+export default PagesPOM

package/tests/cypress/src/entities/PatternsPOM.ts

@@ -0,0 +1,329 @@
+/**
+ * PatternsPOM - Page Object Model for Patterns entity
+ *
+ * Extends DashboardEntityPOM for standard CRUD operations on patterns.
+ * Includes pattern-specific methods for:
+ * - Usage report interactions
+ * - Delete dialog with usage checking
+ * - Placeholder handling in block editor
+ *
+ * @example
+ * // List operations
+ * PatternsPOM.create()
+ *   .visitList()
+ *   .waitForList()
+ *   .search('Hero Section')
+ *
+ * // View pattern usage
+ * PatternsPOM.create()
+ *   .visitDetailWithApiWait(patternId)
+ *   .assertUsageStatsLoaded()
+ *
+ * // Delete with usage warning (from list)
+ * PatternsPOM.create()
+ *   .visitList()
+ *   .openDeleteDialogFromList(patternId)
+ *   .assertUsageWarningVisible()
+ *   .confirmPatternDelete()
+ */
+
+import { DashboardEntityPOM } from '../core/DashboardEntityPOM'
+import { cySelector } from '../selectors'
+import entitiesConfig from '../../fixtures/entities.json'
+
+export class PatternsPOM extends DashboardEntityPOM {
+  constructor() {
+    super(entitiesConfig.entities.patterns.slug)
+  }
+
+  // ============================================
+  // FACTORY METHOD
+  // ============================================
+
+  static create(): PatternsPOM {
+    return new PatternsPOM()
+  }
+
+  // ============================================
+  // PATTERN-SPECIFIC SELECTORS
+  // ============================================
+
+  get patternSelectors() {
+    return {
+      // Usage Table
+      usageTable: {
+        container: cySelector('patterns.usageTable.container'),
+        loading: cySelector('patterns.usageTable.loading'),
+        empty: cySelector('patterns.usageTable.empty'),
+        row: (id: string) => cySelector('patterns.usageTable.row', { id }),
+        viewLink: (id: string) => cySelector('patterns.usageTable.viewLink', { id }),
+      },
+      // Usage Stats
+      usageStats: {
+        container: cySelector('patterns.usageStats.container'),
+        loading: cySelector('patterns.usageStats.loading'),
+        total: cySelector('patterns.usageStats.total'),
+        byType: (entityType: string) => cySelector('patterns.usageStats.byType', { entityType }),
+      },
+      // Usage Report
+      usageReport: {
+        container: cySelector('patterns.usageReport.container'),
+        error: cySelector('patterns.usageReport.error'),
+        filters: cySelector('patterns.usageReport.filters'),
+        filterSelect: cySelector('patterns.usageReport.filterSelect'),
+        pagination: cySelector('patterns.usageReport.pagination'),
+        prevPage: cySelector('patterns.usageReport.prevPage'),
+        nextPage: cySelector('patterns.usageReport.nextPage'),
+        resultsInfo: cySelector('patterns.usageReport.resultsInfo'),
+      },
+      // Delete Dialog
+      deleteDialog: {
+        trigger: cySelector('patterns.deleteDialog.trigger'),
+        container: cySelector('patterns.deleteDialog.container'),
+        loading: cySelector('patterns.deleteDialog.loading'),
+        error: cySelector('patterns.deleteDialog.error'),
+        warning: cySelector('patterns.deleteDialog.warning'),
+        usageList: cySelector('patterns.deleteDialog.usageList'),
+        noUsage: cySelector('patterns.deleteDialog.noUsage'),
+        cancel: cySelector('patterns.deleteDialog.cancel'),
+        confirm: cySelector('patterns.deleteDialog.confirm'),
+      },
+      // Deleted Pattern Placeholder
+      placeholder: {
+        container: cySelector('patterns.placeholder.container'),
+        removeBtn: cySelector('patterns.placeholder.removeBtn'),
+      },
+    }
+  }
+
+  // ============================================
+  // USAGE REPORT METHODS
+  // ============================================
+
+  /**
+   * Assert usage stats container is visible and loaded
+   */
+  assertUsageStatsLoaded(): this {
+    cy.get(this.patternSelectors.usageStats.container).should('be.visible')
+    cy.get(this.patternSelectors.usageStats.loading).should('not.exist')
+    return this
+  }
+
+  /**
+   * Assert usage table is visible and loaded
+   */
+  assertUsageTableLoaded(): this {
+    cy.get(this.patternSelectors.usageTable.container).should('be.visible')
+    cy.get(this.patternSelectors.usageTable.loading).should('not.exist')
+    return this
+  }
+
+  /**
+   * Assert usage report shows empty state
+   */
+  assertUsageTableEmpty(): this {
+    cy.get(this.patternSelectors.usageTable.empty).should('be.visible')
+    return this
+  }
+
+  /**
+   * Assert total usage count
+   */
+  assertTotalUsageCount(expectedCount: number): this {
+    cy.get(this.patternSelectors.usageStats.total)
+      .should('contain.text', expectedCount.toString())
+    return this
+  }
+
+  /**
+   * Filter usage by entity type
+   */
+  filterUsageByType(entityType: string): this {
+    cy.get(this.patternSelectors.usageReport.filterSelect).click()
+    cy.get(`[data-value="${entityType}"]`).click()
+    return this
+  }
+
+  /**
+   * Navigate to next page of usage results
+   */
+  goToNextUsagePage(): this {
+    cy.get(this.patternSelectors.usageReport.nextPage).click()
+    return this
+  }
+
+  /**
+   * Navigate to previous page of usage results
+   */
+  goToPrevUsagePage(): this {
+    cy.get(this.patternSelectors.usageReport.prevPage).click()
+    return this
+  }
+
+  /**
+   * Click view link for a specific usage row
+   */
+  clickUsageViewLink(usageId: string): this {
+    cy.get(this.patternSelectors.usageTable.viewLink(usageId)).click()
+    return this
+  }
+
+  // ============================================
+  // DELETE DIALOG METHODS
+  // ============================================
+
+  /**
+   * Open the delete dialog for a pattern from the list dropdown menu
+   * @param id - The pattern ID to delete
+   */
+  openDeleteDialogFromList(id: string): this {
+    // Click on the dropdown menu first
+    cy.get(this.selectors.rowMenu(id)).click()
+    // Then click the delete action
+    cy.get(this.selectors.rowAction('delete', id)).click()
+    // Wait for dialog to be visible
+    cy.get(this.patternSelectors.deleteDialog.container).should('be.visible')
+    return this
+  }
+
+  /**
+   * Open the delete dialog using the standalone trigger (if present)
+   * @deprecated Use openDeleteDialogFromList() for list-based deletion
+   */
+  openDeleteDialog(): this {
+    cy.get(this.patternSelectors.deleteDialog.trigger).click()
+    cy.get(this.patternSelectors.deleteDialog.container).should('be.visible')
+    return this
+  }
+
+  /**
+   * Wait for usage check to complete in delete dialog
+   */
+  waitForUsageCheck(): this {
+    cy.get(this.patternSelectors.deleteDialog.loading).should('not.exist')
+    return this
+  }
+
+  /**
+   * Assert the delete dialog shows usage warning
+   */
+  assertUsageWarningVisible(): this {
+    cy.get(this.patternSelectors.deleteDialog.warning).should('be.visible')
+    return this
+  }
+
+  /**
+   * Assert the delete dialog shows no usage message
+   */
+  assertNoUsageVisible(): this {
+    cy.get(this.patternSelectors.deleteDialog.noUsage).should('be.visible')
+    return this
+  }
+
+  /**
+   * Assert the delete dialog shows error
+   */
+  assertDeleteDialogError(): this {
+    cy.get(this.patternSelectors.deleteDialog.error).should('be.visible')
+    return this
+  }
+
+  /**
+   * Confirm deletion in the delete dialog
+   */
+  confirmPatternDelete(): this {
+    cy.get(this.patternSelectors.deleteDialog.confirm).click()
+    return this
+  }
+
+  /**
+   * Cancel deletion in the delete dialog
+   */
+  cancelPatternDelete(): this {
+    cy.get(this.patternSelectors.deleteDialog.cancel).click()
+    return this
+  }
+
+  /**
+   * Delete pattern from list with API wait
+   * Handles the full flow: open dialog from dropdown, wait for usage check, confirm
+   * @param id - The pattern ID to delete
+   */
+  deletePatternFromListWithApiWait(id: string): this {
+    this.openDeleteDialogFromList(id)
+    this.waitForUsageCheck()
+    this.api.interceptDelete()
+    this.confirmPatternDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  /**
+   * Delete pattern with API wait (using standalone trigger)
+   * @deprecated Use deletePatternFromListWithApiWait() for list-based deletion
+   */
+  deletePatternWithApiWait(): this {
+    this.openDeleteDialog()
+    this.waitForUsageCheck()
+    this.api.interceptDelete()
+    this.confirmPatternDelete()
+    this.api.waitForDelete()
+    return this
+  }
+
+  // ============================================
+  // PLACEHOLDER METHODS (Block Editor context)
+  // ============================================
+
+  /**
+   * Assert deleted pattern placeholder is visible
+   */
+  assertPlaceholderVisible(): this {
+    cy.get(this.patternSelectors.placeholder.container).should('be.visible')
+    return this
+  }
+
+  /**
+   * Click remove button on deleted pattern placeholder
+   */
+  clickPlaceholderRemove(): this {
+    cy.get(this.patternSelectors.placeholder.removeBtn).click()
+    return this
+  }
+
+  // ============================================
+  // WORKFLOW METHODS
+  // ============================================
+
+  /**
+   * Create a new pattern (navigates to create page)
+   */
+  navigateToCreate(): this {
+    this.clickAdd()
+    return this
+  }
+
+  /**
+   * Navigate to edit a pattern
+   */
+  navigateToEdit(id: string): this {
+    this.clickRowAction('edit', id)
+    return this
+  }
+
+  /**
+   * Assert pattern appears in list
+   */
+  assertPatternInList(title: string): this {
+    return this.assertInList(title)
+  }
+
+  /**
+   * Assert pattern does not appear in list
+   */
+  assertPatternNotInList(title: string): this {
+    return this.assertNotInList(title)
+  }
+}
+
+export default PatternsPOM