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

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

@@ -0,0 +1,399 @@
+/**
+ * Kanban Board Page Object Model - Entity Testing Convention
+ *
+ * POM for the Kanban board view with columns (lists) and cards.
+ * Follows the pattern: {slug}-{component}-{detail}
+ *
+ * Convention:
+ *   - lists-{component}-{detail} for columns
+ *   - cards-{component}-{detail} for cards
+ *
+ * Examples:
+ *   - kanban-board (board container)
+ *   - lists-column-{id} (column)
+ *   - lists-add-column (add column button)
+ *   - cards-item-{id} (card)
+ *
+ * @see test/cypress/fixtures/themes/productivity/entities.json
+ */
+
+import entitiesConfig from '../../fixtures/entities.json'
+
+// Get lists and cards entity configs
+const listsEntity = entitiesConfig.entities.lists
+const cardsEntity = entitiesConfig.entities.cards
+
+/**
+ * Kanban Board Page Object Model
+ *
+ * Handles interactions with the Kanban board, columns (lists), and cards.
+ */
+export class KanbanPOM {
+  // ============================================
+  // ENTITY METADATA
+  // ============================================
+
+  static get listsConfig() {
+    return listsEntity
+  }
+
+  static get cardsConfig() {
+    return cardsEntity
+  }
+
+  // ============================================
+  // SELECTORS
+  // ============================================
+
+  static get selectors() {
+    return {
+      // Board Container
+      board: '[data-cy="kanban-board"]',
+
+      // Column (List) Selectors
+      addColumn: '[data-cy="lists-add-column"]',
+      addColumnForm: '[data-cy="lists-add-form"]',
+      columnFieldName: '[data-cy="lists-field-name"]',
+      columnFormSubmit: '[data-cy="lists-form-submit"]',
+
+      // Dynamic column selectors
+      column: (id: string) => `[data-cy="lists-column-${id}"]`,
+      columnHeader: (id: string) => `[data-cy="lists-column-header-${id}"]`,
+      columnTitle: (id: string) => `[data-cy="lists-column-title-${id}"]`,
+      columnMenuTrigger: (id: string) => `[data-cy="lists-column-menu-trigger-${id}"]`,
+      columnMenu: (id: string) => `[data-cy="lists-column-menu-${id}"]`,
+
+      // Column card actions
+      addCard: (listId: string) => `[data-cy="lists-add-card-${listId}"]`,
+      addCardForm: (listId: string) => `[data-cy="cards-add-form-${listId}"]`,
+      cardFieldTitle: (listId: string) => `[data-cy="cards-field-title-${listId}"]`,
+      cardFormSubmit: (listId: string) => `[data-cy="cards-form-submit-${listId}"]`,
+
+      // Card Selectors
+      card: (id: string) => `[data-cy="cards-item-${id}"]`,
+      allCards: '[data-cy^="cards-item-"]',
+
+      // Generic column selector
+      allColumns: '[data-cy^="lists-column-"]',
+    }
+  }
+
+  // ============================================
+  // BOARD NAVIGATION
+  // ============================================
+
+  /**
+   * Visit a specific board by ID
+   */
+  static visitBoard(boardId: string) {
+    cy.visit(`/dashboard/boards/${boardId}`)
+    return this
+  }
+
+  /**
+   * Wait for board to load
+   */
+  static waitForBoardLoad() {
+    cy.get(this.selectors.board, { timeout: 15000 }).should('be.visible')
+    return this
+  }
+
+  /**
+   * Validate board is visible
+   */
+  static validateBoardVisible() {
+    cy.get(this.selectors.board).should('be.visible')
+    return this
+  }
+
+  // ============================================
+  // COLUMN (LIST) ACTIONS
+  // ============================================
+
+  /**
+   * Click add column button
+   */
+  static clickAddColumn() {
+    cy.get(this.selectors.addColumn).click()
+    return this
+  }
+
+  /**
+   * Fill column name in add form
+   */
+  static fillColumnName(name: string) {
+    cy.get(this.selectors.columnFieldName).clear().type(name)
+    return this
+  }
+
+  /**
+   * Submit add column form
+   */
+  static submitAddColumn() {
+    cy.get(this.selectors.columnFormSubmit).click()
+    return this
+  }
+
+  /**
+   * Create a new column with given name
+   */
+  static createColumn(name: string) {
+    this.clickAddColumn()
+    this.fillColumnName(name)
+    this.submitAddColumn()
+    return this
+  }
+
+  /**
+   * Get column by ID
+   */
+  static getColumn(id: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get(this.selectors.column(id))
+  }
+
+  /**
+   * Get column header
+   */
+  static getColumnHeader(id: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get(this.selectors.columnHeader(id))
+  }
+
+  /**
+   * Click on column title to rename
+   */
+  static clickColumnTitle(id: string) {
+    cy.get(this.selectors.columnTitle(id)).click()
+    return this
+  }
+
+  /**
+   * Open column menu
+   */
+  static openColumnMenu(id: string) {
+    cy.get(this.selectors.columnMenuTrigger(id)).click()
+    return this
+  }
+
+  /**
+   * Click rename in column menu
+   */
+  static clickColumnRename(id: string) {
+    this.openColumnMenu(id)
+    cy.get('[role="menuitem"]').contains('Rename').click()
+    return this
+  }
+
+  /**
+   * Click delete in column menu
+   */
+  static clickColumnDelete(id: string) {
+    this.openColumnMenu(id)
+    cy.get('[role="menuitem"]').contains('Delete').click()
+    return this
+  }
+
+  /**
+   * Get all columns
+   */
+  static getAllColumns(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get(this.selectors.allColumns)
+  }
+
+  /**
+   * Get column count
+   */
+  static getColumnCount(): Cypress.Chainable<number> {
+    return cy.get(this.selectors.allColumns).its('length')
+  }
+
+  // ============================================
+  // CARD ACTIONS
+  // ============================================
+
+  /**
+   * Click add card button in a column
+   */
+  static clickAddCard(listId: string) {
+    cy.get(this.selectors.addCard(listId)).click()
+    return this
+  }
+
+  /**
+   * Fill card title in add form
+   */
+  static fillCardTitle(listId: string, title: string) {
+    cy.get(this.selectors.cardFieldTitle(listId)).clear().type(title)
+    return this
+  }
+
+  /**
+   * Submit add card form
+   */
+  static submitAddCard(listId: string) {
+    cy.get(this.selectors.cardFormSubmit(listId)).click()
+    return this
+  }
+
+  /**
+   * Create a new card in a column
+   */
+  static createCard(listId: string, title: string) {
+    this.clickAddCard(listId)
+    this.fillCardTitle(listId, title)
+    this.submitAddCard(listId)
+    return this
+  }
+
+  /**
+   * Get card by ID
+   */
+  static getCard(id: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get(this.selectors.card(id))
+  }
+
+  /**
+   * Click on a card to open modal
+   */
+  static clickCard(id: string) {
+    cy.get(this.selectors.card(id)).click()
+    return this
+  }
+
+  /**
+   * Get all cards
+   */
+  static getAllCards(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get(this.selectors.allCards)
+  }
+
+  /**
+   * Get card count
+   */
+  static getCardCount(): Cypress.Chainable<number> {
+    return cy.get(this.selectors.allCards).its('length')
+  }
+
+  /**
+   * Get cards in a specific column
+   */
+  static getCardsInColumn(listId: string): Cypress.Chainable<JQuery<HTMLElement>> {
+    return cy.get(this.selectors.column(listId)).find('[data-cy^="cards-item-"]')
+  }
+
+  /**
+   * Get card count in a specific column
+   */
+  static getCardCountInColumn(listId: string): Cypress.Chainable<number> {
+    return this.getCardsInColumn(listId).its('length')
+  }
+
+  // ============================================
+  // DRAG & DROP (Basic support)
+  // ============================================
+
+  /**
+   * Drag a card to a different column
+   * Note: This is a basic implementation. For complex drag-drop, use specialized plugins.
+   */
+  static dragCardToColumn(cardId: string, targetColumnId: string) {
+    const card = this.selectors.card(cardId)
+    const targetColumn = this.selectors.column(targetColumnId)
+
+    cy.get(card).then(($card) => {
+      cy.get(targetColumn).then(($column) => {
+        const cardRect = $card[0].getBoundingClientRect()
+        const columnRect = $column[0].getBoundingClientRect()
+
+        // Use native drag events
+        cy.get(card)
+          .trigger('mousedown', { which: 1, force: true })
+          .trigger('mousemove', {
+            clientX: columnRect.left + columnRect.width / 2,
+            clientY: columnRect.top + 100,
+            force: true,
+          })
+          .trigger('mouseup', { force: true })
+      })
+    })
+
+    return this
+  }
+
+  // ============================================
+  // ASSERTIONS
+  // ============================================
+
+  /**
+   * Assert column exists
+   */
+  static assertColumnExists(id: string) {
+    cy.get(this.selectors.column(id)).should('exist')
+    return this
+  }
+
+  /**
+   * Assert column does not exist
+   */
+  static assertColumnNotExists(id: string) {
+    cy.get(this.selectors.column(id)).should('not.exist')
+    return this
+  }
+
+  /**
+   * Assert column has title
+   */
+  static assertColumnTitle(id: string, title: string) {
+    cy.get(this.selectors.columnTitle(id)).should('contain.text', title)
+    return this
+  }
+
+  /**
+   * Assert card exists
+   */
+  static assertCardExists(id: string) {
+    cy.get(this.selectors.card(id)).should('exist')
+    return this
+  }
+
+  /**
+   * Assert card does not exist
+   */
+  static assertCardNotExists(id: string) {
+    cy.get(this.selectors.card(id)).should('not.exist')
+    return this
+  }
+
+  /**
+   * Assert card is in column
+   */
+  static assertCardInColumn(cardId: string, columnId: string) {
+    cy.get(this.selectors.column(columnId)).find(this.selectors.card(cardId)).should('exist')
+    return this
+  }
+
+  /**
+   * Assert column count
+   */
+  static assertColumnCount(count: number) {
+    cy.get(this.selectors.allColumns).should('have.length', count)
+    return this
+  }
+
+  /**
+   * Assert card count in column
+   */
+  static assertCardCountInColumn(columnId: string, count: number) {
+    this.getCardsInColumn(columnId).should('have.length', count)
+    return this
+  }
+
+  /**
+   * Assert board contains text
+   */
+  static assertBoardContains(text: string) {
+    cy.get(this.selectors.board).should('contain.text', text)
+    return this
+  }
+}
+
+export default KanbanPOM

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

@@ -0,0 +1,9 @@
+/**
+ * Productivity Theme - POM Components Index
+ *
+ * Exports all Page Object Models for the productivity theme.
+ */
+
+export { BoardsPOM } from './BoardsPOM'
+export { KanbanPOM } from './KanbanPOM'
+export { CardsPOM } from './CardsPOM'

package/tests/cypress/src/controllers/BoardsAPIController.js

@@ -0,0 +1,302 @@
+/**
+ * BoardsAPIController - Controller for interacting with the Boards API
+ * Encapsulates all CRUD operations for /api/v1/boards endpoints
+ *
+ * Requires:
+ * - API Key with boards:read, boards:write scopes (or superadmin with *)
+ * - x-team-id header for team context
+ */
+class BoardsAPIController {
+  constructor(baseUrl = 'http://localhost:5173', apiKey = null, teamId = null) {
+    this.baseUrl = baseUrl;
+    this.apiKey = apiKey;
+    this.teamId = teamId;
+    this.endpoints = {
+      boards: '/api/v1/boards',
+      boardById: (id) => `/api/v1/boards/${id}`
+    };
+  }
+
+  /**
+   * Set the API key for requests
+   * @param {string} apiKey - Valid API key
+   */
+  setApiKey(apiKey) {
+    this.apiKey = apiKey;
+    return this;
+  }
+
+  /**
+   * Set the team ID for requests
+   * @param {string} teamId - Valid team ID
+   */
+  setTeamId(teamId) {
+    this.teamId = teamId;
+    return this;
+  }
+
+  /**
+   * Get default headers for requests
+   * @param {Object} additionalHeaders - Additional headers
+   * @returns {Object} Complete headers
+   */
+  getHeaders(additionalHeaders = {}) {
+    const headers = {
+      'Content-Type': 'application/json',
+      ...additionalHeaders
+    };
+
+    if (this.apiKey) {
+      headers['Authorization'] = `Bearer ${this.apiKey}`;
+    }
+
+    if (this.teamId) {
+      headers['x-team-id'] = this.teamId;
+    }
+
+    return headers;
+  }
+
+  /**
+   * GET /api/v1/boards - Get list of boards
+   * @param {Object} options - Query options
+   * @param {number} options.page - Page number
+   * @param {number} options.limit - Results per page
+   * @param {boolean} options.archived - Filter by archived status
+   * @param {string} options.search - Search in name/description
+   * @param {Object} options.headers - Additional headers
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  getAll(options = {}) {
+    const { page, limit, archived, search, headers = {} } = options;
+
+    const queryParams = new URLSearchParams();
+    if (page) queryParams.append('page', page);
+    if (limit) queryParams.append('limit', limit);
+    if (archived !== undefined) queryParams.append('archived', archived);
+    if (search) queryParams.append('search', search);
+
+    const url = `${this.baseUrl}${this.endpoints.boards}${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+
+    return cy.request({
+      method: 'GET',
+      url: url,
+      headers: this.getHeaders(headers),
+      failOnStatusCode: false
+    });
+  }
+
+  /**
+   * POST /api/v1/boards - Create new board
+   * @param {Object} boardData - Board data
+   * @param {string} boardData.name - Board name (required)
+   * @param {string} boardData.description - Description (optional)
+   * @param {string} boardData.color - Color: blue, green, purple, orange, red, pink, gray (optional)
+   * @param {Object} options - Additional options
+   * @param {Object} options.headers - Additional headers
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  create(boardData, options = {}) {
+    const { headers = {} } = options;
+
+    return cy.request({
+      method: 'POST',
+      url: `${this.baseUrl}${this.endpoints.boards}`,
+      headers: this.getHeaders(headers),
+      body: boardData,
+      failOnStatusCode: false
+    });
+  }
+
+  /**
+   * GET /api/v1/boards/{id} - Get specific board by ID
+   * @param {string} id - Board ID
+   * @param {Object} options - Additional options
+   * @param {Object} options.headers - Additional headers
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  getById(id, options = {}) {
+    const { headers = {} } = options;
+
+    return cy.request({
+      method: 'GET',
+      url: `${this.baseUrl}${this.endpoints.boardById(id)}`,
+      headers: this.getHeaders(headers),
+      failOnStatusCode: false
+    });
+  }
+
+  /**
+   * PATCH /api/v1/boards/{id} - Update board
+   * @param {string} id - Board ID
+   * @param {Object} updateData - Data to update
+   * @param {string} updateData.name - Board name (optional)
+   * @param {string} updateData.description - Description (optional)
+   * @param {string} updateData.color - Color (optional)
+   * @param {boolean} updateData.archived - Archived status (optional)
+   * @param {Object} options - Additional options
+   * @param {Object} options.headers - Additional headers
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  update(id, updateData, options = {}) {
+    const { headers = {} } = options;
+
+    return cy.request({
+      method: 'PATCH',
+      url: `${this.baseUrl}${this.endpoints.boardById(id)}`,
+      headers: this.getHeaders(headers),
+      body: updateData,
+      failOnStatusCode: false
+    });
+  }
+
+  /**
+   * DELETE /api/v1/boards/{id} - Delete board
+   * @param {string} id - Board ID
+   * @param {Object} options - Additional options
+   * @param {Object} options.headers - Additional headers
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  delete(id, options = {}) {
+    const { headers = {} } = options;
+
+    return cy.request({
+      method: 'DELETE',
+      url: `${this.baseUrl}${this.endpoints.boardById(id)}`,
+      headers: this.getHeaders(headers),
+      failOnStatusCode: false
+    });
+  }
+
+  // ========== SPECIAL METHODS ==========
+
+  /**
+   * PATCH /api/v1/boards/{id} - Archive board
+   * @param {string} id - Board ID
+   * @param {Object} options - Additional options
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  archive(id, options = {}) {
+    return this.update(id, { archived: true }, options);
+  }
+
+  /**
+   * PATCH /api/v1/boards/{id} - Unarchive board
+   * @param {string} id - Board ID
+   * @param {Object} options - Additional options
+   * @returns {Cypress.Chainable} Cypress response
+   */
+  unarchive(id, options = {}) {
+    return this.update(id, { archived: false }, options);
+  }
+
+  // ========== UTILITY METHODS ==========
+
+  /**
+   * Generate random board data for testing
+   * @param {Object} overrides - Specific data to override
+   * @returns {Object} Generated board data
+   */
+  generateRandomData(overrides = {}) {
+    const randomId = Math.random().toString(36).substring(2, 8);
+    const colors = ['blue', 'green', 'purple', 'orange', 'red', 'pink', 'gray'];
+    const boardNames = ['Project Alpha', 'Marketing Campaign', 'Product Launch', 'Sprint Board', 'Roadmap', 'Bug Tracker'];
+
+    return {
+      name: `${boardNames[Math.floor(Math.random() * boardNames.length)]} ${randomId}`,
+      description: `Test board description ${randomId}`,
+      color: colors[Math.floor(Math.random() * colors.length)],
+      ...overrides
+    };
+  }
+
+  /**
+   * Create a test board and return its data
+   * @param {Object} boardData - Board data (optional)
+   * @returns {Cypress.Chainable} Promise resolving with created board data
+   */
+  createTestRecord(boardData = {}) {
+    const testBoardData = this.generateRandomData(boardData);
+
+    return this.create(testBoardData).then((response) => {
+      if (response.status === 201) {
+        return { ...testBoardData, ...response.body.data };
+      }
+      throw new Error(`Failed to create test board: ${response.body?.error || 'Unknown error'}`);
+    });
+  }
+
+  /**
+   * Clean up a test board (delete it)
+   * @param {string} id - Board ID
+   * @returns {Cypress.Chainable} Delete response
+   */
+  cleanupTestRecord(id) {
+    return this.delete(id);
+  }
+
+  // ========== VALIDATION METHODS ==========
+
+  /**
+   * Validate success response structure
+   * @param {Object} response - API response
+   * @param {number} expectedStatus - Expected status code
+   */
+  validateSuccessResponse(response, expectedStatus = 200) {
+    expect(response.status).to.eq(expectedStatus);
+    expect(response.body).to.have.property('success', true);
+    expect(response.body).to.have.property('data');
+  }
+
+  /**
+   * Validate error response structure
+   * @param {Object} response - API response
+   * @param {number} expectedStatus - Expected status code
+   * @param {string} expectedErrorCode - Expected error code (optional)
+   */
+  validateErrorResponse(response, expectedStatus, expectedErrorCode = null) {
+    expect(response.status).to.eq(expectedStatus);
+    expect(response.body).to.have.property('success', false);
+    expect(response.body).to.have.property('error');
+
+    if (expectedErrorCode) {
+      expect(response.body).to.have.property('code', expectedErrorCode);
+    }
+  }
+
+  /**
+   * Validate board object structure
+   * @param {Object} board - Board object
+   */
+  validateObject(board) {
+    // Required system fields
+    expect(board).to.have.property('id');
+    expect(board).to.have.property('createdAt');
+    expect(board).to.have.property('updatedAt');
+
+    // Required entity fields
+    expect(board).to.have.property('name');
+    expect(board.name).to.be.a('string');
+
+    // Optional fields
+    if (board.description !== null && board.description !== undefined) {
+      expect(board.description).to.be.a('string');
+    }
+
+    if (board.color !== null && board.color !== undefined) {
+      expect(board.color).to.be.oneOf(['blue', 'green', 'purple', 'orange', 'red', 'pink', 'gray']);
+    }
+
+    if (board.archived !== null && board.archived !== undefined) {
+      expect(board.archived).to.be.a('boolean');
+    }
+  }
+}
+
+// Export class for use in tests
+module.exports = BoardsAPIController;
+
+// For global use in Cypress
+if (typeof window !== 'undefined') {
+  window.BoardsAPIController = BoardsAPIController;
+}