Despite multiple successful attempts in the past, I am facing some difficulty getting this to function properly. Within my component, I have an input @Input data: Data, which is used in my template to conditionally display certain content. Oddly enough, during testing, the component does not seem to recognize that the data is present even when explicitly set with component.data = {props: values}. However, when running the tests individually using fit, they pass without any issues.
data.component.spec.ts
beforeEach(() => {
fixture = testbed.createComponent(DataComponent);
component = fixture.componentInstance;
component.data = {values: ['a', 'b', 'c']};
fixture.detectChanges();
component.ngOnInit();
fixture.detectChanges();
});
describe('when viewing', () => {
it('should load and display data', () => {
const el = fixture.debugElement.query(By.css('[data-content]'));
expect(el).toBeTruthy();
});
}
data.component.ts
export class DataComponent implements OnInit {
@Input() data!: Data;
constructor() {};
ngOnInit() {
console.log('init');
}
}
data.component.html
<div *ngIf="data.values.length">
<p data-content *ngFor="let value of data.values">{{value}}</p>
</div>
The error message I'm encountering:
Expected null to not be null "[data-content]"