5 lines
10 KiB
JSON
5 lines
10 KiB
JSON
|
{
|
||
|
|
"id": "guide/testing-attribute-directives",
|
||
|
|
"title": "Testing Attribute Directives",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/testing-attribute-directives.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 <a id=\"attribute-directive\"></a>\n<h1 id=\"testing-attribute-directives\">Testing Attribute Directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-attribute-directives#testing-attribute-directives\"><i class=\"material-icons\">link</i></a></h1>\n<p>An <em>attribute directive</em> modifies the behavior of an element, component or another directive.\nIts name reflects the way the directive is applied: as an attribute on a host element.</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-highlightdirective\">Testing the <code>HighlightDirective</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-attribute-directives#testing-the-highlightdirective\"><i class=\"material-icons\">link</i></a></h2>\n<p>The sample application's <code>HighlightDirective</code> sets the background color of an element\nbased on either a data bound color or a default color (lightgray).\nIt also sets a custom property of the element (<code>customProperty</code>) to <code>true</code>\nfor no reason other than to show that it can.</p>\n<code-example path=\"testing/src/app/shared/highlight.directive.ts\" header=\"app/shared/highlight.directive.ts\">\nimport { <a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>, <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>, <a href=\"api/core/Input\" class=\"code-anchor\">Input</a>, <a href=\"api/core/OnChanges\" class=\"code-anchor\">OnChanges</a> } from '@angular/core';\n\n@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a>({ selector: '[highlight]' })\n/**\n * Set backgroundColor for the attached element to highlight color\n * and set the element's customProperty to true\n */\nexport class HighlightDirective implements <a href=\"api/core/OnChanges\" class=\"code-anchor\">OnChanges</a> {\n\n defaultColor = 'rgb(211, 211, 211)'; // lightgray\n\n @<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>('highlight') bgColor: string;\n\n constructor(private el: <a href=\"api/core/ElementRef\" class=\"code-anchor\">ElementRef</a>) {\n el.nativeElement.style.customProperty = true;\n }\n\n ngOnChanges() {\n this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;\n }\n}\n\n\n</code-example>\n<p>It's used throughout the application, perhaps most simply in the <code>AboutComponent</code>:</p>\n<code-example path=\"testing/src/app/about/about.component.ts\" header=\"app/about/about.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n template: `\n <h2 highlight=\"skyblue\">About</h2>\n <h3>Quote of the day:</h3>\n <twain-quote></twain-quote>\n `\n})\nexport class AboutComponent { }\n\n\n</code-example>\n<p>Testing the specific use of the <code>HighlightDirective</code> within the <code>AboutComponent</code> requires only the techniques explored in the <a href=\"guide/testing-components-scenarios#nested-component-tests\">\"Nested component tests\"</a> section of <a href=\"guide/testing-components-scenarios\">Component testing scenarios</a>.</p>\n<code-example path=\"testing/src/app/about/about.component.spec.ts\" region=\"tests\" header=\"app/about/about.component.
|
||
|
|
}
|