diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 47de2d4e5a..f6eaaca4fc 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -46,6 +46,7 @@ The following table lists some of the key AngularJS template features with their ### Bindings/interpolation + Your favorite hero is: {{vm.favoriteHero}} @@ -64,9 +65,8 @@ The following table lists some of the key AngularJS template features with their ### Bindings/interpolation - - + In Angular, a template expression in curly braces still denotes one-way binding. @@ -86,6 +86,7 @@ The following table lists some of the key AngularJS template features with their ### Filters + <td>{{movie.title | uppercase}}</td> @@ -100,9 +101,8 @@ The following table lists some of the key AngularJS template features with their ### Pipes - - + In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**. @@ -120,6 +120,7 @@ The following table lists some of the key AngularJS template features with their ### Local variables + <tr ng-repeat="movie in vm.movies"> <td>{{movie.title}}</td> @@ -134,9 +135,8 @@ The following table lists some of the key AngularJS template features with their ### Input variables - - + Angular has true template input variables that are explicitly defined using the `let` keyword. @@ -184,6 +184,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-app + <body ng-app="movieHunter"> @@ -200,13 +201,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bootstrapping - - +
- - + Angular doesn't have a bootstrap directive. @@ -225,6 +224,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-class + <div ng-class="{active: isActive}"> <div ng-class="{active: isActive, @@ -246,9 +246,8 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngClass - - + In Angular, the `ngClass` directive works similarly. @@ -261,7 +260,7 @@ The following are some of the key AngularJS built-in directives and their equiva Angular also has **class binding**, which is a good way to add or remove a single class, as shown in the third example. - For more information see the [Attribute, class, and style bindings](guide/template-syntax#other-bindings) + For more information see the [Attribute, class, and style bindings](guide/template-syntax#other-bindings) section of the [Template Syntax](guide/template-syntax) page. @@ -274,6 +273,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-click + <button ng-click="vm.toggleImage()"> <button ng-click="vm.toggleImage($event)"> @@ -292,9 +292,8 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `click` event - - + AngularJS event-based directives do not exist in Angular. @@ -312,7 +311,7 @@ The following are some of the key AngularJS built-in directives and their equiva For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events. - For more information, see the [Event binding](guide/template-syntax#event-binding) + For more information, see the [Event binding](guide/template-syntax#event-binding) section of the [Template Syntax](guide/template-syntax) page. @@ -325,6 +324,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-controller + <div ng-controller="MovieListCtrl as vm"> @@ -339,9 +339,8 @@ The following are some of the key AngularJS built-in directives and their equiva ### Component decorator - - + In Angular, the template no longer specifies its associated controller. @@ -379,6 +378,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-href + <a ng-href="{{ angularDocsUrl }}">Angular Docs</a> @@ -389,6 +389,7 @@ The following are some of the key AngularJS built-in directives and their equiva fetches from that URL. In AngularJS, the `ng-href` is often used to activate a route as part of navigation. + <a ng-href="#{{ moviesHash }}">Movies</a> @@ -401,24 +402,22 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `href` property - - + Angular uses property binding; there is no built-in *href* directive. Place the element's `href` property in square brackets and set it to a quoted template expression. - For more information see the [Property binding](guide/template-syntax#property-binding) + For more information see the [Property binding](guide/template-syntax#property-binding) section of the [Template Syntax](guide/template-syntax) page. In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. - - + - For more information on routing, see the [RouterLink binding](guide/router#router-link) + For more information on routing, see the [RouterLink binding](guide/router#router-link) section of the [Routing & Navigation](guide/router) page. @@ -431,6 +430,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-if + <table ng-if="movies.length"> @@ -446,12 +446,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### *ngIf - - + - The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes + The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes or recreates a portion of the DOM based on an expression. In this example, the `` element is removed from the DOM unless the `movies` array has a length. @@ -468,6 +467,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-model + <input ng-model="vm.favoriteHero"/> @@ -481,16 +481,15 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngModel - - + In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view) and event binding (from the view to the component), thereby providing two-way binding. - For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to - form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel) + For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to + form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel) section of the [Template Syntax](guide/template-syntax) page. @@ -502,6 +501,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-repeat + <tr ng-repeat="movie in vm.movies"> @@ -517,12 +517,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### *ngFor - - + - The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats + The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats the associated DOM element for each item in the specified collection. More accurately, it turns the defined element (`` in this example) and its contents into a template and uses that template to instantiate a view for each item in the list. @@ -543,6 +542,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-show + <h3 ng-show="vm.favoriteHero"> Your favorite hero is: {{vm.favoriteHero}} @@ -560,9 +560,8 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `hidden` property - - + Angular uses property binding; there is no built-in *show* directive. @@ -573,7 +572,7 @@ The following are some of the key AngularJS built-in directives and their equiva In this example, the `
` element is hidden if the `favoriteHero` variable is not truthy. - For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) + For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) section of the [Template Syntax](guide/template-syntax) page. @@ -585,6 +584,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-src + <img ng-src="{{movie.imageurl}}"> @@ -599,15 +599,14 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `src` property - - + Angular uses property binding; there is no built-in *src* directive. Place the `src` property in square brackets and set it to a quoted template expression. - For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) + For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) section of the [Template Syntax](guide/template-syntax) page. @@ -619,6 +618,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-style + <div ng-style="{color: colorPreference}"> @@ -636,9 +636,8 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngStyle - - + In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression. @@ -647,10 +646,10 @@ The following are some of the key AngularJS built-in directives and their equiva Angular also has **style binding**, which is good way to set a single style. This is shown in the second example. - For more information on style binding, see the [Style binding](guide/template-syntax#style-binding) section of the + For more information on style binding, see the [Style binding](guide/template-syntax#style-binding) section of the [Template Syntax](guide/template-syntax) page. - For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle) + For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle) section of the [Template Syntax](guide/template-syntax) page. @@ -662,6 +661,7 @@ The following are some of the key AngularJS built-in directives and their equiva ### ng-switch + <div ng-switch="vm.favoriteHero && vm.checkMovieHero(vm.favoriteHero)"> @@ -691,9 +691,8 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngSwitch - - + In Angular, the `ngSwitch` directive works similarly. @@ -707,7 +706,7 @@ The following are some of the key AngularJS built-in directives and their equiva The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example. - For more information, see [The NgSwitch directives](guide/template-syntax#ngSwitch) + For more information, see [The NgSwitch directives](guide/template-syntax#ngSwitch) section of the [Template Syntax](guide/template-syntax) page. @@ -754,6 +753,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### currency + <td>{{movie.price | currency}}</td> @@ -766,9 +766,8 @@ For more information on pipes, see [Pipes](guide/pipes). ### currency - - + The Angular `currency` pipe is similar although some of the parameters have changed. @@ -782,6 +781,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### date + <td>{{movie.releaseDate | date}}</td> @@ -794,9 +794,8 @@ For more information on pipes, see [Pipes](guide/pipes). ### date - - + The Angular `date` pipe is similar. @@ -811,6 +810,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### filter + <tr ng-repeat="movie in movieList | filter: {title:listFilter}"> @@ -835,6 +835,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### json + <pre>{{movie | json}}</pre> @@ -847,9 +848,8 @@ For more information on pipes, see [Pipes](guide/pipes). ### json - - + The Angular `json` pipe does the same thing. @@ -863,6 +863,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### limitTo + <tr ng-repeat="movie in movieList | limitTo:2:0"> @@ -876,9 +877,8 @@ For more information on pipes, see [Pipes](guide/pipes). ### slice - - + The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping @@ -895,6 +895,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### lowercase + <div>{{movie.title | lowercase}}</div> @@ -907,9 +908,8 @@ For more information on pipes, see [Pipes](guide/pipes). ### lowercase - - + The Angular `lowercase` pipe does the same thing. @@ -936,10 +936,8 @@ For more information on pipes, see [Pipes](guide/pipes). ### number - - - + The Angular `number` pipe is similar. @@ -958,7 +956,7 @@ For more information on pipes, see [Pipes](guide/pipes). ### orderBy - + <tr ng-repeat="movie in movieList | orderBy : 'title'"> @@ -1025,6 +1023,7 @@ The Angular code is shown using TypeScript. ### IIFE + (function () { ... @@ -1032,7 +1031,7 @@ The Angular code is shown using TypeScript. - In AngularJS, an immediately invoked function expression (or IIFE) around controller code + In AngularJS, an immediately invoked function expression (or IIFE) around controller code keeps it out of the global namespace. @@ -1041,10 +1040,10 @@ The Angular code is shown using TypeScript. ### none - This is a nonissue in Angular because ES 2015 modules + This is a nonissue in Angular because ES 2015 modules handle the namespacing for you. - For more information on modules, see the [Modules](guide/architecture#modules) section of the + For more information on modules, see the [Modules](guide/architecture#modules) section of the [Architecture Overview](guide/architecture). @@ -1056,12 +1055,13 @@ The Angular code is shown using TypeScript. ### Angular modules + angular.module("movieHunter", ["ngRoute"]); - In AngularJS, an Angular module keeps track of controllers, services, and other code. + In AngularJS, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon. @@ -1069,9 +1069,8 @@ The Angular code is shown using TypeScript. ### NgModules - - + NgModules, defined with the `NgModule` decorator, serve the same purpose: @@ -1090,7 +1089,7 @@ The Angular code is shown using TypeScript. ### Controller registration - + angular .module("movieHunter") @@ -1111,9 +1110,8 @@ The Angular code is shown using TypeScript. ### Component decorator - - + Angular adds a decorator to the component class to provide any required metadata. @@ -1122,7 +1120,7 @@ The Angular code is shown using TypeScript. This is how you associate a template with logic, which is defined in the component class. - For more information, see the [Components](guide/architecture#components) + For more information, see the [Components](guide/architecture#components) section of the [Architecture Overview](guide/architecture) page. @@ -1134,6 +1132,7 @@ The Angular code is shown using TypeScript. ### Controller function + function MovieListCtrl(movieService) { } @@ -1147,16 +1146,15 @@ The Angular code is shown using TypeScript. ### Component class - - + In Angular, you create a component class. NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class. - For more information, see the [Components](guide/architecture#components) + For more information, see the [Components](guide/architecture#components) section of the [Architecture Overview](guide/architecture) page. @@ -1168,6 +1166,7 @@ The Angular code is shown using TypeScript. ### Dependency injection + MovieListCtrl.$inject = ['MovieService']; function MovieListCtrl(movieService) { @@ -1186,16 +1185,15 @@ The Angular code is shown using TypeScript. ### Dependency injection - - + In Angular, you pass in dependencies as arguments to the component class constructor. This example injects a `MovieService`. The first parameter's TypeScript type tells Angular what to inject, even after minification. - For more information, see the [Dependency injection](guide/architecture#dependency-injection) + For more information, see the [Dependency injection](guide/architecture#dependency-injection) section of the [Architecture Overview](guide/architecture). @@ -1243,6 +1241,7 @@ also encapsulate a style sheet within a specific component. ### Link tag + <link href="styles.css" rel="stylesheet" /> @@ -1256,9 +1255,8 @@ also encapsulate a style sheet within a specific component. ### Link tag - - + In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file. @@ -1267,9 +1265,8 @@ also encapsulate a style sheet within a specific component. ### StyleUrls In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define a style sheet for a particular component. - - + This allows you to set appropriate styles for individual components that won’t leak into diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md index 3d99f1d637..cbdc075c1d 100644 --- a/aio/content/guide/testing.md +++ b/aio/content/guide/testing.md @@ -233,11 +233,7 @@ for reasons explained [below](guide/testing#q-spec-file-location). Add the following code to `src/app/1st.spec.ts`. - - - - - + {@a run-karma} @@ -379,9 +375,7 @@ The `BannerComponent` in `src/app/banner-inline.component.ts` is the simplest co a good place to start. It presents the application title at the top of the screen within an `

` tag. - - - + @@ -395,9 +389,7 @@ for reasons explained in the [FAQ](guide/testing#faq) answer to Start with ES6 import statements to get access to symbols referenced in the spec. - - - + @@ -406,9 +398,7 @@ Start with ES6 import statements to get access to symbols referenced in the spec Here's the `describe` and the `beforeEach` that precedes the tests: - - - + @@ -528,9 +518,7 @@ The tests assert that `el` contains the expected title text. Jasmine runs the `beforeEach` function before each of these tests - - - + @@ -557,9 +545,7 @@ The `TestBed.createComponent` does _not_ trigger change detection. The fixture does not automatically push the component's `title` property value into the data bound element, a fact demonstrated in the following test: - - - + @@ -587,25 +573,19 @@ Some testers prefer that the Angular test environment run change detection autom That's possible by configuring the `TestBed` with the `ComponentFixtureAutoDetect` provider. First import it from the testing utility library: - - - + Then add it to the `providers` array of the testing module configuration: - - - + Here are three tests that illustrate how automatic change detection works. - - - + @@ -642,9 +622,7 @@ There is no harm in calling `detectChanges()` more often than is strictly necess The application's actual `BannerComponent` behaves the same as the version above but is implemented differently. It has _external_ template and css files, specified in `templateUrl` and `styleUrls` properties. - - - + @@ -669,9 +647,7 @@ The logic in the `beforeEach` of the previous spec is split into two `beforeEach The first `beforeEach` handles asynchronous compilation. - - - + @@ -679,9 +655,7 @@ Notice the `async` function called as the argument to `beforeEach`. The `async` function is one of the Angular testing utilities and has to be imported. - - - + @@ -752,9 +726,7 @@ nor any of the `override...` methods. The `TestBed` throws an error if you try. A _synchronous_ `beforeEach` containing the remaining setup steps follows the asynchronous `beforeEach`. - - - + @@ -813,18 +785,14 @@ Components often have service dependencies. The `WelcomeComponent` displays a welcome message to the logged in user. It knows who the user is based on a property of the injected `UserService`: - - - + The `WelcomeComponent` has decision logic that interacts with the service, logic that makes this component worth testing. Here's the testing module configuration for the spec file, `src/app/welcome.component.spec.ts`: - - - + @@ -852,9 +820,7 @@ It is far easier and safer to create and register a test double in place of the This particular test suite supplies a minimal `UserService` stub that satisfies the needs of the `WelcomeComponent` and its tests: - - - + @@ -872,9 +838,7 @@ The safest way to get the injected service, the way that **_always works_**, is to **get it from the injector of the _component-under-test_**. The component injector is a property of the fixture's `DebugElement`. - - - + @@ -889,9 +853,7 @@ But it only works when Angular injects the component with the service instance i Fortunately, in this test suite, the _only_ provider of `UserService` is the root testing module, so it is safe to call `TestBed.get` as follows: - - - + @@ -920,9 +882,7 @@ that's provided to the testing module in the body of your test. The `userService` instance injected into the component is a completely _different_ object, a clone of the provided `userServiceStub`. - - - + @@ -932,17 +892,13 @@ a clone of the provided `userServiceStub`. ### Final setup and tests Here's the complete `beforeEach` using `TestBed.get`: - - - + And here are some tests: - - - + @@ -982,9 +938,7 @@ The `TwainComponent` handles the display, delegating the server request to the ` Both are in the `src/app/shared` folder because the author intends to display Twain quotes on other pages someday. Here is the `TwainComponent`. - - - + @@ -994,9 +948,7 @@ It is sufficient to see within `ngOnInit` that `twainService.getQuote` returns a In general, tests should not make calls to remote servers. They should emulate such calls. The setup in this `src/app/shared/twain.component.spec.ts` shows one way to do that: - - - + @@ -1009,9 +961,7 @@ This setup is similar to the [`welcome.component.spec` setup](guide/testing#welc But instead of creating a stubbed service object, it injects the _real_ service (see the testing module `providers`) and replaces the critical `getQuote` method with a Jasmine spy. - - - + @@ -1038,9 +988,7 @@ You can _stub and spy_ at the same time, as shown in [an example below](guide/te Here are the tests with commentary to follow: - - - + @@ -1066,9 +1014,7 @@ value becomes available. The test must become _asynchronous_. Notice the `async` in the third test. - - - + @@ -1123,9 +1069,7 @@ The `getQuote` helper method extracts the display element text and the expectati The fourth test verifies the same component behavior in a different way. - - - + @@ -1185,9 +1129,7 @@ Now you are responsible for chaining promises, handling errors, and calling `don Here is a `done` version of the previous two tests: - - - + @@ -1222,9 +1164,7 @@ Clicking that hero tells the `DashboardComponent` that the user has selected the The `DashboardHeroComponent` is embedded in the `DashboardComponent` template like this: - - - + @@ -1233,9 +1173,7 @@ to the looping value and listens for the component's `selected` event. Here's the component's definition: - - - + @@ -1248,9 +1186,7 @@ You can use one of these approaches: A quick look at the `DashboardComponent` constructor discourages the first approach: - - - + @@ -1280,9 +1216,7 @@ so, try the second and third options. Here's the spec file setup. - - - + @@ -1295,9 +1229,7 @@ the way the `DashboardComponent` would set it via the property binding in its re The first test follows: - - - + @@ -1305,9 +1237,7 @@ It verifies that the hero name is propagated to template with a binding. Because the template passes the hero name through the Angular `UpperCasePipe`, the test must match the element value with the uppercased name: - - - + @@ -1330,9 +1260,7 @@ low cost and without resorting to much slower and more complicated end-to-end te The second test verifies click behavior. Clicking the hero should raise a `selected` event that the host component (`DashboardComponent` presumably) can hear: - - - + @@ -1357,9 +1285,7 @@ The second parameter is the event object passed to the handler. In this example, the test triggers a "click" event with a null event object. - - - + @@ -1380,9 +1306,7 @@ Clicking a button, an anchor, or an arbitrary HTML element is a common test task Make that easy by encapsulating the _click-triggering_ process in a helper such as the `click` function below: - - - + @@ -1413,9 +1337,7 @@ If you like it, add it to your own collection of helpers. Here's the previous test, rewritten using this click helper. - - - + @@ -1434,9 +1356,7 @@ But does the `DashboardHeroComponent` work correctly when properly data-bound to Testing with the actual `DashboardComponent` host is doable but seems more trouble than its worth. It's easier to emulate the `DashboardComponent` host with a _test host_ like this one: - - - + @@ -1451,9 +1371,7 @@ in its `selectedHero` property. Later, the tests check that property to verify t The setup for the test-host tests is similar to the setup for the stand-alone tests: - - - + @@ -1471,9 +1389,7 @@ albeit at greater depth in the element tree than before. The tests themselves are almost identical to the stand-alone version: - - - + @@ -1492,9 +1408,7 @@ really does find its way up through the event binding to the host component. Testing the actual `DashboardComponent` seemed daunting because it injects the `Router`. - - - + @@ -1503,9 +1417,7 @@ The `Router` has a complicated API and is entwined with other services and appli Fortunately, the `DashboardComponent` isn't doing much with the `Router` - - - + @@ -1514,26 +1426,20 @@ As a rule you test the component, not the router, and care only if the component navigates with the right address under the given conditions. Stubbing the router with a test implementation is an easy option. This should do the trick: - - - + Now set up the testing module with the test stubs for the `Router` and `HeroService`, and create a test instance of the `DashboardComponent` for subsequent testing. - - - + The following test clicks the displayed hero and confirms (with the help of a spy) that `Router.navigateByUrl` is called with the expected url. - - - + @@ -1544,9 +1450,7 @@ The following test clicks the displayed hero and confirms (with the help of a sp Notice the `inject` function in the second `it` argument. - - - + @@ -1582,9 +1486,7 @@ That's fine for this test because the `Router` is, and must be, provided by the If you need a service provided by the component's _own_ injector, call `fixture.debugElement.injector.get` instead: - - - + @@ -1629,17 +1531,13 @@ Angular injects the `ActivatedRoute` into the `HeroDetailComponent`, and the component extracts the `id` so it can fetch the corresponding hero via the `HeroDetailService`. Here's the `HeroDetailComponent` constructor: - - - + `HeroDetailComponent` subscribes to `ActivatedRoute.params` changes in its `ngOnInit` method. - - - + @@ -1680,9 +1578,7 @@ Consider placing such helpers in a `testing` folder sibling to the `app` folder. This sample keeps `ActivatedRouteStub` in `testing/router-stubs.ts`: - - - + @@ -1727,9 +1623,7 @@ The router stubs in this guide are meant to inspire you. Create your own stubs t ### Testing with the _Observable_ test double Here's a test demonstrating the component's behavior when the observed `id` refers to an existing hero: - - - + @@ -1748,9 +1642,7 @@ When the `id` cannot be found, the component should re-route to the `HeroListCom The test suite setup provided the same `RouterStub` [described above](guide/testing#routed-component) which spies on the router without actually navigating. This test supplies a "bad" id and expects the component to try to navigate. - - - + @@ -1762,9 +1654,7 @@ The component should do something reasonable when there is no `id`. In this implementation, the component should create and display a new hero. New heroes have `id=0` and a blank `name`. This test confirms that the component behaves as expected: - - - + @@ -1799,9 +1689,7 @@ The `HeroDetailComponent` is a simple view with a title, two hero fields, and tw But there's already plenty of template complexity. - - - + @@ -1817,9 +1705,7 @@ Even a small form such as this one can produce a mess of tortured conditional se Tame the madness with a `Page` class that simplifies access to component properties and encapsulates the logic that sets them. Here's the `Page` class for the `hero-detail.component.spec.ts` - - - + @@ -1828,9 +1714,7 @@ Now the important hooks for component manipulation and inspection are neatly org A `createComponent` method creates a `page` object and fills in the blanks once the `hero` arrives. - - - + @@ -1840,9 +1724,7 @@ There are no distractions: no waiting for promises to resolve and no searching t Here are a few more `HeroDetailComponent` tests to drive the point home. - - - + @@ -1856,9 +1738,7 @@ Here are a few more `HeroDetailComponent` tests to drive the point home. ## Setup with module imports Earlier component tests configured the testing module with a few `declarations` like this: - - - + @@ -1881,9 +1761,7 @@ In addition to the support it receives from the default testing module `CommonMo One approach is to configure the testing module from the individual pieces as in this example: - - - + @@ -1892,9 +1770,7 @@ a `SharedModule` to combine these and other frequently requested parts. The test configuration can use the `SharedModule` too as seen in this alternative setup: - - - + @@ -1910,9 +1786,7 @@ The `HeroDetailComponent` is part of the `HeroModule` [Feature Module](guide/ngm including the `SharedModule`. Try a test configuration that imports the `HeroModule` like this one: - - - + @@ -1952,9 +1826,7 @@ especially when the feature module is small and mostly self-contained, as featur The `HeroDetailComponent` provides its own `HeroDetailService`. - - - + @@ -1979,9 +1851,7 @@ There might not be a remote server to call. Fortunately, the `HeroDetailService` delegates responsibility for remote data access to an injected `HeroService`. - - - + @@ -2000,9 +1870,7 @@ The `TestBed.overrideComponent` method can replace the component's `providers` w as seen in the following setup variation: - - - + @@ -2016,9 +1884,7 @@ Notice that `TestBed.configureTestingModule` no longer provides a (fake) `HeroSe Focus on the `overrideComponent` method. - - - + @@ -2069,9 +1935,7 @@ were called by spying on the service methods. Accordingly, the stub implements its methods as spies: - - - + @@ -2083,9 +1947,7 @@ Accordingly, the stub implements its methods as spies: Now the tests can control the component's hero directly by manipulating the spy-stub's `testHero` and confirm that service methods were called. - - - + @@ -2114,17 +1976,13 @@ It also displays a navigation bar with anchors and their `RouterLink` directives {@a app-component-html} - - - + The component class does nothing. - - - + @@ -2140,9 +1998,7 @@ See why this is worth doing [below](guide/testing#why-stubbed-routerlink-tests). The test setup should look familiar. - - - + @@ -2169,9 +2025,7 @@ and throws an error. The `RouterLinkStubDirective` contributes substantively to the test: - - - + @@ -2191,9 +2045,7 @@ Tests can inspect that property to confirm the expected _click-to-navigation_ be A little more setup triggers the initial data binding and gets references to the navigation links: - - - + @@ -2210,9 +2062,7 @@ Angular always adds attached directives to the component's injector. Here are some tests that leverage this setup: - - - + @@ -2336,26 +2186,20 @@ 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 above (in particular the ["Shallow test"](guide/testing#shallow-component-test) approach). - - - + @@ -2370,9 +2214,7 @@ 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. - - - + @@ -2395,9 +2237,7 @@ The initial value is the word "cyan" which should be the background color of the Here are some tests of this component: - - - + @@ -2477,9 +2317,7 @@ Here are some synchronous and asynchronous unit tests of the `FancyService` written without assistance from Angular testing utilities. - - - + @@ -2523,9 +2361,7 @@ In many cases, it's easier to create and _inject_ dependencies by hand. The `DependentService` is a simple example: - - - + @@ -2533,9 +2369,7 @@ It delegates its only method, `getValue`, to the injected `FancyService`. Here are several ways to test it. - - - + @@ -2566,9 +2400,7 @@ metadata and an interface. Consider a `TitleCasePipe` that capitalizes the first letter of each word. Here's a naive implementation with a regular expression. - - - + @@ -2576,9 +2408,7 @@ Anything that uses a regular expression is worth testing thoroughly. Use simple Jasmine to explore the expected cases and the edge cases. - - - + @@ -2591,9 +2421,7 @@ They can't tell if the `TitleCasePipe` is working properly as applied in the app Consider adding component tests such as this one: - - - + @@ -2607,18 +2435,14 @@ The Angular testing utilities are specifically designed to facilitate such tests Consider this `ButtonComp` component. - - - + The following Angular test demonstrates that clicking a button in the template leads to an update of the on-screen message. - - - + @@ -2632,9 +2456,7 @@ exploring many more conditions with less effort. Here are a set of unit tests that verify the component's outputs in the face of a variety of component inputs. - - - + @@ -3044,9 +2866,8 @@ Here are the most important static methods, in order of likely utility. The `TestBed.get` method takes an optional second parameter, the object to return if Angular can't find the provider (`null` in this example): - - + After calling `get`, the `TestBed` configuration is frozen for the duration of the current spec. @@ -3614,9 +3435,7 @@ predicate that filters the source element's subtree for matching `DebugElement`. The predicate is any method that takes a `DebugElement` and returns a _truthy_ value. The following example finds all `DebugElements` with a reference to a template local variable named "content": - - - + @@ -3627,9 +3446,7 @@ The Angular `By` class has three static methods for common predicates: * `By.directive(directive)` - return elements that Angular matched to an instance of the directive class. - - - +