Angular 单元测试是否根据服务中的数据调用组件方法

标签 angular unit-testing jasmine

我不知道如何测试组件方法是否在服务数据条件下被触发......

服务看起来像:

@Injectable()
export class SomeService {

    someData() {
        return true;
    }
}

比较:
export class SomeComponent {

    constructor(private someService: SomeService) { 

        if (this.someService.someData()) {
            this.someMethod();
        } else {
            console.log('keep kalm!');
        }
    }

    someMethod() {
        console.log('some method is fired!')
    }
}

测试:
describe('SomeComponent', () => {
    let component: SomeComponent;
    let fixture: ComponentFixture<SomeComponent>; 

    let mockSomeService = {
        someData: () => true
    }

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [SomeComponent],
            providers: [
                {
                    provide: SomeService, useValue: mockSomeService
                }
            ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(SomeComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('method should be called', () => {
        spyOn(component, 'someMethod'); 

        expect(component.someMethod).toHaveBeenCalled(); 
    });
});

组件 someMethod 触发但测试失败:

Expected spy someMethod to have been called.



我怎样才能解决这个问题?

提前致谢!

最佳答案

好的,它是固定的!感谢@Supamiu 的回答

以防将来有人需要它:

将初始化移动到 ngOnInit 中,删除 fixture.detectChanges();从 beforeEach 并在测试中执行它。所以:

比较:

constructor(private someService: SomeService) { }

ngOnInit() {
    if (this.someService.someData()) {
        this.someMethod();
    } else {
        console.log('keep kalm!');
    }
}

测试:
beforeEach(() => {
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    // fixture.detectChanges(); <<< Remove this
});

it('method should be called', () => {
    spyOn(component, 'someMethod'); 
    fixture.detectChanges(); // trigger ngOnInit here

    expect(component.someMethod).toHaveBeenCalled(); 
});

关于 Angular 单元测试是否根据服务中的数据调用组件方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48024481/

相关文章:

angular - 使用 Protractor typescript ,我如何检测这个元素方形白框,然后单击并拖动白框,它有 ng-mousedown 和转换

angular - 有没有办法使用 FormArray 作为顶级表单

angular - 在 Typescript (Angular2 ionic2) 中访问 SASS 值($colors from variables.scss)

javascript - Ionic Angular 2 - 从嵌套 Promise 返回 Observable

Android 本地测试与仪器化测试

jasmine - 没有 Jasmine-jquery 的提供者?

angular - 在 Angular 中使用 TypeScript 对文件大小进行 Jasmine 单元测试

javascript - 处理单击并悬停在同一元素上并保持弹出模式打开,直到弹出模式悬停在上方

java - 如何使用 JUnit 和 Mockito 来模拟内部逻辑

c# - 单元测试的可重用设置