Unit test & Angular

Tutorials on testing

• The best tutorials suite (video + code) on Angular testing https://codecraft.tv/courses/angular/unit-testin

• Rangle.io very clear book on angular included testing https://angular-2-training-book.rangle.io/handout/testing

• Official document in angular site https://angular.io/guide/testing#testing-utility-apis

• Practical tutorial in the context of angular https://semaphoreci.com/community/tutorials/testing-components-in-angular-2-with-jasmine

• What is unit test and continuous integration http://taco.visualstudio.com/en-us/docs/unit-test-01-primer

• unit testing angular (Jasmine + Karma) https://codecraft.tv/courses/angular/unit-testing/jasmine-and-karma/

• A bit old but great description of 3 types of tests to angular components by Victor Savkin https://vsavkin.com/three-ways-to-test-angular-2-components-dcea8e90bd8d

• Angular testing recipes

A repository to an app with many testing case ordered by type https://github.com/juristr/angular-testing-recipes

• Angular testing guide : good practicle documentation of test per types (component, service, pipes....)

  https://medium.com/google-developer-experts/angular-2-testing-guide-a485b6cb1ef0

In this article he explain 3 types of components testing :

• isolated tests are a great way to test drive your components and test complex logic.

• Shallow tests are isolated tests on steroids, and they should be used when writing a meaningful test requires to render a component’s template.

• Integration tests verify that a group of components and services (e.g., the router) work together.

• Testing component by rangle.io https://angular-2-training-book.rangle.io/handout/testing/components/

DebugElement vs fixture.debugElement

• 2 Ways to access the DOM inside unit test in angular

https://stackoverflow.com/questions/37705599/angular2-testing-whats-the-difference-between-a-debugelement-and-a-nativeeleme

https://angular.io/guide/testing#debugelement

• The code Of Debug element a wrapper on DOM API

  https://angular.io/api/core/DebugElement

Asynchronous problems

• A question on tick and whenStable / How to deal with async data https://stackoverflow.com/questions/48328292/unit-testing-value-of-observable-returned-from-service-using-async-pipe
• More about async http://devblog.ztp.pt/testing-observables-values-when-using-angular-fakeasync/
• About using async and zone.js https://blog.nrwl.io/controlling-time-with-zone-js-and-fakeasync-f0002dfbf48c
• Difference between async and test async https://github.com/juristr/angular-testing-recipes/blob/master/src/app/services/async.service.spec.ts
• testing async as if there were not https://itnext.io/a-quick-tip-on-testing-observables-e2fbdebef4c
• guide sur les tests asynchrones en francais https://guide-angular.wishtack.io/angular/testing/unit-testing/unit-test-asynchrone

Mocking dependencies

• Good tutorial on the various strategy of mock....

  https://www.ng-conf.org/mocking-dependencies-angular/
• Spying and mocking service https://medium.com/@shashankvivek.7/testing-a-component-with-stub-services-and-spies-in-jasmine-1428d4242a49

Testing services

• Testing services with HttpTestingController https://medium.com/netscape/testing-with-the-angular-httpclient-api-648203820712
• Testing service with https://www.techiediaries.com/angular-testing-httptestingcontroller

Overriding component : Testing component with child component

http://mylifeandcode.blogspot.fr/2017/03/how-to-mock-out-child-components-in.html

• The same technic as explained in the angular test guide official https://angular.io/guide/testing#nested-component-tests
• Override component in rangle.io tuto https://angular-2-training-book.rangle.io/handout/testing/components/overriding.html

Testing ngrx

• Rangle.io version https://angular-2-training-book.rangle.io/handout/testing/redux/
• Todd motto ultimate angular https://platform.ultimateangular.com/courses/ngrx-store-effects/lectures/3923987
• Todd motto ultimate angular branch with test https://github.com/UltimateAngular/ngrx-store-effects-app/tree/27-testing-effects

Debugging test

• Console.log

• open a chrome debugger in the karma launched chrome window a trick is that the error messages are something difficult to understand because of the fact that it refere to compile code transformed in ES5 like

  at Object.reducer (webpack:///./src/app/platform/applicability/store/reducers/applicability.reducer.ts?:104:73)

so

• by opening the chrome debugger

• going to