Cypress Angular组件测试：验证私有服务BehaviorSubject调用

要验证点击取消按钮后，私有注入服务的BehaviorSubject属性change的next方法是否传入true，可以通过给方法创建spy（间谍）来追踪调用情况，具体实现如下：

1. 给next方法创建Spy #

在测试前置逻辑或测试用例中，对mockService.change.next创建spy并命名，方便后续验证：

cy.spy(mockService.change, 'next').as('changeNextSpy');

2. 点击按钮后验证Spy调用 #

点击取消按钮后，通过命名的spy验证方法是否被调用，且传入参数为true：

it('should call change.next(true) when cancel is clicked', () => {    
  cy.spy(mockService.change, 'next').as('changeNextSpy');
  cy.get('[data-test="cbc-cancel"]').click();
  cy.get('@changeNextSpy').should('have.been.calledWith', true);
});

完整测试代码示例 #

describe('CategoryBuilderComponent', () => {
  let mockService: CategoryBuilderService;

  beforeEach(() => {
    mockService = new CategoryBuilderService();
    mockService.ageRangeName = '0-5';
    cy.viewport(1920, 1080);
    // 提前创建spy
    cy.spy(mockService.change, 'next').as('changeNextSpy');
    cy.mount(CategoryBuilderComponent, {
      componentProperties: {},
      imports:[],
      providers: [{ provide: CategoryBuilderService, useValue: mockService }],
    });
  });

  it('should trigger change.next(true) on cancel click', () => {    
    cy.get('[data-test="cbc-cancel"]').click();
    // 验证方法调用及参数
    cy.get('@changeNextSpy').should('have.been.calledWith', true);
  });
});

关键说明 #

• cy.spy()用于监听对象方法的调用行为，.as()给spy命名后，可通过cy.get('@spyName')快速获取并验证。
• 由于change是BehaviorSubject，其next方法是发送值的入口，监听该方法即可确认组件是否正确触发了状态通知。
• 确保mockService在测试作用域内可访问，才能顺利创建spy并完成验证。

内容的提问来源于stack exchange，提问作者Ken