Sharing Top Content from the Angular-sphere.

Angular testing made easy – Clarity Design System – Medium

“Angular Testing Made Easy” by @EudesPV  #angularjs #javascript #typescript #testing #coding

  • TestBed configuration, compiling the components, creating the one you need, getting access to the directives instances, cleaning up, … And if you are working on a real-life project, you probably have many spec files across your code base, all needing the same boilerplate.
  • There are two main advantages to this approach over local variables: it helps fight the memory leaks that keep creeping up on large projects’ tests, and it also offers a very easy way to have your beforeEach and it in two different files, which is much harder to set up…
  • One of the recommended patterns (and the one we use the most, by far, in Clarity) is to use a “test host” component which includes the actual component to test in its template:This example makes a few assumptions to keep it simple: the templates are all inline or inlined at…
  • The one difference is that we’re getting the tested directive through the injector, rather than componentInstance, once again to be able handle attribute directives and components at the same time.The final spec fileLet’s remove all the boilerplate from the user component’s spec file and use our brand new context:It’s now entirely…
  • That’s a win!To improve this further, you could easily:include the setup() call at the root of the tests to have it always be available,allow passing extra directives to declare or modules to import, in case your component depends on other ones,add additional shortcuts to the TestContext interface,throw explicit errors when…

If you’re here, you have probably already read the Angular documentation on testing, and maybe have written a few tests for your own project. If you have not, I can only suggest you do so, because…

If you’re here, you have probably already read the Angular documentation on testing, and maybe have written a few tests for your own project. If you have not, I can only suggest you do so, because this article will require some prior knowledge of Angular testing.So at that point, you know how many hoops you need to jump through to test even the simplest of components and directives. TestBed configuration, compiling the components, creating the one you need, getting access to the directives instances, cleaning up, … And if you are working on a real-life project, you probably have many spec files across your code base, all needing the same boilerplate. So what’s the most efficient way to centralize that boilerplate, so that your actual spec files can focus on the unit tests themselves?This article will show you a neat solution to this problem, using two little-known features: Jasmine’s user context and Typescript’s ability to type this. We’ll round it up by relying on some “advanced” parameterized typing to make sure everything is truly reusable.Let’s open your new toysJasmine’s user contextDid you know that Jasmine binds all the functions declared in it, beforeEach andafterEach to the same object when running a test? This object allows you to share information across the different phases of your test, and the object gets properly destroyed at the end of each test to avoid memory leaks.So what does that look like? Here is a simple example:It creates a fresh new Dog object for each of the two…

Angular testing made easy – Clarity Design System – Medium

Comments are closed, but trackbacks and pingbacks are open.