File

src/lib/component-tester.ts

Description

The main entry point of the API. It wraps an Angular ComponentFixture, and gives access to its most used properties and methods. It also allows getting elements wrapped in TestElement (and its subclasses)

Index

Properties
Methods
Accessors

Constructor

constructor(arg: Type | ComponentFixture)

Creates a ComponentFixture for the given component type using the TestBed, and creates a ComponentTester wrapping (and delegating) to this fixture. If a fixture is passed, then delegates to this fixture directly.

Note that no detectChanges() call is made by this constructor. It's up to the subclass constructor, or to the user of the created ComponentTester, to call detectChanges() at least once to trigger change detection. This is necessary because some component templates can only be evaluated once inputs have been set on the component instance.

Parameters :
Name Type Optional Description
arg Type<C> | ComponentFixture<C> No

the type of the component to wrap, or a component fixture to wrap

Properties

Readonly fixture
Type : ComponentFixture<C>

The component fixture of the component

Readonly testElement
Type : TestElement<HTMLElement>

The test element of the component

Methods

button
button(selector: string | Type)

Gets the first button matched by the given selector. Throws an Error if the matched element isn't actually a button.

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestButton | null

the wrapped button, or null if no element was matched

component
component(selector: Type)
Type parameters :
  • R

Gets the first directive matching the given component directive selector and returns its component instance

Parameters :
Name Type Optional Description
selector Type<R> No

the selector of a component directive

Returns : R
components
components(selector: Type)
Type parameters :
  • R

Gets the directives matching the given component directive selector and returns their component instance

Parameters :
Name Type Optional Description
selector Type<R> No

the selector of a component directive

Returns : Array<R>
Static create
create(componentType: Type)
Type parameters :
  • C

Creates a component fixture of the given type with the TestBed and wraps it into a ComponentTester

Parameters :
Name Type Optional
componentType Type<C> No
Returns : ComponentTester<C>
custom
custom(selector: string | Type, customTestElementType: Type)
Type parameters :
  • E

Gets the element matching the given selector, and if found, creates and returns a custom TestElement of the provided type. This is useful to create custom higher-level abstractions similar to TestInput, TestSelect, etc. for custom elements or components.

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

customTestElementType Type<E> No

the type of the TestElement subclass that will wrap the found element

Returns : E | null
customs
customs(selector: string | Type, customTestElementType: Type)
Type parameters :
  • E

Gets the elements matching the given selector, and creates and returns custom TestElements of the provided type. This is useful to create custom higher-level abstractions similar to TestInput, TestSelect, etc. for custom elements or components.

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

customTestElementType Type<E> No

the type of the TestElement subclass that will wrap the found elements

Returns : Array<E>
detectChanges
detectChanges(checkNoChanges?: boolean)

Triggers a change detection using the wrapped fixture

Parameters :
Name Type Optional
checkNoChanges boolean Yes
Returns : void
element
element(selector: K)
Type parameters :
  • K

Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestHtmlElement<HTMLDivElement> | null = tester.element('div');
Parameters :
Name Type Optional Description
selector K No

a CSS selector

the wrapped element, or null if no element matches the selector.

element
element(selector: K)
Type parameters :
  • K

Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestElement<SVGLineElement> | null = tester.element('line');
Parameters :
Name Type Optional Description
selector K No

a CSS selector

Returns : TestElement | null

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)

Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestElement | null = tester.element('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestElement | null

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)
Type parameters :
  • T

Gets the first element matching the given selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestInput | null = tester.element<HTMLInputElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestInput | null

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)
Type parameters :
  • T

Gets the first element matching the given selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestTextArea | null = tester.element<HTMLTextAreaElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)
Type parameters :
  • T

Gets the first element matching the given selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestSelect | null = tester.element<HTMLSelectElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestSelect | null

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)
Type parameters :
  • T

Gets the first element matching the given selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestButton | null = tester.element<HTMLButtonElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestButton | null

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)
Type parameters :
  • T

Gets the first element matching the given selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestHtmlElement<HTMLDivElement> | null = tester.element<HTMLDivElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)
Type parameters :
  • T

Gets the first element matching the given selector and wraps it into a TestElement. The actual type of the returned value is the TestElement subclass matching the type of the found element. So, if the matched element is an input for example, the method will return a TestInput.

Usage:

const testElement: TestElement<SVGLineElement> | null = tester.element<SVGLineElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestElement | null

the wrapped element, or null if no element matches the selector.

element
element(selector: string | Type)
Parameters :
Name Type Optional
selector string | Type<any> No
Returns : TestElement | null
elements
elements(selector: K)
Type parameters :
  • K

Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestHtmlElement<HTMLDivElement>> = tester.elements('div');
Parameters :
Name Type Optional Description
selector K No

a CSS selector

the array of matched elements, empty if no element was matched

elements
elements(selector: K)
Type parameters :
  • K

Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestElement<SVGLineElement>> = tester.elements('line');
Parameters :
Name Type Optional Description
selector K No

a CSS selector

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)

Gets all the elements matching the given selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestElement> = tester.elements('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : Array<TestElement>

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)
Type parameters :
  • T

Gets all the elements matching the given selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestInput> = tester.elements<HTMLInputElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : Array<TestInput>

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)
Type parameters :
  • T

Gets all the elements matching the given selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestTextArea> = tester.elements<HTMLTextAreaElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)
Type parameters :
  • T

Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestButton> = tester.elements<HTMLButtonElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : Array<TestButton>

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)
Type parameters :
  • T

Gets all the elements matching the given selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestSelect> = tester.elements('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : Array<TestSelect>

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)
Type parameters :
  • T

Gets all the elements matching the given selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestHtmlElement<HTMLDivElement>> = tester.elements<HTMLDivElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)
Type parameters :
  • T

Gets all the elements matching the given selector and wraps them into a TestElement. The actual type of the returned elements is the TestElement subclass matching the type of the found element. So, if the matched elements are inputs for example, the method will return an array of TestInput.

Usage:

const testElements: Array<TestElement<SVGLineElement>> = tester.elements<SVGLineElement>('.selector');
Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

the array of matched elements, empty if no element was matched

elements
elements(selector: string | Type)
Parameters :
Name Type Optional
selector string | Type<any> No
Returns : Array<TestElement>
input
input(selector: string | Type)

Gets the first input matched by the given selector. Throws an Error if the matched element isn't actually an input.

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestInput | null

the wrapped input, or null if no element was matched

select
select(selector: string | Type)

Gets the first select matched by the given selector. Throws an Error if the matched element isn't actually a select.

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

Returns : TestSelect | null

the wrapped select, or null if no element was matched

textarea
textarea(selector: string | Type)

Gets the first textarea matched by the given selector

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

the wrapped textarea, or null if no element was matched. Throws an Error if the matched element isn't actually a textarea.

token
token(selector: string | Type, token: ProviderToken)
Type parameters :
  • R

Gets the first element matching the given selector, then gets the given token from its injector, or null if there is no such token

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

token ProviderToken<R> No

the token to get from the matched element injector

Returns : R | null
tokens
tokens(selector: string | Type, token: ProviderToken)
Type parameters :
  • R

Gets the elements matching the given selector, then gets their given token from their injector, or null if there is no such token

Parameters :
Name Type Optional Description
selector string | Type<any> No

a CSS or directive selector

token ProviderToken<R> No

the token to get from the matched element injector

Returns : Array<R | null>

Accessors

nativeElement
getnativeElement()

The native DOM host element of the component

Returns : HTMLElement
componentInstance
getcomponentInstance()

Gets the instance of the tested component from the wrapped fixture

Returns : C
debugElement
getdebugElement()

Gets the debug element from the wrapped fixture

Returns : DebugElement
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement, ProviderToken, Type } from '@angular/core';
import { TestTextArea } from './test-textarea';
import { TestElement } from './test-element';
import { TestInput } from './test-input';
import { TestSelect } from './test-select';
import { TestButton } from './test-button';
import { TestElementQuerier } from './test-element-querier';
import { TestHtmlElement } from './test-html-element';

/**
 * The main entry point of the API. It wraps an Angular ComponentFixture<T>, and gives access to its
 * most used properties and methods. It also allows getting elements wrapped in TestElement (and its subclasses)
 * @param <C> the type of the component to test
 */
export class ComponentTester<C> {
  /**
   * The test element of the component
   */
  readonly testElement: TestElement<HTMLElement>;

  /**
   * The component fixture of the component
   */
  readonly fixture: ComponentFixture<C>;

  /**
   * Creates a component fixture of the given type with the TestBed and wraps it into a ComponentTester
   */
  static create<C>(componentType: Type<C>): ComponentTester<C> {
    const fixture = TestBed.createComponent(componentType);
    return new ComponentTester(fixture);
  }

  /**
   * Creates a ComponentFixture for the given component type using the TestBed, and creates a ComponentTester
   * wrapping (and delegating) to this fixture. If a fixture is passed, then delegates to this fixture directly.
   *
   * Note that no `detectChanges()` call is made by this constructor. It's up to the subclass constructor,
   * or to the user of the created ComponentTester, to call `detectChanges()` at least once to trigger change
   * detection. This is necessary because some component templates can only be evaluated once inputs
   * have been set on the component instance.
   *
   * @param arg the type of the component to wrap, or a component fixture to wrap
   */
  constructor(arg: Type<C> | ComponentFixture<C>) {
    this.fixture = arg instanceof ComponentFixture ? arg : TestBed.createComponent(arg);
    this.testElement = TestElementQuerier.wrap(this.debugElement, this) as TestElement<HTMLElement>;
  }

  /**
   * The native DOM host element of the component
   */
  get nativeElement(): HTMLElement {
    return this.fixture.nativeElement;
  }

  /**
   * Gets the instance of the tested component from the wrapped fixture
   */
  get componentInstance(): C {
    return this.fixture.componentInstance;
  }

  /**
   * Gets the debug element from the wrapped fixture
   */
  get debugElement(): DebugElement {
    return this.fixture.debugElement;
  }

  /**
   * Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestHtmlElement&lt;HTMLDivElement> | null = tester.element('div');
   * </code>
   * @param selector a CSS selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<K extends keyof HTMLElementTagNameMap>(selector: K): TestHtmlElement<HTMLElementTagNameMap[K]> | null;
  /**
   * Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestElement&lt;SVGLineElement> | null = tester.element('line');
   * </code>
   * @param selector a CSS selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<K extends keyof SVGElementTagNameMap>(selector: K): TestElement<SVGElementTagNameMap[K]> | null;
  /**
   * Gets the first element matching the given CSS selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestElement | null = tester.element('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element(selector: string | Type<any>): TestElement | null;
  /**
   * Gets the first element matching the given selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestInput | null = tester.element&lt;HTMLInputElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<T extends HTMLInputElement>(selector: string | Type<any>): TestInput | null;
  /**
   * Gets the first element matching the given selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestTextArea | null = tester.element&lt;HTMLTextAreaElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<T extends HTMLTextAreaElement>(selector: string | Type<any>): TestTextArea | null;
  /**
   * Gets the first element matching the given selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestSelect | null = tester.element&lt;HTMLSelectElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<T extends HTMLSelectElement>(selector: string | Type<any>): TestSelect | null;
  /**
   * Gets the first element matching the given selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestButton | null = tester.element&lt;HTMLButtonElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<T extends HTMLButtonElement>(selector: string | Type<any>): TestButton | null;
  /**
   * Gets the first element matching the given selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestHtmlElement&lt;HTMLDivElement> | null = tester.element&lt;HTMLDivElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<T extends HTMLElement>(selector: string | Type<any>): TestHtmlElement<T> | null;
  /**
   * Gets the first element matching the given selector and wraps it into a TestElement. The actual type
   * of the returned value is the TestElement subclass matching the type of the found element. So, if the
   * matched element is an input for example, the method will return a TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElement: TestElement&lt;SVGLineElement> | null = tester.element&lt;SVGLineElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the wrapped element, or null if no element matches the selector.
   */
  element<T extends Element>(selector: string | Type<any>): TestElement<T> | null;
  element(selector: string | Type<any>): TestElement | null {
    return this.testElement.element(selector);
  }

  /**
   * Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestHtmlElement&lt;HTMLDivElement>> = tester.elements('div');
   * </code>
   * @param selector a CSS selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<K extends keyof HTMLElementTagNameMap>(selector: K): Array<TestHtmlElement<HTMLElementTagNameMap[K]>>;
  /**
   * Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestElement&lt;SVGLineElement>> = tester.elements('line');
   * </code>
   * @param selector a CSS selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<K extends keyof SVGElementTagNameMap>(selector: K): Array<TestElement<SVGElementTagNameMap[K]>>;
  /**
   * Gets all the elements matching the given selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestElement> = tester.elements('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements(selector: string | Type<any>): Array<TestElement>;
  /**
   * Gets all the elements matching the given selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestInput> = tester.elements&lt;HTMLInputElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<T extends HTMLInputElement>(selector: string | Type<any>): Array<TestInput>;
  /**
   * Gets all the elements matching the given selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestTextArea> = tester.elements&lt;HTMLTextAreaElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<T extends HTMLTextAreaElement>(selector: string | Type<any>): Array<TestTextArea>;
  /**
   * Gets all the elements matching the given CSS selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestButton> = tester.elements&lt;HTMLButtonElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<T extends HTMLButtonElement>(selector: string | Type<any>): Array<TestButton>;
  /**
   * Gets all the elements matching the given selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestSelect> = tester.elements<HTMLSelectElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<T extends HTMLSelectElement>(selector: string | Type<any>): Array<TestSelect>;
  /**
   * Gets all the elements matching the given selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestHtmlElement&lt;HTMLDivElement>> = tester.elements&lt;HTMLDivElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<T extends HTMLElement>(selector: string | Type<any>): Array<TestHtmlElement<T>>;
  /**
   * Gets all the elements matching the given selector and wraps them into a TestElement. The actual type
   * of the returned elements is the TestElement subclass matching the type of the found element. So, if the
   * matched elements are inputs for example, the method will return an array of TestInput.
   * <p>Usage:</p>
   * <code>
   * const testElements: Array&lt;TestElement&lt;SVGLineElement>> = tester.elements&lt;SVGLineElement>('.selector');
   * </code>
   * @param selector a CSS or directive selector
   * @returns the array of matched elements, empty if no element was matched
   */
  elements<T extends Element>(selector: string | Type<any>): Array<TestElement<T>>;
  elements(selector: string | Type<any>): Array<TestElement> {
    return this.testElement.elements(selector);
  }

  /**
   * Gets the first input matched by the given selector. Throws an Error if the matched element isn't actually an input.
   * @param selector a CSS or directive selector
   * @returns the wrapped input, or null if no element was matched
   */
  input(selector: string | Type<any>): TestInput | null {
    return this.testElement.input(selector);
  }

  /**
   * Gets the first select matched by the given selector. Throws an Error if the matched element isn't actually a select.
   * @param selector a CSS or directive selector
   * @returns the wrapped select, or null if no element was matched
   */
  select(selector: string | Type<any>): TestSelect | null {
    return this.testElement.select(selector);
  }

  /**
   * Gets the first textarea matched by the given selector
   * @param selector a CSS or directive selector
   * @returns the wrapped textarea, or null if no element was matched. Throws an Error if the matched element isn't actually a textarea.
   * @throws {Error} if the matched element isn't actually a textarea
   */
  textarea(selector: string | Type<any>): TestTextArea | null {
    return this.testElement.textarea(selector);
  }

  /**
   * Gets the first button matched by the given selector. Throws an Error if the matched element isn't actually a button.
   * @param selector a CSS or directive selector
   * @returns the wrapped button, or null if no element was matched
   */
  button(selector: string | Type<any>): TestButton | null {
    return this.testElement.button(selector);
  }

  /**
   * Gets the first directive matching the given component directive selector and returns its component instance
   * @param selector the selector of a component directive
   */
  component<R>(selector: Type<R>): R {
    return this.testElement.component(selector);
  }

  /**
   * Gets the directives matching the given component directive selector and returns their component instance
   * @param selector the selector of a component directive
   */
  components<R>(selector: Type<R>): Array<R> {
    return this.testElement.components(selector);
  }

  /**
   * Gets the first element matching the given selector, then gets the given token from its injector, or null if there is no such token
   * @param selector a CSS or directive selector
   * @param token the token to get from the matched element injector
   */
  token<R>(selector: string | Type<any>, token: ProviderToken<R>): R | null {
    return this.testElement.token(selector, token);
  }

  /**
   * Gets the elements matching the given selector, then gets their given token from their injector, or null if there is no such token
   * @param selector a CSS or directive selector
   * @param token the token to get from the matched element injector
   */
  tokens<R>(selector: string | Type<any>, token: ProviderToken<R>): Array<R | null> {
    return this.testElement.tokens(selector, token);
  }

  /**
   * Gets the element matching the given selector, and if found, creates and returns a custom TestElement of the provided
   * type. This is useful to create custom higher-level abstractions similar to TestInput, TestSelect, etc. for
   * custom elements or components.
   * @param selector a CSS or directive selector
   * @param customTestElementType the type of the TestElement subclass that will wrap the found element
   */
  custom<E extends TestElement>(selector: string | Type<any>, customTestElementType: Type<E>): E | null {
    return this.testElement.custom(selector, customTestElementType);
  }

  /**
   * Gets the elements matching the given selector, and creates and returns custom TestElements of the provided
   * type. This is useful to create custom higher-level abstractions similar to TestInput, TestSelect, etc. for
   * custom elements or components.
   * @param selector a CSS or directive selector
   * @param customTestElementType the type of the TestElement subclass that will wrap the found elements
   */
  customs<E extends TestElement>(selector: string | Type<any>, customTestElementType: Type<E>): Array<E> {
    return this.testElement.customs(selector, customTestElementType);
  }

  /**
   * Triggers a change detection using the wrapped fixture
   */
  detectChanges(checkNoChanges?: boolean): void {
    this.fixture.detectChanges(checkNoChanges);
  }
}

results matching ""

    No results matching ""