错误： ：可能是间谍，但在Jamsine中得到了功能

Question

我是使用Jasmine和Karma在Angular中进行单元测试的新手。我已经写了一个规格文件，但出现错误。首先让我展示一下我到目前为止所做的事情。我创建了一个自定义组件：

TimeselectorComponent

startRange = moment('12-01-01');
endRange = moment ('12-12-01');

modes= ['Calendar Year', 'Year-to-date', 'Rolling Year', 'Custom'];

date = new Date();
currentYear = this.date.getFullYear(); // or simply currentYear = 2020;

@ViewChild('primaryMonthPicker') primaryMonthPicker: MonthpickerComponent; // a child component

primaryDropDown(startRange, endRange) {
    if (this.primaryMode === this.modes[0]) {
        this.initCalendarYear(this.primaryMonthPicker, this.currentYear);
    } else if (this.primaryMode === this.modes[1]) {
        this.initYearToDate(this.primaryMonthPicker, this.currentYear);
    } else if (this.primaryMode === this.modes[2]) {
        this.initRollingYear(this.primaryMonthPicker, this.currentYear);
    }
}

在上面的代码MonthpickerComponent中是另一个自定义组件，它是TimeselectorComponent的唯一子组件。

我只想检查何时调用primaryDropDown，然后还应该调用initCalendarYear。这是规格文件：

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { TimeselectorComponent } from './timeselector.component';
...

describe('TimeselectorComponent', () => {
    let fixture: ComponentFixture<TimeselectorComponent>;

    @Component({
        selector: 'app-monthpicker',
        template: '<div></div>'
    })
    class FakeMonthpickerComponent {
        // methods of MonthpickerComponent
    }

    let MODES = [];

    beforeEach(async(() => {
        MODES = ['Calendar Year', 'Year-to-date', 'Rolling Year', 'Custom'];
        TestBed.configureTestingModule({
            declarations: [FakeMonthpickerComponent, TimeselectorComponent],
            schemas: [NO_ERRORS_SCHEMA]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(TimeselectorComponent);
    });

    // other test cases that are passing

    // need help with this test case
    it('should call initCalendarYear when primaryDropDown is called', () => {
      const startRange=moment('2020-01-01');
      const endRange= moment('2020-12-01');
      spyOn(fixture.componentInstance, 'initCalendarYear');
      fixture.componentInstance.primaryMode=MODES[0];
      fixture.componentInstance.primaryDropDown(startRange, endRange);
     expect(fixture.componentInstance.initCalendarYear).toHaveBeenCalled();
  });
});

但是我收到此错误：

我必须测试是否为关联的if-else语句调用了正确的方法。请帮助我。

这里是stackblitz。

Answer 1

您正在传递一个实际的方法，在该方法中可以使用模拟方法，该方法在茉莉花中被称为间谍对象。在下面找到答案。

it('should call initCalendarYear when primaryDropDown is called', () => {
        const startRange=moment('2020-01-01');
        const endRange= moment('2020-12-01');
        spyOn(fixture.componentInstance, 'initCalendarYear').and.returnValue(//The return value you want to mock);  //creation of spy.
        fixture.componentInstance.primaryDropDown(startRange, endRange);
        expect(fixture.componentInstance.initCalendarYear(????, 2020)).toHaveBeenCalled(); 
    });

Answer 2

添加这样的间谍

spyOn(fixture.componentInstance, 'initCalendarYear');

以此更改最后一行

expect(fixture.componentInstance.initCalendarYear).toHaveBeenCalled();

所以您的最终测试用例应该看起来像这样

it('should call initCalendarYear when primaryDropDown is called', () => {
        const startRange=moment('2020-01-01');
        const endRange= moment('2020-12-01');
        fixture.componentInstance.primaryMode = MODES[0];
        spyOn(fixture.componentInstance, 'initCalendarYear');
        fixture.componentInstance.primaryDropDown(startRange, endRange);

  expect(fixture.componentInstance.initCalendarYear).toHaveBeenCalled(); 
 });