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

package/tests/cypress/fixtures/entities.json

@@ -0,0 +1,240 @@
+{
+  "$schema": "./entities.schema.json",
+  "_warning": "AUTO-GENERATED by build-registry.mjs - DO NOT EDIT MANUALLY",
+  "_theme": "crm",
+  "entities": {
+    "activities": {
+      "slug": "activities",
+      "singular": "activity",
+      "plural": "Activities",
+      "tableName": "activities",
+      "fields": [
+        "type",
+        "subject",
+        "description",
+        "status",
+        "priority",
+        "dueDate",
+        "completedAt",
+        "duration",
+        "outcome",
+        "location",
+        "contactId",
+        "companyId",
+        "opportunityId",
+        "assignedTo",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "campaigns": {
+      "slug": "campaigns",
+      "singular": "campaign",
+      "plural": "Campaigns",
+      "tableName": "campaigns",
+      "fields": [
+        "name",
+        "type",
+        "status",
+        "objective",
+        "description",
+        "startDate",
+        "endDate",
+        "budget",
+        "actualCost",
+        "targetAudience",
+        "targetLeads",
+        "actualLeads",
+        "targetRevenue",
+        "actualRevenue",
+        "roi",
+        "channel",
+        "assignedTo",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "companies": {
+      "slug": "companies",
+      "singular": "company",
+      "plural": "Companies",
+      "tableName": "companies",
+      "fields": [
+        "name",
+        "legalName",
+        "taxId",
+        "website",
+        "email",
+        "phone",
+        "industry",
+        "type",
+        "size",
+        "annualRevenue",
+        "address",
+        "city",
+        "state",
+        "country",
+        "postalCode",
+        "logo",
+        "rating",
+        "assignedTo",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "contacts": {
+      "slug": "contacts",
+      "singular": "contact",
+      "plural": "Contacts",
+      "tableName": "contacts",
+      "fields": [
+        "firstName",
+        "lastName",
+        "email",
+        "phone",
+        "mobile",
+        "companyId",
+        "position",
+        "department",
+        "isPrimary",
+        "birthDate",
+        "linkedin",
+        "twitter",
+        "preferredChannel",
+        "timezone",
+        "lastContactedAt",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "leads": {
+      "slug": "leads",
+      "singular": "lead",
+      "plural": "Leads",
+      "tableName": "leads",
+      "fields": [
+        "companyName",
+        "contactName",
+        "email",
+        "phone",
+        "website",
+        "source",
+        "status",
+        "score",
+        "industry",
+        "companySize",
+        "budget",
+        "assignedTo",
+        "notes",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "notes": {
+      "slug": "notes",
+      "singular": "note",
+      "plural": "Notes",
+      "tableName": "notes",
+      "fields": [
+        "title",
+        "content",
+        "type",
+        "isPinned",
+        "isPrivate",
+        "entityType",
+        "entityId",
+        "contactId",
+        "companyId",
+        "opportunityId",
+        "attachments",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "opportunities": {
+      "slug": "opportunities",
+      "singular": "opportunity",
+      "plural": "Opportunities",
+      "tableName": "opportunities",
+      "fields": [
+        "name",
+        "companyId",
+        "contactId",
+        "pipelineId",
+        "stageId",
+        "amount",
+        "currency",
+        "probability",
+        "expectedRevenue",
+        "closeDate",
+        "type",
+        "source",
+        "competitor",
+        "status",
+        "lostReason",
+        "assignedTo",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "pipelines": {
+      "slug": "pipelines",
+      "singular": "pipeline",
+      "plural": "Pipelines",
+      "tableName": "pipelines",
+      "fields": [
+        "name",
+        "description",
+        "type",
+        "isDefault",
+        "isActive",
+        "stages",
+        "dealRottenDays",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "products": {
+      "slug": "products",
+      "singular": "product",
+      "plural": "Products",
+      "tableName": "products",
+      "fields": [
+        "code",
+        "name",
+        "category",
+        "type",
+        "description",
+        "price",
+        "cost",
+        "currency",
+        "unit",
+        "isActive",
+        "minimumQuantity",
+        "image",
+        "brochureUrl",
+        "commissionRate",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    }
+  }
+}

package/tests/cypress/src/components/CRMDataTable.js

@@ -0,0 +1,223 @@
+/**
+ * CRMDataTable - Page Object Model Class
+ *
+ * POM for the CRM theme data table component.
+ * Handles data table interactions for entity lists (leads, contacts, companies, etc).
+ *
+ * Supports both entity-specific selectors (via constructor) and generic selectors.
+ * When entitySlug is provided, uses `{entitySlug}-*` selectors.
+ * Otherwise, uses generic `crm-datatable-*` selectors.
+ */
+export class CRMDataTable {
+  // Generic fallback selectors (when no entitySlug provided)
+  static selectors = {
+    container: '[data-cy="crm-datatable-list"]',
+    search: '[data-cy="crm-datatable-search"]',
+    table: '[data-cy="crm-datatable-table"]',
+    tableRow: '[data-cy^="crm-datatable-row-"]',
+    emptyState: '[data-cy="crm-datatable-empty"]',
+    pagination: '[data-cy="crm-datatable-pagination"]',
+  }
+
+  /**
+   * Get entity-specific selectors
+   * @param {string} entitySlug - The entity slug (e.g., 'leads', 'contacts')
+   */
+  static getEntitySelectors(entitySlug) {
+    return {
+      container: `[data-cy="${entitySlug}-list"]`,
+      addButton: `[data-cy="${entitySlug}-add"]`,
+      search: `[data-cy="${entitySlug}-search"]`,
+      table: `[data-cy="${entitySlug}-table"]`,
+      tableRow: `[data-cy^="${entitySlug}-row-"]`,
+      emptyState: `[data-cy="${entitySlug}-empty"]`,
+      pagination: `[data-cy="${entitySlug}-pagination"]`,
+    }
+  }
+
+  /**
+   * @param {string} [entitySlug] - Optional entity slug for entity-specific selectors
+   */
+  constructor(entitySlug = null) {
+    this.entitySlug = entitySlug
+    this.selectors = entitySlug
+      ? CRMDataTable.getEntitySelectors(entitySlug)
+      : CRMDataTable.selectors
+  }
+
+  /**
+   * Validate data table container is visible
+   */
+  validateVisible() {
+    cy.get(this.selectors.container).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate table is visible
+   */
+  validateTableVisible() {
+    cy.get(this.selectors.table).should('be.visible')
+    return this
+  }
+
+  /**
+   * Click the add button to create a new entity
+   */
+  clickAdd() {
+    if (!this.entitySlug) {
+      throw new Error('clickAdd() requires entitySlug to be set in constructor')
+    }
+    cy.get(this.selectors.addButton).click()
+    return this
+  }
+
+  /**
+   * Validate add button is visible
+   */
+  validateAddButtonVisible() {
+    if (!this.entitySlug) {
+      throw new Error('validateAddButtonVisible() requires entitySlug to be set in constructor')
+    }
+    cy.get(this.selectors.addButton).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate add button is not visible (e.g., for restricted roles)
+   */
+  validateAddButtonNotVisible() {
+    if (!this.entitySlug) {
+      throw new Error('validateAddButtonNotVisible() requires entitySlug to be set in constructor')
+    }
+    cy.get(this.selectors.addButton).should('not.exist')
+    return this
+  }
+
+  /**
+   * Search for a term
+   * @param {string} term - Search term
+   */
+  search(term) {
+    cy.get(this.selectors.search).clear().type(term)
+    // Wait for debounce
+    cy.wait(300)
+    return this
+  }
+
+  /**
+   * Clear search input
+   */
+  clearSearch() {
+    cy.get(this.selectors.search).clear()
+    return this
+  }
+
+  /**
+   * Validate search input has value
+   * @param {string} value - Expected value
+   */
+  validateSearchValue(value) {
+    cy.get(this.selectors.search).should('have.value', value)
+    return this
+  }
+
+  /**
+   * Get a specific row by ID
+   * @param {string} id - Row ID
+   */
+  getRow(id) {
+    const prefix = this.entitySlug || 'crm-datatable'
+    return cy.get(`[data-cy="${prefix}-row-${id}"]`)
+  }
+
+  /**
+   * Click a specific row
+   * @param {string} id - Row ID
+   */
+  clickRow(id) {
+    this.getRow(id).click()
+    return this
+  }
+
+  /**
+   * Validate row exists
+   * @param {string} id - Row ID
+   */
+  validateRowExists(id) {
+    this.getRow(id).should('exist')
+    return this
+  }
+
+  /**
+   * Validate row does not exist
+   * @param {string} id - Row ID
+   */
+  validateRowNotExists(id) {
+    const prefix = this.entitySlug || 'crm-datatable'
+    cy.get(`[data-cy="${prefix}-row-${id}"]`).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate number of visible rows
+   * @param {number} count - Expected row count
+   */
+  validateRowCount(count) {
+    if (count === 0) {
+      this.validateEmpty()
+    } else {
+      cy.get(this.selectors.tableRow).should('have.length', count)
+    }
+    return this
+  }
+
+  /**
+   * Get all visible rows
+   */
+  getRows() {
+    return cy.get(this.selectors.tableRow)
+  }
+
+  /**
+   * Validate empty state is visible
+   */
+  validateEmpty() {
+    cy.get(this.selectors.emptyState).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate empty state contains message
+   * @param {string} message - Expected message
+   */
+  validateEmptyMessage(message) {
+    cy.get(this.selectors.emptyState).should('contain', message)
+    return this
+  }
+
+  /**
+   * Validate table is not empty
+   */
+  validateNotEmpty() {
+    cy.get(this.selectors.emptyState).should('not.exist')
+    cy.get(this.selectors.tableRow).should('have.length.greaterThan', 0)
+    return this
+  }
+
+  /**
+   * Validate pagination is visible
+   */
+  validatePaginationVisible() {
+    cy.get(this.selectors.pagination).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate pagination is not visible
+   */
+  validatePaginationNotVisible() {
+    cy.get(this.selectors.pagination).should('not.exist')
+    return this
+  }
+}

package/tests/cypress/src/components/CRMMobileNav.js

@@ -0,0 +1,138 @@
+/**
+ * CRMMobileNav - Page Object Model Class
+ *
+ * POM for the CRM theme mobile navigation.
+ * Handles mobile topbar and bottom navigation interactions.
+ */
+export class CRMMobileNav {
+  static selectors = {
+    topbar: '[data-cy="crm-mobile-topbar"]',
+    bottomNav: '[data-cy="crm-mobile-bottomnav"]',
+    navDashboard: '[data-cy="crm-mobile-nav-dashboard"]',
+    navLeads: '[data-cy="crm-mobile-nav-leads"]',
+    navPipelines: '[data-cy="crm-mobile-nav-pipelines"]',
+    navActivities: '[data-cy="crm-mobile-nav-activities"]',
+    moreBtn: '[data-cy="crm-mobile-nav-more"]',
+    moreSheet: '[data-cy="crm-mobile-more-sheet"]',
+    moreSheetContent: '[data-cy="crm-mobile-more-sheet-content"]',
+    moreContacts: '[data-cy="crm-more-nav-contacts"]',
+    moreCompanies: '[data-cy="crm-more-nav-companies"]',
+    moreProducts: '[data-cy="crm-more-nav-products"]',
+    moreCampaigns: '[data-cy="crm-more-nav-campaigns"]',
+    moreSettings: '[data-cy="crm-more-nav-settings"]',
+  }
+
+  /**
+   * Validate mobile topbar is visible
+   */
+  validateTopbarVisible() {
+    cy.get(CRMMobileNav.selectors.topbar).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate mobile bottom nav is visible
+   */
+  validateBottomNavVisible() {
+    cy.get(CRMMobileNav.selectors.bottomNav).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate mobile navigation is visible
+   */
+  validateVisible() {
+    this.validateTopbarVisible()
+    this.validateBottomNavVisible()
+    return this
+  }
+
+  /**
+   * Navigate to an entity via bottom nav
+   * @param {string} entity - Entity name (dashboard, leads, pipelines, activities)
+   */
+  navigateTo(entity) {
+    const selector = CRMMobileNav.selectors[`nav${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    if (!selector) {
+      throw new Error(`Invalid entity: ${entity}. Valid options: dashboard, leads, pipelines, activities. For other entities, use navigateToMore().`)
+    }
+    cy.get(selector).click()
+    return this
+  }
+
+  /**
+   * Open the more sheet
+   */
+  openMore() {
+    cy.get(CRMMobileNav.selectors.moreBtn).click()
+    cy.get(CRMMobileNav.selectors.moreSheetContent).should('be.visible')
+    return this
+  }
+
+  /**
+   * Close the more sheet
+   */
+  closeMore() {
+    cy.get('body').click(0, 0)
+    cy.get(CRMMobileNav.selectors.moreSheetContent).should('not.be.visible')
+    return this
+  }
+
+  /**
+   * Validate more sheet is visible
+   */
+  validateMoreSheetVisible() {
+    cy.get(CRMMobileNav.selectors.moreSheetContent).should('be.visible')
+    return this
+  }
+
+  /**
+   * Navigate to an entity from the more sheet
+   * @param {string} entity - Entity name (contacts, companies, products, campaigns, settings)
+   */
+  navigateToMore(entity) {
+    this.openMore()
+    const selector = CRMMobileNav.selectors[`more${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    if (!selector) {
+      throw new Error(`Invalid entity: ${entity}. Valid options: contacts, companies, products, campaigns, settings`)
+    }
+    cy.get(selector).click()
+    return this
+  }
+
+  /**
+   * Validate navigation item is active
+   * @param {string} entity - Entity name
+   */
+  validateNavActive(entity) {
+    const selector = CRMMobileNav.selectors[`nav${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    if (selector) {
+      cy.get(selector).should('have.attr', 'data-active', 'true')
+    }
+    return this
+  }
+
+  /**
+   * Validate navigation item is not active
+   * @param {string} entity - Entity name
+   */
+  validateNavNotActive(entity) {
+    const selector = CRMMobileNav.selectors[`nav${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    if (selector) {
+      cy.get(selector).should('have.attr', 'data-active', 'false')
+    }
+    return this
+  }
+
+  /**
+   * Validate all bottom nav items are visible
+   */
+  validateAllNavItemsVisible() {
+    cy.get(CRMMobileNav.selectors.navDashboard).should('be.visible')
+    cy.get(CRMMobileNav.selectors.navLeads).should('be.visible')
+    cy.get(CRMMobileNav.selectors.navPipelines).should('be.visible')
+    cy.get(CRMMobileNav.selectors.navActivities).should('be.visible')
+    cy.get(CRMMobileNav.selectors.moreBtn).should('be.visible')
+    return this
+  }
+}