cy.intercept & điều khiển network: stub, spy, fixtures và trạng thái

1. Vì sao phải điều khiển network khi test

Ứng dụng SaaS hiện đại phụ thuộc nặng vào API: dashboard tải danh sách dự án, biểu đồ gọi endpoint thống kê, thông báo đến qua polling. Nếu test E2E luôn đập vào backend thật, bạn phải phụ thuộc dữ liệu server, khó tái tạo trạng thái lỗi, và test chậm và giòn. Đó là lúc cy.intercept vào cuộc: nó chặn tầng network của app ngay trong trình duyệt, cho bạn quyền quyết định request nào được stub (trả dữ liệu giả) và request nào chỉ spy (theo dõi mà vẫn cho đi thật). Nhờ đó bạn dựng được mọi trạng thái: danh sách rỗng, lỗi 500, tải chậm, phân trang — tất cả một cách xác định.

• Stub: trả response giả để dựng trạng thái xác định.
• Spy: cho request đi thật nhưng theo dõi để assert.
• Alias + cy.wait('@x'): đồng bộ test với thời điểm request.
• Fixtures: lưu dữ liệu mẫu trong file JSON để tái dùng.

2. Cơ chế: cy.intercept khớp route thế nào

cy.intercept nhận một mẫu route (method + URL, có thể dùng glob hoặc regex) và một handler quyết định làm gì. Khi app phát ra request khớp, Cypress giữ nó lại và áp dụng handler: trả object stub, đọc fixture, thay đổi response, hay chỉ ghi nhận. Quan trọng: phải khai báo intercept TRƯỚC khi hành động gây ra request, nếu không request đã bay đi. Bạn nên đặt intercept trong beforeEach hoặc ngay đầu it, trước cy.visit nếu request xảy ra lúc tải trang. URL matching hỗ trợ ký tự đại diện, ví dụ '**/api/projects*' để bắt cả query string.

// Khai báo TRƯỚC khi kích hoạt request
cy.intercept('GET', '**/api/projects*', { fixture: 'projects.json' }).as('list');
cy.visit('/dashboard');       // request xảy ra lúc tải trang
cy.wait('@list');             // chờ đúng request này rồi mới assert

3. Stub response: dựng dữ liệu xác định

Stub là trả về dữ liệu do bạn kiểm soát thay cho server. Điều này biến test thành xác định: cùng một đầu vào luôn cho cùng kết quả, không phụ thuộc dữ liệu thật đang thay đổi. Với dashboard SaaS, bạn có thể stub endpoint /api/projects để luôn trả về đúng 3 dự án với tên và trạng thái biết trước, rồi assert bảng hiển thị đúng 3 dòng. Bạn kiểm soát cả statusCode, headers, body và độ trễ. Stub đặc biệt hữu ích để test những trạng thái khó tái tạo với backend thật, như tài khoản vừa tạo chưa có dữ liệu, hay gói cước hết hạn.

it('hiển thị đúng số dự án từ API', () => {
  cy.intercept('GET', '**/api/projects*', {
    statusCode: 200,
    body: [
      { id: 1, name: 'Alpha',  status: 'active' },
      { id: 2, name: 'Beta',   status: 'paused' },
      { id: 3, name: 'Gamma',  status: 'active' },
    ],
  }).as('list');
  cy.visit('/dashboard');
  cy.wait('@list');
  cy.get('[data-cy="project-row"]').should('have.length', 3);
  cy.contains('[data-cy="project-row"]', 'Beta')
    .should('contain', 'paused');
});