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

package/tests/cypress/src/entities/LeadsPOM.ts

@@ -0,0 +1,129 @@
+/**
+ * Leads Page Object Model for CRM Theme
+ *
+ * Entity-specific POM for Leads.
+ *
+ * Usage:
+ *   const leads = new LeadsPOM()
+ *   leads.list.validateTableVisible()
+ *   leads.form.typeInField('firstName', 'John')
+ */
+
+import { EntityList } from '../components/EntityList'
+import { EntityForm } from '../components/EntityForm'
+import { EntityDetail } from '../components/EntityDetail'
+
+export class LeadsPOM {
+  /** Generic list POM for leads */
+  readonly list: EntityList
+
+  /** Generic form POM for leads */
+  readonly form: EntityForm
+
+  /** Generic detail POM for leads */
+  readonly detail: EntityDetail
+
+  /** Lead entity slug */
+  readonly slug = 'leads'
+
+  constructor() {
+    this.list = EntityList.for('leads')
+    this.form = EntityForm.for('leads')
+    this.detail = new EntityDetail('leads', 'lead', ['activities', 'notes'])
+  }
+
+  // ============================================
+  // NAVIGATION METHODS
+  // ============================================
+
+  /**
+   * Visit the leads list page
+   */
+  visitList() {
+    cy.visit('/dashboard/leads')
+    this.list.waitForPageLoad()
+    return this
+  }
+
+  /**
+   * Visit lead detail page
+   */
+  visitDetail(leadId: string) {
+    this.detail.visit(leadId)
+    return this
+  }
+
+  /**
+   * Visit create lead page
+   */
+  visitCreate() {
+    this.form.visitCreate()
+    return this
+  }
+
+  /**
+   * Visit edit lead page
+   */
+  visitEdit(leadId: string) {
+    this.form.visitEdit(leadId)
+    return this
+  }
+
+  // ============================================
+  // FORM HELPERS
+  // ============================================
+
+  /**
+   * Fill lead form with common fields
+   */
+  fillLeadForm(data: {
+    firstName?: string
+    lastName?: string
+    email?: string
+    phone?: string
+    company?: string
+    source?: string
+    status?: string
+  }) {
+    if (data.firstName) {
+      this.form.typeInField('firstName', data.firstName)
+    }
+    if (data.lastName) {
+      this.form.typeInField('lastName', data.lastName)
+    }
+    if (data.email) {
+      this.form.typeInField('email', data.email)
+    }
+    if (data.phone) {
+      this.form.typeInField('phone', data.phone)
+    }
+    if (data.company) {
+      this.form.typeInField('company', data.company)
+    }
+    if (data.source) {
+      this.form.selectOption('source', data.source)
+    }
+    if (data.status) {
+      this.form.selectOption('status', data.status)
+    }
+    return this
+  }
+
+  /**
+   * Submit the lead form
+   */
+  submitForm() {
+    this.form.submit()
+    return this
+  }
+
+  /**
+   * Convert lead to contact
+   */
+  convertToContact() {
+    cy.get('[data-cy="lead-convert-btn"]').click()
+    return this
+  }
+}
+
+export default LeadsPOM

package/tests/cypress/src/entities/OpportunitiesPOM.ts

@@ -0,0 +1,178 @@
+/**
+ * Opportunities Page Object Model for CRM Theme
+ *
+ * Entity-specific POM for Opportunities (Deals).
+ * Includes support for both list view and kanban board integration.
+ *
+ * Usage:
+ *   const opportunities = new OpportunitiesPOM()
+ *   opportunities.list.validateTableVisible()
+ *   opportunities.validateDealCard('deal-123')
+ */
+
+import { EntityList } from '../components/EntityList'
+import { EntityForm } from '../components/EntityForm'
+import { EntityDetail } from '../components/EntityDetail'
+
+export class OpportunitiesPOM {
+  /** Generic list POM for opportunities */
+  readonly list: EntityList
+
+  /** Generic form POM for opportunities */
+  readonly form: EntityForm
+
+  /** Generic detail POM for opportunities */
+  readonly detail: EntityDetail
+
+  /** Opportunity entity slug */
+  readonly slug = 'opportunities'
+
+  constructor() {
+    this.list = EntityList.for('opportunities')
+    this.form = EntityForm.for('opportunities')
+    this.detail = new EntityDetail('opportunities', 'opportunity', ['activities', 'notes'])
+  }
+
+  // ============================================
+  // DEAL CARD SELECTORS (Kanban)
+  // ============================================
+
+  /**
+   * Deal card selectors (used in Kanban board)
+   */
+  get dealSelectors() {
+    return {
+      card: (dealId: string) => `[data-cy="deal-card-${dealId}"]`,
+      cardName: (dealId: string) => `[data-cy="deal-card-name-${dealId}"]`,
+      cardCompany: (dealId: string) => `[data-cy="deal-card-company-${dealId}"]`,
+      cardAmount: (dealId: string) => `[data-cy="deal-card-amount-${dealId}"]`,
+    }
+  }
+
+  // ============================================
+  // DEAL CARD METHODS
+  // ============================================
+
+  /**
+   * Validate deal card is visible
+   */
+  validateDealCardVisible(dealId: string) {
+    cy.get(this.dealSelectors.card(dealId)).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate deal card displays correct name
+   */
+  validateDealName(dealId: string, name: string) {
+    cy.get(this.dealSelectors.cardName(dealId)).should('contain.text', name)
+    return this
+  }
+
+  /**
+   * Validate deal card displays correct company
+   */
+  validateDealCompany(dealId: string, companyName: string) {
+    cy.get(this.dealSelectors.cardCompany(dealId)).should('contain.text', companyName)
+    return this
+  }
+
+  /**
+   * Validate deal card displays correct amount
+   */
+  validateDealAmount(dealId: string, amount: string) {
+    cy.get(this.dealSelectors.cardAmount(dealId)).should('contain.text', amount)
+    return this
+  }
+
+  /**
+   * Click on a deal card
+   */
+  clickDealCard(dealId: string) {
+    cy.get(this.dealSelectors.card(dealId)).click()
+    return this
+  }
+
+  // ============================================
+  // NAVIGATION METHODS
+  // ============================================
+
+  /**
+   * Visit the opportunities list page
+   */
+  visitList() {
+    cy.visit('/dashboard/opportunities')
+    this.list.waitForPageLoad()
+    return this
+  }
+
+  /**
+   * Visit opportunity detail page
+   */
+  visitDetail(opportunityId: string) {
+    this.detail.visit(opportunityId)
+    return this
+  }
+
+  /**
+   * Visit create opportunity page
+   */
+  visitCreate() {
+    this.form.visitCreate()
+    return this
+  }
+
+  /**
+   * Visit edit opportunity page
+   */
+  visitEdit(opportunityId: string) {
+    this.form.visitEdit(opportunityId)
+    return this
+  }
+
+  // ============================================
+  // FORM HELPERS
+  // ============================================
+
+  /**
+   * Fill opportunity form with common fields
+   */
+  fillOpportunityForm(data: {
+    name: string
+    amount?: string
+    probability?: string
+    company?: string
+    contact?: string
+    stage?: string
+  }) {
+    if (data.name) {
+      this.form.typeInField('name', data.name)
+    }
+    if (data.amount) {
+      this.form.typeInField('amount', data.amount)
+    }
+    if (data.probability) {
+      this.form.typeInField('probability', data.probability)
+    }
+    if (data.company) {
+      this.form.selectOption('companyId', data.company)
+    }
+    if (data.contact) {
+      this.form.selectOption('contactId', data.contact)
+    }
+    if (data.stage) {
+      this.form.selectOption('stageId', data.stage)
+    }
+    return this
+  }
+
+  /**
+   * Submit the opportunity form
+   */
+  submitForm() {
+    this.form.submit()
+    return this
+  }
+}
+
+export default OpportunitiesPOM

package/tests/cypress/src/entities/PipelinesPOM.ts

@@ -0,0 +1,341 @@
+/**
+ * Pipelines Page Object Model for CRM Theme
+ *
+ * Entity-specific POM for Pipelines with Kanban board support.
+ * Extends generic patterns with pipeline-specific functionality.
+ *
+ * Usage:
+ *   const pipelines = new PipelinesPOM()
+ *   pipelines.kanban.validateBoardVisible()
+ *   pipelines.form.fillStages([{ name: 'Lead', probability: 10 }])
+ */
+
+import { EntityList } from '../components/EntityList'
+import { EntityForm } from '../components/EntityForm'
+import { EntityDetail } from '../components/EntityDetail'
+
+export interface StageInput {
+  name: string
+  probability: number
+  color?: string
+}
+
+export class PipelinesPOM {
+  /** Generic list POM for pipelines */
+  readonly list: EntityList
+
+  /** Generic form POM for pipelines */
+  readonly form: EntityForm
+
+  /** Generic detail POM for pipelines */
+  readonly detail: EntityDetail
+
+  /** Pipeline entity slug */
+  readonly slug = 'pipelines'
+
+  constructor() {
+    this.list = EntityList.for('pipelines')
+    this.form = EntityForm.for('pipelines')
+    this.detail = new EntityDetail('pipelines', 'pipeline', ['stages'])
+  }
+
+  // ============================================
+  // PIPELINE FORM SELECTORS (Custom)
+  // ============================================
+
+  /**
+   * Pipeline-specific form selectors
+   */
+  get formSelectors() {
+    return {
+      form: '[data-cy="pipeline-form"]',
+      nameInput: '[data-cy="pipeline-form-name"]',
+      descriptionInput: '[data-cy="pipeline-form-description"]',
+      cancelButton: '[data-cy="pipeline-form-cancel"]',
+      submitButton: '[data-cy="pipeline-form-submit"]',
+    }
+  }
+
+  /**
+   * Stages repeater selectors
+   */
+  get stagesSelectors() {
+    return {
+      repeater: '[data-cy="stages-repeater"]',
+      list: '[data-cy="stages-repeater-list"]',
+      count: '[data-cy="stages-repeater-count"]',
+      addButton: '[data-cy="stages-repeater-add-btn"]',
+      item: (stageId: string) => `[data-cy="stages-repeater-item-${stageId}"]`,
+      nameInput: (stageId: string) => `[data-cy="stages-repeater-name-${stageId}"]`,
+      probabilityInput: (stageId: string) => `[data-cy="stages-repeater-probability-${stageId}"]`,
+      deleteButton: (stageId: string) => `[data-cy="stages-repeater-delete-${stageId}"]`,
+    }
+  }
+
+  // ============================================
+  // KANBAN BOARD SELECTORS
+  // ============================================
+
+  /**
+   * Kanban board selectors
+   */
+  get kanbanSelectors() {
+    return {
+      board: '[data-cy="pipeline-kanban"]',
+      header: '[data-cy="pipeline-kanban-header"]',
+      stats: '[data-cy="pipeline-kanban-stats"]',
+      boardContainer: '[data-cy="pipeline-kanban-board"]',
+      addDealButton: '[data-cy="pipeline-kanban-add-deal-btn"]',
+      // Stage columns
+      stageColumn: (stageId: string) => `[data-cy="stage-column-${stageId}"]`,
+      stageHeader: (stageId: string) => `[data-cy="stage-column-header-${stageId}"]`,
+      stageDeals: (stageId: string) => `[data-cy="stage-column-deals-${stageId}"]`,
+      stageEmpty: (stageId: string) => `[data-cy="stage-column-empty-${stageId}"]`,
+      stageAddDeal: (stageId: string) => `[data-cy="stage-column-add-deal-${stageId}"]`,
+      // Deal cards
+      dealCard: (dealId: string) => `[data-cy="deal-card-${dealId}"]`,
+      dealCardName: (dealId: string) => `[data-cy="deal-card-name-${dealId}"]`,
+      dealCardCompany: (dealId: string) => `[data-cy="deal-card-company-${dealId}"]`,
+      dealCardAmount: (dealId: string) => `[data-cy="deal-card-amount-${dealId}"]`,
+    }
+  }
+
+  // ============================================
+  // PIPELINE FORM METHODS
+  // ============================================
+
+  /**
+   * Fill the pipeline form with basic info
+   */
+  fillPipelineForm(data: { name: string; description?: string }) {
+    cy.get(this.formSelectors.nameInput).clear().type(data.name)
+    if (data.description) {
+      cy.get(this.formSelectors.descriptionInput).clear().type(data.description)
+    }
+    return this
+  }
+
+  /**
+   * Add a new stage to the pipeline
+   */
+  addStage() {
+    cy.get(this.stagesSelectors.addButton).click()
+    return this
+  }
+
+  /**
+   * Fill stage data by index
+   */
+  fillStageByIndex(index: number, data: { name: string; probability: number }) {
+    cy.get(this.stagesSelectors.list)
+      .find('[data-cy^="stages-repeater-item-"]')
+      .eq(index)
+      .within(() => {
+        cy.get('input[data-cy^="stages-repeater-name-"]').clear().type(data.name)
+        cy.get('input[data-cy^="stages-repeater-probability-"]').clear().type(data.probability.toString())
+      })
+    return this
+  }
+
+  /**
+   * Delete stage by index
+   */
+  deleteStageByIndex(index: number) {
+    cy.get(this.stagesSelectors.list)
+      .find('[data-cy^="stages-repeater-item-"]')
+      .eq(index)
+      .find('[data-cy^="stages-repeater-delete-"]')
+      .click()
+    return this
+  }
+
+  /**
+   * Submit the pipeline form
+   */
+  submitPipelineForm() {
+    cy.get(this.formSelectors.submitButton).click()
+    return this
+  }
+
+  /**
+   * Cancel the pipeline form
+   */
+  cancelPipelineForm() {
+    cy.get(this.formSelectors.cancelButton).click()
+    return this
+  }
+
+  // ============================================
+  // KANBAN BOARD METHODS
+  // ============================================
+
+  /**
+   * Validate the kanban board is visible
+   */
+  validateKanbanVisible() {
+    cy.get(this.kanbanSelectors.board).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate kanban header is visible with pipeline name
+   */
+  validateKanbanHeader(pipelineName: string) {
+    cy.get(this.kanbanSelectors.header)
+      .should('be.visible')
+      .and('contain.text', pipelineName)
+    return this
+  }
+
+  /**
+   * Validate stats cards are visible
+   */
+  validateStatsVisible() {
+    cy.get(this.kanbanSelectors.stats).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate a stage column exists
+   */
+  validateStageColumnVisible(stageId: string) {
+    cy.get(this.kanbanSelectors.stageColumn(stageId)).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate stage column is empty
+   */
+  validateStageEmpty(stageId: string) {
+    cy.get(this.kanbanSelectors.stageEmpty(stageId)).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate deal card exists in stage
+   */
+  validateDealInStage(dealId: string, stageId: string) {
+    cy.get(this.kanbanSelectors.stageDeals(stageId))
+      .find(this.kanbanSelectors.dealCard(dealId))
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Click on a deal card
+   */
+  clickDealCard(dealId: string) {
+    cy.get(this.kanbanSelectors.dealCard(dealId)).click()
+    return this
+  }
+
+  /**
+   * Click add deal button in header
+   */
+  clickAddDeal() {
+    cy.get(this.kanbanSelectors.addDealButton).click()
+    return this
+  }
+
+  /**
+   * Click add deal in specific stage
+   */
+  clickAddDealInStage(stageId: string) {
+    cy.get(this.kanbanSelectors.stageAddDeal(stageId)).click()
+    return this
+  }
+
+  /**
+   * Drag deal from one stage to another
+   * Note: Uses HTML5 drag and drop simulation
+   */
+  dragDealToStage(dealId: string, targetStageId: string) {
+    const dealCard = this.kanbanSelectors.dealCard(dealId)
+    const targetColumn = this.kanbanSelectors.stageDeals(targetStageId)
+
+    cy.get(dealCard).trigger('dragstart', { dataTransfer: new DataTransfer() })
+    cy.get(targetColumn).trigger('dragover')
+    cy.get(targetColumn).trigger('drop')
+    cy.get(dealCard).trigger('dragend')
+
+    return this
+  }
+
+  // ============================================
+  // NAVIGATION METHODS
+  // ============================================
+
+  /**
+   * Visit the pipelines list page
+   */
+  visitList() {
+    cy.visit('/dashboard/pipelines')
+    this.list.waitForPageLoad()
+    return this
+  }
+
+  /**
+   * Visit a specific pipeline's kanban view
+   */
+  visitKanban(pipelineId: string) {
+    cy.visit(`/dashboard/pipelines/${pipelineId}`)
+    this.validateKanbanVisible()
+    return this
+  }
+
+  /**
+   * Visit the create pipeline page
+   */
+  visitCreate() {
+    cy.visit('/dashboard/pipelines/create')
+    cy.get(this.formSelectors.form).should('be.visible')
+    return this
+  }
+
+  /**
+   * Visit the edit pipeline page
+   */
+  visitEdit(pipelineId: string) {
+    cy.visit(`/dashboard/pipelines/${pipelineId}/edit`)
+    cy.get(this.formSelectors.form).should('be.visible')
+    return this
+  }
+
+  // ============================================
+  // VALIDATION METHODS
+  // ============================================
+
+  /**
+   * Validate pipeline form is visible
+   */
+  validateFormVisible() {
+    cy.get(this.formSelectors.form).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate stages repeater is visible
+   */
+  validateStagesRepeaterVisible() {
+    cy.get(this.stagesSelectors.repeater).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate stages count
+   */
+  validateStagesCount(count: number) {
+    cy.get(this.stagesSelectors.count).should('contain.text', `${count} stage`)
+    return this
+  }
+
+  /**
+   * Validate deal card displays correct amount
+   */
+  validateDealAmount(dealId: string, amount: string) {
+    cy.get(this.kanbanSelectors.dealCardAmount(dealId)).should('contain.text', amount)
+    return this
+  }
+}
+
+export default PipelinesPOM

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

@@ -0,0 +1,31 @@
+/**
+ * CRM Theme - Entity POMs
+ *
+ * Export all entity-specific Page Object Models for CRM theme testing.
+ * Each POM combines generic components (EntityList, EntityForm, EntityDetail)
+ * with entity-specific functionality.
+ */
+
+export { PipelinesPOM } from './PipelinesPOM'
+export { OpportunitiesPOM } from './OpportunitiesPOM'
+export { LeadsPOM } from './LeadsPOM'
+export { ContactsPOM } from './ContactsPOM'
+export { CompaniesPOM } from './CompaniesPOM'
+export { ActivitiesPOM } from './ActivitiesPOM'
+
+// Default exports for convenience
+import { PipelinesPOM } from './PipelinesPOM'
+import { OpportunitiesPOM } from './OpportunitiesPOM'
+import { LeadsPOM } from './LeadsPOM'
+import { ContactsPOM } from './ContactsPOM'
+import { CompaniesPOM } from './CompaniesPOM'
+import { ActivitiesPOM } from './ActivitiesPOM'
+
+export default {
+  PipelinesPOM,
+  OpportunitiesPOM,
+  LeadsPOM,
+  ContactsPOM,
+  CompaniesPOM,
+  ActivitiesPOM,
+}