@nextsparkjs/core 0.1.0-beta.8 → 0.1.0-beta.82

package/templates/contents/themes/starter/tests/cypress/src/core/DashboardEntityPOM.ts

@@ -1,15 +1,14 @@
 /**
- * DashboardEntityPOM - Base class for all entity Page Object Models
+ * DashboardEntityPOM - Theme-specific base class for entity Page Object Models
  *
- * Provides standard CRUD operations for dashboard entities:
- * - Navigation (list, create, edit, detail pages)
- * - Table interactions (search, filters, pagination, row actions)
- * - Form operations (fill fields, submit, cancel)
- * - API interceptor integration for deterministic waits
- * - Bulk actions
- * - Delete confirmation dialogs
+ * Extends DashboardEntityPOMCore from @nextsparkjs/testing and implements
+ * the abstract cySelector method with theme-specific selectors.
  *
- * Entity POMs should extend this class and add entity-specific methods.
+ * Adds theme-specific functionality:
+ * - Entity config validation (optional)
+ * - Convenience aliases (goToList, goToCreate, etc.)
+ * - CRUD helper methods (create, edit, delete)
+ * - Additional assertions
  *
  * @example
  * class TasksPOM extends DashboardEntityPOM {
@@ -23,496 +22,54 @@
  * }
  */
 
-import { BasePOM } from './BasePOM'
+import { DashboardEntityPOMCore, type EntityConfig } from '@nextsparkjs/testing/pom'
+import { type Replacements } from '@nextsparkjs/core/selectors'
 import { cySelector } from '../selectors'
-import entitiesConfig from '../../fixtures/entities.json'
-import { ApiInterceptor } from '../helpers/ApiInterceptor'
 
-export interface EntityConfig {
-  slug: string
-  singular: string
-  plural: string
-  tableName: string
-  fields: string[]
-  filters: string[]
-}
-
-export abstract class DashboardEntityPOM extends BasePOM {
-  protected slug: string
-  protected entityConfig: EntityConfig
-  protected _api: ApiInterceptor | null = null
-
-  /**
-   * Get the entity slug (public accessor)
-   * Useful for building dynamic selectors and URLs in tests
-   */
-  get entitySlug(): string {
-    return this.slug
-  }
-
-  constructor(entitySlug: string) {
-    super()
-    // Find entity config by slug
-    const entry = Object.entries(entitiesConfig.entities).find(([, config]) => config.slug === entitySlug)
-    if (!entry) {
-      throw new Error(
-        `Unknown entity slug: ${entitySlug}. Available: ${Object.values(entitiesConfig.entities).map(e => e.slug).join(', ')}`
-      )
-    }
-    this.entityConfig = entry[1] as EntityConfig
-    this.slug = entitySlug
-  }
-
-  // ============================================
-  // API INTERCEPTOR
-  // ============================================
+// Optional: Import entities config for validation
+// import entitiesConfig from '../../fixtures/entities.json'
 
+export abstract class DashboardEntityPOM extends DashboardEntityPOMCore {
   /**
-   * Get or create ApiInterceptor instance for this entity
+   * Implement abstract method from BasePOMCore
+   * Uses theme-specific selectors (THEME_SELECTORS)
    */
-  get api(): ApiInterceptor {
-    if (!this._api) {
-      this._api = new ApiInterceptor(this.slug)
-    }
-    return this._api
-  }
-
-  /**
-   * Setup API intercepts for all CRUD operations
-   * Call this BEFORE navigation
-   */
-  setupApiIntercepts() {
-    this.api.setupCrudIntercepts()
-    return this
+  protected cySelector(path: string, replacements?: Replacements): string {
+    return cySelector(path, replacements)
   }
 
   // ============================================
-  // SELECTORS (from centralized selectors.ts)
+  // CONVENIENCE NAVIGATION ALIASES
   // ============================================
 
   /**
-   * Get all selectors for this entity, with placeholders replaced
-   */
-  get selectors() {
-    const slug = this.slug
-
-    return {
-      // Page
-      page: cySelector('entities.page.container', { slug }),
-      pageTitle: cySelector('entities.page.title', { slug }),
-
-      // Table
-      tableContainer: cySelector('entities.table.container', { slug }),
-      table: cySelector('entities.table.element', { slug }),
-      addButton: cySelector('entities.table.addButton', { slug }),
-      search: cySelector('entities.search.input', { slug }),
-      searchContainer: cySelector('entities.search.container', { slug }),
-      searchClear: cySelector('entities.search.clear', { slug }),
-      selectAll: cySelector('entities.table.selectAll', { slug }),
-      selectionCount: cySelector('entities.table.selectionCount', { slug }),
-      row: (id: string) => cySelector('entities.table.row', { slug, id }),
-      rowSelect: (id: string) => cySelector('entities.table.rowSelect', { slug, id }),
-      rowMenu: (id: string) => cySelector('entities.table.rowMenu', { slug, id }),
-      rowAction: (action: string, id: string) => cySelector('entities.table.rowAction', { slug, action, id }),
-      cell: (field: string, id: string) => cySelector('entities.table.cell', { slug, field, id }),
-      rowGeneric: `[data-cy^="${slug}-row-"]`,
-
-      // Pagination
-      pagination: cySelector('entities.pagination.container', { slug }),
-      pageSize: cySelector('entities.pagination.pageSize', { slug }),
-      pageSizeOption: (size: string) => cySelector('entities.pagination.pageSizeOption', { slug, size }),
-      pageInfo: cySelector('entities.pagination.pageInfo', { slug }),
-      pageFirst: cySelector('entities.pagination.first', { slug }),
-      pagePrev: cySelector('entities.pagination.prev', { slug }),
-      pageNext: cySelector('entities.pagination.next', { slug }),
-      pageLast: cySelector('entities.pagination.last', { slug }),
-
-      // Header (detail pages) - modes: view, edit, create
-      viewHeader: cySelector('entities.header.container', { slug, mode: 'view' }),
-      editHeader: cySelector('entities.header.container', { slug, mode: 'edit' }),
-      createHeader: cySelector('entities.header.container', { slug, mode: 'create' }),
-      backButton: cySelector('entities.header.backButton', { slug }),
-      editButton: cySelector('entities.header.editButton', { slug }),
-      deleteButton: cySelector('entities.header.deleteButton', { slug }),
-      copyId: cySelector('entities.header.copyId', { slug }),
-      title: cySelector('entities.header.title', { slug }),
-
-      // Delete confirmation
-      deleteDialog: cySelector('entities.header.deleteDialog', { slug }),
-      deleteCancel: cySelector('entities.header.deleteCancel', { slug }),
-      deleteConfirm: cySelector('entities.header.deleteConfirm', { slug }),
-
-      // Form
-      form: cySelector('entities.form.container', { slug }),
-      field: (name: string) => cySelector('entities.form.field', { slug, name }),
-      submitButton: cySelector('entities.form.submitButton', { slug }),
-
-      // Filters
-      filter: (field: string) => cySelector('entities.filter.container', { slug, field }),
-      filterTrigger: (field: string) => cySelector('entities.filter.trigger', { slug, field }),
-      filterContent: (field: string) => cySelector('entities.filter.content', { slug, field }),
-      filterOption: (field: string, value: string) => cySelector('entities.filter.option', { slug, field, value }),
-      filterBadge: (field: string, value: string) => cySelector('entities.filter.badge', { slug, field, value }),
-      filterRemoveBadge: (field: string, value: string) =>
-        cySelector('entities.filter.removeBadge', { slug, field, value }),
-      filterClearAll: (field: string) => cySelector('entities.filter.clearAll', { slug, field }),
-
-      // Bulk actions
-      bulkBar: cySelector('entities.bulk.bar', { slug }),
-      bulkCount: cySelector('entities.bulk.count', { slug }),
-      bulkSelectAll: cySelector('entities.bulk.selectAll', { slug }),
-      bulkStatus: cySelector('entities.bulk.statusButton', { slug }),
-      bulkDelete: cySelector('entities.bulk.deleteButton', { slug }),
-      bulkClear: cySelector('entities.bulk.clearButton', { slug }),
-
-      // Bulk status dialog
-      bulkStatusDialog: cySelector('entities.bulk.statusDialog', { slug }),
-      bulkStatusSelect: cySelector('entities.bulk.statusSelect', { slug }),
-      bulkStatusOption: (value: string) => cySelector('entities.bulk.statusOption', { slug, value }),
-      bulkStatusCancel: cySelector('entities.bulk.statusCancel', { slug }),
-      bulkStatusConfirm: cySelector('entities.bulk.statusConfirm', { slug }),
-
-      // Bulk delete dialog
-      bulkDeleteDialog: cySelector('entities.bulk.deleteDialog', { slug }),
-      bulkDeleteCancel: cySelector('entities.bulk.deleteCancel', { slug }),
-      bulkDeleteConfirm: cySelector('entities.bulk.deleteConfirm', { slug }),
-
-      // Generic confirm dialog
-      confirmDialog: cySelector('entities.confirm.dialog', { slug }),
-      confirmCancel: cySelector('entities.confirm.cancel', { slug }),
-      confirmAction: cySelector('entities.confirm.action', { slug }),
-
-      // Parent delete confirmation (EntityDetailWrapper - generic, no slug)
-      parentDeleteConfirm: '[data-cy="confirm-delete"]',
-      parentDeleteCancel: '[data-cy="cancel-delete"]',
-
-      // Row action selectors (generic patterns for checking existence)
-      rowActionEditGeneric: `[data-cy^="${slug}-action-edit-"]`,
-      rowActionDeleteGeneric: `[data-cy^="${slug}-action-delete-"]`,
-
-      // Detail view
-      detail: cySelector('entities.detail.container', { slug })
-    }
-  }
-
-  // ============================================
-  // NAVIGATION
-  // ============================================
-
-  /**
-   * Navigate to entity list page
-   */
-  visitList() {
-    cy.visit(`/dashboard/${this.slug}`)
-    return this
-  }
-
-  /**
-   * Navigate to create page
-   */
-  visitCreate() {
-    cy.visit(`/dashboard/${this.slug}/create`)
-    return this
-  }
-
-  /**
-   * Navigate to edit page for specific entity
-   */
-  visitEdit(id: string) {
-    cy.visit(`/dashboard/${this.slug}/${id}/edit`)
-    return this
-  }
-
-  /**
-   * Navigate to detail/view page for specific entity
-   */
-  visitDetail(id: string) {
-    cy.visit(`/dashboard/${this.slug}/${id}`)
-    return this
-  }
-
-  /**
-   * Navigate to list and go to create form
+   * Alias for visitList
    */
   goToList() {
     return this.visitList()
   }
 
   /**
-   * Navigate to create page
+   * Alias for visitCreate
    */
   goToCreate() {
     return this.visitCreate()
   }
 
   /**
-   * Navigate to edit page
+   * Alias for visitEdit
    */
   goToEdit(id: string) {
     return this.visitEdit(id)
   }
 
   // ============================================
-  // API-AWARE NAVIGATION
-  // ============================================
-
-  /**
-   * Navigate to list and wait for API response
-   */
-  visitListWithApiWait() {
-    this.setupApiIntercepts()
-    this.visitList()
-    this.api.waitForList()
-    return this
-  }
-
-  /**
-   * Navigate to edit page and wait for form to be visible
-   */
-  visitEditWithApiWait(id: string) {
-    this.setupApiIntercepts()
-    this.visitEdit(id)
-    this.waitForForm()
-    return this
-  }
-
-  /**
-   * Navigate to detail page and wait for content
-   */
-  visitDetailWithApiWait(id: string) {
-    this.setupApiIntercepts()
-    this.visitDetail(id)
-    this.waitForDetail()
-    return this
-  }
-
-  // ============================================
-  // WAITS
-  // ============================================
-
-  /**
-   * Wait for list page to be fully loaded
-   */
-  waitForList() {
-    cy.url().should('include', `/dashboard/${this.slug}`)
-    cy.get(this.selectors.tableContainer, { timeout: 15000 }).should('be.visible')
-    return this
-  }
-
-  /**
-   * Wait for form to be visible
-   */
-  waitForForm() {
-    cy.get(this.selectors.form, { timeout: 15000 }).should('be.visible')
-    return this
-  }
-
-  /**
-   * Wait for detail page to be loaded
-   */
-  waitForDetail() {
-    cy.url().should('match', new RegExp(`/dashboard/${this.slug}/[a-z0-9-]+$`))
-    cy.get(this.selectors.editButton, { timeout: 15000 }).should('be.visible')
-    return this
-  }
-
-  // ============================================
-  // TABLE ACTIONS
-  // ============================================
-
-  /**
-   * Click the Add/Create button
-   */
-  clickAdd() {
-    cy.get(this.selectors.addButton).click()
-    return this
-  }
-
-  /**
-   * Type in the search input
-   */
-  search(term: string) {
-    cy.get(this.selectors.search).clear().type(term)
-    return this
-  }
-
-  /**
-   * Clear the search input
-   */
-  clearSearch() {
-    cy.get(this.selectors.searchClear).click()
-    return this
-  }
-
-  /**
-   * Click a specific row by ID
-   */
-  clickRow(id: string) {
-    cy.get(this.selectors.row(id)).click()
-    return this
-  }
-
-  /**
-   * Find and click a row containing specific text
-   */
-  clickRowByText(text: string) {
-    cy.contains(this.selectors.rowGeneric, text).click()
-    return this
-  }
-
-  /**
-   * Select a row checkbox
-   */
-  selectRow(id: string) {
-    cy.get(this.selectors.rowSelect(id)).click()
-    return this
-  }
-
-  /**
-   * Open the row menu (three dots)
-   */
-  openRowMenu(id: string) {
-    cy.get(this.selectors.rowMenu(id)).click()
-    return this
-  }
-
-  /**
-   * Click an action in the row menu
-   */
-  clickRowAction(action: string, id: string) {
-    cy.get(this.selectors.rowAction(action, id)).click()
-    return this
-  }
-
-  // ============================================
-  // FILTERS
-  // ============================================
-
-  /**
-   * Open a filter dropdown
-   */
-  openFilter(field: string) {
-    cy.get(this.selectors.filterTrigger(field)).click()
-    return this
-  }
-
-  /**
-   * Select a filter option
-   */
-  selectFilterOption(field: string, value: string) {
-    cy.get(this.selectors.filterOption(field, value)).click()
-    return this
-  }
-
-  /**
-   * Open filter and select option (convenience method)
-   */
-  selectFilter(field: string, value: string) {
-    this.openFilter(field)
-    this.selectFilterOption(field, value)
-    return this
-  }
-
-  /**
-   * Remove a filter badge
-   */
-  removeFilterBadge(field: string, value: string) {
-    cy.get(this.selectors.filterRemoveBadge(field, value)).click()
-    return this
-  }
-
-  /**
-   * Clear all values for a filter
-   */
-  clearFilter(field: string) {
-    cy.get(this.selectors.filterClearAll(field)).click()
-    return this
-  }
-
-  // ============================================
-  // PAGINATION
-  // ============================================
-
-  /**
-   * Go to next page
-   */
-  nextPage() {
-    cy.get(this.selectors.pageNext).click()
-    return this
-  }
-
-  /**
-   * Go to previous page
-   */
-  prevPage() {
-    cy.get(this.selectors.pagePrev).click()
-    return this
-  }
-
-  /**
-   * Go to first page
-   */
-  firstPage() {
-    cy.get(this.selectors.pageFirst).click()
-    return this
-  }
-
-  /**
-   * Go to last page
-   */
-  lastPage() {
-    cy.get(this.selectors.pageLast).click()
-    return this
-  }
-
-  /**
-   * Change page size
-   */
-  setPageSize(size: string) {
-    cy.get(this.selectors.pageSize).click()
-    cy.get(this.selectors.pageSizeOption(size)).click()
-    return this
-  }
-
-  // ============================================
-  // FORM ACTIONS
+  // CRUD HELPER METHODS
   // ============================================
 
-  /**
-   * Fill a text input field
-   */
-  fillTextField(name: string, value: string) {
-    cy.get(this.selectors.field(name)).find('input').clear().type(value)
-    return this
-  }
-
-  /**
-   * Fill a textarea field
-   */
-  fillTextarea(name: string, value: string) {
-    cy.get(this.selectors.field(name)).find('textarea').clear().type(value)
-    return this
-  }
-
-  /**
-   * Select an option in a combobox/select field
-   */
-  selectOption(name: string, value: string) {
-    cy.get(this.selectors.field(name)).find('[role="combobox"]').click()
-    cy.get(`[data-cy="${this.slug}-field-${name}-option-${value}"]`).click()
-    return this
-  }
-
-  /**
-   * Submit the form
-   */
-  submitForm() {
-    cy.get(this.selectors.submitButton).click()
-    return this
-  }
-
   /**
    * Create entity with data
+   * Override in subclass to fill form with specific fields
    */
   create(data: Record<string, unknown>) {
     this.visitCreate()
@@ -524,6 +81,7 @@ export abstract class DashboardEntityPOM extends BasePOM {
 
   /**
    * Edit entity with data
+   * Override in subclass to fill form with specific fields
    */
   edit(id: string, data: Record<string, unknown>) {
     this.visitEdit(id)
@@ -545,140 +103,11 @@ export abstract class DashboardEntityPOM extends BasePOM {
   }
 
   // ============================================
-  // HEADER/DETAIL ACTIONS
-  // ============================================
-
-  /**
-   * Click back button
-   */
-  clickBack() {
-    cy.get(this.selectors.backButton).click()
-    return this
-  }
-
-  /**
-   * Click edit button
-   */
-  clickEdit() {
-    cy.get(this.selectors.editButton).click()
-    return this
-  }
-
-  /**
-   * Click delete button
-   */
-  clickDelete() {
-    cy.get(this.selectors.deleteButton).click()
-    return this
-  }
-
-  /**
-   * Confirm delete in dialog
-   */
-  confirmDelete() {
-    cy.get(this.selectors.deleteConfirm).click()
-    return this
-  }
-
-  /**
-   * Cancel delete in dialog
-   */
-  cancelDelete() {
-    cy.get(this.selectors.deleteCancel).click()
-    return this
-  }
-
-  // ============================================
-  // BULK ACTIONS
+  // ADDITIONAL ASSERTIONS
   // ============================================
 
   /**
-   * Select all items using table header checkbox
-   */
-  selectAll() {
-    cy.get(this.selectors.selectAll).click()
-    return this
-  }
-
-  /**
-   * Click bulk delete button
-   */
-  bulkDelete() {
-    cy.get(this.selectors.bulkDelete).click()
-    return this
-  }
-
-  /**
-   * Confirm bulk delete
-   */
-  confirmBulkDelete() {
-    cy.get(this.selectors.bulkDeleteConfirm).click()
-    return this
-  }
-
-  /**
-   * Cancel bulk delete
-   */
-  cancelBulkDelete() {
-    cy.get(this.selectors.bulkDeleteCancel).click()
-    return this
-  }
-
-  /**
-   * Click bulk status button
-   */
-  bulkChangeStatus() {
-    cy.get(this.selectors.bulkStatus).click()
-    return this
-  }
-
-  /**
-   * Select status in bulk status dialog
-   */
-  selectBulkStatus(value: string) {
-    cy.get(this.selectors.bulkStatusSelect).click()
-    cy.get(this.selectors.bulkStatusOption(value)).click()
-    return this
-  }
-
-  /**
-   * Confirm bulk status change
-   */
-  confirmBulkStatus() {
-    cy.get(this.selectors.bulkStatusConfirm).click()
-    return this
-  }
-
-  /**
-   * Clear selection
-   */
-  clearSelection() {
-    cy.get(this.selectors.bulkClear).click()
-    return this
-  }
-
-  // ============================================
-  // ASSERTIONS
-  // ============================================
-
-  /**
-   * Assert text is visible in the list
-   */
-  assertInList(text: string) {
-    cy.contains(text).should('be.visible')
-    return this
-  }
-
-  /**
-   * Assert text is not in the list
-   */
-  assertNotInList(text: string) {
-    cy.contains(text).should('not.exist')
-    return this
-  }
-
-  /**
-   * Assert item exists by data
+   * Assert item exists by data (checks title or name)
    */
   assertItemExists(data: { title?: string; name?: string }) {
     const text = data.title || data.name || ''
@@ -692,70 +121,9 @@ export abstract class DashboardEntityPOM extends BasePOM {
     const text = data.title || data.name || ''
     return this.assertNotInList(text)
   }
-
-  /**
-   * Assert table is visible
-   */
-  assertTableVisible() {
-    cy.get(this.selectors.table).should('be.visible')
-    return this
-  }
-
-  /**
-   * Assert form is visible
-   */
-  assertFormVisible() {
-    cy.get(this.selectors.form).should('be.visible')
-    return this
-  }
-
-  /**
-   * Assert page title contains text
-   */
-  assertPageTitle(expected: string) {
-    cy.get(this.selectors.title).should('contain.text', expected)
-    return this
-  }
-
-  /**
-   * Assert row exists
-   */
-  assertRowExists(id: string) {
-    cy.get(this.selectors.row(id)).should('exist')
-    return this
-  }
-
-  /**
-   * Assert row does not exist
-   */
-  assertRowNotExists(id: string) {
-    cy.get(this.selectors.row(id)).should('not.exist')
-    return this
-  }
-
-  /**
-   * Assert selection count
-   */
-  assertSelectionCount(count: number) {
-    cy.get(this.selectors.selectionCount).should('contain.text', count.toString())
-    return this
-  }
-
-  /**
-   * Assert bulk bar is visible
-   */
-  assertBulkBarVisible() {
-    cy.get(this.selectors.bulkBar).should('be.visible')
-    return this
-  }
-
-  /**
-   * Assert bulk bar is hidden
-   */
-  assertBulkBarHidden() {
-    cy.get(this.selectors.bulkBar).should('not.be.visible')
-    return this
-  }
 }
 
 export default DashboardEntityPOM
+
+// Re-export EntityConfig for convenience
+export type { EntityConfig }