@nextsparkjs/core 0.1.0-beta.3 → 0.1.0-beta.5

package/templates/contents/themes/default/tests/cypress/e2e/uat/scheduled-actions/devtools-ui.cy.ts

@@ -1,740 +0,0 @@
-/// <reference types="cypress" />
-
-import * as allure from 'allure-cypress'
-import { ScheduledActionsPOM } from '../../../src/features/ScheduledActionsPOM'
-import { loginAsDeveloper } from '../../../src/session-helpers'
-
-/**
- * Scheduled Actions DevTools UI - UAT Tests
- *
- * Tests the DevTools scheduled actions page as a developer/superadmin user:
- * - Page loads and displays scheduled actions
- * - Status badges display correctly for all states
- * - Action details are visible in table
- * - Error messages display for failed actions
- * - Filters work correctly
- *
- * These are browser-based UAT tests that validate the UI from the user's perspective.
- *
- * Session: 2025-12-30-scheduled-actions-v1
- *
- * IMPORTANT: DevTools requires developer or superadmin global role.
- * Regular team-based users (owner, member) do NOT have access.
- */
-
-describe('Scheduled Actions DevTools UI - UAT Tests', {
-  tags: ['@uat', '@devtools', '@scheduled-actions']
-}, () => {
-  const scheduledActions = ScheduledActionsPOM.create()
-
-  // ============================================================
-  // SETUP - Login as developer
-  // ============================================================
-  beforeEach(() => {
-    allure.epic('UAT')
-    allure.feature('Scheduled Actions')
-    allure.story('DevTools UI')
-
-    // Login as developer (global role with DevTools access)
-    loginAsDeveloper()
-  })
-
-  // ============================================================
-  // AC-22: DevTools shows "Scheduled Actions" section
-  // ============================================================
-  describe('AC-22: Page Loads', () => {
-    it('SCHED-UAT-001: DevTools scheduled actions page is accessible', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: Developer can access DevTools scheduled actions page
-        Given I am logged in as a developer
-        When I visit /devtools/scheduled-actions
-        Then I should see the scheduled actions page
-        And the page should be fully loaded
-      `)
-
-      scheduledActions
-        .visit()
-        .assertOnScheduledActionsPage()
-        .assertPageVisible()
-    })
-
-    it('SCHED-UAT-002: Page displays title and description', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Page shows title and helpful description
-        Given I am on the scheduled actions page
-        Then I should see "Scheduled Actions" title
-        And I should see a description of the feature
-      `)
-
-      scheduledActions
-        .visit()
-        .assertPageVisible()
-
-      // Check for translated title and description (uses i18n)
-      cy.get(scheduledActions.selectors.page)
-        .should('contain.text', 'Scheduled Actions')
-    })
-  })
-
-  // ============================================================
-  // AC-23: List displays pending, running, completed, failed
-  // ============================================================
-  describe('AC-23: Status Display', () => {
-    it('SCHED-UAT-010: Table shows status badges for all states', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: Status badges are visible for different action states
-        Given I am on the scheduled actions page
-        When the table loads
-        Then I should see status badges with different states
-        And badges should have distinct visual styles (colors)
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Assert status badges exist (at least one of each type may be present)
-      // Note: Actual presence depends on data, but selectors should be defined
-      cy.get(scheduledActions.selectors.page).should('be.visible')
-    })
-
-    it('SCHED-UAT-011: Pending status badge is visible', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Pending actions show pending badge
-        Given there are pending actions
-        Then I should see at least one "Pending" status badge
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // If there are pending actions, badge should be visible
-      // This test may pass or fail depending on data
-      cy.get('body').then(($body) => {
-        if ($body.find('[data-cy="scheduled-actions-status-pending"]').length > 0) {
-          scheduledActions.assertPendingActionsVisible()
-        } else {
-          cy.log('No pending actions in database - skipping assertion')
-        }
-      })
-    })
-
-    it('SCHED-UAT-012: Completed status badge is visible when actions complete', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Completed actions show completed badge
-        Given there are completed actions
-        Then I should see at least one "Completed" status badge
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // If there are completed actions, badge should be visible
-      cy.get('body').then(($body) => {
-        if ($body.find('[data-cy="scheduled-actions-status-completed"]').length > 0) {
-          scheduledActions.assertCompletedActionsVisible()
-        } else {
-          cy.log('No completed actions in database - skipping assertion')
-        }
-      })
-    })
-
-    it('SCHED-UAT-013: Failed status badge is visible for failed actions', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Failed actions show failed badge with destructive styling
-        Given there are failed actions
-        Then I should see at least one "Failed" status badge
-        And the badge should have destructive (red) styling
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // If there are failed actions, badge should be visible
-      cy.get('body').then(($body) => {
-        if ($body.find('[data-cy="scheduled-actions-status-failed"]').length > 0) {
-          scheduledActions.assertFailedActionsVisible()
-        } else {
-          cy.log('No failed actions in database - skipping assertion')
-        }
-      })
-    })
-  })
-
-  // ============================================================
-  // AC-24: Each action shows type, status, scheduledAt, team, payload
-  // ============================================================
-  describe('AC-24: Action Details Display', () => {
-    it('SCHED-UAT-020: Table shows all required columns', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: Table displays all required column headers
-        Given I am on the scheduled actions page
-        Then I should see column headers for:
-        - Type
-        - Status
-        - Scheduled At
-        - Team
-        - Payload
-        - Error
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-        .assertColumnHeadersVisible()
-    })
-
-    it('SCHED-UAT-021: Action type is displayed in table', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Each action shows its type
-        Given there are actions in the table
-        Then each row should display the action type
-        And the type should be in monospace font for readability
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check if table has rows
-      scheduledActions.getRows().then(($rows) => {
-        if ($rows.length > 0) {
-          scheduledActions.assertTableHasRows()
-          // Type column should exist
-          cy.get(scheduledActions.selectors.cellType).should('be.visible')
-        } else {
-          cy.log('No actions in database - empty state expected')
-          scheduledActions.assertEmptyStateVisible()
-        }
-      })
-    })
-
-    it('SCHED-UAT-022: Scheduled time is formatted and displayed', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Each action shows when it's scheduled to run
-        Given there are actions in the table
-        Then each row should display the scheduled time
-        And the time should be formatted in a readable way
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check if table has rows
-      scheduledActions.getRows().then(($rows) => {
-        if ($rows.length > 0) {
-          // Scheduled At column should exist
-          cy.get(scheduledActions.selectors.cellScheduledAt).should('be.visible')
-        }
-      })
-    })
-
-    it('SCHED-UAT-023: Team ID is displayed or shows "Global"', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Each action shows team context
-        Given there are actions in the table
-        Then each row should display the team ID
-        Or show "Global" for system-wide actions (no team context)
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check if table has rows
-      scheduledActions.getRows().then(($rows) => {
-        if ($rows.length > 0) {
-          // Team column should exist
-          cy.get(scheduledActions.selectors.cellTeam).should('be.visible')
-        }
-      })
-    })
-
-    it('SCHED-UAT-024: Payload preview is visible', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Each action shows a payload preview
-        Given there are actions in the table
-        Then each row should show a preview of the payload
-        And clicking the row should expand to show full payload
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check if table has rows
-      scheduledActions.getRows().then(($rows) => {
-        if ($rows.length > 0) {
-          // Payload column should exist
-          cy.get(scheduledActions.selectors.cellPayload).should('be.visible')
-        }
-      })
-    })
-  })
-
-  // ============================================================
-  // AC-25: Failed actions show error message
-  // ============================================================
-  describe('AC-25: Error Display', () => {
-    it('SCHED-UAT-030: Error column is visible in table', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: Table has an error column
-        Given I am on the scheduled actions page
-        Then I should see an "Error" column header
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-        .assertErrorColumnVisible()
-    })
-
-    it('SCHED-UAT-031: Failed actions display error message', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: Failed actions show error details
-        Given there are failed actions in the table
-        Then each failed action should display its error message
-        And the error should be visible in the Error column
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check for failed actions
-      cy.get('body').then(($body) => {
-        if ($body.find('[data-cy="scheduled-actions-status-failed"]').length > 0) {
-          // If there are failed actions, error messages should be visible
-          cy.log('Failed actions found - verifying error display')
-          // Error column should contain error text
-          cy.get(scheduledActions.selectors.cellError).should('be.visible')
-        } else {
-          cy.log('No failed actions in database - cannot verify error display')
-        }
-      })
-    })
-
-    it('SCHED-UAT-032: Error message is expandable for full details', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: User can expand row to see full error message
-        Given there is a failed action with an error message
-        When I click on the row
-        Then the row should expand
-        And I should see the full error message
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // This test depends on having failed actions with errors
-      // If no failed actions exist, log and pass
-      cy.get('body').then(($body) => {
-        if ($body.find('[data-cy="scheduled-actions-status-failed"]').length > 0) {
-          cy.log('Failed action found - testing row expansion')
-          // Click on first failed action row (if exists)
-          cy.get('[data-cy^="scheduled-actions-row-"]').first().click()
-          // After click, full error should be visible
-        } else {
-          cy.log('No failed actions - skipping expansion test')
-        }
-      })
-    })
-  })
-
-  // ============================================================
-  // AC-26: UI has filters by status and action type
-  // ============================================================
-  describe('AC-26: Filters Work', () => {
-    it('SCHED-UAT-040: Status filter is visible and functional', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: User can filter by action status
-        Given I am on the scheduled actions page
-        Then I should see a status filter dropdown
-        And the dropdown should have options: All, Pending, Running, Completed, Failed
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-        .assertFiltersVisible()
-
-      // Check status filter is visible (SelectTrigger)
-      cy.get(scheduledActions.selectors.filterStatus).should('be.visible')
-
-      // Open the dropdown to verify options (shadcn/ui Select uses Radix UI)
-      cy.get(scheduledActions.selectors.filterStatus).click()
-      cy.get('[data-radix-select-viewport]').should('be.visible')
-
-      // Check options are present (SelectItems)
-      cy.get('[data-radix-select-viewport]').within(() => {
-        cy.contains('All').should('be.visible')
-        cy.contains('Pending').should('be.visible')
-        cy.contains('Running').should('be.visible')
-        cy.contains('Completed').should('be.visible')
-        cy.contains('Failed').should('be.visible')
-      })
-
-      // Close dropdown by pressing Escape
-      cy.get('body').type('{esc}')
-    })
-
-    it('SCHED-UAT-041: Action type filter is visible and functional', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: User can filter by action type
-        Given I am on the scheduled actions page
-        Then I should see an action type filter dropdown
-        And the dropdown should have "All" plus registered action types
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-        .assertFiltersVisible()
-
-      // Check action type filter is visible (SelectTrigger)
-      cy.get(scheduledActions.selectors.filterType).should('be.visible')
-
-      // Open the dropdown to verify options (shadcn/ui Select uses Radix UI)
-      cy.get(scheduledActions.selectors.filterType).click()
-      cy.get('[data-radix-select-viewport]').should('be.visible')
-
-      // Check "All" option is present
-      cy.get('[data-radix-select-viewport]').within(() => {
-        cy.contains('All').should('be.visible')
-        // Other options depend on registered actions (webhook:send, billing:check-renewals)
-      })
-
-      // Close dropdown by pressing Escape
-      cy.get('body').type('{esc}')
-    })
-
-    it('SCHED-UAT-042: Filtering by status updates the table', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: Filtering by status shows only matching actions
-        Given I am on the scheduled actions page
-        And there are actions with different statuses
-        When I select "Pending" from the status filter
-        Then the table should only show pending actions
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Get initial row count
-      scheduledActions.getRows().then(($initialRows) => {
-        const initialCount = $initialRows.length
-
-        if (initialCount > 0) {
-          // Apply pending filter
-          scheduledActions.filterByStatus('pending')
-
-          // Wait for table to update (TanStack Query refetch)
-          cy.wait(1000)
-
-          // After filter, check if rows changed
-          scheduledActions.getRows().then(($filteredRows) => {
-            const filteredCount = $filteredRows.length
-
-            // If there were pending actions, count should be different OR same
-            // (depends on data, but filtering should work)
-            cy.log(`Initial rows: ${initialCount}, After pending filter: ${filteredCount}`)
-          })
-        } else {
-          cy.log('No actions in table - cannot test filtering')
-        }
-      })
-    })
-
-    it('SCHED-UAT-043: Filtering by action type updates the table', () => {
-      allure.severity('critical')
-      allure.description(`
-        Scenario: Filtering by action type shows only matching actions
-        Given I am on the scheduled actions page
-        And there are actions of different types
-        When I select a specific action type from the filter
-        Then the table should only show actions of that type
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Open the dropdown to get available action types (shadcn/ui Select)
-      cy.get(scheduledActions.selectors.filterType).click()
-      cy.get('[data-radix-select-viewport]').should('be.visible')
-
-      // Get all options (excluding "All")
-      cy.get('[data-radix-select-viewport] [role="option"]').then(($options) => {
-        // Filter out the "All" option and get other action types
-        const actionTypes = [...$options]
-          .map((opt) => opt.getAttribute('data-value'))
-          .filter((val) => val && val !== 'all')
-
-        // Close dropdown first
-        cy.get('body').type('{esc}')
-
-        if (actionTypes.length > 0) {
-          // Select first available action type
-          const firstType = actionTypes[0]!
-          scheduledActions.filterByType(firstType)
-
-          // Wait for table to update
-          cy.wait(1000)
-
-          cy.log(`Filtered by action type: ${firstType}`)
-        } else {
-          cy.log('No action types registered - cannot test type filtering')
-        }
-      })
-    })
-
-    it('SCHED-UAT-044: Reset button clears all filters', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: User can reset filters to show all actions
-        Given I have applied filters (status or action type)
-        When I click the reset button
-        Then all filters should be cleared
-        And the table should show all actions again
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Apply a filter first
-      scheduledActions.filterByStatus('pending')
-
-      // Wait for filter to apply
-      cy.wait(500)
-
-      // Reset button should now be visible (only shows when filters are active)
-      cy.get('body').then(($body) => {
-        if ($body.find(scheduledActions.selectors.filterReset).length > 0) {
-          scheduledActions
-            .assertResetButtonVisible()
-            .resetFilters()
-
-          // Wait for reset to take effect
-          cy.wait(500)
-
-          // After reset, filters should be back to default
-          cy.log('Filters reset successfully')
-        } else {
-          cy.log('No reset button visible - filters may already be at default')
-        }
-      })
-    })
-
-    it('SCHED-UAT-045: Multiple filters can be combined', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: User can combine status and action type filters
-        Given I am on the scheduled actions page
-        When I select a status filter
-        And I select an action type filter (if available)
-        Then the table should show actions matching the filters
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Get initial row count
-      scheduledActions.getRows().then(($initialRows) => {
-        const initialCount = $initialRows.length
-
-        if (initialCount > 0) {
-          // Apply status filter first
-          scheduledActions.filterByStatus('completed')
-
-          // Wait for filter to apply
-          cy.wait(500)
-
-          // Check if action type dropdown has options beyond "All Types"
-          cy.get(scheduledActions.selectors.filterType).click()
-          cy.get('[data-radix-select-viewport]').should('be.visible')
-
-          // Count available options (excluding "All Types")
-          cy.get('[data-radix-select-viewport] [role="option"]').then(($options) => {
-            const optionCount = $options.length
-
-            // Close the dropdown
-            cy.get('body').type('{esc}')
-
-            if (optionCount > 1) {
-              // If there are action type options, apply second filter
-              // Get text of first non-All option
-              const firstOptionText = $options.eq(1).text()
-              cy.log(`Applying action type filter: ${firstOptionText}`)
-
-              scheduledActions.filterByType(firstOptionText)
-
-              // Wait for filters to apply
-              cy.wait(500)
-
-              cy.log(`Applied combined filters: status=completed, type=${firstOptionText}`)
-            } else {
-              // Only "All Types" available - still validates status filter works
-              cy.log('No specific action types available - status filter applied successfully')
-            }
-
-            // Verify table is still visible after filtering
-            scheduledActions.assertPageVisible()
-          })
-        }
-      })
-    })
-  })
-
-  // ============================================================
-  // ADDITIONAL: Empty State
-  // ============================================================
-  describe('Empty State', () => {
-    it('SCHED-UAT-050: Empty state is shown when no actions exist', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Empty state message when no actions
-        Given there are no scheduled actions in the database
-        When I visit the page
-        Then I should see an empty state message
-        And the message should explain there are no scheduled actions
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check if table is empty
-      scheduledActions.getRows().then(($rows) => {
-        if ($rows.length === 0) {
-          scheduledActions.assertEmptyStateVisible()
-          cy.log('Empty state is correctly displayed')
-        } else {
-          cy.log('Table has data - empty state not shown')
-        }
-      })
-    })
-  })
-
-  // ============================================================
-  // ADDITIONAL: Pagination
-  // ============================================================
-  describe('Pagination', () => {
-    it('SCHED-UAT-060: Pagination controls are visible when needed', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: Pagination appears when there are many actions
-        Given there are more than 20 actions (default page size)
-        When I visit the page
-        Then I should see pagination controls
-        And I should see Previous and Next buttons
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check if pagination exists (depends on data)
-      cy.get('body').then(($body) => {
-        if ($body.find(scheduledActions.selectors.pagination).length > 0) {
-          scheduledActions.assertPaginationVisible()
-          cy.log('Pagination controls are visible')
-        } else {
-          cy.log('Not enough data for pagination - expected behavior')
-        }
-      })
-    })
-
-    it('SCHED-UAT-061: Next button works when there are more pages', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: User can navigate to next page
-        Given there are multiple pages of actions
-        When I click the Next button
-        Then the table should load the next page
-        And different actions should be displayed
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // Check if Next button exists and is enabled
-      cy.get('body').then(($body) => {
-        if ($body.find(scheduledActions.selectors.paginationNext).length > 0) {
-          cy.get(scheduledActions.selectors.paginationNext).then(($btn) => {
-            if (!$btn.is(':disabled')) {
-              scheduledActions.clickNextPage()
-              cy.wait(1000)
-              cy.log('Navigated to next page successfully')
-            } else {
-              cy.log('Next button disabled - no more pages')
-            }
-          })
-        } else {
-          cy.log('No pagination - not enough data')
-        }
-      })
-    })
-
-    it('SCHED-UAT-062: Previous button works when on later pages', () => {
-      allure.severity('normal')
-      allure.description(`
-        Scenario: User can navigate to previous page
-        Given I am on page 2 or later
-        When I click the Previous button
-        Then the table should load the previous page
-      `)
-
-      scheduledActions
-        .visit()
-        .waitForPage()
-
-      // First go to next page (if possible)
-      cy.get('body').then(($body) => {
-        if ($body.find(scheduledActions.selectors.paginationNext).length > 0) {
-          cy.get(scheduledActions.selectors.paginationNext).then(($btn) => {
-            if (!$btn.is(':disabled')) {
-              // Go to next page
-              scheduledActions.clickNextPage()
-              cy.wait(1000)
-
-              // Now try to go back
-              scheduledActions.clickPrevPage()
-              cy.wait(1000)
-              cy.log('Navigated back to previous page successfully')
-            } else {
-              cy.log('Cannot test Previous button - only one page of data')
-            }
-          })
-        } else {
-          cy.log('No pagination - not enough data')
-        }
-      })
-    })
-  })
-})