检查后表达式已更改，在使用茉莉花测试角度2组件时出错

Question

我在测试从服务接收到可观察到的组件时遇到错误，我试图在规范中模拟该行为，但出现以下错误：检查表达式后，表达式已更改，先前值为”，当前为值：[对象对象]。你能帮我这个忙吗？我的规格文件如下：

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

我是Angle 2和单元测试的新手。有人可以指导，我在做什么错。

Answer 1

我也遇到了这个问题，并将我的测试更改为直接针对组件的 ngOnInit() 方法。所以，而不是

fixture.detectChanges();

在你的测试中，你可以尝试

fixture.componentInstance.ngOnInit();

（或者任何生命周期挂钩是组件的入口点）。这对我有用。尽管组件本身运行良好，但它使我免受失败的测试的阻碍。

Answer 2

每次更改值时都应检测到更改，并且您的before会在分配值之前执行，因此hi将得到错误提示，

fixture.detectChanges(); 

在您的it语句中，并要求每次更改值。

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