@nextsparkjs/core 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/templates/contents/themes/default/tests/cypress/src/components/TasksPOM.ts

@@ -1,272 +0,0 @@
-/**
- * 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/dist/templates/contents/themes/default/tests/cypress/src/components/TeamSwitcherPOM.ts

@@ -1,450 +0,0 @@
-/**
- * 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