mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
Adds support for passing in `Binding` objects into `TestBed.createComponent`. This makes it easier to test components by avoiding the need to create a wrapper component. Furthermore, it keeps the behavior consistent between tests and the actual app. For example, given a custom checkbox that looks like this:
```typescript
@Component({
selector: 'my-checkbox',
template: '...',
host: {'[class.checked]': 'isChecked()'}
})
export class MyCheckbox {
isChecked = input(false);
}
```
A test for the `isChecked` input would look something like this:
```typescript
it('should toggle the checked class', () => {
@Component({
imports: [MyCheckbox],
template: '<my-checkbox [isChecked]="isChecked"/>',
})
class Wrapper {
isChecked = false;
}
const fixture = TestBed.createComponent(Wrapper);
const checkbox = fixture.nativeElement.querySelector('my-checkbox');
fixture.detectChanges();
expect(checkbox.classList).not.toContain('checked');
fixture.componentInstance.isChecked = true;
fixture.detectChanges();
expect(checkbox.classList).toContain('checked');
});
```
Whereas with the new API, the test would look like this:
```typescript
it('should toggle the checked class', () => {
const isChecked = signal(false);
const fixture = TestBed.createComponent(MyCheckbox, {
bindings: [inputBinding('isChecked', isChecked)]
});
const checkbox = fixture.nativeElement.querySelector('my-checkbox');
fixture.detectChanges();
expect(checkbox.classList).not.toContain('checked');
isChecked.set(true);
fixture.detectChanges();
expect(checkbox.classList).toContain('checked');
});
```
PR Close #62040
6.4 KiB
6.4 KiB
API Report File for "@angular/core_testing"
Do not edit this file. It is a report generated by API Extractor.
import { Observable } from 'rxjs';
import { Subject } from 'rxjs';
import { Subscription } from 'rxjs';
// @public
export class ComponentFixture<T> {
constructor(componentRef: ComponentRef<T>);
// @deprecated
autoDetectChanges(autoDetect: boolean): void;
autoDetectChanges(): void;
changeDetectorRef: ChangeDetectorRef;
checkNoChanges(): void;
componentInstance: T;
// (undocumented)
componentRef: ComponentRef<T>;
debugElement: DebugElement;
destroy(): void;
detectChanges(checkNoChanges?: boolean): void;
elementRef: ElementRef;
getDeferBlocks(): Promise<DeferBlockFixture[]>;
isStable(): boolean;
nativeElement: any;
// (undocumented)
ngZone: NgZone | null;
whenRenderingDone(): Promise<any>;
whenStable(): Promise<any>;
}
// @public (undocumented)
export const ComponentFixtureAutoDetect: InjectionToken<boolean>;
// @public (undocumented)
export const ComponentFixtureNoNgZone: InjectionToken<boolean>;
// @public
export enum DeferBlockBehavior {
Manual = 0,
Playthrough = 1
}
// @public
export class DeferBlockFixture {
constructor(block: DeferBlockDetails, componentFixture: ComponentFixture<unknown>);
getDeferBlocks(): Promise<DeferBlockFixture[]>;
render(state: DeferBlockState): Promise<void>;
}
// @public
export enum DeferBlockState {
Complete = 2,
Error = 3,
Loading = 1,
Placeholder = 0
}
// @public
export function discardPeriodicTasks(): void;
// @public
export function fakeAsync(fn: Function, options?: {
flush?: boolean;
}): (...args: any[]) => any;
// @public
export function flush(maxTurns?: number): number;
// @public
export function flushMicrotasks(): void;
// @public
export function getTestBed(): TestBed;
// @public
export function inject(tokens: any[], fn: Function): () => any;
// @public (undocumented)
export class InjectSetupWrapper {
constructor(_moduleDef: () => TestModuleMetadata);
// (undocumented)
inject(tokens: any[], fn: Function): () => any;
}
// @public
export type MetadataOverride<T> = {
add?: Partial<T>;
remove?: Partial<T>;
set?: Partial<T>;
};
// @public
export interface ModuleTeardownOptions {
destroyAfterEach: boolean;
rethrowErrors?: boolean;
}
// @public
export function resetFakeAsyncZone(): void;
// @public (undocumented)
export interface TestBed {
// (undocumented)
compileComponents(): Promise<any>;
// (undocumented)
configureCompiler(config: {
providers?: any[];
useJit?: boolean;
}): void;
// (undocumented)
configureTestingModule(moduleDef: TestModuleMetadata): TestBed;
// (undocumented)
createComponent<T>(component: Type<T>, options?: TestComponentOptions): ComponentFixture<T>;
// (undocumented)
execute(tokens: any[], fn: Function, context?: any): any;
// @deprecated
flushEffects(): void;
initTestEnvironment(ngModule: Type<any> | Type<any>[], platform: PlatformRef, options?: TestEnvironmentOptions): void;
// (undocumented)
inject<T>(token: ProviderToken<T>, notFoundValue: undefined, options: InjectOptions & {
optional?: false;
}): T;
// (undocumented)
inject<T>(token: ProviderToken<T>, notFoundValue: null | undefined, options: InjectOptions): T | null;
// (undocumented)
inject<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions): T;
// (undocumented)
get ngModule(): Type<any> | Type<any>[];
// (undocumented)
overrideComponent(component: Type<any>, override: MetadataOverride<Component>): TestBed;
// (undocumented)
overrideDirective(directive: Type<any>, override: MetadataOverride<Directive>): TestBed;
// (undocumented)
overrideModule(ngModule: Type<any>, override: MetadataOverride<NgModule>): TestBed;
// (undocumented)
overridePipe(pipe: Type<any>, override: MetadataOverride<Pipe>): TestBed;
overrideProvider(token: any, provider: {
useFactory: Function;
deps: any[];
multi?: boolean;
}): TestBed;
// (undocumented)
overrideProvider(token: any, provider: {
useValue: any;
multi?: boolean;
}): TestBed;
// (undocumented)
overrideProvider(token: any, provider: {
useFactory?: Function;
useValue?: any;
deps?: any[];
multi?: boolean;
}): TestBed;
// (undocumented)
overrideTemplate(component: Type<any>, template: string): TestBed;
// (undocumented)
overrideTemplateUsingTestingModule(component: Type<any>, template: string): TestBed;
// (undocumented)
get platform(): PlatformRef;
resetTestEnvironment(): void;
// (undocumented)
resetTestingModule(): TestBed;
runInInjectionContext<T>(fn: () => T): T;
tick(): void;
}
// @public
export const TestBed: TestBedStatic;
// @public
export interface TestBedStatic extends TestBed {
// (undocumented)
new (...args: any[]): TestBed;
}
// @public
export interface TestComponentOptions {
bindings?: Binding[];
}
// @public
export class TestComponentRenderer {
// (undocumented)
insertRootElement(rootElementId: string): void;
// (undocumented)
removeAllRootElements?(): void;
}
// @public (undocumented)
export interface TestEnvironmentOptions {
errorOnUnknownElements?: boolean;
errorOnUnknownProperties?: boolean;
teardown?: ModuleTeardownOptions;
}
// @public (undocumented)
export interface TestModuleMetadata {
// (undocumented)
declarations?: any[];
deferBlockBehavior?: DeferBlockBehavior;
errorOnUnknownElements?: boolean;
errorOnUnknownProperties?: boolean;
// (undocumented)
imports?: any[];
// (undocumented)
providers?: any[];
rethrowApplicationErrors?: boolean;
// (undocumented)
schemas?: Array<SchemaMetadata | any[]>;
// (undocumented)
teardown?: ModuleTeardownOptions;
}
// @public
export function tick(millis?: number, tickOptions?: {
processNewMacroTasksSynchronously: boolean;
}): void;
// @public
export function waitForAsync(fn: Function): (done: any) => any;
// @public (undocumented)
export function withModule(moduleDef: TestModuleMetadata): InjectSetupWrapper;
// @public (undocumented)
export function withModule(moduleDef: TestModuleMetadata, fn: Function): () => any;
// (No @packageDocumentation comment for this package)