Unit Testing in Angular
In ~15 minutes, you will be able to...
-
Use basic testing terminology
-
Identify parts of an Angular app
-
Discuss the differences between isolated tests and integrated tests and when to use each
-
Discuss deep vs. shallow testing
-
Write a unit test in Angular
Foundations
- Unit Test
- Testing Tools
- Parts of a Test
- Triple A
- Mocking and Spies
Unit Test
An isolated test of the smallest unit of code
It should be fast, cheap to write, cover a single state change, assert one thing, avoid crossing process boundaries, and be reliable.
Jasmine
A behavior-driven development framework
Angular
Has many built-in utilities for testing
Karma
A lightweight server that loads and runs tests in browsers
Testing Tools
Suite
Assertion
Spec
Matcher
Anatomy of a Test
Triple A
Arrange - Act - Assert
Arrange
Act
Assert
Mocking and Spies
Mocking is the mechanism of replacing a dependency with a fake piece of code that does less than the original.
Spies are test doubles. A spy can stub any function and tracks calls to it and all arguments.
An Angular App
Angular is made up of one or more Modules
=
Module
Module
Module
A Module is made up of Components and Services
Component
Services
Component
=
+
+ ...
Module
A Component is made up of a Template, a Class and Metadata
Component
Class
=
+
Template
Metadata
+
app.module.ts
speaker-list.component.ts
meetup.service.ts
Isolated vs Integrated Tests
Isolated Test
-
Class only - no template
-
Constructed in test
-
Simple
-
Best for Services and Pipes
- Appropriate for components and directives too
Integrated Test
-
Test class with template
-
Constructed by framework
-
More complex
-
Mainly used for components and directives
- Two types: deep and shallow
Isolated Tests
Class
Testing a Service with an Isolated Test
Integrated Tests
Class
+
Template
Deep vs Shallow Integrated Tests
Deep Tests
-
Test a component and all of its nested components, directives
-
Gives a better idea of how your app will actually run
-
Can be big and complicated and therefore more brittle
Shallow Tests
- Test component class and template only
- Mock or ignore related components and directives
- More realistic than isolated unit tests, but less complex than deep integrated tests
Testing a Component with an Integrated Test
- Use TestBed.configureTestingModule() to create a module like the one you create with @ngModule()
- Use ComponentFixture to create a wrapper around component
- Use native Element or DebugElement (and By utility) to test the DOM
TestBed
Testing utility that creates an Angular testing module—an @NgModule class—that you configure with the...
configureTestingModule()
...method to produce the module environment for the class you want to test
Class
Template
Metadata
Module
TestBed
Testing a Component with a Deep Integrated Test
1. Import a bunch of stuff
Testing a Component with a Deep Integrated Test
2. Create a Fixture and Element
Testing a Component with a Deep Integrated Test
3. Mock Services
Testing a Component with a Deep Integrated Test
4. Configure the TestBed
Testing a Component with a Deep Integrated Test
5. Test
Testing a Component with a Shallow Integrated Test
- Test a component (with its template) in isolation
- Like a deep test without all the dependencies
- Sometimes it makes sense to leave pipes in - they're pretty small and generally don't add complexity
-
Two approaches:
- Fake all referenced components
- Use NO_ERRORS_SCHEMA
More about Integrated Tests
- Large, complicated, potentially brittle
- Integrated tests require a lot more configuration
- Second layer in the test pyramid
E2E
Integration
Unit
Review
- Use isolated tests primarily for services and pipes
- Use integrated tests for complete component testing
- Deep integrated tests test all connected components
- Shallow integrated tests test just the component in isolation and are better for when related tests add too much complexity
- Write the fewest E2E tests, more integrated tests and the most unit tests
Where to find me...
@elana
@elanalynn
ekopelevich@gmail.com
