shallow-render
Version:
Shallow rendering test utility for Angular
189 lines (188 loc) • 8.1 kB
TypeScript
import { DebugElement, Type, InjectionToken, AbstractType } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';
import { OutputTypes, PickByType } from '../tools/output-proxy';
import { QueryMatch } from './query-match';
import { TestSetup } from './test-setup';
export interface RenderOptions<TBindings> {
/**
* Toggles automatic change-detection on initial render
*
* @default true
*/
detectChanges: boolean;
/**
* Toggles automatic awaiting of fixture.whenStable() on initial render
*
* @default true
*/
whenStable: boolean;
/**
* Bindings to be applied to your component or HTML template `@Input` properties
*/
bind: TBindings;
}
/**
* Contains all information about a rendered test component including
* utilities for querying and toggling rendered states of directives
*
* This is not intended for direct instantion. These are created via the `render` method on an instance of `Shallow`
*
* @link https://getsaf.github.io/shallow-render/#rendering
*/
export declare class Rendering<TComponent extends object, TBindings> {
readonly fixture: ComponentFixture<any>;
readonly element: DebugElement;
readonly instance: TComponent;
readonly bindings: TBindings;
private readonly _setup;
constructor(fixture: ComponentFixture<any>, element: DebugElement, instance: TComponent, bindings: TBindings, _setup: TestSetup<TComponent>);
readonly outputs: PickByType<TComponent, OutputTypes>;
/**
* Search for a component with a CSS celector
*
* The result is either a `DebugElement` OR an Array of `DebugElement`. Your test
* must give proper treatment to the result based on the expected results.
*
* For example, if your test expects a single result, you may treat the result as a `DebugElement` or an array of `DebugElement`s with one entry.
*
* @example
* expect(find('h1.large').nativeElement.textContent).toBe('Foo');
*
* // If your query results in multiple matches, you may iterate over the matches but if you attempt
* // to treat the collection of matches as a single match, the test will fail due to a mismatched
* // usage of the query results in the test.
*
* // This would throw an error if the query resulted in multiple matches
* expect(find('h1.large').nativeElement.textContent).toBe('Foo');
*
* const results = find('h1.large');
* expect(results.length).toBe(3);
* expect(results.map(result => result.nativeElement.textContent)).toEqual([
* 'Foo',
* 'Bar',
* 'Baz'
* ])
*
* @link https://getsaf.github.io/shallow-render/#querying
*/
readonly find: (cssOrDirective: string | Type<any>, options?: {
query?: string;
}) => QueryMatch<DebugElement>;
/**
* Search for a component by it's class
*
* The result is either an instance of the component OR an Array of component instances. Your test
* must give proper treatment to the result based on the expected results.
*
* For example, if your test expects a single result, you may treat the result as a single component instance or an array of instances with one entry.
*
* @example
* expect(find(ItemComponent).label).toBe('Foo');
*
* // If your query results in multiple matches, you may iterate over the matches but if you attempt
* // to treat the collection of matches as a single match, the test will fail due to a mismatched
* // usage of the query results in the test.
*
* // This would throw an error if the query resulted in multiple matches
* expect(findComponent(ItemComponent).label).toBe('Foo');
*
* const results = findComponent(ItemComponent);
* expect(results.length).toBe(3);
* expect(results.map(result => result.label)).toEqual([
* 'Foo',
* 'Bar',
* 'Baz'
* ])
*
* @link https://getsaf.github.io/shallow-render/#querying
*/
readonly findComponent: <TMatch>(component: Type<TMatch>, options?: {
query?: string;
}) => QueryMatch<TMatch>;
/**
* Search for a directive by it's class
*
* Note: For structural directives, @see Rendering#findStructuralDirective
*
* The result is either an instance of the directive OR an Array of directive instances. Your test
* must give proper treatment to the result based on the expected results.
*
* For example, if your test expects a single result, you may treat the result as a single directive instance or an array of instances with one entry.
*
* @example
* expect(findDirective(MyDirective).label).toBe('Foo');
*
* // If your query results in multiple matches, you may iterate over the matches but if you attempt
* // to treat the collection of matches as a single match, the test will fail due to a mismatched
* // usage of the query results in the test.
*
* // This would throw an error if the query resulted in multiple matches
* expect(findDirective(MyDirective).label).toBe('Foo');
*
* const results = findDirective(MyDirective);
* expect(results.length).toBe(3);
* expect(results.map(result => result.label)).toEqual([
* 'Foo',
* 'Bar',
* 'Baz'
* ])
*
* @link https://getsaf.github.io/shallow-render/#querying
*/
readonly findDirective: <TDirective>(directive: Type<TDirective>, options?: {
query?: string;
}) => QueryMatch<TDirective>;
/**
* @deprecated Use inject instead
*/
readonly get: <TValue>(queryClass: Type<TValue> | InjectionToken<TValue> | AbstractType<TValue>) => TValue;
/**
* Get the instance of a provider via Angular's injection system.
*
* This is identical to `TestBed.inject`
*/
readonly inject: {
<T>(token: import("@angular/core").ProviderToken<T>, notFoundValue: undefined, options: import("@angular/core").InjectOptions & {
optional?: false;
}): T;
<T>(token: import("@angular/core").ProviderToken<T>, notFoundValue: null | undefined, options: import("@angular/core").InjectOptions): T | null;
<T>(token: import("@angular/core").ProviderToken<T>, notFoundValue?: T, options?: import("@angular/core").InjectOptions): T;
};
/**
* Search for a structural directive by it's class
*
* The result is either an instance of the directive OR an Array of directive instances. Your test
* must give proper treatment to the result based on the expected results.
*
* For example, if your test expects a single result, you may treat the result as a single directive instance or an array of directives with one entry.
*
* @example
* expect(find(MyDirective).label).toBe('Foo');
*
* // If your query results in multiple matches, you may iterate over the matches but if you attempt
* // to treat the collection of matches as a single match, the test will fail due to a mismatched
* // usage of the query results in the test.
*
* // This would throw an error if the query resulted in multiple matches
* expect(findStructuralDirective(MyDirective).label).toBe('Foo');
*
* const results = findStructuralDirective(MyDirective);
* expect(results.length).toBe(3);
* expect(results.map(result => result.label)).toEqual([
* 'Foo',
* 'Bar',
* 'Baz'
* ])
*
* @link https://getsaf.github.io/shallow-render/#querying
*/
readonly findStructuralDirective: <TDirective>(directiveClass: Type<TDirective>, options?: {
query?(d: TDirective): boolean;
}) => QueryMatch<TDirective>;
/**
* Toggle on and off the rendering of child templates into a structural directive
*
* @link https://getsaf.github.io/shallow-render/#structural-directives
*/
readonly renderStructuralDirective: (directiveClassOrObject: Type<any> | QueryMatch<any> | object, renderContents?: boolean) => void;
}