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

Question

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

Answer 1

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);
});