Cypress Component Testing Angular Components spying on private service

Question

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

Answer 1

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.