d5f8040d0a
This commit breaks up the testing document into nine total documents, with each document focusing on an existing section of the current testing documentation. There are no content changes. PR Close #37957
42 lines
1.6 KiB
Markdown
42 lines
1.6 KiB
Markdown
# Testing Pipes
|
|
|
|
You can test [pipes](guide/pipes) without the Angular testing utilities.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
For the sample app that the testing guides describe, see the <live-example embedded-style noDownload>sample app</live-example>.
|
|
|
|
For the tests features in the testing guides, see <live-example stackblitz="specs" noDownload>tests</live-example>.
|
|
|
|
</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>
|
|
|