angularcypressangular-testcypress-component-test-runner

Cypress Component Testing Angular Components spying on private service


I am trying to use Cypress's new Component Testing for Angular.

Given the following test

    beforeEach(() => {
    mockService.ageRangeName = '0-5';
    cy.viewport(1920, 1080);
    cy.mount(CategoryBuilderComponent, {
      componentProperties: {},
      imports:[],
      providers: [{ provide: CategoryBuilderService, useValue: mockService }],
    });
   it('should test click of cancel', () => {    
        cy.get('[data-test="cbc-cancel"]').click()
        //has mockService.change.next been called
    
  });

i want to determine if clicking the cancel button has called my private dependency injected service rxjs BehaviorSubject Property with a value of true.

The complete code sample can be found at https://github.com/hokrc01/cypress-component-testing-question-was-subject-launched


Solution

  • For private services inside your component, you can do the following:

    Here is an example with ng-mocks:

    const user: User = {
      name: "michael",
      id: "some-id"
    };
    
    const imports = [CommonModule, FormsModule, ReactiveFormsModule];
    const providers = [MockProvider(UserService, { getUser: () => Promise.resolve(user) })];
    const config = {
      providers,
      imports,
      declarations: [MockComponent(MessagesComponent)]
    };
    
    ...
    cy.mount(AppComponent, config).then((wrapper) => {
       cy.stub((wrapper.component as any).userService, "getUser", () => Promise.resolve(user)).as("getUser");
       return cy.wrap(wrapper).as("angular");
    });
    

    ng-mocks helps to wrap to mock with ease the components or providers. But you can of course work without it.