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
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.