表達式在檢查後發生了變化，在測試使用茉莉花的角度2組件時出現錯誤

Question

我在測試從服務接收可觀察項的組件時收到錯誤，我試圖在規範中嘲笑該行爲，但我收到以下錯誤：檢查後表達式已更改，前一個值爲''，當前值：[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(); 

裏面你也聲明，呼籲每價值變化。

更新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'); 
    }); 
});