CODEWITHSUNDEEP
unit-testingangularkarma-jasmine
user1354934
user1354934

Reputation: 8851

How to unit test an angular 2 component when I don't care about the dependencies? I just want to test some inner functions

I'm new to writing unit tests, and unfortunately I've already built a few "complicated" (for me) components which I am having a hard time even beginning to write tests for.

Here's a snippet of my code, including the constructor. Basically, I don't really care right now about these dependencies, I want to test some inner functions such as resizing based on array size, etc. For these, I can just create an Array.fill and should be good to go.

export class GalleryComponent implements OnInit {

  photos = [];

  galleryState: Observable<any>;

  constructor(
    private store: Store<any>,
    private photoActions: PhotoActions,
    private router: Router
  ) {
    this.galleryState = this.store.select<any>(state => state.photos.gallery);
  }
}

In my other components which have nothing in the constructor, instantiating the component in my test is as simple as new SomeComponent().

However, in the GalleryComponent above, I am wondering if there is a way that I can literally ignore the dependencies completely (for now), and instead just instantiate the component in a way that I can test some inner functions easily. For example, say I had the following function inside GalleryComponent:

function timesByTwo(number) {
  return number * 2;
}

This is not at all related to any of the dependencies, so how can I just test that one function given that this component has 3 dependencies?

Thanks

Upvotes: 3

Views: 2312

Answers (1)

Joffutt4
Joffutt4

Reputation: 1458

If you truly don't care about testing anything at all that is associated with your dependencies, then in your spec you can just construct your component with null values for those dependencies.

import { AppComponent } from './app.component';
describe('App: Test', () => {

  let component: AppComponent;

  beforeEach(() => {
    component = new AppComponent(null, null, null);
  });

  it('should create the app', () => {
    expect(component).toBeTruthy();
  });

  it(`Should return 4`, () => {
    expect(component.timesByTwo(2)).toEqual(4);
  });
}

To get around your current usage of this.store.select in your constructor you can modify your constructor like so

constructor(
    private store: Store<any>,
    private photoActions: PhotoActions,
    private router: Router
  ) {
    if(this.store == null){
        this.galleryState = null;
    }else{
        this.galleryState = this.store.select<any>(state => state.photos.gallery);
    }
  }

Otherwise you can mock your Store component in your test page. An example

import { Observable } from 'rxjs/Rx'
export class MockService extends EventService{

  constructor() { super(null); }

  getEvents(user:string){
    return Observable.of([{val: "test"}]);
  }
}

and then modify my code from above to be

let component: AppComponent;
let mockService: MockService;

      beforeEach(() => {
        mockService = new MockService()
        component = new AppComponent(null, mockService, null);
      });

Upvotes: 4

Related Questions