7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

8.6 Unit Testing Pipes

In this lesson you'll see how we can unit test the transform method of a custom pipe that we've created ourselves.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


8.6 Unit Testing Pipes

Hi, folks. In this lesson, we're going to see how we can unit test pipes in Angular. We did create a pipe earlier in the course, which is used to filter out the face cards in the deck when easy mode is enabled. We create the pipe using the CLI, so we already have the spec file ready to go. Let's open it up as well as the actual file being tested, side by side in the editor and like we have done with our other test files. Great, so first of all, let's focus this test. The pipe only has a single dependency, and the default tests should run and pass as it is. So let's just check that's the case. So we can see that one test ran, and that test passed so we don't need to do any special set up in order to get this test file ready for tests. So let's go ahead and update the existing test. So the existing test was creating an instance of the pipe in order to test it. We're gonna want to do that for every single test. So let's a before each that initializes the pipe before each test. So we just new up an instance of the pipe just like as if we were testing a service. So now let's add the test description. What does the pipe actually do? The pipe returns the cards if easy mode is falsey. It doesn't do anything at all. It just returns the cards that were passed to the transform method. So this aspect of the pipe should be quite straightforward to test. We can just pass false to the pipe, and the returned array of cards should still be 52 in length, so we won't need to bring in the deck for this test So we first get the cards array from a fresh instance of the deck. We then pass this array of cards to the transfer method of the pipe setting easy mode, which is the second parameter true false. And we then check the length of the resulting array that gets passed back from the transform method and we specify that it should equal 52. So let's check the output in the browser. And we can see that that test is passing. So now we can test that when we pass true as the second argument, the pipe does filter out the face cards So the text is going to be very similar to before, we've updated the description. We're still going to want the array of cards, so that doesn't need to change. But now, when we use the transform message, we want to pass through as the second argument instead of false. And this time there should only be 36 cards left in the pack once all of the face cards have been taken out. And let's see if this test is passing. And we can see that it is. So that's really all that we need to test for this particular pipe. This particular pipe is very very simple, but pipes are normally much more complex than this, they can be. And in that case, the spec file would be similarly more complex. But for us, that's what we need to do so in this lesson, we saw how we can test a pipe in an Angular application. Pipes are generally one of the easier parts of an application to test, as they're generally quite small and self-contained. So we just need to create an instance of them and invoke the transform method, and check how that behaves. Thanks for watching.

Back to the top