5 lines
5.9 KiB
JSON
5 lines
5.9 KiB
JSON
{
|
|
"id": "guide/testing-pipes",
|
|
"title": "Testing Pipes",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/testing-pipes.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"testing-pipes\">Testing Pipes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-pipes#testing-pipes\"><i class=\"material-icons\">link</i></a></h1>\n<p>You can test <a href=\"guide/pipes\">pipes</a> without the Angular testing utilities.</p>\n<div class=\"alert is-helpful\">\n<p> For the sample app that the testing guides describe, see the <live-example name=\"testing\" embedded-style=\"\" nodownload=\"\">sample app</live-example>.</p>\n<p> For the tests features in the testing guides, see <live-example name=\"testing\" stackblitz=\"specs\" nodownload=\"\">tests</live-example>.</p>\n</div>\n<h2 id=\"testing-the-titlecasepipe\">Testing the <code><a href=\"api/common/TitleCasePipe\" class=\"code-anchor\">TitleCasePipe</a></code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-pipes#testing-the-titlecasepipe\"><i class=\"material-icons\">link</i></a></h2>\n<p>A pipe class has one method, <code>transform</code>, that manipulates the input\nvalue into a transformed output value.\nThe <code>transform</code> implementation rarely interacts with the DOM.\nMost pipes have no dependence on Angular other than the <code>@<a href=\"api/core/Pipe\" class=\"code-anchor\">Pipe</a></code>\nmetadata and an interface.</p>\n<p>Consider a <code><a href=\"api/common/TitleCasePipe\" class=\"code-anchor\">TitleCasePipe</a></code> that capitalizes the first letter of each word.\nHere's an implementation with a regular expression.</p>\n<code-example path=\"testing/src/app/shared/title-case.pipe.ts\" header=\"app/shared/title-case.pipe.ts\">\nimport { <a href=\"api/core/Pipe\" class=\"code-anchor\">Pipe</a>, <a href=\"api/core/PipeTransform\" class=\"code-anchor\">PipeTransform</a> } from '@angular/core';\n\n@<a href=\"api/core/Pipe\" class=\"code-anchor\">Pipe</a>({name: 'titlecase', pure: true})\n/** Transform to <a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a> Case: uppercase the first letter of the words in a string. */\nexport class <a href=\"api/common/TitleCasePipe\" class=\"code-anchor\">TitleCasePipe</a> implements <a href=\"api/core/PipeTransform\" class=\"code-anchor\">PipeTransform</a> {\n transform(input: string): string {\n return input.length === 0 ? '' :\n input.replace(/\\w\\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() ));\n }\n}\n\n\n</code-example>\n<p>Anything that uses a regular expression is worth testing thoroughly.\nUse simple Jasmine to explore the expected cases and the edge cases.</p>\n<code-example path=\"testing/src/app/shared/title-case.pipe.spec.ts\" region=\"excerpt\" header=\"app/shared/title-case.pipe.spec.ts\">\ndescribe('<a href=\"api/common/TitleCasePipe\" class=\"code-anchor\">TitleCasePipe</a>', () => {\n // This pipe is a pure, stateless function so no need for BeforeEach\n const pipe = new <a href=\"api/common/TitleCasePipe\" class=\"code-anchor\">TitleCasePipe</a>();\n\n it('transforms \"abc\" to \"Abc\"', () => {\n expect(pipe.transform('abc')).toBe('Abc');\n });\n\n it('transforms \"abc def\" to \"Abc Def\"', () => {\n expect(pipe.transform('abc def')).toBe('Abc Def');\n });\n\n // ... more tests ...\n});\n\n</code-example>\n<a id=\"write-tests\"></a>\n<h2 id=\"writing-dom-tests-to-support-a-pipe-test\">Writing DOM tests to support a pipe test<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-pipes#writing-dom-tests-to-support-a-pipe-test\"><i class=\"material-icons\">link</i></a></h2>\n<p>These are tests of the pipe <em>in isolation</em>.\nThey can't tell if the <code><a href=\"api/common/TitleCasePipe\" class=\"code-anchor\">TitleCasePipe</a></code> is working properly as applied in the application components.</p>\n<p>Consider adding component tests such as this one:</p>\n<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)\">\nit('should convert hero name to <a href=\"api/platform-browser/Title\" class=\"code-anchor\">Title</a> Case', () => {\n // get the name's input and display elements from the DOM\n const hostElement = fixture.nativeElement;\n const nameInput: HTMLInputElement = hostElement.querySelector('input');\n const nameDisplay: HTMLElement = hostElement.querySelector('span');\n\n // simulate user entering a new name into the input box\n nameInput.value = 'quick BROWN fOx';\n\n // Dispatch a DOM event so that Angular learns of input value change.\n // In older browsers, such as IE, you might need a CustomEvent instead. See\n // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill\n nameInput.dispatchEvent(new <a href=\"api/router/Event\" class=\"code-anchor\">Event</a>('input'));\n\n // Tell Angular to update the display binding through the title pipe\n fixture.detectChanges();\n\n expect(nameDisplay.textContent).toBe('Quick Brown Fox');\n});\n\n</code-example>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/testing\n-->\n<!-- links from this doc:\n - api/common/TitleCasePipe\n - api/core/Pipe\n - api/core/PipeTransform\n - api/platform-browser/Title\n - api/router/Event\n - guide/pipes\n - guide/testing-pipes#testing-pipes\n - guide/testing-pipes#testing-the-titlecasepipe\n - guide/testing-pipes#writing-dom-tests-to-support-a-pipe-test\n - https://github.com/angular/angular/edit/master/aio/content/guide/testing-pipes.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |