@nextsparkjs/core 0.1.0-beta.7 → 0.1.0-beta.70

package/dist/templates/contents/themes/starter/tests/cypress/e2e/uat/entities/tasks/tasks-crud.cy.ts

@@ -0,0 +1,431 @@
+/// <reference types="cypress" />
+
+/**
+ * Tasks CRUD Tests - Starter Theme
+ *
+ * Complete CRUD test suite for the Tasks entity.
+ * Demonstrates:
+ * - Login using session helpers
+ * - Creating, reading, updating, and deleting tasks
+ * - Filtering and searching tasks
+ * - Using POM pattern for maintainability
+ *
+ * Test IDs:
+ * - TASKS_CRUD_001: Create Task
+ * - TASKS_CRUD_002: Read/View Task
+ * - TASKS_CRUD_003: Update Task
+ * - TASKS_CRUD_004: Delete Task
+ * - TASKS_CRUD_005: Filter Tasks
+ * - TASKS_CRUD_006: Search Tasks
+ *
+ * Run with: npx cypress run --spec "**\/tasks-crud.cy.ts"
+ */
+
+import { TasksPOM, type TaskFormData } from '../../../../src/entities/TasksPOM'
+const TaskAPIController = require('../../../api/entities/tasks/TaskAPIController')
+
+describe('Tasks CRUD', { tags: ['@uat', '@tasks', '@crud'] }, () => {
+  const tasks = new TasksPOM()
+  let createdTaskIds: string[] = []
+
+  beforeEach(() => {
+    // Login as owner before each test
+    cy.loginAsOwner()
+
+    // Visit tasks list page
+    tasks.visitList()
+    tasks.waitForList()
+  })
+
+  afterEach(() => {
+    // Cleanup: Delete any tasks created during tests
+    if (createdTaskIds.length > 0) {
+      cy.window().then((win) => {
+        const teamId = win.localStorage.getItem('activeTeamId')
+        createdTaskIds.forEach((id) => {
+          cy.request({
+            method: 'DELETE',
+            url: `/api/v1/tasks/${id}`,
+            headers: {
+              'Content-Type': 'application/json',
+              'x-team-id': teamId || ''
+            },
+            failOnStatusCode: false
+          })
+        })
+        createdTaskIds = []
+      })
+    }
+  })
+
+  // ============================================================
+  // TASKS_CRUD_001: CREATE
+  // ============================================================
+  describe('TASKS_CRUD_001: Create Task', { tags: '@TASKS_CRUD_001' }, () => {
+    it('should create a new task with minimal data', () => {
+      const taskData: TaskFormData = {
+        title: `Test Task ${Date.now()}`
+      }
+
+      // Navigate to create form
+      tasks.clickAdd()
+      tasks.waitForForm()
+
+      // Fill and submit form
+      tasks.fillTaskForm(taskData)
+      tasks.submitForm()
+
+      // Should redirect to list and show new task
+      tasks.waitForList()
+      tasks.assertTaskInList(taskData.title)
+    })
+
+    it('should create a new task with all fields', () => {
+      const taskData: TaskFormData = {
+        title: `Full Task ${Date.now()}`,
+        description: 'This is a complete task with all fields filled',
+        status: 'in-progress',
+        priority: 'high'
+      }
+
+      tasks.clickAdd()
+      tasks.waitForForm()
+      tasks.fillTaskForm(taskData)
+      tasks.submitForm()
+
+      tasks.waitForList()
+      tasks.assertTaskInList(taskData.title)
+    })
+
+    it('should show validation error for empty title', () => {
+      tasks.clickAdd()
+      tasks.waitForForm()
+
+      // Try to submit without filling title
+      tasks.submitForm()
+
+      // Form should still be visible (not submitted)
+      tasks.assertFormVisible()
+    })
+  })
+
+  // ============================================================
+  // TASKS_CRUD_002: READ
+  // ============================================================
+  describe('TASKS_CRUD_002: Read/View Task', { tags: '@TASKS_CRUD_002' }, () => {
+    let testTaskId: string
+
+    beforeEach(() => {
+      // Create a test task via API
+      cy.createTask({
+        title: `Read Test Task ${Date.now()}`,
+        description: 'Task for testing read operations',
+        status: 'todo',
+        priority: 'medium'
+      }).then((response) => {
+        if (response.status === 201) {
+          testTaskId = response.body.data.id
+          createdTaskIds.push(testTaskId)
+        }
+      })
+    })
+
+    it('should display task in list', () => {
+      // Refresh list to see new task
+      tasks.visitList()
+      tasks.waitForList()
+
+      // Task should be visible in list
+      cy.get(tasks.selectors.rowGeneric).should('exist')
+    })
+
+    it('should navigate to task detail page', () => {
+      cy.then(() => {
+        tasks.clickRow(testTaskId)
+        tasks.waitForDetail()
+
+        // Should be on detail page
+        cy.url().should('include', `/dashboard/tasks/${testTaskId}`)
+      })
+    })
+
+    it('should display task details correctly', () => {
+      cy.then(() => {
+        tasks.visitDetail(testTaskId)
+        tasks.waitForDetail()
+
+        // Verify task content is displayed
+        cy.contains('Read Test Task').should('be.visible')
+      })
+    })
+  })
+
+  // ============================================================
+  // TASKS_CRUD_003: UPDATE
+  // ============================================================
+  describe('TASKS_CRUD_003: Update Task', { tags: '@TASKS_CRUD_003' }, () => {
+    let testTaskId: string
+    let originalTitle: string
+
+    beforeEach(() => {
+      originalTitle = `Update Test Task ${Date.now()}`
+      // Create a test task via API
+      cy.createTask({
+        title: originalTitle,
+        description: 'Task for testing update operations',
+        status: 'todo',
+        priority: 'low'
+      }).then((response) => {
+        if (response.status === 201) {
+          testTaskId = response.body.data.id
+          createdTaskIds.push(testTaskId)
+        }
+      })
+    })
+
+    it('should update task title', () => {
+      const newTitle = `Updated Task ${Date.now()}`
+
+      cy.then(() => {
+        // Navigate to edit page
+        tasks.visitEdit(testTaskId)
+        tasks.waitForForm()
+
+        // Update title
+        tasks.fillTextField('title', newTitle)
+        tasks.submitForm()
+
+        // Verify update
+        tasks.waitForList()
+        tasks.assertTaskInList(newTitle)
+        tasks.assertTaskNotInList(originalTitle)
+      })
+    })
+
+    it('should update task status', () => {
+      cy.then(() => {
+        tasks.visitEdit(testTaskId)
+        tasks.waitForForm()
+
+        // Change status
+        tasks.selectOption('status', 'done')
+        tasks.submitForm()
+
+        tasks.waitForList()
+        // Task should now show as done
+        tasks.assertTaskInList(originalTitle)
+      })
+    })
+
+    it('should update task priority', () => {
+      cy.then(() => {
+        tasks.visitEdit(testTaskId)
+        tasks.waitForForm()
+
+        // Change priority
+        tasks.selectOption('priority', 'urgent')
+        tasks.submitForm()
+
+        tasks.waitForList()
+        tasks.assertTaskInList(originalTitle)
+      })
+    })
+  })
+
+  // ============================================================
+  // TASKS_CRUD_004: DELETE
+  // ============================================================
+  describe('TASKS_CRUD_004: Delete Task', { tags: '@TASKS_CRUD_004' }, () => {
+    let testTaskId: string
+    let taskTitle: string
+
+    beforeEach(() => {
+      taskTitle = `Delete Test Task ${Date.now()}`
+      // Create a test task via API
+      cy.createTask({
+        title: taskTitle,
+        description: 'Task for testing delete operations',
+        status: 'todo',
+        priority: 'medium'
+      }).then((response) => {
+        if (response.status === 201) {
+          testTaskId = response.body.data.id
+          // Don't add to createdTaskIds since we're testing delete
+        }
+      })
+    })
+
+    it('should delete task from detail page', () => {
+      cy.then(() => {
+        // Navigate to detail page
+        tasks.visitDetail(testTaskId)
+        tasks.waitForDetail()
+
+        // Click delete and confirm
+        tasks.clickDelete()
+        tasks.confirmDelete()
+
+        // Should redirect to list
+        tasks.waitForList()
+
+        // Task should not be in list
+        tasks.assertTaskNotInList(taskTitle)
+      })
+    })
+
+    it('should cancel delete operation', () => {
+      cy.then(() => {
+        tasks.visitDetail(testTaskId)
+        tasks.waitForDetail()
+
+        // Click delete but cancel
+        tasks.clickDelete()
+        tasks.cancelDelete()
+
+        // Should still be on detail page
+        cy.url().should('include', `/dashboard/tasks/${testTaskId}`)
+
+        // Add to cleanup
+        createdTaskIds.push(testTaskId)
+      })
+    })
+  })
+
+  // ============================================================
+  // TASKS_CRUD_005: FILTER
+  // ============================================================
+  describe('TASKS_CRUD_005: Filter Tasks', { tags: '@TASKS_CRUD_005' }, () => {
+    beforeEach(() => {
+      // Create tasks with different statuses
+      const statuses = ['todo', 'in-progress', 'done']
+      const priorities = ['low', 'medium', 'high']
+
+      statuses.forEach((status, index) => {
+        cy.createTask({
+          title: `Filter Test ${status} ${Date.now()}`,
+          status: status,
+          priority: priorities[index]
+        }).then((response) => {
+          if (response.status === 201) {
+            createdTaskIds.push(response.body.data.id)
+          }
+        })
+      })
+
+      // Refresh list to see new tasks
+      cy.reload()
+      tasks.waitForList()
+    })
+
+    it('should filter tasks by status', () => {
+      // Filter by "todo" status
+      tasks.filterByStatus('todo')
+
+      // Wait for filter to apply
+      cy.wait(500)
+
+      // Should show only todo tasks
+      cy.get(tasks.selectors.rowGeneric).each(($row) => {
+        cy.wrap($row).should('contain.text', 'todo')
+      })
+    })
+
+    it('should filter tasks by priority', () => {
+      // Filter by "high" priority
+      tasks.filterByPriority('high')
+
+      // Wait for filter to apply
+      cy.wait(500)
+
+      // Should show only high priority tasks
+      cy.get(tasks.selectors.rowGeneric).each(($row) => {
+        cy.wrap($row).should('contain.text', 'high')
+      })
+    })
+
+    it('should clear filters', () => {
+      // Apply filter
+      tasks.filterByStatus('todo')
+      cy.wait(500)
+
+      // Clear filter
+      tasks.clearStatusFilter()
+      cy.wait(500)
+
+      // Should show all tasks again
+      cy.get(tasks.selectors.rowGeneric).should('have.length.at.least', 3)
+    })
+  })
+
+  // ============================================================
+  // TASKS_CRUD_006: SEARCH
+  // ============================================================
+  describe('TASKS_CRUD_006: Search Tasks', { tags: '@TASKS_CRUD_006' }, () => {
+    const searchTerm = `Searchable${Date.now()}`
+
+    beforeEach(() => {
+      // Create a task with unique searchable term
+      cy.createTask({
+        title: `${searchTerm} Task`,
+        description: 'Task for testing search',
+        status: 'todo',
+        priority: 'medium'
+      }).then((response) => {
+        if (response.status === 201) {
+          createdTaskIds.push(response.body.data.id)
+        }
+      })
+
+      // Create another task without the search term
+      cy.createTask({
+        title: `Regular Task ${Date.now()}`,
+        description: 'Another task',
+        status: 'todo',
+        priority: 'low'
+      }).then((response) => {
+        if (response.status === 201) {
+          createdTaskIds.push(response.body.data.id)
+        }
+      })
+
+      // Refresh list
+      cy.reload()
+      tasks.waitForList()
+    })
+
+    it('should search tasks by title', () => {
+      // Search for the unique term
+      tasks.search(searchTerm)
+
+      // Wait for search results
+      cy.wait(500)
+
+      // Should find the matching task
+      tasks.assertTaskInList(searchTerm)
+    })
+
+    it('should show no results for non-matching search', () => {
+      // Search for something that doesn't exist
+      tasks.search('NonExistentTaskXYZ123')
+
+      // Wait for search
+      cy.wait(500)
+
+      // Should show no results or empty state
+      cy.get(tasks.selectors.rowGeneric).should('have.length', 0)
+    })
+
+    it('should clear search', () => {
+      // Apply search
+      tasks.search(searchTerm)
+      cy.wait(500)
+
+      // Clear search
+      tasks.clearSearch()
+      cy.wait(500)
+
+      // Should show all tasks
+      cy.get(tasks.selectors.rowGeneric).should('have.length.at.least', 2)
+    })
+  })
+})

package/dist/templates/contents/themes/starter/tests/cypress/src/components/DevKeyringPOM.ts

@@ -0,0 +1,160 @@
+/**
+ * DevKeyringPOM - Page Object Model for Development Keyring
+ *
+ * POM for the development keyring (test credential selector).
+ * This component allows quick switching between test users in development mode.
+ *
+ * NOTE: DevKeyring only FILLS the login form with credentials.
+ * You must still submit the form to complete login.
+ *
+ * IMPORTANT: Always use email-based methods (selectUserByEmail, quickLoginByEmail)
+ * to make tests resilient to user order changes in the DevKeyring config.
+ *
+ * @version 3.0 - Uses centralized selectors from cySelector()
+ */
+import { BasePOM } from '../core/BasePOM'
+import { cySelector } from '../selectors'
+
+export class DevKeyringPOM extends BasePOM {
+  /**
+   * Selectors using centralized cySelector()
+   */
+  get selectors() {
+    return {
+      container: cySelector('auth.devKeyring.container'),
+      trigger: cySelector('auth.devKeyring.trigger'),
+      content: cySelector('auth.devKeyring.content'),
+      // Prefix selector for all user items (cySelector doesn't support prefix matching)
+      userItem: '[data-cy^="devkeyring-user-"]',
+      userByIndex: (index: number) => cySelector('auth.devKeyring.user', { index }),
+      // Login form selectors (used after filling credentials)
+      loginSubmit: cySelector('auth.login.submit'),
+      loginEmail: '#email',
+      loginPassword: '#password',
+    }
+  }
+
+  /**
+   * Factory method - creates a new instance
+   */
+  static create(): DevKeyringPOM {
+    return new DevKeyringPOM()
+  }
+
+  // ============================================
+  // Validation Methods
+  // ============================================
+
+  /**
+   * Validate keyring container is visible
+   */
+  validateVisible(): this {
+    cy.get(this.selectors.container).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate keyring is not visible (production mode)
+   */
+  validateNotVisible(): this {
+    cy.get(this.selectors.container).should('not.exist')
+    return this
+  }
+
+  // ============================================
+  // Dropdown Methods
+  // ============================================
+
+  /**
+   * Open the keyring dropdown
+   */
+  open(): this {
+    cy.get(this.selectors.trigger).click()
+    cy.get(this.selectors.content).should('be.visible')
+    return this
+  }
+
+  /**
+   * Close the keyring dropdown
+   */
+  close(): this {
+    cy.get('body').click(0, 0)
+    cy.get(this.selectors.content).should('not.be.visible')
+    return this
+  }
+
+  // ============================================
+  // User Selection Methods
+  // ============================================
+
+  /**
+   * Select a user by email (fills the form, does NOT submit)
+   */
+  selectUserByEmail(email: string): this {
+    this.open()
+    cy.get(this.selectors.userItem).contains(email).click()
+    // Wait for form to be filled
+    cy.get(this.selectors.loginEmail).should('have.value', email)
+    return this
+  }
+
+  /**
+   * Submit the login form after credentials are filled
+   */
+  submitLogin(): this {
+    cy.get(this.selectors.loginSubmit).click()
+    return this
+  }
+
+  /**
+   * Quick login with a specific user by email (fills form AND submits)
+   * This is the preferred method for login as it's resilient to user order changes.
+   */
+  quickLoginByEmail(email: string): this {
+    // 1. Select user by email (opens dropdown + fills form)
+    this.selectUserByEmail(email)
+
+    // 2. Submit the login form
+    this.submitLogin()
+
+    // 3. Wait for login to complete
+    cy.url().should('include', '/dashboard', { timeout: 10000 })
+
+    return this
+  }
+
+  // ============================================
+  // User Validation Methods
+  // ============================================
+
+  /**
+   * Validate the number of available users
+   */
+  validateUserCount(count: number): this {
+    this.open()
+    cy.get(this.selectors.userItem).should('have.length', count)
+    return this
+  }
+
+  /**
+   * Validate a user exists in the keyring
+   */
+  validateUserExists(email: string): this {
+    this.open()
+    cy.get(this.selectors.userItem).contains(email).should('exist')
+    return this
+  }
+
+  /**
+   * Get all user emails from the keyring
+   */
+  getUserEmails(): Cypress.Chainable<string[]> {
+    this.open()
+    return cy.get(this.selectors.userItem)
+      .then($elements => {
+        return Cypress._.map($elements, el => el.innerText.trim())
+      })
+  }
+}
+
+export default DevKeyringPOM