Angular Component Testing: provide access to DI

What would you like?

Angular’s CT mount function should return an inject function that allows DI.

e.g.:

const {inject} = cy.mount(...);
const service = inject(MyService);

where inject is nothing more than a wrapper of TestBed.inject just to hide the implementation detail which is TesBed. we might also provide a cy.inject command, that does something like this to provide a better DX:

cy.then(() => TestBed.inject(...))

What do you think?

cc. @jordanpowell88

Why is this needed?

As an advocate for fakes (vs. stubs/spies/mocks), I often end up with stateful services that I might want to access & check manually afterward in my test. But of course, there are way many other use cases like arranging the test etc…

cy.mount(MyComponent, {providers: [{provide: Cart, useClass: CartFake}]})

cy.contains('Buy').click()

cy.inject(CartFake).invoke('getItems').should('have.length', 1);

or

const { inject } = cy.mount(MyComponent, {providers: [{provide: Cart, useClass: CartFake}]})

cy.contains('Buy').click()

cy.then(() => inject(CartFake).getItems()).should('have.length', 1);

cc. @jordanpowell88

[jordanpowell88]

@rainerhahnekamp Feel free to work on a solution you feel like improves the API. Also for clarification we release @cypress/angular as a separate lib on npm for anyone who wants to eject or do something custom with it as apposed to the cypress/angular lib (same one) that gets shipped with the binary.

[rainerhahnekamp]

Quantarius (cool name by the way 👍), it could be that the information of how many items are in Cart is not shown in MyComponent. Then the only way to find out is to check the service directly.

But I think Younes just made this example primarily to demonstrate the requirement of the inject command.