1fe1dd1f19
We should primarily point readers to the stackblitz that contains the spec files and runs them. The application stackblitz is secondary (and doesn't actually contain the spec files, which is confusing). Fixes #38535 PR Close #42406
42 lines
1.8 KiB
Markdown
42 lines
1.8 KiB
Markdown
# Testing Pipes
|
|
|
|
You can test [pipes](guide/pipes) without the Angular testing utilities.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
For a hands-on experience you can <live-example name="testing" stackblitz="specs" noDownload>run tests and explore the test code</live-example> in your browser as your read this guide.
|
|
|
|
If you'd like to experiment with the application that this guide describes, you can <live-example name="testing" noDownload>run it in your browser</live-example> or <live-example name="testing" downloadOnly>download and run it locally</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>
|
|
|