Выражение изменилось после того, как оно было проверено, получив ошибку при тестировании углового компонента 2 с жасмином

Question

Я получаю сообщение об ошибке при тестировании компонента, который получает наблюдаемый из службы, я попытался издеваться над этим поведением в спецификации, но Я получаю следующую ошибку: выражение изменилось после того, как оно было проверено, предыдущее значение vale '', текущее значение: [object Object]. Не могли бы вы помочь мне в этом. Мой файл спецификации выглядит следующим образом:

import { ManualProcessService } from '../../services/manual-process.service'; 
import { ManualProcessComponent } from './manual-process.component'; 
import { MANUALPROCESSMOCKDATA } from '../../shared/mocks/mock-manualprocessdata'; 
import {DataTableModule, SharedModule, DropdownModule as PrimeNgDropDownModule, CheckboxModule, InputTextModule} from 'primeng/primeng'; 
import {MenuModule} from 'primeng/components/menu/menu'; 
import {DropdownModule} from 'ng2-bootstrap'; 
import { PopoverModule } from 'ng2-popover'; 
import {Observable} from 'rxjs/Observable'; 
import { IManualProcessData} from '../../models/manual-process.model'; 
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import { 
    async, 
    TestBed, 
    fakeAsync, 
    tick, 
} from '@angular/core/testing'; 

class MockManualProcessService { 

    getManualProcessData(): Observable<IManualProcessData> { 
     return Observable.of(MANUALPROCESSMOCKDATA); 
    } 
} 

describe('Testing Manual Process Component',() => { 

    let fixture, 
    event = { 
    first: 0, 
    rows: 10 
    }, 
    manualProcessService; 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     ManualProcessComponent 
     ], 
     providers: [ 
     { provide: ManualProcessService, useClass: MockManualProcessService } 
     ], 
     imports: [ 
     FormsModule, 
     ReactiveFormsModule, 
     DataTableModule, 
     SharedModule, 
     PopoverModule, 
     PrimeNgDropDownModule, 
     DropdownModule.forRoot(), 
     CheckboxModule, 
     InputTextModule, 
     MenuModule 
    ], 
    }); 
    fixture = TestBed.createComponent(ManualProcessComponent); 
    manualProcessService = TestBed.get(ManualProcessService); 
    spyOn(manualProcessService, 'getManualProcessData').and.returnValue(Observable.of(MANUALPROCESSMOCKDATA)); 
    fixture.detectChanges(); 
    }); 

    it('Filters should be reset', (done) => { 
    fixture.componentInstance.clearFilters() 
    fixture.detectChanges(); 
    expect(fixture.componentInstance.filterBy.length).toBe(0); 
    done(); 
    }) 


    it('Should load list of manual process files', fakeAsync(() => { 
    fixture.componentInstance.loadData(event); 
    tick(); 
    fixture.detectChanges(); 
    expect(fixture.componentInstance.filterBy.length).toBe(10); 
    })); 
}); 

Я новичок в угловом 2 и модульном тестировании. Может ли кто-нибудь руководствоваться, что я делаю неправильно.

Answer 1

Изменение должно обнаруживаться каждый раз, когда значение изменяется, и ваш, прежде чем каждый будет выполняться до того, как значение присваиваются так привет получит ошибки имеют

fixture.detectChanges(); 

Внутри вашего него заявления и требуют каждого изменение стоимости.

Update 1:

import { ManualProcessService } from '../../services/manual-process.service'; 
import { ManualProcessComponent } from './manual-process.component'; 
import { MANUALPROCESSMOCKDATA } from '../../shared/mocks/mock-manualprocessdata'; 
import { IManualProcessData } from '../../models/manual-process.model'; 
import { 
    async, 
    TestBed, 
    fakeAsync, 
    tick, 
} from '@angular/core/testing'; 
// used to interact with the HTML elements 
import { By } from '@angular/platform-browser'; 

describe('Testing Manual Process Component',() => { 

    let fixture, 
     event = { 
      first: 0, 
      rows: 10 
     }, 
     manualProcessService; 
    let hardCodedData = { 
     ... 
    }; 
    beforeEach(async() => { 
     TestBed.configureTestingModule({ 
      imports: [], 
      declarations: [ManualProcessComponent], 
      providers: [ 
       { provide: ManualProcessService, useValue: mockManualProcessService } 
      ] 
     }).compileComponents(); 
    }); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(ManualProcessComponent); 
     component = fixture.componentInstance; 
     debugElement = fixture.debugElement; 
     element = fixture.nativeElement; 
     // analyse your component and the variables used in it and make hard values of them 
     let variables; 
     // Note: Never call detectChanges() inside a beforeEach 
    }) 

    it('Filters should be reset', (done) => { 
     fixture.componentInstance.clearFilters(); 
     fixture.detectChanges(); 
     expect(fixture.componentInstance.filterBy.length).toBe(0); 
     done(); 
    }) 

    it('Should load list of manual process files', fakeAsync(() => { 
     fixture.componentInstance.loadData(event); 
     tick(); 
     fixture.detectChanges(); 
     expect(fixture.componentInstance.filterBy.length).toBe(10); 
    })); 

    it('a sample case to check if the text box contains expected value aor not',()=>{ 
     expect(debugElement.query(By.css('.className')).nativeElement.textContent).toBe('somename'); 
    }); 
});