Angular Unit Testing Guide
Quick and simple guide to start unit testing with karma and jasmine in Angular (with demo)
As long as you build your app and add new features, it will grow in complexity. And as it grows in complexity, more time is required to manually test it. Solution: automated testing; requires more development effort in the short-term, but can prevent bugs and regressions that will save you time, money, and headache in the long-term.
In this post, we’ll be talking about Automated testing specifically ANGULAR UNIT TESTING using Karma and Jasmine We won’t cover integration tests or and end-to-end (e2e) tests.
Let’s jump to it, after creating a new project in angular the cli handles all of the boilerplate code required to run tests.
- karma.conf ; config file so Karma knows how to run your tests.
- protractor.conf ; Tells proteactor how to run end-to-end tests
- e2e ; Your end-to-end tests are kept here
- src/test.ts ; recursively loads all the spec and framework files for testing
- **.spec.ts ; Anything you generate with the CLI includes a spec file where you define the actual tests.
Now this is done, how are we going to write our testing code, here is the
Anatomy of a Jasmine Test Suite.
1- describe what your testing. This is your test suite.
2 -it should have some expected behaviors. These are your specs.
3-expect or assert these behaviors to hold true. These are your expectations
to execute your test run this command in the root of your project
ng test
Cool 😎 !! we know the test structure. Now how we test our component and what we are going to test??
you can laterally test everything components, pipes , directives, services, dom elements, methods in our components… lets dive in
First things first, we import the angular testing utilities in our **.spect.ts file like described in the image below.
1- describe our test suite here is the PostComponent .
2- declare the fixture which is the test environment of the component .
3- declare the debug element to test the rendered html of the component .
4- declare the TestBed which is a NgModule class that has a method configureTestingModule() for configuring a test module where we can import other Angular modules, components, pipes, directives, or services.
Once our testing module configured we can then instantiate for example the component we want to test. For our example, notice how we have the declarations: [ PostComponent ]
5- .compileComponents(); this method compiles the html and css after the TestBed has initiated.
6- here we start testing our component and its html .
7- before each our test we run detect change .
Good, now we can write our first spec. let’s test if our component has been successfully created.
we expect our component to be created so we describe the suite that way.
toBeTRuthy() means that our returned value is returned as true. (please check the jasmine docs to get acquainted with the jasmine api methods).
Real EXAMPLE:
our demo example is a post that contains h1 tag, a post image and some buttons, a love button ( to support post ) and a counter of the number of likes.
this is the whole spec of the postComponent let’s get a close look at it , please follow with the repo to see the html tags and the methods inside the component.
https://gitlab.com/JudaMimi/angularunittesting
1- we test if our h1 tag is actually rendered we select the h1 tag via the debug element we declare above and access it via its css class (.post-box h1).
toBeDefined() ; to check if its actually defined
2- we test if the post image is there and have the specific image;
we select the image by its css class and we test if the src contains the specific url
3- here we test if the like method is actually working, when clicked the heart button the counter should increment. we test this behavior
const actual = component.counter; we set the current counter value to actual variable
we simulate the click by component.like();
expect(component.counter).toBeGreaterThan(0); we check if the counter is > 0
expect(component.counter).toBe(actual + 1); check if the new value of the counter has increased by 1 since the previous value.
That is it very simple !! hopefully now, you feel more comfortable to angular unit testing 🎉🎉
Here is the repo of the app feel free to fork it or add new testing specs for a pipeline or a directive or a service.
Here are awesome other links that provide detailed Angular Unit testing for services, directives, …
I am thinking on starting with Cypress.io since everybody is talking about it, I have the Imposter Syndrom 🤓 towards it, But now its the time to face it. If you have any good links to start with please let me know in the comments.
In the meantime, Happy codding! 🚀 🚀
feel free to reach me.
