Angular Unit Tests with the inject() function

Поділитися
Вставка
  • Опубліковано 13 жов 2024

КОМЕНТАРІ • 26

  • @ShiftedBit
    @ShiftedBit Рік тому

    Hi Rainer, thx for picking up the topic!
    It seems the inject() is rarely used at the moment and also the docs are lacking information.
    I recently had issues testing pipes which injects services via inject() method. I managed to successfully test them by using a WrapperComponent which injects the pipe, so I could avoid hacking around, but I would like to see easier ways in the future.
    All the best and keep up the good work!

    • @RainerHahnekamp
      @RainerHahnekamp  Рік тому +1

      Hi, so quite a lot Angular applications running on >= 14 are actually using it. And since the inject is the recommended way, I think it will become more and more.
      To use a wrapper component to test a pipe sounds reasonable to me. But I would go one step further and pick a component which uses that pipe. Then you test a component and include the original pipe in the test as well. This covers the two elements at once.

    • @ShiftedBit
      @ShiftedBit Рік тому

      @@RainerHahnekamp Yes right! Zwei Fliegen mit einer Klappe 🙂

    • @RainerHahnekamp
      @RainerHahnekamp  Рік тому

      @@ShiftedBit Ganz genau 👍😀

  • @cgardev3938
    @cgardev3938 Рік тому

    Thanks a lot for your content!. I have seen many of your videos and I have learned a lot.

  • @theboringcode9603
    @theboringcode9603 5 місяців тому

    HI Rainer,
    Thx for that smart solution.
    Does it still work with Angular 17 ? I noticed your sample application is using anguler 15.

    • @RainerHahnekamp
      @RainerHahnekamp  5 місяців тому +1

      Hi, as far as I know, my hack doesn't work anymore. There are some constraints applied by ESM which to apply spies anymor. Other than that, we also have an official statement from Angular, not to bypass the TestBed: dev.to/this-is-angular/episode-2409-testing-without-testbed-ssr-hydration-2ekh

  • @RainerHahnekamp
    @RainerHahnekamp  Рік тому +1

    You can learn more about Testing at the Professional Testing Workshop: www.angulararchitects.io/en/angular-workshops/professional-angular-testing-workshop/

  • @dmso
    @dmso Рік тому

    excellent as usual. thanks.

  •  Рік тому

    Why would one use the inject-function when the 'old' way is clearer in specifying the dependencies and much simpler to test?

    • @RainerHahnekamp
      @RainerHahnekamp  Рік тому +1

      Hi Steffen, I agree, but it is the officially recommended by members of the Angular team.
      In my opinion, that's the best explanation and reasoning that I can provide at the moment: ua-cam.com/video/kE_zr5ZiPWc/v-deo.html
      Summarized, the constructor-based injection only works in TypeScript. Angular needs to do some transformarion to get to the type during the runtime. Decorators as options are experimental (even in TypeScript 5 because property decorators are still in stage 2). The InjectionToken is type-safe and you have less code in big class hierarchies.

    • @bb-dai
      @bb-dai Рік тому +2

      As well as the technical reasons re TypeScript decorators mention by Rainer above, it's also good for encapsulation, especially for library developers.
      E.g., if I have an existing class that uses constructor injection and I want to add a new dependency, adding a new parameter to the constructor is a breaking change, because any consumer that extends my class will be forced to adjust the call to super() in the subclass constructor.
      inject is hidden from subclasses so adding a new one doesn't create a breaking change.

    •  Рік тому

      @@bb-dai thanks for explaining!
      What's when the dependency is not provided? Is it noticed at compiletime - as with the constructor?

  • @ratg97
    @ratg97 Рік тому

    can i use jasmine instead of jest?

    • @RainerHahnekamp
      @RainerHahnekamp  Рік тому

      Yes, of course. It is actually the one that is officially supported by the Angular cli

    • @ratg97
      @ratg97 Рік тому +1

      @@RainerHahnekamp i used the TestBed with stubs and its working

    • @RainerHahnekamp
      @RainerHahnekamp  Рік тому

      @@ratg97 yes, as long as you don't want to create a spy on the inject function, you are free to choose between jest and jasmine

    • @ratg97
      @ratg97 Рік тому

      @@RainerHahnekamp it works with stub class and jasime createSpy

  • @roytouw4374
    @roytouw4374 6 місяців тому

    The documentation for this is truly embarrassing, they state not to use the old class based guard and to use the new inject function, but how to unit test? God knows...

    • @RainerHahnekamp
      @RainerHahnekamp  6 місяців тому

      Hey Roy, where do they say that you shouldn't use the new inject function? That part of the documentation should be fixed.

  • @azariahengelbrecht6664
    @azariahengelbrecht6664 6 місяців тому

    Not a fan of the approach taken