mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kristiyan Kostadinov
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
public-api/
This directory contains all of the public api goldens for our npm packages we publish to NPM. These are tested on all PRs and commits as part of our bazel tests.
To check or update the public api goldens, run one of the following commands:
yarn public-api:check
yarn public-api:update