Angular Unit Testing | TOP 5 Mistakes to Avoid

Explore all the potential of WallabyJS 2.0 with a free trial 🚀

Angular Unit Tesing isn't easy topic and there is always something to improve there. In this video, I want to share with you the TOP 5 mistakes that have a significant and negative impact on your tests, but those mistakes are extremely easy to fix, so you can get an easy win straightaway. Let’s go!

🔗 Code On GitHub:

👥 Decoded Frontend Community on Discord

🌱🤝 Support Decoded Frontend:

🕒 Time Codes:
00:00:00 - Intro;
00:01:05 - Demo App Overview;
00:03:03 - Mistake 1 - Assigning values in describe block;
00:07:43 - Mistake 2 - Improper change of component inputs;
00:11:30 - How to learn Unit Testing in Angular;
00:12:02 - Mistake 3 - Fragile CSS selectors;
00:13:48 - Mistake 4 - Class-Only Unit Tests;
00:18:05 - Mistake 5 - False-Positive output tests;
00:20:24 - WallabyJS: Sponsorship Integration;
00:22:36 - Outro;

💡 For more Angular tips, follow also:

[DecodedFrontend]

Explore all the potential of WallabyJS 2.0 with a free trial 🚀

[theanswer]

Nice. Looking forward to more videos about testing :)

[eduardserei]

Amazing content as always! ❤️🔥 just my two cents:
Mistake #1 is not necessarily a mistake, it's a preference or a safety measure. We could work around it by either creating a function to get new instance of the object on each call or use spread operators to copy the object and change only the properties needed or assign the value of the object on beforeEach. The real issue is not handling immutability principle properly.

[SamuelAlejandro-ft]

Thank you! Nince hints! You never disappoint

[AlainBoudard]

I love your content, great value !
About testing only the "class", I think it's not useless, especially if you have an e2e testing strategy.
Shai calls it isolation tests, and no it will not test the whole application, but honestly, no tests will.

[FirstLast-ij]

Insightful video💡. All the tips are practical and helpful.

[chekitdnb]

Thank you very much for reviewing such important topic. I wanted to add my 5 cents. 😅

For the last case with subscription to the Observable we can also utilize a done function, which will should be called within a subscription after expect block. In this case test will wait untill the done function is called, thus the assertion will be executed and only after that the test case will be considered as executed. I found writing tests this way with some asynchronous tasks makes you more in control of the flow and makes it more explicit on when it is really considered as "done" 😉

[informer]

make an video of ngrx signal store & how to make api calls with in it with help of rxjs functionalites

[jbuiquan]

Thanks for the video, I really like your content, very insightful !
For mistake 3, wouldn't it bloat your code and rendered html with testId data attributes ?

[ВиталийЛиткевич]

Thanks for the video! If you had an Angular project that currently doesn't have any tests, would you choose Jest or Jasmine? Is Jest ready for use now, or is it better to stick with Jasmine for the time being?

[PauloSantos-yutn]

Subsribe inside tests could lead into problems in CI pipelines if those observables relies on time. I prefer using marbles in these cases, much clear and simple.

[haroldpepete]

great video thank Dmytro, the last test confused me, you're subscribing and then you change the value inside the function, subscribe is like a promise, how can you make the assertion in the last sentence?

[ChessPuzzlesVideo]

For 5th mistake, we handled it using Jasmine done callback. But your solution is much more better and easy.

[barmooj]

Could you compare when is it better to have an input per property vs a single input containing an object with all properties inside? In your sample code here you used the latter; single input passing data object

[georgeknap]

About n.4 you presented it on a piece of code where it actually make sense. However, for private methods that are called by public methods that are being invoked by some UI interaction, does it make more sense to have bigger "integration" test of all (ui-public-private) or just "unit" test of that private method? I would have both and I would even prefer to have 3 tests for each part.

[coolfire]

I would freakin' love more videos about testing with angular, maybe with some complex scenarios as well,
Like dealing with a combination of observables, promises and timers with services.
Also in the project that I work on I developed a master detail component which has a form on 1 side as a component and another separate component on the detail side which is opened with a keybord shortcut, and has a interactive grid, I'm not sure how will I go about testing this type of stuff.. 😁

[dimitritsikaridze]

I opened your testing course from comments and description of this video and it says "Invalid coupon code"