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

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:
+ * - DashboardPOM: Dashboard navigation and shell
+ * - SettingsPOM: Settings area (profile, team, billing)
+ * - SuperadminPOM: Superadmin area
+ * - SuperadminTeamRolesPOM: Superadmin team roles matrix
+ * - BillingPOM: Billing settings
+ * - DevtoolsPOM: Developer tools area
+ * - ScheduledActionsPOM: Scheduled actions devtools
+ * - PageBuilderPOM: Create/edit pages with blocks
+ * - PostEditorPOM: Create/edit posts with blocks
+ */
+
+export { DashboardPOM } from './DashboardPOM'
+export { SettingsPOM } from './SettingsPOM'
+export { SuperadminPOM } from './SuperadminPOM'
+export { SuperadminTeamRolesPOM } from './SuperadminTeamRolesPOM'
+export { BillingPOM } from './BillingPOM'
+export { DevtoolsPOM } from './DevtoolsPOM'
+export { ScheduledActionsPOM } from './ScheduledActionsPOM'
+export { PageBuilderPOM } from './PageBuilderPOM'
+export { PostEditorPOM } from './PostEditorPOM'
+
+// 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,20 @@
+/**
+ * ApiInterceptor - Re-export from @nextsparkjs/testing
+ *
+ * The ApiInterceptor class is provided by @nextsparkjs/testing.
+ * This file exists for backward compatibility and to allow
+ * theme-specific extensions if needed.
+ *
+ * @example Basic usage:
+ * ```ts
+ * import { ApiInterceptor } from '../helpers/ApiInterceptor'
+ *
+ * const api = new ApiInterceptor('tasks')
+ * api.setupCrudIntercepts()
+ * cy.visit('/dashboard/tasks')
+ * api.waitForList()
+ * ```
+ */
+
+// Re-export from testing package
+export { ApiInterceptor, type ApiInterceptorConfig } from '@nextsparkjs/testing/helpers'

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'