Differences Between Unit Testing and End-to-End Testing in Angular
Aug 28, 2020 • 4 Minute Read
Introduction
Today, thanks to continuous deployment and integration, app changes are pushed to production easily and quickly. In some setups, there could be 50 or more updates to production in a single day! In this fast-moving environment, how can you ensure that bugs are not introduced with changes and that your app is free from regressions or new bugs? Why, by unit and end-to-end testing your app of course!
In this guide, you will learn how the Angular CLI exposes both unit testing and end-to-end testing and the differences between the two.
Let's dive in!
Getting Started
The Angular CLI can be downloaded onto your machine by running the following command using NPM:
npm install -g @angular/cli
You can now use the ng command to access the CLI. To see a full listing of available commands, run ng -h.
First, you will need to create a new Angular app to test with. Bootstrapping an Angular app via the CLI is as simple as running:
ng new my-app
This command will create a new Angular app within your current directory that is named my-app. This is the app you will use while learning about the differences between unit and end-to-end testing in Angular.
Unit Testing Your Angular App
The purpose of unit testing your application is to ensure that the basic, fundamental building blocks of your app are functioning properly from a logical perspective. Let's say you have a pipe that you want to ensure is functioning properly in an automated fashion. A unit test is a great use case for this. Below is an example unit test for a custom pipe class, IsEvenPipe, that returns true if a number is even and false if a number is odd.
it('should return true if the number passed into the pipe is even', () => {
const pipe = new IsEvenPipe();
const returnVal = pipe.transform(4);
expect(returnVal).toBe(true);
});
You can execute the unit tests for your app via the CLI by running ng test from within the root project directory. Upon running ng test, two things will happen. First, Angular will use the Karma test runner to open up a new browser window which will contain the reporting mechanism for your unit tests. Basically, this is the window that will show the output of your tests and any errors that might occur. Once the test runner is ready, Angular will then execute your unit tests via the Jasmine testing framework. For a full listing of options that are available for you to use, please check out this documentation.
End-to-End Testing In Angular
End-to-end testing in Angular is achieved by using the ng e2e command that is made available by the Angular CLI. End-to-end testing is different from unit testing in that the purpose of end-to-end testing is to simulate a user's interaction with your web application. Behind the scenes, Angular builds and serves your app and then uses the Protractor end-to-end testing framework to run your end-to-end tests.
Unit tests ensure that the individual functionality of your components, services, and other Angular entities are running properly. End-to-end tests build on this by ensuring that the user's interaction with these components and services is behaving as it should.
Below, you'll find a simple example of an end-to-end test. This test ensures that the title page of your app contains the right text. Notice how this test, unlike the unit test above, actually interacts with the browser itself.
describe('The Title Page', () => {
beforeEach(() => {
browser.get('/index');
});
it('displays the title of the home page correctly', () => {
const title = element(by.css('.title-header')).getText();
expect(title).toEqual('Tests Are Cool!');
});
});
For more information on the ng e2e CLI command, check out this piece of documentation.
Conclusion
In this guide, you learned about the two testing commands that the Angular CLI provides—ng test and ng e2e—and how they facilitate both unit and end-to-end testing respectively. You also gained context around when to utilize unit testing and when to utilize end-to-end testing when it comes to your app.
You can now be confident when it comes to the unit and end-to-end testing your Angular project! For more information, please check out the Angular testing documentation.
