@nextsparkjs/theme-default 0.1.0-beta.20 → 0.1.0-beta.21

package/tests/cypress/src/components/TasksPOM.ts

@@ -0,0 +1,272 @@
+/**
+ * Tasks Entity POM
+ *
+ * Entity-specific Page Object Model for Tasks in Default theme.
+ * Extends generic EntityList/EntityForm with tasks-specific methods.
+ *
+ * Convention: tasks-{component}-{detail}
+ * Examples: tasks-form, tasks-field-title, tasks-row-{id}
+ */
+
+import entitiesConfig from '../../fixtures/entities.json'
+
+const tasksEntity = entitiesConfig.entities.tasks
+const slug = tasksEntity.slug
+
+export interface TaskFormData {
+  title: string
+  description?: string
+  status?: 'todo' | 'in-progress' | 'review' | 'done' | 'blocked'
+  priority?: 'low' | 'medium' | 'high' | 'urgent'
+  dueDate?: string
+  estimatedHours?: string
+  completed?: boolean
+}
+
+export class TasksPOM {
+  // ============================================
+  // STATIC CONFIG
+  // ============================================
+
+  static get entityConfig() {
+    return tasksEntity
+  }
+
+  static get slug() {
+    return slug
+  }
+
+  // ============================================
+  // SELECTORS
+  // ============================================
+
+  static get selectors() {
+    return {
+      // List page (EntityList uses slug-{element} convention)
+      page: `[data-cy="${slug}-list"]`,           // Container div
+      table: `[data-cy="${slug}-table"]`,          // Table element
+      createBtn: `[data-cy="${slug}-add"]`,        // Add/Create button
+      searchInput: `[data-cy="${slug}-search"]`,   // Search input
+      rowGeneric: `[data-cy^="${slug}-row-"]`,     // Any row (prefix match)
+      row: (id: string) => `[data-cy="${slug}-row-${id}"]`,
+
+      // Form page
+      formPage: `[data-cy="${slug}-form-page"]`,
+      form: `[data-cy="${slug}-form"]`,
+      formSubmit: `[data-cy="${slug}-form-submit"]`,
+      formCancel: `[data-cy="${slug}-form-cancel"]`,
+
+      // Fields
+      field: (name: string) => `[data-cy="${slug}-field-${name}"]`,
+      fieldInput: (name: string) => `[data-cy="${slug}-field-${name}"] input`,
+      fieldTextarea: (name: string) => `[data-cy="${slug}-field-${name}"] textarea`,
+      fieldSelect: (name: string) => `[data-cy="${slug}-field-${name}"] [role="combobox"]`,
+      fieldOption: (name: string, value: string) => `[data-cy="${slug}-field-${name}-option-${value}"]`,
+
+      // Row menu actions (EntityTable patterns)
+      menuTrigger: (id: string) => `[data-cy="${slug}-menu-${id}"]`,
+      menuEdit: (id: string) => `[data-cy="${slug}-menu-edit-${id}"]`,
+      menuDelete: (id: string) => `[data-cy="${slug}-menu-delete-${id}"]`,
+      menuView: (id: string) => `[data-cy="${slug}-menu-view-${id}"]`,
+
+      // Dialogs
+      confirmDelete: `[data-cy="${slug}-confirm-delete"]`,
+      confirmDeleteBtn: `[data-cy="${slug}-confirm-delete-btn"]`,
+      cancelDeleteBtn: `[data-cy="${slug}-cancel-delete-btn"]`,
+    }
+  }
+
+  // ============================================
+  // NAVIGATION
+  // ============================================
+
+  static visitList() {
+    cy.visit(`/dashboard/${slug}`)
+    return this
+  }
+
+  static visitCreate() {
+    cy.visit(`/dashboard/${slug}/create`)
+    return this
+  }
+
+  static visitEdit(id: string) {
+    cy.visit(`/dashboard/${slug}/${id}/edit`)
+    return this
+  }
+
+  // ============================================
+  // WAIT METHODS
+  // ============================================
+
+  static waitForListLoad() {
+    cy.url().should('include', `/dashboard/${slug}`)
+    cy.get(this.selectors.page, { timeout: 15000 }).should('be.visible')
+    return this
+  }
+
+  static waitForFormLoad() {
+    cy.get(this.selectors.form, { timeout: 15000 }).should('be.visible')
+    return this
+  }
+
+  // ============================================
+  // LIST INTERACTIONS
+  // ============================================
+
+  static clickCreate() {
+    cy.get(this.selectors.createBtn).click()
+    return this
+  }
+
+  static search(term: string) {
+    cy.get(this.selectors.searchInput).clear().type(term)
+    return this
+  }
+
+  static clearSearch() {
+    cy.get(this.selectors.searchInput).clear()
+    return this
+  }
+
+  // ============================================
+  // FORM METHODS
+  // ============================================
+
+  static fillTextField(fieldName: string, value: string) {
+    cy.get(this.selectors.fieldInput(fieldName)).clear().type(value)
+    return this
+  }
+
+  static fillTextarea(fieldName: string, value: string) {
+    cy.get(this.selectors.fieldTextarea(fieldName)).clear().type(value)
+    return this
+  }
+
+  static selectOption(fieldName: string, optionValue: string) {
+    cy.get(this.selectors.fieldSelect(fieldName)).click()
+    cy.get(this.selectors.fieldOption(fieldName, optionValue)).click()
+    return this
+  }
+
+  static submitForm() {
+    cy.get(this.selectors.formSubmit).click()
+    return this
+  }
+
+  static cancelForm() {
+    cy.get(this.selectors.formCancel).click()
+    return this
+  }
+
+  /**
+   * Fill task form with provided data
+   */
+  static fillTaskForm(data: TaskFormData) {
+    if (data.title) {
+      this.fillTextField('title', data.title)
+    }
+    if (data.description) {
+      this.fillTextarea('description', data.description)
+    }
+    if (data.status) {
+      this.selectOption('status', data.status)
+    }
+    if (data.priority) {
+      this.selectOption('priority', data.priority)
+    }
+    if (data.dueDate) {
+      this.fillTextField('dueDate', data.dueDate)
+    }
+    if (data.estimatedHours) {
+      this.fillTextField('estimatedHours', data.estimatedHours)
+    }
+    return this
+  }
+
+  // ============================================
+  // ACTIONS
+  // ============================================
+
+  static openRowMenu(id: string) {
+    cy.get(this.selectors.menuTrigger(id)).click()
+    return this
+  }
+
+  static clickMenuEdit(id: string) {
+    cy.get(this.selectors.menuEdit(id)).click()
+    return this
+  }
+
+  static clickMenuDelete(id: string) {
+    cy.get(this.selectors.menuDelete(id)).click()
+    return this
+  }
+
+  static clickMenuView(id: string) {
+    cy.get(this.selectors.menuView(id)).click()
+    return this
+  }
+
+  static confirmDelete() {
+    cy.get(this.selectors.confirmDeleteBtn).click()
+    return this
+  }
+
+  static cancelDelete() {
+    cy.get(this.selectors.cancelDeleteBtn).click()
+    return this
+  }
+
+  /**
+   * Delete a task by finding it in the list and clicking delete
+   */
+  static deleteTaskByText(text: string) {
+    cy.contains(this.selectors.rowGeneric, text).within(() => {
+      cy.get('[data-cy*="delete"], button[aria-label*="delete" i]').click()
+    })
+    this.confirmDelete()
+    return this
+  }
+
+  /**
+   * Edit a task by finding it in the list and clicking edit
+   */
+  static editTaskByText(text: string) {
+    cy.contains(this.selectors.rowGeneric, text).within(() => {
+      cy.get('[data-cy*="edit"], button[aria-label*="edit" i]').click()
+    })
+    return this
+  }
+
+  // ============================================
+  // ASSERTIONS
+  // ============================================
+
+  static assertTaskInList(title: string) {
+    cy.contains(title).should('be.visible')
+    return this
+  }
+
+  static assertTaskNotInList(title: string) {
+    cy.contains(title).should('not.exist')
+    return this
+  }
+
+  static assertPageVisible() {
+    cy.get(this.selectors.page).should('be.visible')
+    return this
+  }
+
+  static assertFormVisible() {
+    cy.get(this.selectors.form).should('be.visible')
+    return this
+  }
+
+  static assertTableVisible() {
+    cy.get(this.selectors.table).should('be.visible')
+    return this
+  }
+}
+
+export default TasksPOM

package/tests/cypress/src/components/TeamSwitcherPOM.ts

@@ -0,0 +1,450 @@
+/**
+ * TeamSwitcherPOM - Page Object Model for TeamSwitcherCompact component
+ *
+ * POM for the team switcher in multi-tenant mode.
+ * Used in sidebar footer and mobile MobileMoreSheet.
+ *
+ * @version 3.0 - Uses centralized selectors from cySelector()
+ */
+import { BasePOM } from '../core/BasePOM'
+import { cySelector } from '../selectors'
+
+export class TeamSwitcherPOM extends BasePOM {
+  /**
+   * Selectors using centralized cySelector()
+   */
+  get selectors() {
+    return {
+      // TeamSwitcherCompact selectors
+      trigger: cySelector('teams.switcher.compact'),
+      dropdown: cySelector('teams.switcher.dropdown'),
+      // Prefix selector for all team options
+      teamOption: '[data-cy^="team-option-"]',
+      teamOptionBySlug: (slug: string) => cySelector('teams.switcher.option', { slug }),
+      manageTeamsLink: cySelector('teams.switcher.manageLink'),
+
+      // TeamSwitchModal selectors
+      switchModal: cySelector('teams.switchModal.container'),
+
+      // Sidebar selectors (toggle is in TopNavbar, not sidebar)
+      sidebar: cySelector('dashboard.sidebar.main'),
+      sidebarToggle: cySelector('dashboard.topnav.sidebarToggle'),
+
+      // Mobile selectors
+      mobileMoreButton: cySelector('dashboard.mobile.bottomNav.item', { id: 'more' }),
+      mobileMoreSheet: cySelector('dashboard.mobile.moreSheet.content'),
+      mobileTeamSwitcher: cySelector('dashboard.mobile.moreSheet.teamSwitcher'),
+
+      // Permission selectors
+      permissionDenied: cySelector('common.permissionDenied'),
+
+      // Internal elements (CSS classes, used for validation)
+      teamName: '.text-sm.font-medium',
+      teamRole: '.text-xs.text-muted-foreground.capitalize',
+      checkIcon: 'svg.lucide-check',
+      avatar: '[class*="avatar"]',
+    }
+  }
+
+  /**
+   * Factory method - creates a new instance
+   */
+  static create(): TeamSwitcherPOM {
+    return new TeamSwitcherPOM()
+  }
+
+  // ============================================
+  // Sidebar Methods
+  // ============================================
+
+  /**
+   * Ensure sidebar is expanded (required for TeamSwitcher to be visible)
+   * The TeamSwitcherCompact only renders when sidebar is NOT collapsed
+   */
+  ensureSidebarExpanded(): this {
+    // Wait for dashboard to be fully loaded
+    cy.url().should('include', '/dashboard')
+
+    // First check if sidebar exists and wait for it to be visible
+    cy.get(this.selectors.sidebar, { timeout: 15000 }).should('be.visible')
+
+    // Check if collapsed and expand if needed
+    cy.get(this.selectors.sidebar).then($sidebar => {
+      const isCollapsed = $sidebar.attr('data-collapsed')
+      if (isCollapsed === 'true') {
+        // Click toggle to expand
+        cy.get(this.selectors.sidebarToggle, { timeout: 5000 })
+          .should('be.visible')
+          .click({ force: true })
+        // Wait for expansion animation
+        cy.get(this.selectors.sidebar, { timeout: 5000 })
+          .should('have.attr', 'data-collapsed', 'false')
+        // Wait for team switcher to render
+        cy.wait(300)
+      }
+    })
+
+    // Final assertion that sidebar is expanded
+    cy.get(this.selectors.sidebar).should('have.attr', 'data-collapsed', 'false')
+    return this
+  }
+
+  /**
+   * Validate sidebar is visible and expanded
+   */
+  validateSidebarExpanded(): this {
+    cy.get(this.selectors.sidebar)
+      .should('be.visible')
+      .and('have.attr', 'data-collapsed', 'false')
+    return this
+  }
+
+  /**
+   * Validate sidebar is collapsed
+   */
+  validateSidebarCollapsed(): this {
+    cy.get(this.selectors.sidebar)
+      .should('be.visible')
+      .and('have.attr', 'data-collapsed', 'true')
+    return this
+  }
+
+  /**
+   * Click sidebar toggle button to collapse/expand
+   */
+  toggleSidebar(): this {
+    cy.get(this.selectors.sidebarToggle).click()
+    return this
+  }
+
+  /**
+   * Collapse sidebar and wait for animation
+   */
+  collapseSidebar(): this {
+    cy.get(this.selectors.sidebar).then($sidebar => {
+      if ($sidebar.attr('data-collapsed') === 'false') {
+        this.toggleSidebar()
+        cy.get(this.selectors.sidebar).should('have.attr', 'data-collapsed', 'true')
+      }
+    })
+    return this
+  }
+
+  /**
+   * Expand sidebar and wait for animation
+   */
+  expandSidebar(): this {
+    cy.get(this.selectors.sidebar).then($sidebar => {
+      if ($sidebar.attr('data-collapsed') === 'true') {
+        this.toggleSidebar()
+        cy.get(this.selectors.sidebar).should('have.attr', 'data-collapsed', 'false')
+      }
+    })
+    return this
+  }
+
+  // ============================================
+  // Team Switcher Core Methods
+  // ============================================
+
+  /**
+   * Validate team switcher is visible
+   */
+  validateSwitcherVisible(): this {
+    this.ensureSidebarExpanded()
+    cy.get(this.selectors.trigger).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate team switcher is NOT visible
+   */
+  validateSwitcherNotVisible(): this {
+    cy.get(this.selectors.trigger).should('not.exist')
+    return this
+  }
+
+  /**
+   * Open the team switcher dropdown (idempotent)
+   */
+  open(): this {
+    this.ensureSidebarExpanded()
+    cy.get('body').then($body => {
+      if ($body.find(this.selectors.dropdown).length === 0) {
+        cy.get(this.selectors.trigger).click()
+      }
+      cy.get(this.selectors.dropdown).should('be.visible')
+    })
+    return this
+  }
+
+  /**
+   * Close the team switcher dropdown
+   */
+  close(): this {
+    cy.get('body').click(0, 0)
+    cy.get(this.selectors.dropdown).should('not.exist')
+    return this
+  }
+
+  /**
+   * Get the current team name displayed in the trigger button
+   */
+  getCurrentTeamName(): Cypress.Chainable<string> {
+    this.ensureSidebarExpanded()
+    return cy.get(this.selectors.trigger)
+      .find(this.selectors.teamName)
+      .invoke('text')
+  }
+
+  /**
+   * Validate current team name in trigger button
+   */
+  validateCurrentTeamName(teamName: string): this {
+    this.ensureSidebarExpanded()
+    cy.get(this.selectors.trigger)
+      .find(this.selectors.teamName)
+      .should('contain', teamName)
+    return this
+  }
+
+  // ============================================
+  // Team Selection Methods
+  // ============================================
+
+  /**
+   * Select a specific team by slug (opens dropdown, clicks team)
+   */
+  selectTeam(teamSlug: string): this {
+    this.open()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug)).click()
+    return this
+  }
+
+  /**
+   * Select a team and wait for switch to complete
+   */
+  switchToTeam(teamSlug: string): this {
+    this.selectTeam(teamSlug)
+    this.waitForSwitchComplete()
+    return this
+  }
+
+  /**
+   * Wait for the switch modal to appear and complete
+   */
+  waitForSwitchComplete(): this {
+    cy.get(this.selectors.switchModal, { timeout: 5000 }).should('be.visible')
+    cy.get(this.selectors.switchModal, { timeout: 10000 }).should('not.exist')
+    cy.url().should('include', '/dashboard')
+    return this
+  }
+
+  /**
+   * Validate the switch modal is visible
+   */
+  validateSwitchModalVisible(): this {
+    cy.get(this.selectors.switchModal).should('be.visible')
+    return this
+  }
+
+  // ============================================
+  // Team Validation Methods
+  // ============================================
+
+  /**
+   * Get the count of teams in the dropdown
+   */
+  getTeamCount(): Cypress.Chainable<number> {
+    this.open()
+    return cy.get(this.selectors.teamOption).its('length')
+  }
+
+  /**
+   * Validate number of teams in dropdown
+   */
+  validateTeamCount(count: number): this {
+    this.open()
+    cy.get(this.selectors.teamOption).should('have.length', count)
+    return this
+  }
+
+  /**
+   * Validate team exists in the list
+   */
+  validateTeamInList(teamSlug: string): this {
+    this.open()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug)).should('exist')
+    return this
+  }
+
+  /**
+   * Validate team is NOT in the list
+   */
+  validateTeamNotInList(teamSlug: string): this {
+    this.open()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug)).should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate a team option shows the checkmark (is active)
+   */
+  validateTeamHasCheckmark(teamSlug: string): this {
+    this.open()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug))
+      .find(this.selectors.checkIcon)
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Validate a team option does NOT show the checkmark
+   */
+  validateTeamNoCheckmark(teamSlug: string): this {
+    this.open()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug))
+      .find(this.selectors.checkIcon)
+      .should('not.exist')
+    return this
+  }
+
+  /**
+   * Validate the role displayed for a team
+   */
+  validateRoleDisplayed(teamSlug: string, role: string): this {
+    this.open()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug))
+      .find('.text-xs.text-muted-foreground')
+      .should('contain.text', role)
+    return this
+  }
+
+  /**
+   * Validate team has an avatar or initials displayed
+   */
+  validateTeamHasAvatar(teamSlug: string): this {
+    this.open()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug))
+      .find(this.selectors.avatar)
+      .should('exist')
+    return this
+  }
+
+  /**
+   * Get all team names from the dropdown
+   */
+  getTeamNames(): Cypress.Chainable<string[]> {
+    this.open()
+    return cy.get(this.selectors.teamOption)
+      .find('.truncate')
+      .then($elements => {
+        return Cypress._.map($elements, el => el.innerText)
+      })
+  }
+
+  // ============================================
+  // Manage Teams Methods
+  // ============================================
+
+  /**
+   * Click Manage Teams link
+   */
+  clickManageTeams(): this {
+    this.open()
+    cy.get(this.selectors.manageTeamsLink).click()
+    return this
+  }
+
+  /**
+   * Validate Manage Teams link is visible
+   */
+  validateManageTeamsVisible(): this {
+    this.open()
+    cy.get(this.selectors.manageTeamsLink).should('be.visible')
+    return this
+  }
+
+  /**
+   * Navigate to Manage Teams and validate URL
+   */
+  goToManageTeams(): this {
+    this.clickManageTeams()
+    cy.url().should('include', '/dashboard/settings/teams')
+    return this
+  }
+
+  // ============================================
+  // Mobile Methods
+  // ============================================
+
+  /**
+   * Open the mobile more sheet
+   */
+  openMobileMoreSheet(): this {
+    cy.get(this.selectors.mobileMoreButton).click()
+    cy.get(this.selectors.mobileMoreSheet).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate mobile more sheet is visible
+   */
+  validateMobileMoreSheetVisible(): this {
+    cy.get(this.selectors.mobileMoreSheet).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate team switcher is visible in mobile more sheet
+   */
+  validateMobileTeamSwitcherVisible(): this {
+    cy.get(this.selectors.mobileMoreSheet).within(() => {
+      cy.get(this.selectors.trigger).should('be.visible')
+    })
+    return this
+  }
+
+  /**
+   * Open team dropdown from mobile more sheet
+   */
+  openMobileTeamDropdown(): this {
+    cy.get(this.selectors.mobileMoreSheet).within(() => {
+      cy.get(this.selectors.trigger).click()
+    })
+    return this
+  }
+
+  /**
+   * Switch team from mobile view
+   */
+  switchToTeamMobile(teamSlug: string): this {
+    this.openMobileMoreSheet()
+    this.openMobileTeamDropdown()
+    cy.get(this.selectors.teamOptionBySlug(teamSlug)).click()
+    this.waitForSwitchComplete()
+    return this
+  }
+
+  // ============================================
+  // Permission Methods
+  // ============================================
+
+  /**
+   * Validate permission denied page is visible
+   */
+  validatePermissionDenied(): this {
+    cy.get(this.selectors.permissionDenied).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate permission denied page is NOT visible
+   */
+  validateNoPermissionDenied(): this {
+    cy.get(this.selectors.permissionDenied).should('not.exist')
+    return this
+  }
+}
+
+export default TeamSwitcherPOM