@nextsparkjs/core 0.1.0-beta.191 → 0.1.0-beta.193

package/dist/templates/projects/crm/tests/cypress/src/forms/PipelineForm.js

@@ -0,0 +1,243 @@
+/**
+ * PipelineForm - Page Object Model Class
+ *
+ * POM for the pipeline create/edit form in CRM theme.
+ * Handles pipeline form interactions and validations.
+ */
+export class PipelineForm {
+  static selectors = {
+    form: '[data-cy="pipeline-form"]',
+    nameInput: '[data-cy="pipeline-field-name"] input',
+    nameField: '[data-cy="pipeline-field-name"]',
+    typeSelect: '[data-cy="pipeline-field-type"]',
+    typeInput: '[data-cy="pipeline-field-type"] select',
+    descriptionInput: '[data-cy="pipeline-field-description"] textarea',
+    descriptionField: '[data-cy="pipeline-field-description"]',
+    isActiveCheckbox: '[data-cy="pipeline-field-isActive"] input[type="checkbox"]',
+    isActiveField: '[data-cy="pipeline-field-isActive"]',
+    submitBtn: '[data-cy="pipeline-form-submit"]',
+    cancelBtn: '[data-cy="pipeline-form-cancel"]',
+    error: '[data-cy="pipeline-form-error"]',
+    fieldError: '[class*="error"], [data-error="true"]',
+  }
+
+  /**
+   * Validate form is visible
+   */
+  validateVisible() {
+    cy.get(PipelineForm.selectors.form).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate form is not visible
+   */
+  validateNotVisible() {
+    cy.get(PipelineForm.selectors.form).should('not.exist')
+    return this
+  }
+
+  /**
+   * Fill pipeline name
+   * @param {string} name - Pipeline name
+   */
+  fillName(name) {
+    cy.get(PipelineForm.selectors.nameInput).clear().type(name)
+    return this
+  }
+
+  /**
+   * Clear pipeline name
+   */
+  clearName() {
+    cy.get(PipelineForm.selectors.nameInput).clear()
+    return this
+  }
+
+  /**
+   * Validate name field value
+   * @param {string} name - Expected name
+   */
+  validateNameValue(name) {
+    cy.get(PipelineForm.selectors.nameInput).should('have.value', name)
+    return this
+  }
+
+  /**
+   * Select pipeline type
+   * @param {string} type - Pipeline type (sales, marketing, support, custom)
+   */
+  selectType(type) {
+    cy.get(PipelineForm.selectors.typeInput).select(type)
+    return this
+  }
+
+  /**
+   * Validate type field value
+   * @param {string} type - Expected type
+   */
+  validateTypeValue(type) {
+    cy.get(PipelineForm.selectors.typeInput).should('have.value', type)
+    return this
+  }
+
+  /**
+   * Fill pipeline description
+   * @param {string} description - Pipeline description
+   */
+  fillDescription(description) {
+    cy.get(PipelineForm.selectors.descriptionInput).clear().type(description)
+    return this
+  }
+
+  /**
+   * Clear pipeline description
+   */
+  clearDescription() {
+    cy.get(PipelineForm.selectors.descriptionInput).clear()
+    return this
+  }
+
+  /**
+   * Validate description field value
+   * @param {string} description - Expected description
+   */
+  validateDescriptionValue(description) {
+    cy.get(PipelineForm.selectors.descriptionInput).should('have.value', description)
+    return this
+  }
+
+  /**
+   * Toggle isActive checkbox
+   */
+  toggleIsActive() {
+    cy.get(PipelineForm.selectors.isActiveCheckbox).click()
+    return this
+  }
+
+  /**
+   * Set isActive checkbox
+   * @param {boolean} active - True to check, false to uncheck
+   */
+  setIsActive(active) {
+    cy.get(PipelineForm.selectors.isActiveCheckbox).then($checkbox => {
+      const isChecked = $checkbox.is(':checked')
+      if ((active && !isChecked) || (!active && isChecked)) {
+        cy.get(PipelineForm.selectors.isActiveCheckbox).click()
+      }
+    })
+    return this
+  }
+
+  /**
+   * Validate isActive checkbox state
+   * @param {boolean} checked - Expected checked state
+   */
+  validateIsActiveChecked(checked) {
+    if (checked) {
+      cy.get(PipelineForm.selectors.isActiveCheckbox).should('be.checked')
+    } else {
+      cy.get(PipelineForm.selectors.isActiveCheckbox).should('not.be.checked')
+    }
+    return this
+  }
+
+  /**
+   * Submit the form
+   */
+  submit() {
+    cy.get(PipelineForm.selectors.submitBtn).click()
+    return this
+  }
+
+  /**
+   * Cancel the form
+   */
+  cancel() {
+    cy.get(PipelineForm.selectors.cancelBtn).click()
+    return this
+  }
+
+  /**
+   * Validate submit button is enabled
+   */
+  validateSubmitEnabled() {
+    cy.get(PipelineForm.selectors.submitBtn).should('not.be.disabled')
+    return this
+  }
+
+  /**
+   * Validate submit button is disabled
+   */
+  validateSubmitDisabled() {
+    cy.get(PipelineForm.selectors.submitBtn).should('be.disabled')
+    return this
+  }
+
+  /**
+   * Validate form error message
+   * @param {string} message - Expected error message
+   */
+  validateError(message) {
+    cy.get(PipelineForm.selectors.error).should('be.visible').and('contain', message)
+    return this
+  }
+
+  /**
+   * Validate no form error
+   */
+  validateNoError() {
+    cy.get(PipelineForm.selectors.error).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate field error
+   * @param {string} fieldName - Field name (name, type, description)
+   */
+  validateFieldError(fieldName) {
+    const fieldSelector = PipelineForm.selectors[`${fieldName}Field`]
+    cy.get(fieldSelector).within(() => {
+      cy.get(PipelineForm.selectors.fieldError).should('exist')
+    })
+    return this
+  }
+
+  /**
+   * Validate no field error
+   * @param {string} fieldName - Field name (name, type, description)
+   */
+  validateNoFieldError(fieldName) {
+    const fieldSelector = PipelineForm.selectors[`${fieldName}Field`]
+    cy.get(fieldSelector).within(() => {
+      cy.get(PipelineForm.selectors.fieldError).should('not.exist')
+    })
+    return this
+  }
+
+  /**
+   * Fill complete pipeline form
+   * @param {Object} data - Pipeline data
+   * @param {string} data.name - Pipeline name
+   * @param {string} data.type - Pipeline type
+   * @param {string} data.description - Pipeline description (optional)
+   * @param {boolean} data.isActive - Is active (optional, defaults to true)
+   */
+  fillForm(data) {
+    if (data.name) this.fillName(data.name)
+    if (data.type) this.selectType(data.type)
+    if (data.description) this.fillDescription(data.description)
+    if (data.isActive !== undefined) this.setIsActive(data.isActive)
+    return this
+  }
+
+  /**
+   * Create a pipeline (fill and submit)
+   * @param {Object} data - Pipeline data
+   */
+  createPipeline(data) {
+    this.fillForm(data)
+    this.submit()
+    return this
+  }
+}

package/dist/templates/projects/crm/tests/cypress/src/forms/index.js

@@ -0,0 +1,8 @@
+/**
+ * CRM Theme Forms - Export Index
+ *
+ * Exports all CRM theme form POM classes.
+ */
+
+export { PipelineForm } from './PipelineForm.js'
+export { OpportunityForm } from './OpportunityForm.js'

package/dist/templates/projects/crm/tests/cypress/src/index.js

@@ -0,0 +1,22 @@
+/**
+ * CRM Theme - Main Export Index
+ *
+ * Exports all CRM theme POM classes (components and forms).
+ */
+
+// Components
+export {
+  CRMSidebar,
+  CRMTopBar,
+  CRMMobileNav,
+  CRMDataTable,
+  PipelineKanban,
+  StageColumn,
+  DealCard,
+} from './components/index.js'
+
+// Forms
+export {
+  PipelineForm,
+  OpportunityForm,
+} from './forms/index.js'

package/dist/templates/projects/crm/tests/cypress/src/index.ts

@@ -0,0 +1,68 @@
+/**
+ * CRM Theme - Main Export Index
+ *
+ * Exports all CRM theme POM classes:
+ * - Generic components (EntityList, EntityForm, EntityDetail)
+ * - Entity-specific POMs (PipelinesPOM, OpportunitiesPOM, etc.)
+ * - API Controllers (TypeScript ES modules)
+ *
+ * Usage:
+ *   import { PipelinesPOM, EntityList } from '@/tests/cypress/src'
+ *   import { ActivityAPIController } from '../classes/controllers'
+ */
+
+// Generic Components (Entity Testing Convention)
+export {
+  EntityList,
+  EntityForm,
+  EntityDetail,
+  type EntityConfig,
+  type EntityDetailConfig,
+} from './components'
+
+// Entity-specific POMs
+export {
+  PipelinesPOM,
+  OpportunitiesPOM,
+  LeadsPOM,
+  ContactsPOM,
+  CompaniesPOM,
+  ActivitiesPOM,
+} from './entities'
+
+// Session helpers
+export {
+  loginAsCrmOwner,
+  loginAsCrmAdmin,
+  loginAsCrmMember,
+  loginAsCrmLaura,
+  CRM_USERS,
+} from './session-helpers'
+
+// API Controllers (TypeScript ES modules)
+// Usage: import { ActivityAPIController } from '../classes/controllers'
+//
+// Available controllers:
+// - BaseAPIController (abstract base class)
+// - ActivityAPIController
+// - LeadAPIController
+// - ProductAPIController
+// - PipelineAPIController
+// - ContactAPIController
+// - CampaignAPIController
+// - CompanyAPIController
+// - OpportunityAPIController
+// - NoteAPIController
+//
+// All controllers extend BaseAPIController and provide:
+// - CRUD operations (getAll, getById, create, update, delete)
+// - createTestRecord() with retry support
+// - validateObject() for response validation
+// - Entity-specific methods (complete, pin, closeAsWon, etc.)
+
+// Re-export default objects for namespace imports
+import * as Components from './components'
+import * as Entities from './entities'
+import * as Controllers from './controllers'
+
+export { Components, Entities, Controllers }

package/dist/templates/projects/crm/tests/cypress/src/selectors.ts

@@ -0,0 +1,50 @@
+/**
+ * Theme Selectors for Cypress Tests
+ *
+ * This file re-exports from the main selectors in lib/.
+ * The lib/selectors.ts is the source of truth, placed there so
+ * block components can import it (tests/ is excluded from TypeScript).
+ *
+ * Architecture:
+ * - Core selectors: `core/lib/test/core-selectors.ts`
+ * - Theme selectors (source): `lib/selectors.ts`
+ * - Theme selectors (tests): This file (re-exports)
+ *
+ * @example POM usage:
+ * ```typescript
+ * import { cySelector, sel, SELECTORS } from '../selectors'
+ *
+ * class MyPOM extends BasePOM {
+ *   get elements() {
+ *     return {
+ *       loginForm: cySelector('auth.login.form'),
+ *       submitButton: cySelector('auth.login.submit'),
+ *       leadsList: cySelector('entities.leads.list'),
+ *     }
+ *   }
+ * }
+ * ```
+ */
+
+// Re-export everything from the lib selectors
+export {
+  BLOCK_SELECTORS,
+  ENTITY_SELECTORS,
+  CRM_SELECTORS,
+  THEME_SELECTORS,
+  SELECTORS,
+  sel,
+  s,
+  selDev,
+  cySelector,
+  entitySelectors,
+  CORE_SELECTORS,
+} from '../../../lib/selectors'
+
+export type {
+  ThemeSelectorsType,
+  BlockSelectorsType,
+  EntitySelectorsType,
+  CRMSelectorsType,
+  Replacements,
+} from '../../../lib/selectors'

package/dist/templates/projects/crm/tests/cypress/src/session-helpers.ts

@@ -0,0 +1,176 @@
+/**
+ * CRM Theme Session Helpers
+ *
+ * Direct login functions for CRM theme tests using CRM-specific users.
+ * Uses API-based login for faster and more stable authentication.
+ */
+
+/**
+ * CRM Test Users - hardcoded for CRM theme tests
+ */
+export const CRM_USERS = {
+  OWNER: 'crm_owner_roberto@nextspark.dev',   // CEO
+  ADMIN: 'crm_admin_sofia@nextspark.dev',     // Sales Manager
+  MEMBER: 'crm_member_miguel@nextspark.dev',  // Sales Rep
+  LAURA: 'crm_member_laura@nextspark.dev',    // Marketing
+} as const
+
+// Default test password
+const TEST_PASSWORD = Cypress.env('TEST_PASSWORD') || 'Test1234'
+const API_TIMEOUT = 60000
+
+/**
+ * API login helper
+ */
+function apiLogin(email: string, password: string = TEST_PASSWORD): Cypress.Chainable<boolean> {
+  return cy.request({
+    method: 'POST',
+    url: '/api/auth/sign-in/email',
+    body: { email, password },
+    timeout: API_TIMEOUT,
+    failOnStatusCode: false
+  }).then((response) => {
+    if (response.status === 200) {
+      return true
+    } else {
+      cy.log(`⚠️ API login failed with status ${response.status}`)
+      return false
+    }
+  })
+}
+
+/**
+ * Setup team context after login
+ */
+function setupTeamContext(preferredRole?: string) {
+  cy.request({
+    method: 'GET',
+    url: '/api/v1/teams',
+    timeout: API_TIMEOUT,
+    failOnStatusCode: false
+  }).then((teamsResponse) => {
+    if (teamsResponse.status === 200 && teamsResponse.body?.data?.length > 0) {
+      const teams = teamsResponse.body.data
+      let selectedTeam = teams[0]
+      if (preferredRole) {
+        const teamWithRole = teams.find((t: { role: string }) => t.role === preferredRole)
+        if (teamWithRole) {
+          selectedTeam = teamWithRole
+        }
+      }
+      const teamId = selectedTeam.id
+      cy.log(`✅ Setting active team: ${selectedTeam.name} (${teamId})`)
+      cy.window().then((win) => {
+        win.localStorage.setItem('activeTeamId', teamId)
+      })
+      cy.request({
+        method: 'POST',
+        url: '/api/v1/teams/switch',
+        body: { teamId },
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      })
+    }
+  })
+}
+
+/**
+ * Login as CRM Owner (CEO)
+ * Session is cached and reused across tests
+ */
+export function loginAsCrmOwner() {
+  cy.session('crm-owner-session', () => {
+    apiLogin(CRM_USERS.OWNER).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext()
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+/**
+ * Login as CRM Admin (Sales Manager)
+ * Session is cached and reused across tests
+ */
+export function loginAsCrmAdmin() {
+  cy.session('crm-admin-session', () => {
+    apiLogin(CRM_USERS.ADMIN).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext()
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+/**
+ * Login as CRM Member (Sales Rep)
+ * Session is cached and reused across tests
+ */
+export function loginAsCrmMember() {
+  cy.session('crm-member-session', () => {
+    apiLogin(CRM_USERS.MEMBER).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext('member')
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+/**
+ * Login as CRM Laura (Marketing)
+ * Session is cached and reused across tests
+ */
+export function loginAsCrmLaura() {
+  cy.session('crm-laura-session', () => {
+    apiLogin(CRM_USERS.LAURA).then((success) => {
+      if (success) {
+        cy.visit('/dashboard', { timeout: 60000 })
+      }
+      cy.url().should('include', '/dashboard')
+      setupTeamContext('member')
+    })
+  }, {
+    validate: () => {
+      cy.request({
+        url: '/api/auth/get-session',
+        timeout: API_TIMEOUT,
+        failOnStatusCode: false
+      }).its('status').should('eq', 200)
+    }
+  })
+}
+
+// Aliases for convenience
+export const loginAsOwner = loginAsCrmOwner
+export const loginAsAdmin = loginAsCrmAdmin
+export const loginAsMember = loginAsCrmMember

package/dist/templates/projects/crm/tests/cypress/support/e2e.ts

@@ -0,0 +1,90 @@
+/**
+ * Cypress E2E Support File for Theme
+ *
+ * This file is used when running tests in npm mode (outside monorepo).
+ * In monorepo mode, the core support file is used instead via cypress.config.ts.
+ *
+ * For documentation video commands, install cypress-slow-down:
+ *   pnpm add -D cypress-slow-down
+ *   Then uncomment the doc-commands import below.
+ */
+
+import '@testing-library/cypress/add-commands'
+
+// Import @cypress/grep for test filtering by tags
+// v5.x uses named export { register }
+import { register as registerCypressGrep } from '@cypress/grep'
+registerCypressGrep()
+
+// Doc commands are optional (require cypress-slow-down)
+// Uncomment if you have cypress-slow-down installed:
+// import './doc-commands'
+
+// Global error handling
+Cypress.on('uncaught:exception', (err) => {
+  // Ignore React hydration errors
+  if (err.message.includes('Hydration')) {
+    return false
+  }
+  // Ignore ResizeObserver errors
+  if (err.message.includes('ResizeObserver')) {
+    return false
+  }
+  return true
+})
+
+// Global before hook
+beforeEach(() => {
+  cy.clearCookies()
+  cy.clearLocalStorage()
+})
+
+// Type declarations for @cypress/grep and custom commands
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to make API requests with better error handling
+       */
+      apiRequest(options: Partial<Cypress.RequestOptions>): Chainable<Cypress.Response<any>>
+
+      /**
+       * Login command for authenticated tests
+       */
+      login(email: string, password: string): Chainable<void>
+    }
+    interface SuiteConfigOverrides {
+      tags?: string | string[]
+    }
+    interface TestConfigOverrides {
+      tags?: string | string[]
+    }
+  }
+}
+
+// Custom API request command
+Cypress.Commands.add('apiRequest', (options) => {
+  const defaultOptions = {
+    failOnStatusCode: false,
+    timeout: 15000,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers
+    }
+  }
+  return cy.request({
+    ...defaultOptions,
+    ...options
+  })
+})
+
+// Login command for authenticated tests
+Cypress.Commands.add('login', (email: string, password: string) => {
+  cy.session([email, password], () => {
+    cy.visit('/login')
+    cy.get('[data-testid="email-input"], input[name="email"]').type(email)
+    cy.get('[data-testid="password-input"], input[name="password"]').type(password)
+    cy.get('[data-testid="submit-button"], button[type="submit"]').click()
+    cy.url().should('include', '/dashboard')
+  })
+})