如何测试有条件地使用 <div> *ngIf 渲染的角度组件？

Question

我有一个组件，它有条件地呈现div

<div *ngIf="shouldRender" id="info-banner">
<p>The info is shown</p>
</div>

测试看起来像这个

it('should display the info') , () => {
spectator = createComponent()
spectator.setInput( { shouldRender:true})
spectator.detectChanges()
const infoBanner = spectator.query("#info-banner")
expect(infoBanner).toBeTruthy()
})

测试总是失败，为什么？

Answer 1

您能否在出现MyComponent时调整以下代码，并反馈测试失败消息的确切含义？

import {
byTestId, createComponentFactory, Spectator
} from '@ngneat/spectator';
describe('MyComponent with spectator', () => {
let spectator: Spectator<MyComponent>; // adjust MyComponent with your component
const createComponent = createComponentFactory({
component: MyComponent, // adjust MyComponent with your component
shallow: true,
});
beforeEach(() => {
spectator = createComponent({ props: {shouldRender: true}});
});
it('should display the info if shouldRender is true', () => {
expect(
spectator.query(byTestId('info-banner'))
).toBeTruthy;
});
});