| 
									
										
										
										
											2020-06-30 14:14:34 -04:00
										 |  |  | # Testing Pipes
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | You can test [pipes](guide/pipes) without the Angular testing utilities. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <div class="alert is-helpful"> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-07-14 12:17:56 +03:00
										 |  |  |   For the sample app that the testing guides describe, see the <live-example name="testing" embedded-style noDownload>sample app</live-example>. | 
					
						
							| 
									
										
										
										
											2020-06-30 14:14:34 -04:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-07-14 12:17:56 +03:00
										 |  |  |   For the tests features in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>. | 
					
						
							| 
									
										
										
										
											2020-06-30 14:14:34 -04:00
										 |  |  | 
 | 
					
						
							|  |  |  | </div> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Testing the `TitleCasePipe`
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | A pipe class has one method, `transform`, that manipulates the input | 
					
						
							|  |  |  | value into a transformed output value. | 
					
						
							|  |  |  | The `transform` implementation rarely interacts with the DOM. | 
					
						
							|  |  |  | Most pipes have no dependence on Angular other than the `@Pipe` | 
					
						
							|  |  |  | metadata and an interface. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Consider a `TitleCasePipe` that capitalizes the first letter of each word. | 
					
						
							|  |  |  | Here's an implementation with a regular expression. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <code-example path="testing/src/app/shared/title-case.pipe.ts" header="app/shared/title-case.pipe.ts"></code-example> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Anything that uses a regular expression is worth testing thoroughly. | 
					
						
							|  |  |  | Use simple Jasmine to explore the expected cases and the edge cases. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <code-example path="testing/src/app/shared/title-case.pipe.spec.ts" region="excerpt" header="app/shared/title-case.pipe.spec.ts"></code-example> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | {@a write-tests} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ## Writing DOM tests to support a pipe test
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | These are tests of the pipe _in isolation_. | 
					
						
							|  |  |  | They can't tell if the `TitleCasePipe` is working properly as applied in the application components. | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Consider adding component tests such as this one: | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <code-example path="testing/src/app/hero/hero-detail.component.spec.ts" region="title-case-pipe" header="app/hero/hero-detail.component.spec.ts (pipe test)"></code-example> | 
					
						
							|  |  |  | 
 |