Угловой тест не запускает обнаружение изменений правильно - PullRequest
Новая
       7

Угловой тест не запускает обнаружение изменений правильно

0 голосов
/ 13 ноября 2018

У меня есть простой компонент, который содержит 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();
    });
});
...