角度测试未正确运行更改检测

Question

我有一个简单的组件，其中包含一个container-div。如果将输入highlighted设置为TRUE，则container-div应该具有类background-green。并且对此行为进行了测试。但是我的测试失败，Expected false to be truthy。对于分离的组件，呼叫fixture.detectChanges()是否无效？有人知道我的考试是否有问题吗？预先谢谢你。

@Component({
    selector: 'my-component',
    template: ```<div class="container" [class.background-green]="highlighted"></div>```
})
export class MyComponent implements OnInit, OnDestroy {
    @Input() highlighted: boolean = false;

    constructor(
        private changeDetectorRef: ChangeDetectorRef,
    ) {
        this.changeDetectorRef.detach();
    }

    ngOnInit(): void {
        this.changeDetectorRef.detectChanges();
    }
}


describe('MyComponent', () => {
    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;
    let debugElement: DebugElement;
    let containerElement: HTMLElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                MyComponent
            ],
            providers: [
            ]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;

        debugElement = fixture.debugElement;

        containerElement = debugElement.queryAll(By.css('.container'))[0].nativeElement;

        fixture.detectChanges();
    });

    it('should have class "background-green" if highlighted=TRUE', () => {
        component.highlighted = true;
        fixture.detectChanges();
        containerElement = debugElement.queryAll(By.css('.container'))[0].nativeElement;
        expect(containerElement.classList.contains('background-green')).toBeTruthy();
    });
});