如何测试带有*ngIf的有条件呈现<div>的角分量？

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;
    });
});