42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
3.9 KiB
Testing Attribute Directives
An attribute directive modifies the behavior of an element, component or another directive. Its name reflects the way the directive is applied: as an attribute on a host element.
If you'd like to experiment with the application that this guide describes, run it in your browser or download and run it locally.
Testing the HighlightDirective
The sample application's HighlightDirective sets the background color of an element based on either a data bound color or a default color lightgray.
It also sets a custom property of the element `customProperty` to true for no reason other than to show that it can.
It's used throughout the application, perhaps most simply in the AboutComponent:
Testing the specific use of the HighlightDirective within the AboutComponent requires only the techniques explored in the "Nested component tests" section of Component testing scenarios.
However, testing a single use case is unlikely to explore the full range of a directive's capabilities. Finding and testing all components that use the directive is tedious, brittle, and almost as unlikely to afford full coverage.
Class-only tests might be helpful, but attribute directives like this one tend to manipulate the DOM. Isolated unit tests don't touch the DOM and, therefore, do not inspire confidence in the directive's efficacy.
A better solution is to create an artificial test component that demonstrates all ways to apply the directive.
The <input> case binds the HighlightDirective to the name of a color value in the input box.
The initial value is the word "cyan" which should be the background color of the input box.
Here are some tests of this component:
A few techniques are noteworthy:
-
The
By.directivepredicate is a great way to get the elements that have this directive when their element types are unknown -
The
:notpseudo-class inBy.css('h2:not([highlight])')helps find<h2>elements that do not have the directive.By.css('*:not([highlight])')finds any element that does not have the directive. -
DebugElement.stylesaffords access to element styles even in the absence of a real browser, thanks to theDebugElementabstraction. But feel free to exploit thenativeElementwhen that seems easier or more clear than the abstraction. -
Angular adds a directive to the injector of the element to which it is applied. The test for the default color uses the injector of the second
<h2>to get itsHighlightDirectiveinstance and itsdefaultColor. -
DebugElement.propertiesaffords access to the artificial custom property that is set by the directive
@reviewed 2022-02-28