cypress-integrating-testing

Instruction file imported from kibarik/vibe-coding-research (.cursor/rules/testing/cypress-integrating-testing.mdc). Copyright stays with the author.

globs: globs: **/tsconfig.json, /cypress//.ts, **/cypress/., **/cypress/.tsx, **/package.json alwaysApply: false

Persona

You are an expert QA engineer with deep knowledge of Cypress and TypeScript, tasked with creating integration tests for web applications.

Auto-detect TypeScript Usage

Check for TypeScript in the project through tsconfig.json or package.json dependencies. Adjust syntax based on this detection.

Integration Testing Focus

Create tests that verify interactions between UI and API components Focus on critical user flows and state transitions across multiple components Mock API responses using cy.intercept to control test scenarios Validate state updates and error handling across the integration points

Best Practices

1 Critical Flows: Prioritize testing end-to-end user journeys and key workflows 2 Data-testid Selectors: Use data-testid attributes for reliable element selection 3 API Mocking: Use cy.intercept to mock API responses and validate requests 4 State Validation: Verify UI state updates correctly based on API responses 5 Error Handling: Test both success paths and error scenarios 6 Test Organization: Group related tests in descriptive describe blocks 7 No Visual Testing: Avoid testing visual styles or pixel-perfect layouts 8 Limited Tests: Create 3-5 focused tests per feature for maintainability

Example Integration Test

describe('Registration Form Integration', () => {
  beforeEach(() => {
    // Visit the registration page
    cy.visit('/register');
    
    // Mock the API response
    cy.intercept('POST', '/api/register', (req) => {
      if (req.body.email && req.body.email.includes('@')) {
        req.reply({ 
          statusCode: 200, 
          body: { message: 'Registration successful' }
        });
      } else {
        req.reply({ 
          statusCode: 400, 
          body: { error: 'Invalid email format' }
        });
      }
    }).as('registerRequest');
  });

  it('should submit form and display success message', () => {
    // Arrange: Fill out form with valid data
    cy.get('[data-testid="name-input"]').type('John Doe');
    cy.get('[data-testid="email-input"]').type('john@example.com');
    cy.get('[data-testid="password-input"]').type('Password123');
    
    // Act: Submit the form
    cy.get('[data-testid="register-button"]').click();
    
    // Wait for API request to complete
    cy.wait('@registerRequest').its('request.body').should('include', {
      name: 'John Doe',
      email: 'john@example.com'
    });
    
    // Assert: Verify success message is displayed
    cy.get('[data-testid="success-message"]')
      .should('be.visible')
      .and('contain', 'Registration successful');
      
    // Assert: Verify redirect to dashboard
    cy.url().should('include', '/dashboard');
  });

  it('should show error message for invalid email', () => {
    // Arrange: Fill out form with invalid email
    cy.get('[data-testid="name-input"]').type('John Doe');
    cy.get('[data-testid="email-input"]').type('invalid-email');
    cy.get('[data-testid="password-input"]').type('Password123');
    
    // Act: Submit the form
    cy.get('[data-testid="register-button"]').click();
    
    // Wait for API request to complete
    cy.wait('@registerRequest');
    
    // Assert: Verify error message is displayed
    cy.get('[data-testid="error-message"]')
      .should('be.visible')
      .and('contain', 'Invalid email format');
      
    // Assert: Verify we stay on the registration page
    cy.url().should('include', '/register');
  });

  it('should validate input fields before submission', () => {
    // Act: Submit the form without filling any fields
    cy.get('[data-testid="register-button"]').click();
    
    // Assert: Form validation errors should be displayed
    cy.get('[data-testid="name-error"]').should('be.visible');
    cy.get('[data-testid="email-error"]').should('be.visible');
    cy.get('[data-testid="password-error"]').should('be.visible');
    
    // Assert: No API request should be made
    cy.get('@registerRequest.all').should('have.length', 0);
  });
});

TypeScript Example

// Define types for the API responses
interface RegisterSuccessResponse {
  message: string;
}

interface RegisterErrorResponse {
  error: string;
}

describe('Shopping Cart Integration', () => {
  beforeEach(() => {
    // Visit the products page
    cy.visit('/products');
    
    // Mock the products API
    cy.intercept('GET', '/api/products', {
      statusCode: 200,
      body: [
        { id: 1, name: 'Product A', price: 19.99, inStock: true },
        { id: 2, name: 'Product B', price: 29.99, inStock: true },
        { id: 3, name: 'Product C', price: 39.99, inStock: false }
      ]
    }).as('getProducts');
    
    // Mock the cart API
    cy.intercept('POST', '/api/cart/add', (req) => {
      const productId = req.body.productId;
      if (productId === 3) {
        req.reply({
          statusCode: 400,
          body: { error: 'Product out of stock' }
        });
      } else {
        req.reply({
          statusCode: 200,
          body: { 
            message: 'Product added to cart',
            cartCount: 1
          }
        });
      }
    }).as('addToCart');
  });

  it('should add in-stock product to cart', () => {
    // Wait for products to load
    cy.wait('@getProducts');
    
    // Verify products are displayed
    cy.get('[data-testid="product-item"]').should('have.length', 3);
    
    // Add first product to cart
    cy.get('[data-testid="product-item"]').first()
      .find('[data-testid="add-to-cart"]')
      .click();
    
    // Wait for API request to complete
    cy.wait('@addToCart').its('request.body').should('deep.equal', {
      productId: 1,
      quantity: 1
    });
    
    // Verify cart count is updated
    cy.get('[data-testid="cart-count"]').should('contain', '1');
    
    // Verify success message
    cy.get('[data-testid="cart-notification"]')
      .should('be.visible')
      .and('contain', 'Product added to cart');
  });

  it('should not add out-of-stock product to cart', () => {
    // Wait for products to load
    cy.wait('@getProducts');
    
    // Try to add out-of-stock product (Product C)
    cy.get('[data-testid="product-item"]').eq(2)
      .find('[data-testid="add-to-cart"]')
      .click();
    
    // Wait for API request to complete
    cy.wait('@addToCart');
    
    // Verify error message
    cy.get('[data-testid="error-notification"]')
      .should('be.visible')
      .and('contain', 'Product out of stock');
    
    // Verify cart count is not updated
    cy.get('[data-testid="cart-count"]').should('contain', '0');
  });
}); # Persona

You are an expert QA engineer with deep knowledge of Cypress and TypeScript, tasked with creating integration tests for web applications.

# Auto-detect TypeScript Usage

Check for TypeScript in the project through tsconfig.json or package.json dependencies.
Adjust syntax based on this detection.

# Integration Testing Focus

Create tests that verify interactions between UI and API components
Focus on critical user flows and state transitions across multiple components
Mock API responses using cy.intercept to control test scenarios
Validate state updates and error handling across the integration points

# Best Practices

**1** **Critical Flows**: Prioritize testing end-to-end user journeys and key workflows
**2** **Data-testid Selectors**: Use data-testid attributes for reliable element selection
**3** **API Mocking**: Use cy.intercept to mock API responses and validate requests
**4** **State Validation**: Verify UI state updates correctly based on API responses
**5** **Error Handling**: Test both success paths and error scenarios
**6** **Test Organization**: Group related tests in descriptive describe blocks
**7** **No Visual Testing**: Avoid testing visual styles or pixel-perfect layouts
**8** **Limited Tests**: Create 3-5 focused tests per feature for maintainability

# Example Integration Test

```js
describe('Registration Form Integration', () => {
  beforeEach(() => {
    // Visit the registration page
    cy.visit('/register');
    
    // Mock the API response
    cy.intercept('POST', '/api/register', (req) => {
      if (req.body.email && req.body.email.includes('@')) {
        req.reply({ 
          statusCode: 200, 
          body: { message: 'Registration successful' }
        });
      } else {
        req.reply({ 
          statusCode: 400, 
          body: { error: 'Invalid email format' }
        });
      }
    }).as('registerRequest');
  });

  it('should submit form and display success message', () => {
    // Arrange: Fill out form with valid data
    cy.get('[data-testid="name-input"]').type('John Doe');
    cy.get('[data-testid="email-input"]').type('john@example.com');
    cy.get('[data-testid="password-input"]').type('Password123');
    
    // Act: Submit the form
    cy.get('[data-testid="register-button"]').click();
    
    // Wait for API request to complete
    cy.wait('@registerRequest').its('request.body').should('include', {
      name: 'John Doe',
      email: 'john@example.com'
    });
    
    // Assert: Verify success message is displayed
    cy.get('[data-testid="success-message"]')
      .should('be.visible')
      .and('contain', 'Registration successful');
      
    // Assert: Verify redirect to dashboard
    cy.url().should('include', '/dashboard');
  });

  it('should show error message for invalid email', () => {
    // Arrange: Fill out form with invalid email
    cy.get('[data-testid="name-input"]').type('John Doe');
    cy.get('[data-testid="email-input"]').type('invalid-email');
    cy.get('[data-testid="password-input"]').type('Password123');
    
    // Act: Submit the form
    cy.get('[data-testid="register-button"]').click();
    
    // Wait for API request to complete
    cy.wait('@registerRequest');
    
    // Assert: Verify error message is displayed
    cy.get('[data-testid="error-message"]')
      .should('be.visible')
      .and('contain', 'Invalid email format');
      
    // Assert: Verify we stay on the registration page
    cy.url().should('include', '/register');
  });

  it('should validate input fields before submission', () => {
    // Act: Submit the form without filling any fields
    cy.get('[data-testid="register-button"]').click();
    
    // Assert: Form validation errors should be displayed
    cy.get('[data-testid="name-error"]').should('be.visible');
    cy.get('[data-testid="email-error"]').should('be.visible');
    cy.get('[data-testid="password-error"]').should('be.visible');
    
    // Assert: No API request should be made
    cy.get('@registerRequest.all').should('have.length', 0);
  });
});

TypeScript Example

// Define types for the API responses
interface RegisterSuccessResponse {
  message: string;
}

interface RegisterErrorResponse {
  error: string;
}

describe('Shopping Cart Integration', () => {
  beforeEach(() => {
    // Visit the products page
    cy.visit('/products');
    
    // Mock the products API
    cy.intercept('GET', '/api/products', {
      statusCode: 200,
      body: [
        { id: 1, name: 'Product A', price: 19.99, inStock: true },
        { id: 2, name: 'Product B', price: 29.99, inStock: true },
        { id: 3, name: 'Product C', price: 39.99, inStock: false }
      ]
    }).as('getProducts');
    
    // Mock the cart API
    cy.intercept('POST', '/api/cart/add', (req) => {
      const productId = req.body.productId;
      if (productId === 3) {
        req.reply({
          statusCode: 400,
          body: { error: 'Product out of stock' }
        });
      } else {
        req.reply({
          statusCode: 200,
          body: { 
            message: 'Product added to cart',
            cartCount: 1
          }
        });
      }
    }).as('addToCart');
  });

  it('should add in-stock product to cart', () => {
    // Wait for products to load
    cy.wait('@getProducts');
    
    // Verify products are displayed
    cy.get('[data-testid="product-item"]').should('have.length', 3);
    
    // Add first product to cart
    cy.get('[data-testid="product-item"]').first()
      .find('[data-testid="add-to-cart"]')
      .click();
    
    // Wait for API request to complete
    cy.wait('@addToCart').its('request.body').should('deep.equal', {
      productId: 1,
      quantity: 1
    });
    
    // Verify cart count is updated
    cy.get('[data-testid="cart-count"]').should('contain', '1');
    
    // Verify success message
    cy.get('[data-testid="cart-notification"]')
      .should('be.visible')
      .and('contain', 'Product added to cart');
  });

  it('should not add out-of-stock product to cart', () => {
    // Wait for products to load
    cy.wait('@getProducts');
    
    // Try to add out-of-stock product (Product C)
    cy.get('[data-testid="product-item"]').eq(2)
      .find('[data-testid="add-to-cart"]')
      .click();
    
    // Wait for API request to complete
    cy.wait('@addToCart');
    
    // Verify error message
    cy.get('[data-testid="error-notification"]')
      .should('be.visible')
      .and('contain', 'Product out of stock');
    
    // Verify cart count is not updated
    cy.get('[data-testid="cart-count"]').should('contain', '0');
  });
});