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

package/templates/contents/themes/starter/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/templates/contents/themes/starter/tests/cypress/src/features/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Starter Theme - Feature POM exports
+ *
+ * Specialized POMs for core 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'

package/templates/contents/themes/starter/tests/cypress/src/helpers/ApiInterceptor.ts

@@ -1,170 +1,20 @@
 /**
- * ApiInterceptor - Helper for deterministic waits in Cypress
+ * ApiInterceptor - Re-export from @nextsparkjs/testing
  *
- * Replaces unreliable cy.wait(ms) with cy.intercept() based waits
- * that wait for actual API responses.
+ * The ApiInterceptor class is provided by @nextsparkjs/testing.
+ * This file exists for backward compatibility and to allow
+ * theme-specific extensions if needed.
  *
- * Basic usage:
- *   const api = new ApiInterceptor('tasks')
- *   api.setupCrudIntercepts()
- *   cy.visit('/dashboard/tasks')
- *   api.waitForList()
+ * @example Basic usage:
+ * ```ts
+ * import { ApiInterceptor } from '../helpers/ApiInterceptor'
  *
- * Usage with custom path:
- *   const api = new ApiInterceptor({
- *     slug: 'categories',
- *     customPath: '/api/v1/post-categories'
- *   })
+ * const api = new ApiInterceptor('tasks')
+ * api.setupCrudIntercepts()
+ * cy.visit('/dashboard/tasks')
+ * api.waitForList()
+ * ```
  */
 
-export interface ApiInterceptorConfig {
-  /** Entity slug - used to generate aliases */
-  slug: string
-  /** Custom API path (e.g., '/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
-   */
-  setupCrudIntercepts(): this {
-    cy.intercept('GET', `${this.endpoint}*`).as(this.aliases.list)
-    cy.intercept('POST', this.endpoint).as(this.aliases.create)
-    cy.intercept('PATCH', `${this.endpoint}/*`).as(this.aliases.update)
-    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) and validate success status
-   */
-  waitForUpdate(timeout = 10000): Cypress.Chainable {
-    return cy.wait(`@${this.aliases.update}`, { 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
+// Re-export from testing package
+export { ApiInterceptor, type ApiInterceptorConfig } from '@nextsparkjs/testing/helpers'

package/templates/contents/themes/starter/tests/cypress/src/index.ts

@@ -0,0 +1,88 @@
+/**
+ * Starter Theme - Cypress POM Exports
+ *
+ * Centralized exports for all Starter theme Page Object Models and helpers.
+ *
+ * Architecture:
+ * - core/: Base classes (BasePOM, DashboardEntityPOM, BlockEditorBasePOM, AuthPOM)
+ * - components/: Generic UI components (EntityForm, EntityList, TeamSwitcherPOM)
+ * - entities/: Entity POMs extending DashboardEntityPOM (TasksPOM)
+ * - features/: Feature POMs (DashboardPOM, SettingsPOM, SuperadminPOM, etc.)
+ * - helpers/: Utility classes (ApiInterceptor)
+ *
+ * Usage:
+ *   import { TasksPOM, AuthPOM, DashboardPOM } 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'
+
+// ============================================
+// COMPONENTS - Generic UI Components
+// ============================================
+export {
+  EntityList,
+  EntityForm,
+  TeamSwitcherPOM,
+  DevKeyringPOM,
+  type EntityListConfig,
+  type EntityFormConfig
+} from './components'
+
+// ============================================
+// ENTITIES - Entity POMs (extend DashboardEntityPOM)
+// ============================================
+export {
+  TasksPOM,
+  type TaskFormData
+} from './entities'
+
+// ============================================
+// FEATURES - Feature POMs
+// ============================================
+export {
+  DashboardPOM,
+  SettingsPOM,
+  SuperadminPOM,
+  BillingPOM,
+  DevtoolsPOM,
+  ScheduledActionsPOM
+} 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,
+  loginAsDefaultDeveloper,
+  loginAsDefaultSuperadmin,
+} from './session-helpers'

package/templates/contents/themes/starter/tests/cypress/src/selectors.ts

@@ -5,8 +5,8 @@
  * This is the single source of truth for Cypress tests in this theme.
  *
  * Architecture:
- * - Core selectors: `core/lib/test/core-selectors.ts`
- * - Theme selectors: This file (can extend core)
+ * - Core selectors: `@nextsparkjs/core/selectors`
+ * - Theme selectors: This file (extends core)
  * - POMs import: `import { cySelector } from '../selectors'`
  *
  * @example POM usage:
@@ -35,7 +35,7 @@
  * ```
  */
 
-import { createSelectorHelpers, CORE_SELECTORS } from '@nextsparkjs/core/lib/test'
+import { createSelectorHelpers, CORE_SELECTORS } from '@nextsparkjs/core/selectors'
 
 // =============================================================================
 // THEME SELECTORS
@@ -147,7 +147,7 @@ export type ThemeSelectorsType = typeof THEME_SELECTORS
 /**
  * Re-export types
  */
-export type { Replacements } from '@nextsparkjs/core/lib/test'
+export type { Replacements } from '@nextsparkjs/core/selectors'
 
 /**
  * Re-export CORE_SELECTORS for reference