5 lines
30 KiB
JSON
5 lines
30 KiB
JSON
{
|
|
"id": "guide/testing-utility-apis",
|
|
"title": "Testing Utility APIs",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/testing-utility-apis.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-utility-apis\">Testing Utility APIs<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-utility-apis#testing-utility-apis\"><i class=\"material-icons\">link</i></a></h1>\n<p>This page describes the most useful Angular testing features.</p>\n<p>The Angular testing utilities include the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code>, the <code><a href=\"api/core/testing/ComponentFixture\" class=\"code-anchor\">ComponentFixture</a></code>, and a handful of functions that control the test environment.\nThe <a href=\"guide/testing-utility-apis#testbed-api-summary\"><em>TestBed</em></a> and <a href=\"guide/testing-utility-apis#component-fixture-api-summary\"><em>ComponentFixture</em></a> classes are covered separately.</p>\n<p>Here's a summary of the stand-alone functions, in order of likely utility:</p>\n<table>\n <tbody><tr>\n <th>\n Function\n </th>\n <th>\n Description\n </th>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/core/testing/waitForAsync\" class=\"code-anchor\">waitForAsync</a></code>\n </td>\n <td>\n<p> Runs the body of a test (<code>it</code>) or setup (<code>beforeEach</code>) function within a special <em>async test zone</em>.\nSee <a href=\"guide/testing-components-scenarios#waitForAsync\">discussion above</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/core/testing/fakeAsync\" class=\"code-anchor\">fakeAsync</a></code>\n </td>\n <td>\n<p> Runs the body of a test (<code>it</code>) within a special <em>fakeAsync test zone</em>, enabling\na linear control flow coding style. See <a href=\"guide/testing-components-scenarios#fake-async\">discussion above</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/core/testing/tick\" class=\"code-anchor\">tick</a></code>\n </td>\n <td>\n<p> Simulates the passage of time and the completion of pending asynchronous activities\nby flushing both <em>timer</em> and <em>micro-task</em> queues within the <em>fakeAsync test zone</em>.</p>\n <div class=\"alert is-helpful\">\n<p> The curious, dedicated reader might enjoy this lengthy blog post,\n<a href=\"https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/\">\"<em>Tasks, microtasks, queues and schedules</em>\"</a>.</p>\n </div>\n<p> Accepts an optional argument that moves the virtual clock forward\nby the specified number of milliseconds,\nclearing asynchronous activities scheduled within that timeframe.\nSee <a href=\"guide/testing-components-scenarios#tick\">discussion above</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>inject</code>\n </td>\n <td>\n<p> Injects one or more services from the current <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> injector into a test function.\nIt cannot inject a service provided by the component itself.\nSee discussion of the <a href=\"guide/testing-components-scenarios#get-injected-services\">debugElement.injector</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/core/testing/discardPeriodicTasks\" class=\"code-anchor\">discardPeriodicTasks</a></code>\n </td>\n <td>\n<p> When a <code><a href=\"api/core/testing/fakeAsync\" class=\"code-anchor\">fakeAsync</a>()</code> test ends with pending timer event <em>tasks</em> (queued <code>setTimeOut</code> and <code>setInterval</code> callbacks),\nthe test fails with a clear error message.</p>\n<p> In general, a test should end with no queued tasks.\nWhen pending timer tasks are expected, call <code><a href=\"api/core/testing/discardPeriodicTasks\" class=\"code-anchor\">discardPeriodicTasks</a></code> to flush the <em>task</em> queue\nand avoid the error.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/core/testing/flushMicrotasks\" class=\"code-anchor\">flushMicrotasks</a></code>\n </td>\n <td>\n<p> When a <code><a href=\"api/core/testing/fakeAsync\" class=\"code-anchor\">fakeAsync</a>()</code> test ends with pending <em>micro-tasks</em> such as unresolved promises,\nthe test fails with a clear error message.</p>\n<p> In general, a test should wait for micro-tasks to finish.\nWhen pending microtasks are expected, call <code><a href=\"api/core/testing/flushMicrotasks\" class=\"code-anchor\">flushMicrotasks</a></code> to flush the <em>micro-task</em> queue\nand avoid the error.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/core/testing/ComponentFixtureAutoDetect\" class=\"code-anchor\">ComponentFixtureAutoDetect</a></code>\n </td>\n <td>\n<p> A provider token for a service that turns on <a href=\"guide/testing-components-scenarios#automatic-change-detection\">automatic change detection</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/core/testing/getTestBed\" class=\"code-anchor\">getTestBed</a></code>\n </td>\n <td>\n<p> Gets the current instance of the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code>.\nUsually unnecessary because the static class methods of the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> class are typically sufficient.\nThe <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> instance exposes a few rarely used members that are not available as\nstatic methods.</p>\n </td>\n </tr>\n</tbody></table>\n<a id=\"testbed-class-summary\"></a>\n<h2 id=\"testbed-class-summary\"><em>TestBed</em> class summary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-utility-apis#testbed-class-summary\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> class is one of the principal Angular testing utilities.\nIts API is quite large and can be overwhelming until you've explored it,\na little at a time. Read the early part of this guide first\nto get the basics before trying to absorb the full API.</p>\n<p>The module definition passed to <code>configureTestingModule</code>\nis a subset of the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> metadata properties.</p>\n<code-example language=\"javascript\">\n type <a href=\"api/core/testing/TestModuleMetadata\" class=\"code-anchor\">TestModuleMetadata</a> = {\n providers?: any[];\n declarations?: any[];\n imports?: any[];\n schemas?: Array<<a href=\"api/core/SchemaMetadata\" class=\"code-anchor\">SchemaMetadata</a> | any[]>;\n };\n</code-example>\n<a id=\"metadata-override-object\"></a>\n<p>Each override method takes a <code><a href=\"api/core/testing/MetadataOverride\" class=\"code-anchor\">MetadataOverride</a><T></code> where <code>T</code> is the kind of metadata\nappropriate to the method, that is, the parameter of an <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>,\n<code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code>, <code>@<a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a></code>, or <code>@<a href=\"api/core/Pipe\" class=\"code-anchor\">Pipe</a></code>.</p>\n<code-example language=\"javascript\">\n type <a href=\"api/core/testing/MetadataOverride\" class=\"code-anchor\">MetadataOverride</a><T> = {\n add?: Partial<T>;\n remove?: Partial<T>;\n set?: Partial<T>;\n };\n</code-example>\n<a id=\"testbed-methods\"></a>\n<a id=\"testbed-api-summary\"></a>\n<p>The <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> API consists of static class methods that either update or reference a <em>global</em> instance of the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code>.</p>\n<p>Internally, all static methods cover methods of the current runtime <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> instance,\nwhich is also returned by the <code><a href=\"api/core/testing/getTestBed\" class=\"code-anchor\">getTestBed</a>()</code> function.</p>\n<p>Call <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> methods <em>within</em> a <code>beforeEach()</code> to ensure a fresh start before each individual test.</p>\n<p>Here are the most important static methods, in order of likely utility.</p>\n<table>\n <tbody><tr>\n <th>\n Methods\n </th>\n <th>\n Description\n </th>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>configureTestingModule</code>\n </td>\n <td>\n<p> The testing shims (<code>karma-test-shim</code>, <code>browser-test-shim</code>)\nestablish the <a href=\"guide/testing\">initial test environment</a> and a default testing module.\nThe default testing module is configured with basic declaratives and some Angular service substitutes that every tester needs.</p>\n<p> Call <code>configureTestingModule</code> to refine the testing module configuration for a particular set of tests\nby adding and removing imports, declarations (of components, directives, and pipes), and providers.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>compileComponents</code>\n </td>\n <td>\n<p> Compile the testing module asynchronously after you've finished configuring it.\nYou <strong>must</strong> call this method if <em>any</em> of the testing module components have a <code>templateUrl</code>\nor <code>styleUrls</code> because fetching component template and style files is necessarily asynchronous.\nSee <a href=\"guide/testing-components-scenarios#compile-components\">above</a>.</p>\n<p> After calling <code>compileComponents</code>, the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> configuration is frozen for the duration of the current spec.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>createComponent<t></t></code>\n </td>\n <td>\n<p> Create an instance of a component of type <code>T</code> based on the current <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> configuration.\nAfter calling <code>compileComponent</code>, the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> configuration is frozen for the duration of the current spec.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>overrideModule</code>\n </td>\n <td>\n<p> Replace metadata for the given <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code>. Recall that modules can import other modules.\nThe <code>overrideModule</code> method can reach deeply into the current testing module to\nmodify one of these inner modules.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>overrideComponent</code>\n </td>\n <td>\n<p> Replace metadata for the given component class, which could be nested deeply\nwithin an inner module.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>overrideDirective</code>\n </td>\n <td>\n<p> Replace metadata for the given directive class, which could be nested deeply\nwithin an inner module.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>overridePipe</code>\n </td>\n <td>\n<p> Replace metadata for the given pipe class, which could be nested deeply\nwithin an inner module.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <a id=\"testbed-inject\"></a>\n <code>inject</code>\n </td>\n <td>\n<p> Retrieve a service from the current <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> injector.</p>\n<p> The <code>inject</code> function is often adequate for this purpose.\nBut <code>inject</code> throws an error if it can't provide the service.</p>\n<p> What if the service is optional?</p>\n<p> The <code>TestBed.inject()</code> method takes an optional second parameter,\nthe object to return if Angular can't find the provider\n(<code>null</code> in this example):</p>\n<p> <code-example path=\"testing/src/app/demo/demo.testbed.spec.ts\" region=\"testbed-get-w-null\" header=\"app/demo/demo.testbed.spec.ts\">\nservice = TestBed.inject(NotProvided, null); // service is null\n\n</code-example></p>\n<p> After calling <code>TestBed.inject</code>, the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> configuration is frozen for the duration of the current spec.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <a id=\"testbed-initTestEnvironment\"></a>\n <code>initTestEnvironment</code>\n </td>\n <td>\n<p> Initialize the testing environment for the entire test run.</p>\n<p> The testing shims (<code>karma-test-shim</code>, <code>browser-test-shim</code>) call it for you\nso there is rarely a reason for you to call it yourself.</p>\n<p> You may call this method <em>exactly once</em>. If you must change\nthis default in the middle of your test run, call <code>resetTestEnvironment</code> first.</p>\n<p> Specify the Angular compiler factory, a <code><a href=\"api/core/PlatformRef\" class=\"code-anchor\">PlatformRef</a></code>, and a default Angular testing module.\nAlternatives for non-browser platforms are available in the general form\n<code>@angular/platform-<platform_name>/testing/<platform_name></code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>resetTestEnvironment</code>\n </td>\n <td>\n<p> Reset the initial test environment, including the default testing module.</p>\n </td>\n </tr>\n</tbody></table>\n<p>A few of the <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> instance methods are not covered by static <code><a href=\"api/core/testing/TestBed\" class=\"code-anchor\">TestBed</a></code> <em>class</em> methods.\nThese are rarely needed.</p>\n<a id=\"component-fixture-api-summary\"></a>\n<h2 id=\"the-componentfixture\">The <em>ComponentFixture</em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-utility-apis#the-componentfixture\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code>TestBed.createComponent<T></code>\ncreates an instance of the component <code>T</code>\nand returns a strongly typed <code><a href=\"api/core/testing/ComponentFixture\" class=\"code-anchor\">ComponentFixture</a></code> for that component.</p>\n<p>The <code><a href=\"api/core/testing/ComponentFixture\" class=\"code-anchor\">ComponentFixture</a></code> properties and methods provide access to the component,\nits DOM representation, and aspects of its Angular environment.</p>\n<a id=\"component-fixture-properties\"></a>\n<h3 id=\"componentfixture-properties\"><em>ComponentFixture</em> properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-utility-apis#componentfixture-properties\"><i class=\"material-icons\">link</i></a></h3>\n<p>Here are the most important properties for testers, in order of likely utility.</p>\n<table>\n <tbody><tr>\n <th>\n Properties\n </th>\n <th>\n Description\n </th>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>componentInstance</code>\n </td>\n <td>\n<p> The instance of the component class created by <code>TestBed.createComponent</code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>debugElement</code>\n </td>\n <td>\n<p> The <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> associated with the root element of the component.</p>\n<p> The <code>debugElement</code> provides insight into the component and its DOM element during test and debugging.\nIt's a critical property for testers. The most interesting members are covered <a href=\"guide/testing-utility-apis#debug-element-details\">below</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>nativeElement</code>\n </td>\n <td>\n<p> The native DOM element at the root of the component.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>changeDetectorRef</code>\n </td>\n <td>\n<p> The <code><a href=\"api/core/ChangeDetectorRef\" class=\"code-anchor\">ChangeDetectorRef</a></code> for the component.</p>\n<p> The <code><a href=\"api/core/ChangeDetectorRef\" class=\"code-anchor\">ChangeDetectorRef</a></code> is most valuable when testing a\ncomponent that has the <code><a href=\"api/core/ChangeDetectionStrategy#OnPush\" class=\"code-anchor\">ChangeDetectionStrategy.OnPush</a></code> method\nor the component's change detection is under your programmatic control.</p>\n </td>\n </tr>\n</tbody></table>\n<a id=\"component-fixture-methods\"></a>\n<h3 id=\"componentfixture-methods\"><em>ComponentFixture</em> methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-utility-apis#componentfixture-methods\"><i class=\"material-icons\">link</i></a></h3>\n<p>The <em>fixture</em> methods cause Angular to perform certain tasks on the component tree.\nCall these method to trigger Angular behavior in response to simulated user action.</p>\n<p>Here are the most useful methods for testers.</p>\n<table>\n <tbody><tr>\n <th>\n Methods\n </th>\n <th>\n Description\n </th>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>detectChanges</code>\n </td>\n <td>\n<p> Trigger a change detection cycle for the component.</p>\n<p> Call it to initialize the component (it calls <code>ngOnInit</code>) and after your\ntest code, change the component's data bound property values.\nAngular can't see that you've changed <code>personComponent.name</code> and won't update the <code>name</code>\nbinding until you call <code>detectChanges</code>.</p>\n<p> Runs <code>checkNoChanges</code> afterwards to confirm that there are no circular updates unless\ncalled as <code>detectChanges(false)</code>;</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>autoDetectChanges</code>\n </td>\n <td>\n<p> Set this to <code>true</code> when you want the fixture to detect changes automatically.</p>\n<p> When autodetect is <code>true</code>, the test fixture calls <code>detectChanges</code> immediately\nafter creating the component. Then it listens for pertinent zone events\nand calls <code>detectChanges</code> accordingly.\nWhen your test code modifies component property values directly,\nyou probably still have to call <code>fixture.detectChanges</code> to trigger data binding updates.</p>\n<p> The default is <code>false</code>. Testers who prefer fine control over test behavior\ntend to keep it <code>false</code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>checkNoChanges</code>\n </td>\n <td>\n<p> Do a change detection run to make sure there are no pending changes.\nThrows an exceptions if there are.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>isStable</code>\n </td>\n <td>\n<p> If the fixture is currently <em>stable</em>, returns <code>true</code>.\nIf there are async tasks that have not completed, returns <code>false</code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>whenStable</code>\n </td>\n <td>\n<p> Returns a promise that resolves when the fixture is stable.</p>\n<p> To resume testing after completion of asynchronous activity or\nasynchronous change detection, hook that promise.\nSee <a href=\"guide/testing-components-scenarios#when-stable\">above</a>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>destroy</code>\n </td>\n <td>\n<p> Trigger component destruction.</p>\n </td>\n </tr>\n</tbody></table>\n<a id=\"debug-element-details\"></a>\n<h4 id=\"debugelement\"><em>DebugElement</em><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/testing-utility-apis#debugelement\"><i class=\"material-icons\">link</i></a></h4>\n<p>The <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> provides crucial insights into the component's DOM representation.</p>\n<p>From the test root component's <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> returned by <code>fixture.debugElement</code>,\nyou can walk (and query) the fixture's entire element and component subtrees.</p>\n<p>Here are the most useful <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> members for testers, in approximate order of utility:</p>\n<table>\n <tbody><tr>\n <th>\n Member\n </th>\n <th>\n Description\n </th>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>nativeElement</code>\n </td>\n <td>\n<p> The corresponding DOM element in the browser (null for WebWorkers).</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a></code>\n </td>\n <td>\n<p> Calling <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>(predicate: <a href=\"api/core/Predicate\" class=\"code-anchor\">Predicate</a><<a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a>>)</code> returns the first <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code>\nthat matches the <a href=\"guide/testing-utility-apis#query-predicate\">predicate</a> at any depth in the subtree.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>queryAll</code>\n </td>\n <td>\n<p> Calling <code>queryAll(predicate: <a href=\"api/core/Predicate\" class=\"code-anchor\">Predicate</a><<a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a>>)</code> returns all <code>DebugElements</code>\nthat matches the <a href=\"guide/testing-utility-apis#query-predicate\">predicate</a> at any depth in subtree.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>injector</code>\n </td>\n <td>\n<p> The host dependency injector.\nFor example, the root element's component instance injector.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>componentInstance</code>\n </td>\n <td>\n<p> The element's own component instance, if it has one.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>context</code>\n </td>\n <td>\n<p> An object that provides parent context for this element.\nOften an ancestor component instance that governs this element.</p>\n<p> When an element is repeated within <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code>, the context is an <code>NgForRow</code> whose <code>$implicit</code>\nproperty is the value of the row instance value.\nFor example, the <code>hero</code> in <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let hero of heroes\"</code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>children</code>\n </td>\n <td>\n<p> The immediate <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> children. Walk the tree by descending through <code>children</code>.</p>\n <div class=\"alert is-helpful\">\n<p> <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> also has <code>childNodes</code>, a list of <code><a href=\"api/core/DebugNode\" class=\"code-anchor\">DebugNode</a></code> objects.\n<code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> derives from <code><a href=\"api/core/DebugNode\" class=\"code-anchor\">DebugNode</a></code> objects and there are often\nmore nodes than elements. Testers can usually ignore plain nodes.</p>\n </div>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>parent</code>\n </td>\n <td>\n<p> The <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> parent. Null if this is the root element.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>name</code>\n </td>\n <td>\n<p> The element tag name, if it is an element.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>triggerEventHandler</code>\n </td>\n <td>\n<p> Triggers the event by its name if there is a corresponding listener\nin the element's <code>listeners</code> collection.\nThe second parameter is the <em>event object</em> expected by the handler.\nSee <a href=\"guide/testing-components-scenarios#trigger-event-handler\">above</a>.</p>\n<p> If the event lacks a listener or there's some other problem,\nconsider calling <code>nativeElement.dispatchEvent(eventObject)</code>.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>listeners</code>\n </td>\n <td>\n<p> The callbacks attached to the component's <code>@<a href=\"api/core/Output\" class=\"code-anchor\">Output</a></code> properties and/or the element's event properties.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>providerTokens</code>\n </td>\n <td>\n<p> This component's injector lookup tokens.\nIncludes the component itself plus the tokens that the component lists in its <code>providers</code> metadata.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>source</code>\n </td>\n <td>\n<p> Where to find this element in the source component template.</p>\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n <code>references</code>\n </td>\n <td>\n<p> Dictionary of objects associated with template local variables (e.g. <code>#foo</code>),\nkeyed by the local variable name.</p>\n </td>\n </tr>\n</tbody></table>\n<a id=\"query-predicate\"></a>\n<p>The <code>DebugElement.query(predicate)</code> and <code>DebugElement.queryAll(predicate)</code> methods take a\npredicate that filters the source element's subtree for matching <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code>.</p>\n<p>The predicate is any method that takes a <code><a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a></code> and returns a <em>truthy</em> value.\nThe following example finds all <code>DebugElements</code> with a reference to a template local variable named \"content\":</p>\n<code-example path=\"testing/src/app/demo/demo.testbed.spec.ts\" region=\"custom-predicate\" header=\"app/demo/demo.testbed.spec.ts\">\n// Filter for DebugElements with a #content reference\nconst contentRefs = el.queryAll( de => de.references.content);\n\n</code-example>\n<p>The Angular <code><a href=\"api/platform-browser/By\" class=\"code-anchor\">By</a></code> class has three static methods for common predicates:</p>\n<ul>\n<li><code>By.all</code> - return all elements.</li>\n<li><code>By.css(selector)</code> - return elements with matching CSS selectors.</li>\n<li><code>By.directive(directive)</code> - return elements that Angular matched to an instance of the directive class.</li>\n</ul>\n<code-example path=\"testing/src/app/hero/hero-list.component.spec.ts\" region=\"by\" header=\"app/hero/hero-list.component.spec.ts\">\n// Can find <a href=\"api/core/DebugElement\" class=\"code-anchor\">DebugElement</a> either by css selector or by directive\nconst h2 = fixture.debugElement.query(By.css('h2'));\nconst directive = fixture.debugElement.query(By.directive(HighlightDirective));\n\n</code-example>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/testing\n - guide/testing-components-scenarios\n-->\n<!-- links from this doc:\n - api/animations/query\n - api/common/NgForOf\n - api/core/ChangeDetectionStrategy#OnPush\n - api/core/ChangeDetectorRef\n - api/core/Component\n - api/core/DebugElement\n - api/core/DebugNode\n - api/core/Directive\n - api/core/NgModule\n - api/core/Output\n - api/core/Pipe\n - api/core/PlatformRef\n - api/core/Predicate\n - api/core/SchemaMetadata\n - api/core/testing/ComponentFixture\n - api/core/testing/ComponentFixtureAutoDetect\n - api/core/testing/MetadataOverride\n - api/core/testing/TestBed\n - api/core/testing/TestModuleMetadata\n - api/core/testing/discardPeriodicTasks\n - api/core/testing/fakeAsync\n - api/core/testing/flushMicrotasks\n - api/core/testing/getTestBed\n - api/core/testing/tick\n - api/core/testing/waitForAsync\n - api/platform-browser/By\n - guide/testing\n - guide/testing-components-scenarios#automatic-change-detection\n - guide/testing-components-scenarios#compile-components\n - guide/testing-components-scenarios#fake-async\n - guide/testing-components-scenarios#get-injected-services\n - guide/testing-components-scenarios#tick\n - guide/testing-components-scenarios#trigger-event-handler\n - guide/testing-components-scenarios#waitForAsync\n - guide/testing-components-scenarios#when-stable\n - guide/testing-utility-apis#component-fixture-api-summary\n - guide/testing-utility-apis#componentfixture-methods\n - guide/testing-utility-apis#componentfixture-properties\n - guide/testing-utility-apis#debug-element-details\n - guide/testing-utility-apis#debugelement\n - guide/testing-utility-apis#query-predicate\n - guide/testing-utility-apis#testbed-api-summary\n - guide/testing-utility-apis#testbed-class-summary\n - guide/testing-utility-apis#testing-utility-apis\n - guide/testing-utility-apis#the-componentfixture\n - https://github.com/angular/angular/edit/master/aio/content/guide/testing-utility-apis.md?message=docs%3A%20describe%20your%20change...\n - https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/\n-->"
|
|
} |