error while mocking in angular jasmine test

Question

I am getting an error while running the following angular test while using jasmine and karma. I have mocked the service dependencies of the component. However there is function of the tradeservice that is being used in the component. I have tried mocking the function but it still complains

TypeError: this.tradeService.getCurrencyCodes is not a function

What is the problem ?

In the component code

constructor(private tradeService: TradeService,
        private authService: AuthService,
        private orderService: OrderService,
        private valueDateService: ValueDateService,
        private dateService: DateService,
        private clientService: ClientService) {
    }

 ngOnInit() {
        this.getCurrencyCodes();
    }


  private getCurrencyCodes() {
        this.tradeService.getCurrencyCodes()
            .subscribe(
            data => {
                this.currencyList = data;
            },
            error => {
                this.messageViewerModel.messages.push("Unable to get Currency codes");
            });
    }

In the spec file of the component

 class MockDateService {

}


class MockTradeService {
    getCurrencyCodes() {
        return;
    }
}

class MockAuthService {

}

class MockOrderService {

}

class MockValueDateService {

}

class MockClientService {

}


class MockMessageViewerModel {
    title: string;
    messages: string[];
   }

  @Component({
    selector: 'app-message-viewer',
    template: ''
  })
  class MockMessageViewerComponent {
    @Input()
    messageViewer: MockMessageViewerModel;    
  }

describe('StripOrderComponent', () => {
    let component: StripOrderComponent;
    let clientService: ClientService;
    let tradeService: TradeService;
    let fixture: ComponentFixture<StripOrderComponent>;


    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientModule,
                RouterTestingModule,
                FormsModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useClass: TranslateLanguageLoader
                    }
                })
            ],
            declarations: [
                StripOrderComponent,
                MockMessageViewerComponent,
            ],
            providers: [
                [{ provide: DateService, useValue: MockDateService }],
                [{ provide: TradeService, useValue: MockTradeService }],
                [{ provide: AuthService, useValue: MockAuthService }],
                [{ provide: OrderService, useValue: MockOrderService }],
                [{ provide: ValueDateService, useValue: MockValueDateService }],
                [{ provide: ClientService, useValue: MockClientService }]
            ],
            schemas: [NO_ERRORS_SCHEMA]

        })
            .compileComponents();
    }));

    beforeEach(() => {

        fixture = TestBed.createComponent(StripOrderComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();


    });

    it('should be created', () => {

        expect(component).toBeTruthy();
    });


});

TradeService

getCurrencyCodes() {
        return this.tradeEndpoint.getCurrencyCodesEndpoint<string[]>();
    }

Do you need these lines at the top of your test or can they be omitted? let clientService: ClientService; let tradeService: TradeService; — silleknarf
– silleknarf, Commented Sep 25, 2019 at 10:36

uminder · Accepted Answer · 2019-09-25 11:05:09Z

1

Try to change useValue into useClass in following line.

[{ provide: TradeService, useValue: MockTradeService }],

answered Sep 25, 2019 at 11:05

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fateh Mohamed · Accepted Answer · 2019-09-25 15:18:11Z

0

try to delete fixture.detectChanges inside your beforeEach, it's probably the cause why your test fails, detectChanges will only work for onPush events

beforeEach(() => {
    fixture = TestBed.createComponent(StripOrderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // delete this
})

answered Sep 25, 2019 at 15:18

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Collectives™ on Stack Overflow

error while mocking in angular jasmine test

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related