@nextsparkjs/core 0.1.0-beta.190 → 0.1.0-beta.192

package/templates/projects/crm/tests/cypress/src/components/DealCard.js

@@ -0,0 +1,197 @@
+/**
+ * DealCard - Page Object Model Class
+ *
+ * POM for individual deal cards in the pipeline kanban board.
+ * Handles deal card-specific interactions and validations.
+ */
+export class DealCard {
+  /**
+   * Get selectors for a specific deal card
+   * @param {string} dealId - Deal ID
+   */
+  static getDealSelectors(dealId) {
+    return {
+      card: `[data-cy="deal-card-${dealId}"]`,
+      name: `[data-cy="deal-name-${dealId}"]`,
+      company: `[data-cy="deal-company-${dealId}"]`,
+      amount: `[data-cy="deal-amount-${dealId}"]`,
+      probability: `[data-cy="deal-probability-${dealId}"]`,
+      owner: `[data-cy="deal-owner-${dealId}"]`,
+      dueDate: `[data-cy="deal-due-date-${dealId}"]`,
+      rottenBadge: `[data-cy="deal-rotten-${dealId}"]`,
+      priorityBadge: `[data-cy="deal-priority-${dealId}"]`,
+    }
+  }
+
+  /**
+   * @param {string} dealId - The deal ID
+   */
+  constructor(dealId) {
+    this.dealId = dealId
+    this.selectors = DealCard.getDealSelectors(dealId)
+  }
+
+  /**
+   * Validate deal card is visible
+   */
+  validateVisible() {
+    cy.get(this.selectors.card).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate deal card does not exist
+   */
+  validateNotExists() {
+    cy.get(this.selectors.card).should('not.exist')
+    return this
+  }
+
+  /**
+   * Click the deal card
+   */
+  click() {
+    cy.get(this.selectors.card).click()
+    return this
+  }
+
+  /**
+   * Validate deal name
+   * @param {string} name - Expected name
+   */
+  validateName(name) {
+    cy.get(this.selectors.name).should('contain', name)
+    return this
+  }
+
+  /**
+   * Validate deal company
+   * @param {string} company - Expected company name
+   */
+  validateCompany(company) {
+    cy.get(this.selectors.company).should('contain', company)
+    return this
+  }
+
+  /**
+   * Get the deal amount
+   */
+  getAmount() {
+    return cy.get(this.selectors.amount).invoke('text')
+  }
+
+  /**
+   * Validate deal amount
+   * @param {string} amount - Expected amount (e.g., "$25,000")
+   */
+  validateAmount(amount) {
+    cy.get(this.selectors.amount).should('contain', amount)
+    return this
+  }
+
+  /**
+   * Get the deal probability
+   */
+  getProbability() {
+    return cy.get(this.selectors.probability).invoke('text')
+  }
+
+  /**
+   * Validate deal probability
+   * @param {string} probability - Expected probability (e.g., "75%")
+   */
+  validateProbability(probability) {
+    cy.get(this.selectors.probability).should('contain', probability)
+    return this
+  }
+
+  /**
+   * Validate deal owner
+   * @param {string} owner - Expected owner name
+   */
+  validateOwner(owner) {
+    cy.get(this.selectors.owner).should('contain', owner)
+    return this
+  }
+
+  /**
+   * Validate due date
+   * @param {string} date - Expected due date
+   */
+  validateDueDate(date) {
+    cy.get(this.selectors.dueDate).should('contain', date)
+    return this
+  }
+
+  /**
+   * Validate deal is marked as rotten
+   */
+  isRotten() {
+    return cy.get(this.selectors.rottenBadge).should('exist')
+  }
+
+  /**
+   * Validate rotten badge is visible
+   */
+  validateRottenBadge() {
+    cy.get(this.selectors.rottenBadge).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate deal is not marked as rotten
+   */
+  validateNotRotten() {
+    cy.get(this.selectors.rottenBadge).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate priority badge
+   * @param {string} priority - Expected priority (e.g., "High", "Medium", "Low")
+   */
+  validatePriority(priority) {
+    cy.get(this.selectors.priorityBadge).should('contain', priority)
+    return this
+  }
+
+  /**
+   * Validate priority badge is visible
+   */
+  validatePriorityBadgeVisible() {
+    cy.get(this.selectors.priorityBadge).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate priority badge is not visible
+   */
+  validateNoPriorityBadge() {
+    cy.get(this.selectors.priorityBadge).should('not.exist')
+    return this
+  }
+
+  /**
+   * Hover over the deal card
+   */
+  hover() {
+    cy.get(this.selectors.card).trigger('mouseenter')
+    return this
+  }
+
+  /**
+   * Trigger drag start on the deal card
+   */
+  dragStart() {
+    cy.get(this.selectors.card).trigger('dragstart')
+    return this
+  }
+
+  /**
+   * Trigger drag end on the deal card
+   */
+  dragEnd() {
+    cy.get(this.selectors.card).trigger('dragend')
+    return this
+  }
+}

package/templates/projects/crm/tests/cypress/src/components/EntityDetail.ts

@@ -0,0 +1,290 @@
+/**
+ * Generic Entity Detail POM for CRM Theme
+ *
+ * Page Object Model for entity detail pages in CRM theme.
+ * Reusable for all entities by providing the entity slug and singular name.
+ *
+ * Usage:
+ *   const contactDetail = new EntityDetail('contacts', 'contact')
+ *   const opportunityDetail = new EntityDetail('opportunities', 'opportunity')
+ */
+
+export interface EntityDetailConfig {
+  /** Plural entity slug for URL (e.g., 'contacts', 'opportunities') */
+  entitySlug: string
+  /** Singular entity name for selectors (e.g., 'contact', 'opportunity') */
+  singularName: string
+  /** Custom sections this entity has (e.g., ['activities', 'notes'] for contacts) */
+  sections?: string[]
+}
+
+export class EntityDetail {
+  private entitySlug: string
+  private singularName: string
+  private sections: string[]
+
+  /**
+   * Create a new EntityDetail POM instance
+   * @param entitySlug - Plural entity slug for URL (e.g., 'contacts', 'opportunities')
+   * @param singularName - Singular name for selectors (e.g., 'contact', 'opportunity')
+   * @param sections - Custom sections this entity has
+   */
+  constructor(entitySlug: string, singularName: string, sections: string[] = []) {
+    this.entitySlug = entitySlug
+    this.singularName = singularName
+    this.sections = sections
+  }
+
+  // ============================================
+  // DYNAMIC SELECTORS
+  // ============================================
+
+  /**
+   * Get selectors for this entity detail page
+   */
+  get selectors() {
+    return {
+      // Page container
+      page: `[data-cy="${this.singularName}-detail-page"]`,
+
+      // Header elements
+      header: `[data-cy="${this.singularName}-detail-header"]`,
+      title: `[data-cy="${this.singularName}-title"]`,
+      backButton: `[data-cy="${this.singularName}-back-btn"]`,
+      editButton: `[data-cy="${this.singularName}-edit-btn"]`,
+      deleteButton: `[data-cy="${this.singularName}-delete-btn"]`,
+
+      // Status
+      statusBadge: `[data-cy="${this.singularName}-status-badge"]`,
+
+      // Panels
+      fieldsPanel: `[data-cy="${this.singularName}-fields-panel"]`,
+      descriptionPanel: `[data-cy="${this.singularName}-description-panel"]`,
+
+      // Dynamic section selector
+      section: (sectionName: string) => `[data-cy="${this.singularName}-${sectionName}-section"]`,
+
+      // Related item in a section (e.g., contact-activity-{id})
+      relatedItem: (relatedType: string, id: string) => `[data-cy="${this.singularName}-${relatedType}-${id}"]`,
+
+      // Generic panels (stats, etc.)
+      statsCards: `[data-cy="${this.singularName}-stats-cards"]`,
+    }
+  }
+
+  // ============================================
+  // STATIC FACTORY METHODS
+  // ============================================
+
+  /**
+   * Pre-configured entity detail configurations for CRM entities
+   */
+  static configs: Record<string, EntityDetailConfig> = {
+    // Core CRM entities
+    leads: { entitySlug: 'leads', singularName: 'lead', sections: ['activities', 'notes'] },
+    contacts: { entitySlug: 'contacts', singularName: 'contact', sections: ['activities', 'notes', 'opportunities'] },
+    companies: { entitySlug: 'companies', singularName: 'company', sections: ['contacts', 'opportunities', 'notes'] },
+    opportunities: { entitySlug: 'opportunities', singularName: 'opportunity', sections: ['activities', 'notes'] },
+    activities: { entitySlug: 'activities', singularName: 'activity', sections: [] },
+    campaigns: { entitySlug: 'campaigns', singularName: 'campaign', sections: ['leads', 'activities'] },
+    pipelines: { entitySlug: 'pipelines', singularName: 'pipeline', sections: ['stages'] },
+    products: { entitySlug: 'products', singularName: 'product', sections: [] },
+    notes: { entitySlug: 'notes', singularName: 'note', sections: [] },
+  }
+
+  /**
+   * Create an EntityDetail from pre-configured entity name
+   */
+  static for(entityName: keyof typeof EntityDetail.configs): EntityDetail {
+    const config = EntityDetail.configs[entityName]
+    if (!config) {
+      throw new Error(`Unknown entity: ${entityName}. Available: ${Object.keys(EntityDetail.configs).join(', ')}`)
+    }
+    return new EntityDetail(config.entitySlug, config.singularName, config.sections)
+  }
+
+  // ============================================
+  // VALIDATION METHODS
+  // ============================================
+
+  /**
+   * Validate the detail page is visible
+   */
+  validatePageVisible() {
+    cy.get(this.selectors.page).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate the header is visible
+   */
+  validateHeaderVisible() {
+    cy.get(this.selectors.header).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate the title text
+   */
+  validateTitle(expectedTitle: string) {
+    cy.get(this.selectors.title).should('contain.text', expectedTitle)
+    return this
+  }
+
+  /**
+   * Validate the status badge has specific text
+   */
+  validateStatus(expectedStatus: string) {
+    cy.get(this.selectors.statusBadge).should('contain.text', expectedStatus)
+    return this
+  }
+
+  /**
+   * Validate the fields panel is visible
+   */
+  validateFieldsPanelVisible() {
+    cy.get(this.selectors.fieldsPanel).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate a custom section is visible
+   */
+  validateSectionVisible(sectionName: string) {
+    cy.get(this.selectors.section(sectionName)).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate edit button is visible
+   */
+  validateEditButtonVisible() {
+    cy.get(this.selectors.editButton).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate delete button is visible
+   */
+  validateDeleteButtonVisible() {
+    cy.get(this.selectors.deleteButton).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate edit button is not visible (user doesn't have permission)
+   */
+  validateEditButtonHidden() {
+    cy.get(this.selectors.editButton).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate delete button is not visible (user doesn't have permission)
+   */
+  validateDeleteButtonHidden() {
+    cy.get(this.selectors.deleteButton).should('not.exist')
+    return this
+  }
+
+  // ============================================
+  // INTERACTION METHODS
+  // ============================================
+
+  /**
+   * Click the back button to return to list
+   */
+  clickBack() {
+    cy.get(this.selectors.backButton).click()
+    cy.url().should('include', `/dashboard/${this.entitySlug}`)
+    return this
+  }
+
+  /**
+   * Click the edit button to open edit form
+   */
+  clickEdit() {
+    cy.get(this.selectors.editButton).click()
+    cy.url().should('include', '/edit')
+    return this
+  }
+
+  /**
+   * Click the delete button (will open confirmation dialog)
+   */
+  clickDelete() {
+    cy.get(this.selectors.deleteButton).click()
+    return this
+  }
+
+  /**
+   * Confirm deletion in the dialog
+   */
+  confirmDelete() {
+    cy.get('[data-cy="confirm-delete-btn"]').click()
+    return this
+  }
+
+  /**
+   * Cancel deletion in the dialog
+   */
+  cancelDelete() {
+    cy.get('[data-cy="cancel-delete-btn"]').click()
+    return this
+  }
+
+  /**
+   * Click on a related item in a section
+   */
+  clickRelatedItem(relatedType: string, id: string) {
+    cy.get(this.selectors.relatedItem(relatedType, id)).click()
+    return this
+  }
+
+  // ============================================
+  // WAIT METHODS
+  // ============================================
+
+  /**
+   * Wait for the detail page to load
+   */
+  waitForPageLoad() {
+    cy.get(this.selectors.page).should('be.visible')
+    return this
+  }
+
+  /**
+   * Visit the detail page directly
+   */
+  visit(id: string) {
+    cy.visit(`/dashboard/${this.entitySlug}/${id}`)
+    this.waitForPageLoad()
+    return this
+  }
+
+  // ============================================
+  // FIELD VALUE ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert a field value in the fields panel
+   * Uses FieldDisplay component pattern
+   */
+  assertFieldValue(fieldLabel: string, expectedValue: string) {
+    cy.get(this.selectors.fieldsPanel)
+      .contains(fieldLabel)
+      .parent()
+      .should('contain.text', expectedValue)
+    return this
+  }
+
+  /**
+   * Assert the description panel contains text
+   */
+  assertDescriptionContains(text: string) {
+    cy.get(this.selectors.descriptionPanel).should('contain.text', text)
+    return this
+  }
+}
+
+export default EntityDetail