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

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

@@ -0,0 +1,145 @@
+/**
+ * CRMSidebar - Page Object Model Class
+ *
+ * POM for the CRM theme sidebar navigation.
+ * Handles desktop sidebar interactions for CRM-specific navigation.
+ */
+export class CRMSidebar {
+  static selectors = {
+    container: '[data-cy="crm-sidebar"]',
+    logo: '[data-cy="crm-sidebar-logo"]',
+    collapseBtn: '[data-cy="crm-sidebar-collapse-btn"]',
+    navDashboard: '[data-cy="crm-sidebar-nav-dashboard"]',
+    navLeads: '[data-cy="crm-sidebar-nav-leads"]',
+    navContacts: '[data-cy="crm-sidebar-nav-contacts"]',
+    navCompanies: '[data-cy="crm-sidebar-nav-companies"]',
+    navPipelines: '[data-cy="crm-sidebar-nav-pipelines"]',
+    navProducts: '[data-cy="crm-sidebar-nav-products"]',
+    navCampaigns: '[data-cy="crm-sidebar-nav-campaigns"]',
+    navActivities: '[data-cy="crm-sidebar-nav-activities"]',
+    navSettings: '[data-cy="crm-sidebar-nav-settings"]',
+    userAvatar: '[data-cy="crm-sidebar-user-avatar"]',
+    userName: '[data-cy="crm-sidebar-user-name"]',
+    userEmail: '[data-cy="crm-sidebar-user-email"]',
+    signoutBtn: '[data-cy="crm-sidebar-signout-btn"]',
+  }
+
+  /**
+   * Validate sidebar is visible
+   */
+  validateVisible() {
+    cy.get(CRMSidebar.selectors.container).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate sidebar is not visible
+   */
+  validateNotVisible() {
+    cy.get(CRMSidebar.selectors.container).should('not.exist')
+    return this
+  }
+
+  /**
+   * Navigate to a specific entity
+   * @param {string} entity - Entity name (dashboard, leads, contacts, companies, pipelines, products, campaigns, activities, settings)
+   */
+  navigateTo(entity) {
+    const selector = CRMSidebar.selectors[`nav${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    if (!selector) {
+      throw new Error(`Invalid entity: ${entity}. Valid options: dashboard, leads, contacts, companies, pipelines, products, campaigns, activities, settings`)
+    }
+    cy.get(selector).click()
+    return this
+  }
+
+  /**
+   * Expand sidebar (if collapsed)
+   */
+  expand() {
+    cy.get(CRMSidebar.selectors.container).then($sidebar => {
+      if ($sidebar.attr('data-collapsed') === 'true') {
+        cy.get(CRMSidebar.selectors.collapseBtn).click()
+        cy.get(CRMSidebar.selectors.container).should('have.attr', 'data-collapsed', 'false')
+      }
+    })
+    return this
+  }
+
+  /**
+   * Collapse sidebar (if expanded)
+   */
+  collapse() {
+    cy.get(CRMSidebar.selectors.container).then($sidebar => {
+      if ($sidebar.attr('data-collapsed') === 'false') {
+        cy.get(CRMSidebar.selectors.collapseBtn).click()
+        cy.get(CRMSidebar.selectors.container).should('have.attr', 'data-collapsed', 'true')
+      }
+    })
+    return this
+  }
+
+  /**
+   * Check if sidebar is expanded
+   */
+  isExpanded() {
+    return cy.get(CRMSidebar.selectors.container)
+      .should('have.attr', 'data-collapsed')
+      .then(collapsed => collapsed === 'false')
+  }
+
+  /**
+   * Validate logo is visible
+   */
+  validateLogoVisible() {
+    cy.get(CRMSidebar.selectors.logo).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate user info is displayed
+   * @param {string} name - Expected user name
+   * @param {string} email - Expected user email
+   */
+  validateUserInfo(name, email) {
+    cy.get(CRMSidebar.selectors.userName).should('contain', name)
+    cy.get(CRMSidebar.selectors.userEmail).should('contain', email)
+    return this
+  }
+
+  /**
+   * Validate user avatar is visible
+   */
+  validateUserAvatarVisible() {
+    cy.get(CRMSidebar.selectors.userAvatar).should('be.visible')
+    return this
+  }
+
+  /**
+   * Sign out via sidebar
+   */
+  signOut() {
+    cy.get(CRMSidebar.selectors.signoutBtn).click()
+    return this
+  }
+
+  /**
+   * Validate navigation item is active
+   * @param {string} entity - Entity name
+   */
+  validateNavActive(entity) {
+    const selector = CRMSidebar.selectors[`nav${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    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 = CRMSidebar.selectors[`nav${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    cy.get(selector).should('have.attr', 'data-active', 'false')
+    return this
+  }
+}

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

@@ -0,0 +1,194 @@
+/**
+ * CRMTopBar - Page Object Model Class
+ *
+ * POM for the CRM theme top bar navigation.
+ * Handles search, quick create, notifications, and user menu interactions.
+ */
+export class CRMTopBar {
+  static selectors = {
+    container: '[data-cy="crm-topbar"]',
+    search: '[data-cy="crm-topbar-search"]',
+    searchInput: '[data-cy="crm-topbar-search-input"]',
+    searchClear: '[data-cy="crm-topbar-search-clear"]',
+    quickCreate: '[data-cy="crm-topbar-quick-create"]',
+    quickCreateDropdown: '[data-cy="crm-topbar-quick-create-dropdown"]',
+    quickCreateLead: '[data-cy="crm-quick-create-lead"]',
+    quickCreateContact: '[data-cy="crm-quick-create-contact"]',
+    quickCreateCompany: '[data-cy="crm-quick-create-company"]',
+    quickCreateDeal: '[data-cy="crm-quick-create-deal"]',
+    quickCreateActivity: '[data-cy="crm-quick-create-activity"]',
+    notifications: '[data-cy="crm-topbar-notifications"]',
+    notificationsDropdown: '[data-cy="crm-topbar-notifications-dropdown"]',
+    notificationsBadge: '[data-cy="crm-topbar-notifications-badge"]',
+    help: '[data-cy="crm-topbar-help"]',
+    themeToggle: '[data-cy="crm-topbar-theme-toggle"]',
+    userMenu: '[data-cy="crm-topbar-user-menu"]',
+    userMenuDropdown: '[data-cy="crm-topbar-user-menu-dropdown"]',
+    userMenuProfile: '[data-cy="crm-user-menu-profile"]',
+    userMenuSettings: '[data-cy="crm-user-menu-settings"]',
+    userMenuSignout: '[data-cy="crm-user-menu-signout"]',
+  }
+
+  /**
+   * Validate topbar is visible
+   */
+  validateVisible() {
+    cy.get(CRMTopBar.selectors.container).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate topbar is not visible
+   */
+  validateNotVisible() {
+    cy.get(CRMTopBar.selectors.container).should('not.exist')
+    return this
+  }
+
+  /**
+   * Search for a term
+   * @param {string} term - Search term
+   */
+  search(term) {
+    cy.get(CRMTopBar.selectors.searchInput).clear().type(term)
+    return this
+  }
+
+  /**
+   * Clear search input
+   */
+  clearSearch() {
+    cy.get(CRMTopBar.selectors.searchClear).click()
+    return this
+  }
+
+  /**
+   * Validate search input has value
+   * @param {string} value - Expected value
+   */
+  validateSearchValue(value) {
+    cy.get(CRMTopBar.selectors.searchInput).should('have.value', value)
+    return this
+  }
+
+  /**
+   * Open quick create dropdown
+   */
+  openQuickCreate() {
+    cy.get(CRMTopBar.selectors.quickCreate).click()
+    cy.get(CRMTopBar.selectors.quickCreateDropdown).should('be.visible')
+    return this
+  }
+
+  /**
+   * Quick create an entity
+   * @param {string} entity - Entity type (lead, contact, company, deal, activity)
+   */
+  quickCreate(entity) {
+    this.openQuickCreate()
+    const selector = CRMTopBar.selectors[`quickCreate${entity.charAt(0).toUpperCase() + entity.slice(1)}`]
+    if (!selector) {
+      throw new Error(`Invalid entity: ${entity}. Valid options: lead, contact, company, deal, activity`)
+    }
+    cy.get(selector).click()
+    return this
+  }
+
+  /**
+   * Open notifications dropdown
+   */
+  openNotifications() {
+    cy.get(CRMTopBar.selectors.notifications).click()
+    cy.get(CRMTopBar.selectors.notificationsDropdown).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate notifications badge count
+   * @param {number} count - Expected notification count
+   */
+  validateNotificationCount(count) {
+    if (count > 0) {
+      cy.get(CRMTopBar.selectors.notificationsBadge).should('be.visible').and('contain', count)
+    } else {
+      cy.get(CRMTopBar.selectors.notificationsBadge).should('not.exist')
+    }
+    return this
+  }
+
+  /**
+   * Click help button
+   */
+  clickHelp() {
+    cy.get(CRMTopBar.selectors.help).click()
+    return this
+  }
+
+  /**
+   * Toggle theme
+   */
+  toggleTheme() {
+    cy.get(CRMTopBar.selectors.themeToggle).click()
+    return this
+  }
+
+  /**
+   * Validate theme toggle is visible
+   */
+  validateThemeToggleVisible() {
+    cy.get(CRMTopBar.selectors.themeToggle).should('be.visible')
+    return this
+  }
+
+  /**
+   * Open user menu dropdown
+   */
+  openUserMenu() {
+    cy.get(CRMTopBar.selectors.userMenu).click()
+    cy.get(CRMTopBar.selectors.userMenuDropdown).should('be.visible')
+    return this
+  }
+
+  /**
+   * Navigate to profile
+   */
+  goToProfile() {
+    this.openUserMenu()
+    cy.get(CRMTopBar.selectors.userMenuProfile).click()
+    return this
+  }
+
+  /**
+   * Navigate to settings
+   */
+  goToSettings() {
+    this.openUserMenu()
+    cy.get(CRMTopBar.selectors.userMenuSettings).click()
+    return this
+  }
+
+  /**
+   * Sign out via user menu
+   */
+  signOut() {
+    this.openUserMenu()
+    cy.get(CRMTopBar.selectors.userMenuSignout).click()
+    return this
+  }
+
+  /**
+   * Validate quick create button is visible
+   */
+  validateQuickCreateVisible() {
+    cy.get(CRMTopBar.selectors.quickCreate).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate search is visible
+   */
+  validateSearchVisible() {
+    cy.get(CRMTopBar.selectors.search).should('be.visible')
+    return this
+  }
+}

package/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
+  }
+}