honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
angular-cn/aio/content/guide/testing-pipes.md

42 lines
1.6 KiB
Markdown
Raw Normal View History

docs: break testing doc into multiple docs (#37957) 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
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">
docs: fix live examples in testing guides (#38038) In #37957, parts of the testing guide were broken out into separate guides. As part of that work, the `<live-example>` tags were also copied to the new guides. These `<live-example>` tags did not specify the targeted example project via the `name` attribute, thus they were implicitly targeting the example with the same name as the guide they were in. See the [Docs style guide][1] for more info. However, there is only one example project (`testing/`) and all `<live-example>` tags were supposed to target that. This worked fine on the `testing.md` guide, but it broke on other guides (which tried to target non-existing example projects based on their names). This commit fixes it by explicitly specifying which example is targeted by the `<live-example>` tags. It also removes the `embedded-style` attribute that has no effect. [1]: https://angular.io/guide/docs-style-guide#live-examples Fixes #38036 PR Close #38038
2020-07-14 05:17:56 -04:00
For the sample app that the testing guides describe, see the <live-example name="testing" embedded-style noDownload>sample app</live-example>.
docs: break testing doc into multiple docs (#37957) 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
2020-06-30 14:14:34 -04:00
docs: fix live examples in testing guides (#38038) In #37957, parts of the testing guide were broken out into separate guides. As part of that work, the `<live-example>` tags were also copied to the new guides. These `<live-example>` tags did not specify the targeted example project via the `name` attribute, thus they were implicitly targeting the example with the same name as the guide they were in. See the [Docs style guide][1] for more info. However, there is only one example project (`testing/`) and all `<live-example>` tags were supposed to target that. This worked fine on the `testing.md` guide, but it broke on other guides (which tried to target non-existing example projects based on their names). This commit fixes it by explicitly specifying which example is targeted by the `<live-example>` tags. It also removes the `embedded-style` attribute that has no effect. [1]: https://angular.io/guide/docs-style-guide#live-examples Fixes #38036 PR Close #38038
2020-07-14 05:17:56 -04:00
For the tests features in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.
docs: break testing doc into multiple docs (#37957) 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
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>