@nextsparkjs/theme-crm 0.1.0-beta.18 → 0.1.0-beta.20

package/tests/cypress/src/forms/OpportunityForm.js

@@ -0,0 +1,316 @@
+/**
+ * OpportunityForm - Page Object Model Class
+ *
+ * POM for the opportunity/deal create/edit form in CRM theme.
+ * Handles opportunity form interactions and validations.
+ */
+export class OpportunityForm {
+  static selectors = {
+    form: '[data-cy="opportunity-form"]',
+    nameInput: '[data-cy="opportunity-field-name"] input',
+    nameField: '[data-cy="opportunity-field-name"]',
+    companySelect: '[data-cy="opportunity-field-company"]',
+    companyInput: '[data-cy="opportunity-field-company"] select',
+    contactSelect: '[data-cy="opportunity-field-contact"]',
+    contactInput: '[data-cy="opportunity-field-contact"] select',
+    pipelineSelect: '[data-cy="opportunity-field-pipeline"]',
+    pipelineInput: '[data-cy="opportunity-field-pipeline"] select',
+    stageSelect: '[data-cy="opportunity-field-stage"]',
+    stageInput: '[data-cy="opportunity-field-stage"] select',
+    amountInput: '[data-cy="opportunity-field-amount"] input',
+    amountField: '[data-cy="opportunity-field-amount"]',
+    probabilityInput: '[data-cy="opportunity-field-probability"] input',
+    probabilityField: '[data-cy="opportunity-field-probability"]',
+    expectedCloseDateInput: '[data-cy="opportunity-field-expectedCloseDate"] input',
+    expectedCloseDateField: '[data-cy="opportunity-field-expectedCloseDate"]',
+    descriptionInput: '[data-cy="opportunity-field-description"] textarea',
+    descriptionField: '[data-cy="opportunity-field-description"]',
+    ownerSelect: '[data-cy="opportunity-field-owner"]',
+    ownerInput: '[data-cy="opportunity-field-owner"] select',
+    prioritySelect: '[data-cy="opportunity-field-priority"]',
+    priorityInput: '[data-cy="opportunity-field-priority"] select',
+    submitBtn: '[data-cy="opportunity-form-submit"]',
+    cancelBtn: '[data-cy="opportunity-form-cancel"]',
+    error: '[data-cy="opportunity-form-error"]',
+    fieldError: '[class*="error"], [data-error="true"]',
+  }
+
+  /**
+   * Validate form is visible
+   */
+  validateVisible() {
+    cy.get(OpportunityForm.selectors.form).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate form is not visible
+   */
+  validateNotVisible() {
+    cy.get(OpportunityForm.selectors.form).should('not.exist')
+    return this
+  }
+
+  /**
+   * Fill opportunity name
+   * @param {string} name - Opportunity name
+   */
+  fillName(name) {
+    cy.get(OpportunityForm.selectors.nameInput).clear().type(name)
+    return this
+  }
+
+  /**
+   * Clear opportunity name
+   */
+  clearName() {
+    cy.get(OpportunityForm.selectors.nameInput).clear()
+    return this
+  }
+
+  /**
+   * Select company
+   * @param {string} company - Company name or ID
+   */
+  selectCompany(company) {
+    cy.get(OpportunityForm.selectors.companyInput).select(company)
+    return this
+  }
+
+  /**
+   * Select contact
+   * @param {string} contact - Contact name or ID
+   */
+  selectContact(contact) {
+    cy.get(OpportunityForm.selectors.contactInput).select(contact)
+    return this
+  }
+
+  /**
+   * Select pipeline
+   * @param {string} pipeline - Pipeline name or ID
+   */
+  selectPipeline(pipeline) {
+    cy.get(OpportunityForm.selectors.pipelineInput).select(pipeline)
+    return this
+  }
+
+  /**
+   * Select stage
+   * @param {string} stage - Stage name or ID
+   */
+  selectStage(stage) {
+    cy.get(OpportunityForm.selectors.stageInput).select(stage)
+    return this
+  }
+
+  /**
+   * Fill opportunity amount
+   * @param {string|number} amount - Opportunity amount
+   */
+  fillAmount(amount) {
+    cy.get(OpportunityForm.selectors.amountInput).clear().type(amount.toString())
+    return this
+  }
+
+  /**
+   * Clear opportunity amount
+   */
+  clearAmount() {
+    cy.get(OpportunityForm.selectors.amountInput).clear()
+    return this
+  }
+
+  /**
+   * Fill probability percentage
+   * @param {string|number} probability - Probability (0-100)
+   */
+  fillProbability(probability) {
+    cy.get(OpportunityForm.selectors.probabilityInput).clear().type(probability.toString())
+    return this
+  }
+
+  /**
+   * Clear probability
+   */
+  clearProbability() {
+    cy.get(OpportunityForm.selectors.probabilityInput).clear()
+    return this
+  }
+
+  /**
+   * Fill expected close date
+   * @param {string} date - Date in YYYY-MM-DD format
+   */
+  fillExpectedCloseDate(date) {
+    cy.get(OpportunityForm.selectors.expectedCloseDateInput).clear().type(date)
+    return this
+  }
+
+  /**
+   * Clear expected close date
+   */
+  clearExpectedCloseDate() {
+    cy.get(OpportunityForm.selectors.expectedCloseDateInput).clear()
+    return this
+  }
+
+  /**
+   * Fill opportunity description
+   * @param {string} description - Opportunity description
+   */
+  fillDescription(description) {
+    cy.get(OpportunityForm.selectors.descriptionInput).clear().type(description)
+    return this
+  }
+
+  /**
+   * Clear description
+   */
+  clearDescription() {
+    cy.get(OpportunityForm.selectors.descriptionInput).clear()
+    return this
+  }
+
+  /**
+   * Select owner
+   * @param {string} owner - Owner name or ID
+   */
+  selectOwner(owner) {
+    cy.get(OpportunityForm.selectors.ownerInput).select(owner)
+    return this
+  }
+
+  /**
+   * Select priority
+   * @param {string} priority - Priority (low, medium, high)
+   */
+  selectPriority(priority) {
+    cy.get(OpportunityForm.selectors.priorityInput).select(priority)
+    return this
+  }
+
+  /**
+   * Submit the form
+   */
+  submit() {
+    cy.get(OpportunityForm.selectors.submitBtn).click()
+    return this
+  }
+
+  /**
+   * Cancel the form
+   */
+  cancel() {
+    cy.get(OpportunityForm.selectors.cancelBtn).click()
+    return this
+  }
+
+  /**
+   * Validate submit button is enabled
+   */
+  validateSubmitEnabled() {
+    cy.get(OpportunityForm.selectors.submitBtn).should('not.be.disabled')
+    return this
+  }
+
+  /**
+   * Validate submit button is disabled
+   */
+  validateSubmitDisabled() {
+    cy.get(OpportunityForm.selectors.submitBtn).should('be.disabled')
+    return this
+  }
+
+  /**
+   * Validate form error message
+   * @param {string} message - Expected error message
+   */
+  validateError(message) {
+    cy.get(OpportunityForm.selectors.error).should('be.visible').and('contain', message)
+    return this
+  }
+
+  /**
+   * Validate no form error
+   */
+  validateNoError() {
+    cy.get(OpportunityForm.selectors.error).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate field error
+   * @param {string} fieldName - Field name
+   */
+  validateFieldError(fieldName) {
+    const fieldSelector = OpportunityForm.selectors[`${fieldName}Field`]
+    cy.get(fieldSelector).within(() => {
+      cy.get(OpportunityForm.selectors.fieldError).should('exist')
+    })
+    return this
+  }
+
+  /**
+   * Validate no field error
+   * @param {string} fieldName - Field name
+   */
+  validateNoFieldError(fieldName) {
+    const fieldSelector = OpportunityForm.selectors[`${fieldName}Field`]
+    cy.get(fieldSelector).within(() => {
+      cy.get(OpportunityForm.selectors.fieldError).should('not.exist')
+    })
+    return this
+  }
+
+  /**
+   * Validate field value
+   * @param {string} fieldName - Field name (name, amount, probability, etc.)
+   * @param {string} value - Expected value
+   */
+  validateFieldValue(fieldName, value) {
+    const inputSelector = OpportunityForm.selectors[`${fieldName}Input`]
+    cy.get(inputSelector).should('have.value', value)
+    return this
+  }
+
+  /**
+   * Fill complete opportunity form
+   * @param {Object} data - Opportunity data
+   * @param {string} data.name - Opportunity name
+   * @param {string} data.company - Company ID
+   * @param {string} data.contact - Contact ID (optional)
+   * @param {string} data.pipeline - Pipeline ID
+   * @param {string} data.stage - Stage ID
+   * @param {number} data.amount - Amount
+   * @param {number} data.probability - Probability (optional)
+   * @param {string} data.expectedCloseDate - Expected close date (optional)
+   * @param {string} data.description - Description (optional)
+   * @param {string} data.owner - Owner ID (optional)
+   * @param {string} data.priority - Priority (optional)
+   */
+  fillForm(data) {
+    if (data.name) this.fillName(data.name)
+    if (data.company) this.selectCompany(data.company)
+    if (data.contact) this.selectContact(data.contact)
+    if (data.pipeline) this.selectPipeline(data.pipeline)
+    if (data.stage) this.selectStage(data.stage)
+    if (data.amount !== undefined) this.fillAmount(data.amount)
+    if (data.probability !== undefined) this.fillProbability(data.probability)
+    if (data.expectedCloseDate) this.fillExpectedCloseDate(data.expectedCloseDate)
+    if (data.description) this.fillDescription(data.description)
+    if (data.owner) this.selectOwner(data.owner)
+    if (data.priority) this.selectPriority(data.priority)
+    return this
+  }
+
+  /**
+   * Create an opportunity (fill and submit)
+   * @param {Object} data - Opportunity data
+   */
+  createOpportunity(data) {
+    this.fillForm(data)
+    this.submit()
+    return this
+  }
+}

package/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/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/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/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 '../classes/themes/crm'
+ *   import { ActivityAPIController } from '../classes/themes/crm/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/themes/crm/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/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'