@nextsparkjs/theme-productivity 0.1.0-beta.19 → 0.1.0-beta.20

package/tests/cypress/e2e/ui/kanban/kanban-columns.cy.ts

@@ -0,0 +1,243 @@
+/// <reference types="cypress" />
+
+/**
+ * Kanban Columns (Lists) - Owner Role Tests
+ *
+ * Tests for managing columns/lists on the Kanban board.
+ * All selectors follow the pattern: lists-{component}-{detail}
+ *
+ * @see test/cypress/src/classes/themes/productivity/components/KanbanPOM.ts
+ */
+
+import { KanbanPOM } from '../../../src/components/KanbanPOM'
+import { BoardsPOM } from '../../../src/components/BoardsPOM'
+import { loginAsProductivityOwner } from '../../../src/session-helpers'
+
+describe('Kanban Columns (Lists) - Owner Role', () => {
+  let testBoardId: string
+
+  before(() => {
+    // Create a board for all kanban tests
+    loginAsProductivityOwner()
+    BoardsPOM.visitList()
+    BoardsPOM.waitForListLoad()
+
+    const timestamp = Date.now()
+    const boardName = `Kanban Test Board ${timestamp}`
+
+    BoardsPOM.clickCreate()
+    BoardsPOM.waitForFormLoad()
+    BoardsPOM.fillName(boardName)
+    BoardsPOM.submitForm()
+
+    // Extract board ID from URL
+    cy.url().then((url) => {
+      const match = url.match(/\/boards\/([a-z0-9_-]+)/)
+      if (match) {
+        testBoardId = match[1]
+      }
+    })
+  })
+
+  beforeEach(() => {
+    loginAsProductivityOwner()
+    cy.then(() => {
+      KanbanPOM.visitBoard(testBoardId)
+      KanbanPOM.waitForBoardLoad()
+    })
+  })
+
+  after(() => {
+    // Cleanup: Delete the test board
+    loginAsProductivityOwner()
+    cy.then(() => {
+      if (testBoardId) {
+        BoardsPOM.visitEdit(testBoardId)
+        BoardsPOM.waitForFormLoad()
+        BoardsPOM.confirmDelete()
+        BoardsPOM.deleteFromEdit()
+      }
+    })
+  })
+
+  describe('CREATE - Add new columns', () => {
+    it('KANBAN_COLUMNS_CREATE_001: should add a new column with name', () => {
+      const timestamp = Date.now()
+      const columnName = `New Column ${timestamp}`
+
+      // Click add column button
+      KanbanPOM.clickAddColumn()
+
+      // Fill column name
+      KanbanPOM.fillColumnName(columnName)
+
+      // Submit
+      KanbanPOM.submitAddColumn()
+
+      // Verify column was created
+      KanbanPOM.assertBoardContains(columnName)
+
+      cy.log('✅ Created new column successfully')
+    })
+
+    it('KANBAN_COLUMNS_CREATE_002: should create multiple columns', () => {
+      const timestamp = Date.now()
+      const columns = ['To Do', 'In Progress', 'Done'].map((name) => `${name} ${timestamp}`)
+
+      // Create each column
+      columns.forEach((columnName) => {
+        KanbanPOM.clickAddColumn()
+        KanbanPOM.fillColumnName(columnName)
+        KanbanPOM.submitAddColumn()
+        cy.wait(500) // Wait for creation to complete
+      })
+
+      // Verify all columns exist
+      columns.forEach((columnName) => {
+        KanbanPOM.assertBoardContains(columnName)
+      })
+
+      cy.log('✅ Created multiple columns successfully')
+    })
+
+    it('KANBAN_COLUMNS_CREATE_003: should cancel column creation', () => {
+      const timestamp = Date.now()
+      const columnName = `Cancelled Column ${timestamp}`
+
+      // Click add column button
+      KanbanPOM.clickAddColumn()
+
+      // Fill column name
+      KanbanPOM.fillColumnName(columnName)
+
+      // Press Escape to cancel
+      cy.get(KanbanPOM.selectors.columnFieldName).type('{esc}')
+
+      // Wait a moment
+      cy.wait(500)
+
+      // Column should not exist
+      cy.contains(columnName).should('not.exist')
+
+      cy.log('✅ Column creation cancelled successfully')
+    })
+  })
+
+  describe('READ - View columns', () => {
+    it('KANBAN_COLUMNS_READ_001: should display all columns', () => {
+      // Board should be visible
+      KanbanPOM.validateBoardVisible()
+
+      // Should have at least the add column button
+      cy.get(KanbanPOM.selectors.addColumn).should('be.visible')
+
+      cy.log('✅ Kanban board displays correctly')
+    })
+
+    it('KANBAN_COLUMNS_READ_002: should show column card count', () => {
+      // Check if columns have card counts displayed
+      cy.get('[data-cy^="lists-column-"]').first().then(($column) => {
+        // The column header should show count
+        cy.wrap($column).find('.text-xs').should('exist')
+      })
+
+      cy.log('✅ Column card counts are visible')
+    })
+  })
+
+  describe('UPDATE - Rename columns', () => {
+    let testColumnId: string
+
+    beforeEach(() => {
+      // Create a column to update
+      const timestamp = Date.now()
+      const columnName = `Update Test ${timestamp}`
+
+      KanbanPOM.createColumn(columnName)
+      cy.wait(500)
+
+      // Get the column ID
+      cy.contains('[data-cy^="lists-column-"]', columnName).then(($column) => {
+        const dataCy = $column.attr('data-cy')
+        if (dataCy) {
+          testColumnId = dataCy.replace('lists-column-', '')
+        }
+      })
+    })
+
+    it('KANBAN_COLUMNS_UPDATE_001: should rename column by clicking title', () => {
+      const updatedName = `Renamed Column ${Date.now()}`
+
+      cy.then(() => {
+        // Click on column title to edit
+        KanbanPOM.clickColumnTitle(testColumnId)
+
+        // Wait for input to appear
+        cy.wait(300)
+
+        // Type new name and submit
+        cy.get('input').last().clear().type(`${updatedName}{enter}`)
+
+        // Verify name changed
+        cy.wait(500)
+        cy.contains(updatedName).should('be.visible')
+      })
+
+      cy.log('✅ Column renamed successfully')
+    })
+
+    it('KANBAN_COLUMNS_UPDATE_002: should rename column via menu', () => {
+      const updatedName = `Menu Renamed ${Date.now()}`
+
+      cy.then(() => {
+        // Open column menu
+        KanbanPOM.openColumnMenu(testColumnId)
+
+        // Click rename option
+        cy.get('[role="menuitem"]').contains('Rename').click()
+
+        // Wait for input to appear
+        cy.wait(300)
+
+        // Type new name and submit
+        cy.get('input').last().clear().type(`${updatedName}{enter}`)
+
+        // Verify name changed
+        cy.wait(500)
+        cy.contains(updatedName).should('be.visible')
+      })
+
+      cy.log('✅ Column renamed via menu successfully')
+    })
+  })
+
+  describe('DELETE - Remove columns', () => {
+    it('KANBAN_COLUMNS_DELETE_001: should delete column via menu', () => {
+      // Create a column to delete
+      const timestamp = Date.now()
+      const columnName = `Delete Test ${timestamp}`
+
+      KanbanPOM.createColumn(columnName)
+      cy.wait(500)
+
+      // Get the column ID
+      cy.contains('[data-cy^="lists-column-"]', columnName).then(($column) => {
+        const dataCy = $column.attr('data-cy')
+        if (dataCy) {
+          const columnId = dataCy.replace('lists-column-', '')
+
+          // Delete the column
+          KanbanPOM.clickColumnDelete(columnId)
+
+          // Wait for deletion
+          cy.wait(500)
+
+          // Verify column is gone
+          cy.contains(columnName).should('not.exist')
+        }
+      })
+
+      cy.log('✅ Column deleted successfully')
+    })
+  })
+})

package/tests/cypress/fixtures/blocks.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./blocks.schema.json",
+  "_warning": "AUTO-GENERATED by build-registry.mjs - DO NOT EDIT MANUALLY",
+  "_theme": "productivity",
+  "_totalBlocks": 0,
+  "available": [],
+  "categories": [],
+  "byCategory": {}
+}

package/tests/cypress/fixtures/entities.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "./entities.schema.json",
+  "_warning": "AUTO-GENERATED by build-registry.mjs - DO NOT EDIT MANUALLY",
+  "_theme": "productivity",
+  "entities": {
+    "boards": {
+      "slug": "boards",
+      "singular": "board",
+      "plural": "Boards",
+      "tableName": "boards",
+      "fields": [
+        "name",
+        "description",
+        "color",
+        "archived",
+        "position",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "cards": {
+      "slug": "cards",
+      "singular": "card",
+      "plural": "Cards",
+      "tableName": "cards",
+      "fields": [
+        "title",
+        "description",
+        "position",
+        "dueDate",
+        "priority",
+        "labels",
+        "assigneeId",
+        "listId",
+        "boardId",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    },
+    "lists": {
+      "slug": "lists",
+      "singular": "list",
+      "plural": "Lists",
+      "tableName": "lists",
+      "fields": [
+        "name",
+        "position",
+        "boardId",
+        "createdAt",
+        "updatedAt"
+      ],
+      "filters": [],
+      "source": "theme"
+    }
+  }
+}

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

@@ -0,0 +1,353 @@
+/**
+ * Boards Page Object Model - Entity Testing Convention
+ *
+ * POM for managing boards in the productivity theme.
+ * Follows the pattern: {slug}-{component}-{detail}
+ *
+ * Convention: boards-{component}-{detail}
+ * Examples:
+ *   - boards-page (list page container)
+ *   - boards-create-btn (create button)
+ *   - boards-card-{id} (board card)
+ *   - boards-form (form container)
+ *   - boards-field-name (name input)
+ *
+ * @see test/cypress/fixtures/themes/productivity/entities.json
+ */
+
+import entitiesConfig from '../../fixtures/entities.json'
+
+// Get boards entity config from JSON
+const boardsEntity = entitiesConfig.entities.boards
+const slug = boardsEntity.slug
+
+/**
+ * Boards Page Object Model
+ *
+ * Uses the entity testing convention for consistent, maintainable selectors.
+ */
+export class BoardsPOM {
+  // ============================================
+  // ENTITY METADATA (from entities.json)
+  // ============================================
+
+  static get entityConfig() {
+    return boardsEntity
+  }
+
+  static get slug() {
+    return slug
+  }
+
+  static get fields() {
+    return boardsEntity.fields
+  }
+
+  // ============================================
+  // SELECTORS
+  // ============================================
+
+  static get selectors() {
+    return {
+      // List Page
+      page: `[data-cy="${slug}-page"]`,
+      createBtn: `[data-cy="${slug}-create-btn"]`,
+      createCard: `[data-cy="${slug}-create-card"]`,
+
+      // Board Cards (dynamic)
+      card: (id: string) => `[data-cy="${slug}-card-${id}"]`,
+      cardMenu: (id: string) => `[data-cy="${slug}-card-menu-${id}"]`,
+      cardEdit: (id: string) => `[data-cy="${slug}-card-edit-${id}"]`,
+      cardArchive: (id: string) => `[data-cy="${slug}-card-archive-${id}"]`,
+      cardDelete: (id: string) => `[data-cy="${slug}-card-delete-${id}"]`,
+
+      // Create Page
+      createPage: `[data-cy="${slug}-create-page"]`,
+
+      // Edit Page
+      editPage: `[data-cy="${slug}-edit-page"]`,
+
+      // Form (shared between create/edit)
+      form: `[data-cy="${slug}-form"]`,
+      fieldName: `[data-cy="${slug}-field-name"]`,
+      fieldDescription: `[data-cy="${slug}-field-description"]`,
+      fieldColor: `[data-cy="${slug}-field-color"]`,
+      fieldArchived: `[data-cy="${slug}-field-archived"]`,
+      formSubmit: `[data-cy="${slug}-form-submit"]`,
+      formCancel: `[data-cy="${slug}-form-cancel"]`,
+      formDelete: `[data-cy="${slug}-form-delete"]`,
+    }
+  }
+
+  // ============================================
+  // LIST PAGE ACTIONS
+  // ============================================
+
+  /**
+   * Visit the boards list page
+   */
+  static visitList() {
+    cy.visit('/dashboard/boards')
+    return this
+  }
+
+  /**
+   * Wait for list page to load
+   */
+  static waitForListLoad() {
+    cy.url().should('include', '/dashboard/boards')
+    cy.get(this.selectors.page, { timeout: 15000 }).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate list page is visible
+   */
+  static validateListPageVisible() {
+    cy.get(this.selectors.page).should('be.visible')
+    return this
+  }
+
+  /**
+   * Click create button
+   */
+  static clickCreate() {
+    cy.get(this.selectors.createBtn).click()
+    return this
+  }
+
+  /**
+   * Click on a board card by ID
+   */
+  static clickCard(id: string) {
+    cy.get(this.selectors.card(id)).click()
+    return this
+  }
+
+  /**
+   * Open board card menu
+   */
+  static openCardMenu(id: string) {
+    cy.get(this.selectors.cardMenu(id)).click({ force: true })
+    return this
+  }
+
+  /**
+   * Click edit from card menu
+   */
+  static clickCardEdit(id: string) {
+    this.openCardMenu(id)
+    cy.get(this.selectors.cardEdit(id)).click()
+    return this
+  }
+
+  /**
+   * Click archive from card menu
+   */
+  static clickCardArchive(id: string) {
+    this.openCardMenu(id)
+    cy.get(this.selectors.cardArchive(id)).click()
+    return this
+  }
+
+  /**
+   * Click delete from card menu
+   */
+  static clickCardDelete(id: string) {
+    this.openCardMenu(id)
+    cy.get(this.selectors.cardDelete(id)).click()
+    return this
+  }
+
+  /**
+   * Get board card count
+   */
+  static getBoardCount(): Cypress.Chainable<number> {
+    return cy.get(`[data-cy^="${slug}-card-"]`).its('length')
+  }
+
+  // ============================================
+  // FORM PAGE ACTIONS
+  // ============================================
+
+  /**
+   * Visit create form
+   */
+  static visitCreate() {
+    cy.visit('/dashboard/boards/create')
+    return this
+  }
+
+  /**
+   * Visit edit form
+   */
+  static visitEdit(id: string) {
+    cy.visit(`/dashboard/boards/${id}/edit`)
+    return this
+  }
+
+  /**
+   * Wait for form to load
+   */
+  static waitForFormLoad() {
+    cy.get(this.selectors.form, { timeout: 10000 }).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate form is visible
+   */
+  static validateFormVisible() {
+    cy.get(this.selectors.form).should('be.visible')
+    return this
+  }
+
+  /**
+   * Fill the name field
+   */
+  static fillName(name: string) {
+    cy.get(this.selectors.fieldName).clear().type(name)
+    return this
+  }
+
+  /**
+   * Fill the description field
+   */
+  static fillDescription(description: string) {
+    cy.get(this.selectors.fieldDescription).clear().type(description)
+    return this
+  }
+
+  /**
+   * Select a color
+   */
+  static selectColor(color: string) {
+    cy.get(this.selectors.fieldColor).click()
+    cy.get(`[data-value="${color}"]`).click()
+    return this
+  }
+
+  /**
+   * Toggle archived status
+   */
+  static toggleArchived() {
+    cy.get(this.selectors.fieldArchived).click()
+    return this
+  }
+
+  /**
+   * Submit the form
+   */
+  static submitForm() {
+    cy.get(this.selectors.formSubmit).click()
+    return this
+  }
+
+  /**
+   * Cancel the form
+   */
+  static cancelForm() {
+    cy.get(this.selectors.formCancel).click()
+    return this
+  }
+
+  /**
+   * Delete from edit page
+   */
+  static deleteFromEdit() {
+    cy.get(this.selectors.formDelete).click()
+    return this
+  }
+
+  /**
+   * Fill board form with data
+   */
+  static fillBoardForm(data: { name?: string; description?: string; color?: string }) {
+    if (data.name) {
+      this.fillName(data.name)
+    }
+    if (data.description) {
+      this.fillDescription(data.description)
+    }
+    if (data.color) {
+      this.selectColor(data.color)
+    }
+    return this
+  }
+
+  /**
+   * Create a board with given data
+   */
+  static createBoard(data: { name: string; description?: string; color?: string }) {
+    this.visitCreate()
+    this.waitForFormLoad()
+    this.fillBoardForm(data)
+    this.submitForm()
+    return this
+  }
+
+  // ============================================
+  // ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert board exists in list by name
+   */
+  static assertBoardInList(name: string) {
+    cy.contains(name).should('be.visible')
+    return this
+  }
+
+  /**
+   * Assert board does not exist in list
+   */
+  static assertBoardNotInList(name: string) {
+    cy.contains(name).should('not.exist')
+    return this
+  }
+
+  /**
+   * Assert current URL matches boards list
+   */
+  static assertOnListPage() {
+    cy.url().should('include', '/dashboard/boards')
+    cy.url().should('not.include', '/create')
+    cy.url().should('not.include', '/edit')
+    return this
+  }
+
+  /**
+   * Assert current URL is create page
+   */
+  static assertOnCreatePage() {
+    cy.url().should('include', '/dashboard/boards/create')
+    return this
+  }
+
+  /**
+   * Assert current URL is edit page
+   */
+  static assertOnEditPage(id: string) {
+    cy.url().should('include', `/dashboard/boards/${id}/edit`)
+    return this
+  }
+
+  /**
+   * Assert form field has value
+   */
+  static assertFieldValue(field: 'name' | 'description', expectedValue: string) {
+    const selector = field === 'name' ? this.selectors.fieldName : this.selectors.fieldDescription
+    cy.get(selector).should('have.value', expectedValue)
+    return this
+  }
+
+  /**
+   * Confirm deletion dialog
+   */
+  static confirmDelete() {
+    cy.on('window:confirm', () => true)
+    return this
+  }
+}
+
+export default BoardsPOM