在茉莉花中測試服務電話

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並在整個過程中使用該變量來解決此問題。 碰到這個的人，祝你好運！