import {Component} from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

export class AppComponent {

title = 'forms-intro';

import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';

import {createNewEvent} from '../../shared/utils';

describe('Favorite Color Component', () => {

component = fixture.componentInstance;

});

it('should create', () => {

template: ` Favorite Color: <input type="text" [formControl]="favoriteColorControl" /> `,

imports: [ReactiveFormsModule],

favoriteColorControl = new FormControl('');

import {createNewEvent} from '../../shared/utils';

describe('FavoriteColorComponent', () => {

component = fixture.componentInstance;

});

it('should create', () => {

expect(component).toBeTruthy();

});

// #docregion model-to-view

const input = fixture.nativeElement.querySelector('input');

expect(input.value).toBe('Blue');

// #enddocregion model-to-view

// #docregion view-to-model

const input = fixture.nativeElement.querySelector('input');

const event = createNewEvent('input');

input.value = 'Red';

input.dispatchEvent(event);

// #enddocregion view-to-model

import {FormsModule} from '@angular/forms';

@Component({

selector: 'app-template-favorite-color',

template: ` Favorite Color: <input type="text" [(ngModel)]="favoriteColor" /> `,

imports: [FormsModule],

1. Use the component instance to set the value of the `favoriteColor` property.

1. Run change detection through the test fixture.

1. Query the view for the form input element.

1. Assert that the input value matches the value of the `favoriteColor` property in the component instance.

This guide assumes you are familiar with the following tools and libraries:

- **[Angular Testing Utilities](guide/testing)** - Angular's built-in testing tools ([`TestBed`](api/core/testing/TestBed), [`ComponentFixture`](api/core/testing/ComponentFixture))

- **[`RouterTestingHarness`](api/router/testing/RouterTestingHarness)** - Test harness for testing routed components with built-in navigation and component testing capabilities

1. **Use RouterTestingHarness** - For testing routed components, use [`RouterTestingHarness`](api/router/testing/RouterTestingHarness) which provides a cleaner API and eliminates the need for test host components. It offers direct component access, built-in navigation, and better type safety. However, it isn't as suitable for some scenarios, such as testing named outlets, where you may need to create custom host components.

2. **Handle external dependencies thoughtfully** - Prefer real implementations when possible for more realistic tests. If real implementations aren't feasible (e.g., external APIs), use fakes that approximate the real behavior. Use mocks or stubs only as a last resort, as they can make tests brittle and less reliable.

3. **Test navigation state** - Verify both the navigation action and the resulting application state, including URL changes and component rendering.

5. **Test error scenarios** - Include tests for invalid routes, failed navigation, and guard rejections to ensure your application handles edge cases gracefully.

6. **Do not mock Angular Router** - Instead, provide real route configurations and use the harness to navigate. This makes your tests more robust and less likely to break on internal Angular updates, while also ensuring you catch real issues when the router updates since mocks can hide breaking changes.

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.

It also sets a custom property of the element \(`customProperty`\) to `true` for no reason other than to show that it can.

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.

A better solution is to create an artificial test component that demonstrates all ways to apply the directive.

<img alt="HighlightDirective spec in action" src="assets/images/guide/testing/highlight-directive-spec.png">

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:

But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.

- Angular adds a directive to the injector of the element to which it is applied.

- `DebugElement.properties` affords access to the artificial custom property that is set by the directive