cypress-context-aware/examples/table.example.js

A context-aware command system for Cypress that enables component-based test interactions

// Example: Table Context-Aware Commands
// This file demonstrates how to create context-aware commands for table interactions
// including custom behavior for commands like 'type' within specific contexts

import { ChainContext } from '../src/index.js';

const Table = {
  // The root table command - establishes the table context
  table($subject = cy.root(), waitForInteractive = true) {
    const chain = Cypress.isCy($subject) ? $subject : cy.wrap($subject);
    chain.findByCastle('full-table').as('tableRoot');

    if (waitForInteractive) {
      cy.get('@tableRoot').ready();
    }

    return cy.get('@tableRoot');
  },

  // Context-aware commands that work within table() context
  ready($subject) {
    const chain = Cypress.isCy($subject) ? $subject : cy.wrap($subject);

    chain
      .findByCastle('table')
      .parent()
      .should('have.attr', 'data-castle')
      .should('contain', 'table-wrapper')
      .and('not.contain', 'loading');
  },

  grid($subject) {
    return $subject.findByCastle('table');
  },

  rows($subject) {
    return $subject.find('[data-row-id]');
  },

  search($subject) {
    return $subject.find('[data-castle="search default"]');
  },

  // Example of custom behavior for existing Cypress commands
  // When .type() is used within a search context, add automatic debouncing
  type(originalFn, $subject, text, options = {}) {
    if (ChainContext.preceedsCommand('search')) {
      originalFn($subject, text, options);
      return cy.wait(600); // Debounce search requests
    }

    return originalFn($subject, text, options);
  },

  // Similar custom behavior for .clear()
  clear(originalFn, $subject, options = {}) {
    if (ChainContext.preceedsCommand('search')) {
      originalFn($subject, options);
      return cy.wait(600); // Debounce search requests
    }

    return originalFn($subject, options);
  },
};

// Register the table commands with the context-aware system
ChainContext.register('table', Table, { prevSubject: 'optional' });

// Usage examples:
// cy.table().rows().should('have.length', 5);
// cy.table().search().type('search term'); // Automatically debounced
// cy.table().search().clear(); // Automatically debounced