mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
2e0c98bd3f
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
|
||
|---|---|---|
| .. | ||
| application_error_handler.ts | ||
| async.ts | ||
| component_fixture.ts | ||
| defer.ts | ||
| fake_async.ts | ||
| logger.ts | ||
| metadata_override.ts | ||
| metadata_overrider.ts | ||
| resolvers.ts | ||
| styling.ts | ||
| test_bed.ts | ||
| test_bed_common.ts | ||
| test_bed_compiler.ts | ||
| test_hooks.ts | ||
| testing.ts | ||
| testing_internal.ts | ||
| testing_private_export.ts | ||