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

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

@@ -0,0 +1,285 @@
+/**
+ * SuperadminTeamRolesPOM - Page Object Model for Admin Team Roles Matrix
+ *
+ * Tests the consolidated permissions matrix that shows:
+ * - All team roles with hierarchy levels
+ * - Permissions grouped by category
+ * - Visual indicators for permission grants (checkmarks)
+ * - Dangerous permissions highlighted
+ *
+ * @version 3.0 - Uses centralized selectors from cySelector()
+ *
+ * @example
+ * // Verify matrix displays all roles
+ * SuperadminTeamRolesPOM.create()
+ *   .visit()
+ *   .verifyRolesDisplayed(['owner', 'admin', 'member', 'editor', 'viewer'])
+ *
+ * // Check editor permissions
+ * SuperadminTeamRolesPOM.create()
+ *   .visit()
+ *   .verifyHasPermission('editor', 'customers.list')
+ *   .verifyNoPermission('editor', 'customers.create')
+ */
+
+import { BasePOM } from '../core/BasePOM'
+import { cySelector } from '../selectors'
+
+export interface RoleHierarchy {
+  role: string
+  level: number
+}
+
+export class SuperadminTeamRolesPOM extends BasePOM {
+  // ============================================
+  // FACTORY METHOD
+  // ============================================
+
+  static create(): SuperadminTeamRolesPOM {
+    return new SuperadminTeamRolesPOM()
+  }
+
+  // ============================================
+  // SELECTORS using centralized cySelector()
+  // ============================================
+
+  get selectors() {
+    return {
+      // Page structure
+      pageTitle: 'h1',
+      backButton: cySelector('superadmin.teamRoles.backButton'),
+
+      // Stats cards (use contains since no specific data-cy)
+      statsCard: '.grid-cols-1 .border',
+
+      // Role cards in hierarchy section
+      roleCard: (role: string) => cySelector('superadmin.teamRoles.roleCard', { role }),
+      roleHierarchyBadge: '.font-semibold',
+
+      // Permissions matrix table
+      matrixTable: '.rounded-md.border table',
+      permissionRow: (permission: string) =>
+        cySelector('superadmin.permissions.row', { permission: permission.replace(/\./g, '-') }),
+
+      // Category headers
+      categoryHeader: '.bg-muted\\/50',
+
+      // Permission checkmarks and X marks (Lucide icons with Tailwind classes)
+      // Note: These are SVG elements with the class applied
+      checkmark: 'svg.lucide-check, .text-green-600',
+      xMark: 'svg.lucide-x',
+
+      // Dangerous permission badge (Badge component with variant="destructive")
+      dangerousBadge: '[class*="destructive"]',
+
+      // Legend section
+      legend: '.bg-muted\\/30',
+    }
+  }
+
+  // ============================================
+  // NAVIGATION
+  // ============================================
+
+  /**
+   * Navigate to Team Roles page
+   */
+  visit() {
+    cy.visit('/superadmin/team-roles')
+    this.waitForPageLoad()
+    return this
+  }
+
+  /**
+   * Wait for page to fully load
+   */
+  waitForPageLoad() {
+    cy.get(this.selectors.matrixTable, { timeout: 15000 }).should('be.visible')
+    return this
+  }
+
+  // ============================================
+  // ROLE CARDS (HIERARCHY SECTION)
+  // ============================================
+
+  /**
+   * Get a role card by role name
+   */
+  getRoleCard(role: string) {
+    return cy.get(this.selectors.roleCard(role))
+  }
+
+  /**
+   * Verify all expected roles are displayed
+   */
+  verifyRolesDisplayed(expectedRoles: string[]) {
+    for (const role of expectedRoles) {
+      this.getRoleCard(role).should('be.visible')
+    }
+    return this
+  }
+
+  /**
+   * Verify role hierarchy level
+   */
+  verifyRoleHierarchy(role: string, expectedLevel: number) {
+    this.getRoleCard(role)
+      .find('.font-semibold')
+      .first()
+      .should('contain', expectedLevel.toString())
+    return this
+  }
+
+  /**
+   * Get permission count text for a role
+   */
+  getPermissionCount(role: string) {
+    return this.getRoleCard(role).find('.text-muted-foreground')
+  }
+
+  /**
+   * Verify role has expected permission count
+   */
+  verifyPermissionCount(role: string, expectedCount: number) {
+    this.getPermissionCount(role).should('contain', `${expectedCount} permissions`)
+    return this
+  }
+
+  // ============================================
+  // PERMISSIONS MATRIX
+  // ============================================
+
+  /**
+   * Get a permission row by permission ID
+   */
+  getPermissionRow(permission: string) {
+    return cy.get(this.selectors.permissionRow(permission))
+  }
+
+  /**
+   * Get column index for a role in the matrix
+   * Roles are sorted by hierarchy: owner, admin, member, editor, viewer
+   */
+  private getRoleColumnIndex(role: string): number {
+    const roleOrder = ['owner', 'admin', 'member', 'editor', 'viewer']
+    const index = roleOrder.indexOf(role)
+    // +2 because first column is permission name
+    return index >= 0 ? index + 2 : -1
+  }
+
+  /**
+   * Verify a role has a specific permission (green checkmark)
+   */
+  verifyHasPermission(role: string, permission: string) {
+    const colIndex = this.getRoleColumnIndex(role)
+    this.getPermissionRow(permission)
+      .find(`td:nth-child(${colIndex})`)
+      .find(this.selectors.checkmark)
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Verify a role does NOT have a specific permission (red X)
+   */
+  verifyNoPermission(role: string, permission: string) {
+    const colIndex = this.getRoleColumnIndex(role)
+    this.getPermissionRow(permission)
+      .find(`td:nth-child(${colIndex})`)
+      .find(this.selectors.xMark)
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Verify a permission is marked as dangerous
+   * The dangerous badge contains text "dangerous" with destructive styling
+   */
+  verifyDangerousPermission(permission: string) {
+    this.getPermissionRow(permission)
+      .scrollIntoView()
+      .contains('dangerous')
+      .should('be.visible')
+    return this
+  }
+
+  /**
+   * Verify permission row shows permission ID with dangerous styling
+   */
+  verifyDangerousPermissionText(permission: string) {
+    this.getPermissionRow(permission)
+      .find('.text-red-600')
+      .should('contain', permission)
+    return this
+  }
+
+  // ============================================
+  // CATEGORY HEADERS
+  // ============================================
+
+  /**
+   * Get all category headers
+   */
+  getCategoryHeaders() {
+    return cy.get(this.selectors.categoryHeader)
+  }
+
+  /**
+   * Verify expected categories are present
+   */
+  verifyCategoriesPresent(categories: string[]) {
+    for (const category of categories) {
+      this.getCategoryHeaders().should('contain', category)
+    }
+    return this
+  }
+
+  // ============================================
+  // STATS CARDS
+  // ============================================
+
+  /**
+   * Verify stats card shows expected value
+   */
+  verifyStatsCard(title: string, value: string) {
+    cy.contains('.font-medium', title)
+      .parents('.border')
+      .find('.text-2xl')
+      .should('contain', value)
+    return this
+  }
+
+  // ============================================
+  // ASSERTIONS
+  // ============================================
+
+  /**
+   * Verify owner has all permissions (all checkmarks)
+   */
+  verifyOwnerHasAllPermissions() {
+    // Owner column should have no X marks
+    cy.get(this.selectors.matrixTable)
+      .find('tbody tr:not(.bg-muted\\/50)')
+      .each(($row) => {
+        cy.wrap($row)
+          .find('td:nth-child(2)') // Owner is first role column
+          .find(this.selectors.checkmark)
+          .should('exist')
+      })
+    return this
+  }
+
+  /**
+   * Verify editor has specific permission set
+   */
+  verifyEditorPermissions(expected: { permission: string; hasAccess: boolean }[]) {
+    for (const { permission, hasAccess } of expected) {
+      if (hasAccess) {
+        this.verifyHasPermission('editor', permission)
+      } else {
+        this.verifyNoPermission('editor', permission)
+      }
+    }
+    return this
+  }
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Feature POM exports
+ *
+ * Specialized POMs for complex features:
+ * - PageBuilderPOM: Create/edit pages with blocks
+ * - PostEditorPOM: Create/edit posts with blocks
+ * - PublicPagePOM: Test public page rendering
+ * - PublicPostPOM: Test public post rendering
+ * - AdminTeamRolesPOM: Admin team roles matrix
+ * - DashboardPOM: Dashboard navigation and shell
+ * - SettingsPOM: Settings area (profile, team, billing)
+ * - AdminPOM: Superadmin area
+ * - BillingPOM: Billing settings
+ * - DevtoolsPOM: Developer tools area
+ */
+
+export { PageBuilderPOM, type PageFormData, type BlockData as PageBlockData } from './PageBuilderPOM'
+export { PostEditorPOM, type PostFormData, type BlockData as PostBlockData } from './PostEditorPOM'
+export { AdminTeamRolesPOM, type RoleHierarchy } from './AdminTeamRolesPOM'
+export { DashboardPOM } from './DashboardPOM'
+export { SettingsPOM } from './SettingsPOM'
+export { AdminPOM } from './AdminPOM'
+export { BillingPOM } from './BillingPOM'
+export { DevtoolsPOM } from './DevtoolsPOM'
+
+// Re-export public POMs from components (until migrated)
+export { PublicPagePOM } from '../components/PublicPagePOM'
+export { PublicPostPOM } from '../components/PublicPostPOM'

package/tests/cypress/src/helpers/ApiInterceptor.ts

@@ -0,0 +1,177 @@
+/**
+ * ApiInterceptor - Helper para waits determinísticos en Cypress
+ *
+ * Reemplaza cy.wait(ms) poco fiables con waits basados en cy.intercept()
+ * que esperan respuestas reales de la API.
+ *
+ * Uso básico:
+ *   const api = new ApiInterceptor('customers')
+ *   api.setupCrudIntercepts()
+ *   cy.visit('/dashboard/customers')
+ *   api.waitForList()
+ *
+ * Uso con ruta custom:
+ *   const api = new ApiInterceptor({
+ *     slug: 'categories',
+ *     customPath: '/api/v1/post-categories'
+ *   })
+ */
+
+export interface ApiInterceptorConfig {
+  /** Entity slug - usado para generar aliases */
+  slug: string
+  /** Ruta API custom (ej: '/api/v1/post-categories') */
+  customPath?: string
+}
+
+export class ApiInterceptor {
+  private slug: string
+  private endpoint: string
+
+  constructor(slugOrConfig: string | ApiInterceptorConfig) {
+    if (typeof slugOrConfig === 'string') {
+      this.slug = slugOrConfig
+      this.endpoint = `/api/v1/${slugOrConfig}`
+    } else {
+      this.slug = slugOrConfig.slug
+      this.endpoint = slugOrConfig.customPath || `/api/v1/${slugOrConfig.slug}`
+    }
+  }
+
+  // ============================================
+  // ACCESSORS
+  // ============================================
+
+  /** Get the API endpoint path */
+  get path(): string {
+    return this.endpoint
+  }
+
+  /** Get the entity slug */
+  get entitySlug(): string {
+    return this.slug
+  }
+
+  /** Get alias names for all operations */
+  get aliases() {
+    return {
+      list: `${this.slug}List`,
+      create: `${this.slug}Create`,
+      update: `${this.slug}Update`,
+      delete: `${this.slug}Delete`
+    }
+  }
+
+  // ============================================
+  // INTERCEPT SETUP
+  // ============================================
+
+  /**
+   * Setup intercepts for all CRUD operations
+   * Call this BEFORE navigation in beforeEach or at test start
+   *
+   * Note: We intercept both PUT and PATCH for updates since different
+   * APIs may use different HTTP methods for updates.
+   */
+  setupCrudIntercepts(): this {
+    cy.intercept('GET', `${this.endpoint}*`).as(this.aliases.list)
+    cy.intercept('POST', this.endpoint).as(this.aliases.create)
+    // Intercept both PUT and PATCH for updates (APIs may use either)
+    cy.intercept('PUT', `${this.endpoint}/*`).as(this.aliases.update)
+    cy.intercept('PATCH', `${this.endpoint}/*`).as(`${this.aliases.update}Patch`)
+    cy.intercept('DELETE', `${this.endpoint}/*`).as(this.aliases.delete)
+    return this
+  }
+
+  /**
+   * Setup only list + create intercepts
+   * Useful for list pages with inline create
+   */
+  setupListIntercepts(): this {
+    cy.intercept('GET', `${this.endpoint}*`).as(this.aliases.list)
+    cy.intercept('POST', this.endpoint).as(this.aliases.create)
+    return this
+  }
+
+  // ============================================
+  // WAIT METHODS
+  // ============================================
+
+  /**
+   * Wait for list response (GET)
+   * Use after navigation or after mutations to wait for refresh
+   */
+  waitForList(timeout = 10000): Cypress.Chainable {
+    return cy.wait(`@${this.aliases.list}`, { timeout })
+  }
+
+  /**
+   * Wait for create response (POST) and validate success status
+   */
+  waitForCreate(timeout = 10000): Cypress.Chainable {
+    return cy.wait(`@${this.aliases.create}`, { timeout })
+      .its('response.statusCode')
+      .should('be.oneOf', [200, 201])
+  }
+
+  /**
+   * Wait for update response (PATCH or PUT) and validate success status
+   * Waits for PATCH first (more common), falls back to PUT
+   */
+  waitForUpdate(timeout = 10000): Cypress.Chainable {
+    // Try PATCH first (more common in modern APIs), fall back to PUT
+    return cy.wait(`@${this.aliases.update}Patch`, { timeout })
+      .its('response.statusCode')
+      .should('be.oneOf', [200, 201])
+  }
+
+  /**
+   * Wait for delete response (DELETE) and validate success status
+   */
+  waitForDelete(timeout = 10000): Cypress.Chainable {
+    return cy.wait(`@${this.aliases.delete}`, { timeout })
+      .its('response.statusCode')
+      .should('be.oneOf', [200, 204])
+  }
+
+  // ============================================
+  // CONVENIENCE METHODS
+  // ============================================
+
+  /**
+   * Wait for list refresh (alias for waitForList)
+   * Semantic name for use after create/update/delete
+   */
+  waitForRefresh(timeout = 10000): Cypress.Chainable {
+    return this.waitForList(timeout)
+  }
+
+  /**
+   * Wait for create + list refresh
+   * Common pattern: create entity, wait for success, wait for list to refresh
+   */
+  waitForCreateAndRefresh(timeout = 10000): Cypress.Chainable {
+    this.waitForCreate(timeout)
+    return this.waitForList(timeout)
+  }
+
+  /**
+   * Wait for update + list refresh
+   * Common pattern: update entity, wait for success, wait for list to refresh
+   */
+  waitForUpdateAndRefresh(timeout = 10000): Cypress.Chainable {
+    this.waitForUpdate(timeout)
+    return this.waitForList(timeout)
+  }
+
+  /**
+   * Wait for delete + list refresh
+   * Common pattern: delete entity, wait for success, wait for list to refresh
+   */
+  waitForDeleteAndRefresh(timeout = 10000): Cypress.Chainable {
+    this.waitForDelete(timeout)
+    return this.waitForList(timeout)
+  }
+}
+
+export default ApiInterceptor

package/tests/cypress/src/index.ts

@@ -0,0 +1,101 @@
+/**
+ * Default Theme - Cypress POM Exports
+ *
+ * Centralized exports for all Default theme Page Object Models and helpers.
+ *
+ * Architecture (v2.0):
+ * - core/: Base classes (BasePOM, DashboardEntityPOM, BlockEditorBasePOM, AuthPOM)
+ * - entities/: Entity POMs extending DashboardEntityPOM (TasksPOM, CustomersPOM, etc.)
+ * - features/: Feature POMs for complex UIs (PageBuilderPOM, PostEditorPOM)
+ * - helpers/: Utility classes (ApiInterceptor)
+ *
+ * Usage:
+ *   // New architecture (recommended)
+ *   import { TasksPOM, CustomersPOM, AuthPOM, PageBuilderPOM } from '../src'
+ *   const tasks = TasksPOM.create()
+ *   tasks.visitList().waitForList().clickAdd()
+ *
+ *   // Session helpers
+ *   import { loginAsOwner, loginAsMember } from '../src'
+ */
+
+// ============================================
+// CORE - Base Classes
+// ============================================
+export {
+  BasePOM,
+  DashboardEntityPOM,
+  BlockEditorBasePOM,
+  AuthPOM,
+  type EntityConfig,
+  type SignupData
+} from './core'
+
+// ============================================
+// ENTITIES - Entity POMs (extend DashboardEntityPOM)
+// New instance-based POMs - use .create() factory method
+// ============================================
+export {
+  TasksPOM as TasksPOMv2,
+  CustomersPOM as CustomersPOMv2,
+  PostsPOM as PostsPOMv2,
+  PagesPOM as PagesPOMv2,
+  type TaskFormData,
+  type CustomerFormData,
+  type PostListFilters,
+  type PageListFilters
+} from './entities'
+
+// ============================================
+// FEATURES - Feature POMs (block editors, public pages)
+// New instance-based POMs - use .create() factory method
+// ============================================
+export {
+  PageBuilderPOM as PageBuilderPOMv2,
+  PostEditorPOM as PostEditorPOMv2,
+  AdminTeamRolesPOM,
+  PublicPagePOM,
+  PublicPostPOM,
+  type PageFormData,
+  type PostFormData,
+  type PageBlockData,
+  type PostBlockData,
+  type RoleHierarchy
+} from './features'
+
+// ============================================
+// HELPERS
+// ============================================
+export { ApiInterceptor, type ApiInterceptorConfig } from './helpers/ApiInterceptor'
+
+// ============================================
+// SESSION HELPERS
+// ============================================
+export {
+  DEFAULT_THEME_USERS,
+  loginAsDefaultOwner,
+  loginAsDefaultAdmin,
+  loginAsDefaultMember,
+  loginAsDefaultEditor,
+  loginAsDefaultViewer,
+  loginAsOwner,
+  loginAsMember,
+  loginAsAdmin,
+  loginAsEditor,
+  loginAsViewer,
+} from './session-helpers'
+
+// ============================================
+// LEGACY/STATIC POMs (backward compatible - use v2 for new code)
+// These use static methods and work with existing tests
+// ============================================
+export { TasksPOM } from './components/TasksPOM'
+export { CustomersPOM } from './components/CustomersPOM'
+export { PageBuilderPOM } from './components/PageBuilderPOM'
+export { PostEditorPOM } from './components/PostEditorPOM'
+export { PostsListPOM } from './components/PostsListPOM'
+export { CategoriesPOM } from './components/CategoriesPOM'
+
+// Generic entity components
+export { EntityList } from './components/EntityList'
+export { EntityForm } from './components/EntityForm'