在茉莉花中测试服务电话

Question

我正在尝试为调用服务的功能编写单元测试。 但是TypeError: undefined is not a constructor错误： TypeError: undefined is not a constructor

我要测试的是一个服务调用，该服务调用成功后会设置变量“ cards”的值。

我已经为服务（CardService）创建了适当的模拟，您可以在下面的规范文件中看到

test.component.spec.ts

class MockCardService extends CardService {
    constructor() {
        super(null); // null is the http in service's constructor
    }
    getCardDetails(): any {
        return Observable.of([{ 0: 'card1' }, { 1: 'card2' }]);
    }
}

describe('MyComponent', () => {
    let component: MyComponent;
    let mockCardService: MockCardService;
    beforeEach(() => {
        mockCardService = new MockCardService();
        component = new MyComponent(
            mockCardService // add the mock service that runs before each test
        );
    });

// The failing test :(
it('should set the card variable to the value returned by the service', () => {

    spyOn(mockCardService, 'getCardDetails').and.callThrough();

    // Act
    component.ngOnInit();
    component.updateCards(); // call the function I am testing

    // Assert
    expect(component.cards).toConTainText('Card1');
});

以及带有我正在测试的功能的组件文件：

export class MyComponent implements OnInit {
    public cards: CardModel[] = [];
    constructor(
        private cardService: CardService,
    ) {
    }

    ngOnInit() {
        this.updateCards(); // call the update card service
    }

    updateCards(): void {
        this.cardService.getCardDetails().subscribe(
            (cardsDetails) => {
                this.cards = cardsDetails;
            },
            (err) => {
                // todo: error handling
                console.log(err);
            }
        );
    }
}

每当运行此测试时，我都会收到错误消息：

TypeError：未定义不是构造函数（评估'Observable_1.Observable.of（[{0：'card1'}，{1：'card2'}]））'）（第22行）getCardDetails updateCards ngOnInit

而且我不知道我在做什么错，为什么'getCardDetals.subscribe'是未定义的。 由于某些原因，我提供的MockCardService类似乎无法正常工作。

（请注意，如果我在组件本身中注销，则this.cardService.getCardDetails（）已定义）

任何帮助将不胜感激。

Answer 1

MockCardService.getCardDetails()应该返回一个Observable，因此您可以在组件中运行MockCardService.getCardDetails() 。

Answer 2

作者在这里：

我仍然不确定发生了什么问题。 但是我可以通过更改class MockCardService extends CardService {来let MockCardService并在整个过程中使用该变量来解决此问题。 碰到这个的人，祝你好运！