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

package/tests/cypress/e2e/_selectors/tasks.cy.ts

@@ -0,0 +1,242 @@
+/**
+ * POC Test: Tasks Entity Selectors Validation
+ *
+ * This test validates that the new POM architecture with dynamic selectors
+ * works correctly for entity CRUD operations.
+ *
+ * Purpose:
+ * - Validate selectors from DashboardEntityPOM work correctly
+ * - Ensure dynamic selector generation produces valid CSS selectors
+ * - Test before migrating existing tests to new architecture
+ *
+ * Scope:
+ * - Only login and navigate
+ * - Assert elements exist in DOM (no full CRUD operations)
+ */
+
+import { TasksPOM } from '../../src/entities/TasksPOM'
+import { loginAsDefaultOwner } from '../../src/session-helpers'
+
+describe('Tasks Entity Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  const tasks = TasksPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultOwner()
+  })
+
+  describe('List Page Selectors', () => {
+    beforeEach(() => {
+      tasks.visitList()
+      tasks.waitForList()
+    })
+
+    it('should find table container element', () => {
+      cy.get(tasks.selectors.tableContainer).should('exist')
+    })
+
+    // NOTE: entities.table.element selector not implemented in EntityTable component
+    // The component uses {slug}-table-container on wrapper, not {slug}-table on <table>
+    // Test removed as redundant with tableContainer test above
+
+    it('should find add button', () => {
+      cy.get(tasks.selectors.addButton).should('exist')
+    })
+
+    it('should find search input', () => {
+      cy.get(tasks.selectors.search).should('exist')
+    })
+
+    it('should find search container', () => {
+      cy.get(tasks.selectors.searchContainer).should('exist')
+    })
+
+    it('should find select all checkbox', () => {
+      cy.get(tasks.selectors.selectAll).should('exist')
+    })
+
+    it('should find pagination container', () => {
+      cy.get(tasks.selectors.pagination).should('exist')
+    })
+
+    it('should find pagination controls', () => {
+      cy.get(tasks.selectors.pageFirst).should('exist')
+      cy.get(tasks.selectors.pagePrev).should('exist')
+      cy.get(tasks.selectors.pageNext).should('exist')
+      cy.get(tasks.selectors.pageLast).should('exist')
+    })
+
+    it('should find page size selector', () => {
+      cy.get(tasks.selectors.pageSize).should('exist')
+    })
+
+    it('should find page info', () => {
+      cy.get(tasks.selectors.pageInfo).should('exist')
+    })
+
+    it('should find at least one row with dynamic selector', () => {
+      cy.get(tasks.selectors.rowGeneric).should('have.length.at.least', 1)
+    })
+  })
+
+  describe('Filter Selectors', () => {
+    beforeEach(() => {
+      tasks.visitList()
+      tasks.waitForList()
+    })
+
+    it('should find status filter trigger', () => {
+      cy.get(tasks.selectors.filterTrigger('status')).should('exist')
+    })
+
+    it('should find priority filter trigger', () => {
+      cy.get(tasks.selectors.filterTrigger('priority')).should('exist')
+    })
+
+    it('should find filter options when opened', () => {
+      tasks.openFilter('status')
+      cy.get(tasks.selectors.filterContent('status')).should('be.visible')
+    })
+  })
+
+  describe('Row Dynamic Selectors', () => {
+    beforeEach(() => {
+      tasks.visitList()
+      tasks.waitForList()
+    })
+
+    it('should find row elements with dynamic ID', () => {
+      // Get any row and extract its ID to test dynamic selectors
+      cy.get(tasks.selectors.rowGeneric)
+        .first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          // Extract ID from data-cy="tasks-row-{id}"
+          const id = dataCy?.replace('tasks-row-', '') || ''
+          expect(id).to.not.be.empty
+
+          // Test dynamic selector functions work
+          cy.get(tasks.selectors.row(id)).should('exist')
+          cy.get(tasks.selectors.rowSelect(id)).should('exist')
+          cy.get(tasks.selectors.rowMenu(id)).should('exist')
+        })
+    })
+  })
+
+  describe('Create Page Selectors', () => {
+    beforeEach(() => {
+      tasks.visitCreate()
+      tasks.waitForForm()
+    })
+
+    it('should find form container', () => {
+      cy.get(tasks.selectors.form).should('exist')
+    })
+
+    it('should find submit button', () => {
+      cy.get(tasks.selectors.submitButton).should('exist')
+    })
+
+    it('should find create header', () => {
+      cy.get(tasks.selectors.createHeader).should('exist')
+    })
+
+    it('should find back button', () => {
+      cy.get(tasks.selectors.backButton).should('exist')
+    })
+
+    it('should find title field', () => {
+      cy.get(tasks.selectors.field('title')).should('exist')
+    })
+
+    it('should find description field', () => {
+      cy.get(tasks.selectors.field('description')).should('exist')
+    })
+
+    it('should find status field', () => {
+      cy.get(tasks.selectors.field('status')).should('exist')
+    })
+
+    it('should find priority field', () => {
+      cy.get(tasks.selectors.field('priority')).should('exist')
+    })
+  })
+
+  describe('Detail Page Selectors', () => {
+    it('should find detail page elements after navigating to a task', () => {
+      // First get a task ID from the list
+      tasks.visitList()
+      tasks.waitForList()
+
+      cy.get(tasks.selectors.rowGeneric)
+        .first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          const id = dataCy?.replace('tasks-row-', '') || ''
+
+          // Navigate to detail page
+          tasks.visitDetail(id)
+          tasks.waitForDetail()
+
+          // Validate detail page selectors
+          cy.get(tasks.selectors.viewHeader).should('exist')
+          cy.get(tasks.selectors.editButton).should('exist')
+          cy.get(tasks.selectors.deleteButton).should('exist')
+          cy.get(tasks.selectors.backButton).should('exist')
+        })
+    })
+  })
+
+  describe('Bulk Actions Selectors', () => {
+    beforeEach(() => {
+      tasks.visitList()
+      tasks.waitForList()
+    })
+
+    it('should show bulk bar after selecting rows', () => {
+      // Select first row
+      cy.get(tasks.selectors.rowGeneric)
+        .first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          const id = dataCy?.replace('tasks-row-', '') || ''
+          cy.get(tasks.selectors.rowSelect(id)).click()
+
+          // Bulk bar should appear
+          cy.get(tasks.selectors.bulkBar).should('be.visible')
+          cy.get(tasks.selectors.bulkCount).should('exist')
+          cy.get(tasks.selectors.bulkDelete).should('exist')
+          cy.get(tasks.selectors.bulkClear).should('exist')
+          // Note: bulkStatus not tested - enableChangeStatus not enabled in EntityListWrapper
+        })
+    })
+  })
+
+  describe('Delete Dialog Selectors', () => {
+    it('should find delete dialog elements', () => {
+      // Navigate to a task detail
+      tasks.visitList()
+      tasks.waitForList()
+
+      cy.get(tasks.selectors.rowGeneric)
+        .first()
+        .invoke('attr', 'data-cy')
+        .then((dataCy) => {
+          const id = dataCy?.replace('tasks-row-', '') || ''
+
+          tasks.visitDetail(id)
+          tasks.waitForDetail()
+
+          // Click delete to open dialog
+          tasks.clickDelete()
+
+          // Validate dialog selectors
+          cy.get(tasks.selectors.deleteDialog).should('be.visible')
+          cy.get(tasks.selectors.deleteConfirm).should('exist')
+          cy.get(tasks.selectors.deleteCancel).should('exist')
+
+          // Close without deleting
+          tasks.cancelDelete()
+        })
+    })
+  })
+})

package/tests/cypress/e2e/_selectors/taxonomies.cy.ts

@@ -0,0 +1,126 @@
+/**
+ * UI Selectors Validation: Taxonomies (Categories)
+ *
+ * This test validates that taxonomies selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate CategoriesPOM taxonomies selectors work correctly
+ * - Ensure all taxonomies.* selectors are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * IMPORTANT: The /dashboard/taxonomies page does NOT exist yet.
+ * Taxonomies are defined in CORE_SELECTORS but the UI is not implemented.
+ * All tests are marked as skip until the page is created.
+ *
+ * NOTE: There IS an API at /api/v1/post-categories but no UI page.
+ */
+
+import { CategoriesPOM } from '../../src/components/CategoriesPOM'
+
+describe('Taxonomies Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  // ============================================
+  // DOCUMENTATION (no login needed)
+  // ============================================
+  describe('Taxonomies Page Status', () => {
+    it('documents that taxonomies page is not implemented', () => {
+      cy.log('The /dashboard/taxonomies page does NOT exist')
+      cy.log('Taxonomies selectors are defined in CORE_SELECTORS')
+      cy.log('API exists at /api/v1/post-categories')
+      cy.log('UI page needs to be created to test these selectors')
+    })
+  })
+
+  // ============================================
+  // LIST PAGE (5 selectors)
+  // NOTE: Page not implemented
+  // ============================================
+  describe('List Page', () => {
+    it.skip('should find list container (page not implemented)', () => {
+      cy.get(CategoriesPOM.listSelectors.page).should('exist')
+    })
+
+    it.skip('should find create button (page not implemented)', () => {
+      cy.get(CategoriesPOM.listSelectors.createBtn).should('exist')
+    })
+
+    it.skip('should find category row (page not implemented)', () => {
+      // Example: cy.get(CategoriesPOM.listSelectors.row('cat-123')).should('exist')
+      cy.wrap(true).should('be.true')
+    })
+
+    it.skip('should find edit button (page not implemented)', () => {
+      // Example: cy.get(CategoriesPOM.listSelectors.editBtn('cat-123')).should('exist')
+      cy.wrap(true).should('be.true')
+    })
+
+    it.skip('should find delete button (page not implemented)', () => {
+      // Example: cy.get(CategoriesPOM.listSelectors.deleteBtn('cat-123')).should('exist')
+      cy.wrap(true).should('be.true')
+    })
+  })
+
+  // ============================================
+  // FORM DIALOG (10 selectors)
+  // NOTE: Page not implemented
+  // ============================================
+  describe('Form Dialog', () => {
+    it.skip('should find form dialog (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.dialog).should('exist')
+    })
+
+    it.skip('should find name input (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.nameInput).should('exist')
+    })
+
+    it.skip('should find slug input (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.slugInput).should('exist')
+    })
+
+    it.skip('should find description input (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.descriptionInput).should('exist')
+    })
+
+    it.skip('should find icon input (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.iconInput).should('exist')
+    })
+
+    it.skip('should find color input (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.colorInput).should('exist')
+    })
+
+    it.skip('should find parent select (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.parentSelect).should('exist')
+    })
+
+    it.skip('should find order input (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.orderInput).should('exist')
+    })
+
+    it.skip('should find save button (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.saveButton).should('exist')
+    })
+
+    it.skip('should find cancel button (page not implemented)', () => {
+      cy.get(CategoriesPOM.formSelectors.cancelButton).should('exist')
+    })
+  })
+
+  // ============================================
+  // CONFIRM DELETE DIALOG (3 selectors)
+  // NOTE: Page not implemented
+  // ============================================
+  describe('Confirm Delete Dialog', () => {
+    it.skip('should find delete confirmation dialog (page not implemented)', () => {
+      cy.get(CategoriesPOM.confirmDeleteSelectors.dialog).should('exist')
+    })
+
+    it.skip('should find confirm delete button (page not implemented)', () => {
+      cy.get(CategoriesPOM.confirmDeleteSelectors.confirmButton).should('exist')
+    })
+
+    it.skip('should find cancel delete button (page not implemented)', () => {
+      cy.get(CategoriesPOM.confirmDeleteSelectors.cancelButton).should('exist')
+    })
+  })
+})

package/tests/cypress/e2e/_selectors/teams.cy.ts

@@ -0,0 +1,142 @@
+/**
+ * UI Selectors Validation: Teams
+ *
+ * This test validates that teams selectors exist in the DOM.
+ * This is a lightweight test that ONLY checks selector presence, not functionality.
+ *
+ * Purpose:
+ * - Validate TeamSwitcherPOM selectors work correctly
+ * - Ensure all teams.* selectors are implemented
+ * - Run as Phase 12 sub-gate before functional tests
+ *
+ * Scope:
+ * - Navigate to dashboard (requires login)
+ * - Assert elements exist in DOM (no form submissions)
+ * - Fast execution (< 30 seconds per describe block)
+ *
+ * NOTE: Some selectors require specific states (dialog open, team selected).
+ * Many selectors from CORE_SELECTORS are dynamically scoped.
+ */
+
+import { TeamSwitcherPOM } from '../../src/components/TeamSwitcherPOM'
+import { loginAsDefaultOwner } from '../../src/session-helpers'
+
+describe('Teams Selectors Validation', { tags: ['@ui-selectors'] }, () => {
+  const teamSwitcher = TeamSwitcherPOM.create()
+
+  beforeEach(() => {
+    loginAsDefaultOwner()
+    cy.visit('/dashboard', { timeout: 60000, failOnStatusCode: false })
+    cy.url().should('include', '/dashboard')
+  })
+
+  // ============================================
+  // TEAM SWITCHER SELECTORS (6 selectors)
+  // ============================================
+  describe('Team Switcher Selectors', () => {
+    beforeEach(() => {
+      teamSwitcher.ensureSidebarExpanded()
+    })
+
+    it('should find team switcher compact trigger', () => {
+      cy.get(teamSwitcher.selectors.trigger).should('exist')
+    })
+
+    it('should find team switcher dropdown when opened', () => {
+      teamSwitcher.open()
+      cy.get(teamSwitcher.selectors.dropdown).should('be.visible')
+    })
+
+    it('should find team option in dropdown', () => {
+      teamSwitcher.open()
+      cy.get(teamSwitcher.selectors.teamOption).should('have.length.at.least', 1)
+    })
+
+    it('should find manage teams link', () => {
+      teamSwitcher.open()
+      cy.get(teamSwitcher.selectors.manageTeamsLink).should('exist')
+    })
+
+    // NOTE: Create team button is NOT in TeamSwitcherCompact
+    // It is in the full TeamSwitcher (used in settings/teams page)
+    // That button is tested in settings-teams.cy.ts
+    it('should document that create button is in settings', () => {
+      cy.log('Create Team button is in TeamSwitcher (full version)')
+      cy.log('Tested at: /dashboard/settings/teams via settings-teams.cy.ts')
+      cy.wrap(true).should('be.true')
+    })
+  })
+
+  // ============================================
+  // TEAM SWITCH MODAL SELECTORS (1 selector)
+  // ============================================
+  describe('Team Switch Modal Selectors', () => {
+    // Note: Switch modal only appears when switching to a different team
+    // This test validates the selector exists by attempting a switch
+    it.skip('should find switch modal during team change (requires multiple teams)', () => {
+      cy.get(teamSwitcher.selectors.switchModal).should('exist')
+    })
+  })
+
+  // ============================================
+  // CREATE TEAM DIALOG SELECTORS (7 selectors)
+  // NOTE: Create Team Dialog is opened from settings/teams page
+  // Those selectors are tested in settings-teams.cy.ts
+  // ============================================
+  describe('Create Team Dialog Selectors', () => {
+    it('should document that Create Team Dialog is in settings', () => {
+      cy.log('Create Team Dialog selectors:')
+      cy.log('- create-team-dialog')
+      cy.log('- team-name-input')
+      cy.log('- team-slug-input')
+      cy.log('- team-description-input')
+      cy.log('- cancel-create-team')
+      cy.log('- submit-create-team')
+      cy.log('Tested at: /dashboard/settings/teams')
+      cy.wrap(true).should('be.true')
+    })
+  })
+
+  // ============================================
+  // SIDEBAR SELECTORS (2 selectors)
+  // ============================================
+  describe('Dashboard Sidebar Selectors', () => {
+    it('should find sidebar main container', () => {
+      cy.get(teamSwitcher.selectors.sidebar).should('exist')
+    })
+
+    it('should find sidebar toggle button', () => {
+      cy.get(teamSwitcher.selectors.sidebarToggle).should('exist')
+    })
+  })
+
+  // ============================================
+  // MOBILE SELECTORS (3 selectors) - SKIP for desktop
+  // ============================================
+  describe('Mobile Team Switcher Selectors', () => {
+    // Note: Mobile selectors only visible on small viewports
+    it.skip('should find mobile more button (mobile viewport only)', () => {
+      cy.get(teamSwitcher.selectors.mobileMoreButton).should('exist')
+    })
+
+    it.skip('should find mobile more sheet (mobile viewport only)', () => {
+      cy.get(teamSwitcher.selectors.mobileMoreSheet).should('exist')
+    })
+
+    it.skip('should find mobile team switcher (mobile viewport only)', () => {
+      cy.get(teamSwitcher.selectors.mobileTeamSwitcher).should('exist')
+    })
+  })
+
+  // ============================================
+  // TEAM MEMBERS SELECTORS (Section at settings)
+  // These are tested in settings-teams.cy.ts
+  // ============================================
+  describe('Team Members Selectors', () => {
+    it('should document team members are in settings', () => {
+      cy.log('Team members selectors are tested in settings-teams.cy.ts')
+      cy.log('Path: /dashboard/settings/teams')
+      cy.wrap(true).should('be.true')
+    })
+  })
+})