CODEWITHSUNDEEP
angularunit-testingmockingkarma-jasmine
michal chalupczak
michal chalupczak

Reputation: 13

Test Angular 2 component with mocked service

I'm trying to test Angular2 component that depends on a service.

I want to pass a stubbed service for the test. It seems that the component in the test does not pick up that stubbed component.

I'm following official documentation: https://angular.io/docs/ts/latest/guide/testing.html#!#component-with-dependency

Component:

import { Component, OnInit } from '@angular/core';
import { TodoIdGeneratorService } from '../todo-id-generator.service';

@Component({
  selector: 'app-todo-card',
  templateUrl: './todo-card.component.html',
  styleUrls: ['./todo-card.component.css']
})
export class TodoCardComponent implements OnInit {
  public todoId: number;

  constructor(private todoIdgenerator: TodoIdGeneratorService) { }

  ngOnInit() {
this.todoId = this.todoIdgenerator.getNextTodoId();
  }
}

Spec:

import { TestBed, async } from '@angular/core/testing';
import { TodoCardComponent } from './todo-card.component';
import { TodoIdGeneratorService } from '../todo-id-generator.service';

describe('Component: TodoCard', () => {
  let stubbedTodoId = 1337;
  let fixture;
  let service;

  beforeEach(() => {
    let serviceStub = {
        getNextTodoId: ()=> stubbedTodoId
    }

    TestBed.configureTestingModule({
      declarations: [ TodoCardComponent ],
      providers: [ {provide: TodoIdGeneratorService, useValue: serviceStub} ]
    });

    service = TestBed.get(TodoIdGeneratorService);

    fixture = TestBed.createComponent(TodoCardComponent);
  });

  it('should have Todo id', () => {
    fixture.detectChanges();
    expect(service.getNextTodoId()).toEqual(stubbedTodoId, 'stubbed servide should be stubbed');
    expect(fixture.todoId).toEqual(stubbedTodoId, 'the component should use stubbed service');
  });
});

The error I get:

    Chrome 53.0.2785 (Linux 0.0.0) Component: TodoCard should have Todo id FAILED
        Expected undefined to equal 1337, 'the component should use stubbed service'.
            at Object.<anonymous> (webpack:///home/michal/Projects/learning_angular/JustRunTests/src/app/todo-card/todo-card.component.spec.ts:30:27 <- src/test.ts:12020:32)
            at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/zone.js:203:0 <- src/test.ts:20985:28)
            at ProxyZoneSpec.onInvoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/proxy.js:72:0 <- src/test.ts:14451:39)
            at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/zone.js:202:0 <- src/test.ts:20984:34)
Chrome 53.0.2785 (Linux 0.0.0): Executed 4 of 8 (1 FAILED) (0 secs / 0.231 secs)
Chrome 53.0.2785 (Linux 0.0.0) Component: TodoCard should have Todo id FAILED
        Expected undefined to equal 1337, 'the component should use stubbed service'.
            at Object.<anonymous> (webpack:///home/michal/Projects/learning_angular/JustRunTests/src/app/todo-card/todo-card.component.spec.ts:30:27 <- src/test.ts:12020:32)
            at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/zone.js:203:0 <- src/test.ts:20985:28)
            at ProxyZoneSpec.onInvoke (webpack:///home/michal/Projects/learning_angular/JustRunTests/~/zone.js/dist/proxy.js:72:0 <- src/test.ts:14451:39)
            at ZoneDelegate.invoke (webpack:///home/michal/Projects/learning_angular/JustRunTestChrome 53.0.2785 (Linux 0.0.0): Executed 8 of 8 (1 FAILED) (0.354 secs / 0.268 secs))

Whole app is here: https://bitbucket.org/chomik/ngjustruntests/src/0c030837432140f3f99f2d8afec0835aa9ff2fe3?at=failing_mocks

I'd be gratefull for any hints :-) What should I check here? How to improve my question?

Upvotes: 1

Views: 141

Answers (1)

Paul Samsotha
Paul Samsotha

Reputation: 208944

Expected undefined to equal 1337

expect(fixture.todoId)

fixture is a ComponentFixture. To get the component, you need to call fixture.componentInstance

expect(fixture.componentInstance.todoId)

Upvotes: 1

Related Questions