• Overview
@angular/cdk/testing

ComponentHarness

Class

Base class for component test harnesses that all component harness authors should extend. This base component harness provides the basic ability to locate element and sub-component harnesses.

API

  
    abstract class ComponentHarness {}

constructor

ComponentHarness
@paramlocatorFactoryLocatorFactory
@returnsComponentHarness

host

Promise<TestElement>

Gets a Promise for the TestElement representing the host element of the component.

@returnsPromise<TestElement>

documentRootLocatorFactory

LocatorFactory

Gets a LocatorFactory for the document root element. This factory can be used to create locators for elements that a component creates outside of its own root element. (e.g. by appending to document.body).

@returnsLocatorFactory

locatorFor

() => Promise<LocatorFnResult<T>>

Creates an asynchronous locator function that can be used to find a ComponentHarness instance or element under the host element of this ComponentHarness.

For example, given the following DOM and assuming DivHarness.hostSelector is 'div'

          
<div id="d1"></div><div id="d2"></div>

then we expect:

          
await ch.locatorFor(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await ch.locatorFor('div', DivHarness)() // Gets a `TestElement` instance for #d1await ch.locatorFor('span')()            // Throws because the `Promise` rejects
@paramqueriesT

A list of queries specifying which harnesses and elements to search for:

@returns() => Promise<LocatorFnResult<T>>

locatorForOptional

() => Promise<LocatorFnResult<T> | null>

Creates an asynchronous locator function that can be used to find a ComponentHarness instance or element under the host element of this ComponentHarness.

For example, given the following DOM and assuming DivHarness.hostSelector is 'div'

          
<div id="d1"></div><div id="d2"></div>

then we expect:

          
await ch.locatorForOptional(DivHarness, 'div')() // Gets a `DivHarness` instance for #d1await ch.locatorForOptional('div', DivHarness)() // Gets a `TestElement` instance for #d1await ch.locatorForOptional('span')()            // Gets `null`
@paramqueriesT

A list of queries specifying which harnesses and elements to search for:

@returns() => Promise<LocatorFnResult<T> | null>

locatorForAll

() => Promise<LocatorFnResult<T>[]>

Creates an asynchronous locator function that can be used to find ComponentHarness instances or elements under the host element of this ComponentHarness.

For example, given the following DOM and assuming DivHarness.hostSelector is 'div' and IdIsD1Harness.hostSelector is '#d1'

          
<div id="d1"></div><div id="d2"></div>

then we expect:

          
// Gets [DivHarness for #d1, TestElement for #d1, DivHarness for #d2, TestElement for #d2]await ch.locatorForAll(DivHarness, 'div')()// Gets [TestElement for #d1, TestElement for #d2]await ch.locatorForAll('div', '#d1')()// Gets [DivHarness for #d1, IdIsD1Harness for #d1, DivHarness for #d2]await ch.locatorForAll(DivHarness, IdIsD1Harness)()// Gets []await ch.locatorForAll('span')()
@paramqueriesT

A list of queries specifying which harnesses and elements to search for:

@returns() => Promise<LocatorFnResult<T>[]>

forceStabilize

Promise<void>

Flushes change detection and async tasks in the Angular zone. In most cases it should not be necessary to call this manually. However, there may be some edge cases where it is needed to fully flush animation events.

@returnsPromise<void>

waitForTasksOutsideAngular

Promise<void>

Waits for all scheduled or running async tasks to complete. This allows harness authors to wait for async tasks outside of the Angular zone.

@returnsPromise<void>
Jump to details