How do I test and mock Standalone Components

Ғылым және технология

Angular's Standalone Components offer the advantage of including all their sub-components, directives, and pipes, making them ideal for comprehensive testing of a component's complete functionality.
However, there are scenarios where we may want to mock specific parts of the dependency tree, particularly when dealing with a dependency that brings along an extensive set of additional dependencies.
In this video, I'll demonstrate how to handle such cases.
0:00 Introduction
0:05 Theory
1:50 Application Demo
3:25 Dependency Graph
4:25 Non-Mocking Test
5:38 Mocking for Non-Standalone Components
8:25 Mocking for Standalone Components
11:57 Summary & Farewell

Пікірлер: 32

  • @dylanjhalltech8313
    @dylanjhalltech83134 ай бұрын

    I really enjoyed this video because you took a problem, demonstrated why it happens, demonstrated a solutions with explanation - then provided information on a third party product. With this video I learned so much, even beyond testing

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    Thanks a lot Dylan!

  • @harshranjan8784
    @harshranjan87844 ай бұрын

    Great tutorial! Was able to finally understand how to inject mocks for standalone stuff. Thanks 😁

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    Great to hear, you're welcome

  • @danywalls
    @danywalls2 ай бұрын

    Amazing content as always!!!!!

  • @RainerHahnekamp

    @RainerHahnekamp

    2 ай бұрын

    Thanks Dany and best wishes!

  • @paevents8064
    @paevents80644 ай бұрын

    Awesome, great explanation. This is what I was looking for

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    👍

  • @pazzuto
    @pazzutoАй бұрын

    This is great content as always. The concern I have about moving to standalone components is the bundle size. I haven't taken a deep look into this, but I've read here and there that there's a lot of code duplicated and your app actually grows in size. I'm sure it can be mitigated with lazy loading, but it's something to consider.

  • @RainerHahnekamp

    @RainerHahnekamp

    Ай бұрын

    Hi, where did you hear about the bundle size issue? Could it be that you are mistake standalone with the barrel files? Having a lot of barrel files (index.ts) will problems to your bundler because it might not be able to tree-shake them efficientyl, and you may end up with a huge initial bundle. Regarding Standalone vs NgModule, there is no impact on the bundle size.

  • @VinitNeogi
    @VinitNeogi4 ай бұрын

    Indepth Info as always, thanks Rainer

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    Thanks as well Vinit.

  • @rudyxxdevxx7323
    @rudyxxdevxx73234 ай бұрын

    Thanks Rainer, awesome video !

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    You are very welcome Rudy

  • @rolandjost3823
    @rolandjost38234 ай бұрын

    Very good thanks...

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    Thanks Roland.

  • @dmytroukrainskiy
    @dmytroukrainskiy4 ай бұрын

    Thanks for video)

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    You're very welcome!

  • @yaibanoutsukushii
    @yaibanoutsukushii4 ай бұрын

    another great explanation! thank you! it's embarassing but in my company we got new schematics using overrideCopmonents and I just did not bother finding out why... sometimes the test did not work and then I spend hours trying out different things. So happy I now understand, what it does!

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    Yeah, so TestBed.override... is something we don't see that often but it is quite powerful

  • @MichaelSmallDev
    @MichaelSmallDev4 ай бұрын

    I just ran into a situation like this today but with component store in a child component being the troublesome thing. I think this solution will work a lot better than what I tried to do. Thanks.

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    You're welcome Michael! Happy to help.

  • @paulh6933
    @paulh69334 ай бұрын

    Cool!!!

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    Thanks Paul!

  • @dimasavenkov2951
    @dimasavenkov29514 ай бұрын

    How about non-standalone dependencies? I have in my imports array some modules with related dependencies. I want to replace them with stubs which I already have. Should I create test module and include all stubs components in it and add it to the standalone imports?

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    So you will always have to configure the TestingModule. There is no other way if you want to test via the DOM (and it is also the official recommendation). Without standalone, mocking is easier. you just declare your stubs instead the original ones. Declare, not import.

  • @NicolasMaas
    @NicolasMaas3 ай бұрын

    You mention the usage of ng-mocks library to Mock Standalone Components. We use this as wel to mock our services that we provide. However, sometimes, it uses the actual service instead of the mocked one. How do you properly mock these services that you provide?

  • @RainerHahnekamp

    @RainerHahnekamp

    3 ай бұрын

    Hi, could it be the case that those services are provided by the component? Otherwise, it has to work as expected. Can you maybe provide an example?

  • @NicolasMaas

    @NicolasMaas

    3 ай бұрын

    @@RainerHahnekamp The services are indeed all provided on the component itself.

  • @besara_
    @besara_4 ай бұрын

    how to test Angular Guards ?

  • @RainerHahnekamp

    @RainerHahnekamp

    4 ай бұрын

    Do you want to test only the guards or the guard in combination with a Component? In the first case, check out this video kzread.info/dash/bejne/n4Gdtc-MpNqtf7g.html, in the second that one: kzread.info/dash/bejne/dqeD2rlyhK7Yn9I.html

  • @besara_

    @besara_

    4 ай бұрын

    @@RainerHahnekamp really, appreciated 👏

Келесі