import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { ImageService } from '../../gallery/image.service';
import { MockImageService } from '../../gallery/mocks/mock-image.service';
import { GalleryFormatPipe } from '../../gallery/gallery-format.pipe';
import { ThumbnailComponent } from '../../gallery/thumbnail/thumbnail.component';
import { ImageContainerComponent } from '../../gallery/image-container/image-container.component';

import { TopPageComponent } from './top-page.component';

describe('TopPageComponent', () => {
  const mockImageService = new MockImageService();

  let component: TopPageComponent;
  let fixture: ComponentFixture<TopPageComponent>;
  let compiled: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ RouterTestingModule ],
      declarations: [
        GalleryFormatPipe,
        ThumbnailComponent,
        ImageContainerComponent,
        TopPageComponent
      ],
      providers: [
        { provide: ImageService, useValue: mockImageService }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TopPageComponent);
    component = fixture.componentInstance;
    compiled = fixture.debugElement.nativeElement;
    fixture.detectChanges();
  });

  it('should create and load images', () => {
    expect(component).toBeTruthy();
    const thumbnails = compiled.querySelectorAll('jblog-thumbnail');
    expect(thumbnails.length).toBe(1);
  });
});

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TopPageComponent } from './top-page.component';

describe('TopPageComponent', () => {
  let component: TopPageComponent;
  let fixture: ComponentFixture<TopPageComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TopPageComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TopPageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

--- 
+++ 
@@ -1,14 +1,33 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { ImageService } from '../../gallery/image.service';
+import { MockImageService } from '../../gallery/mocks/mock-image.service';
+import { GalleryFormatPipe } from '../../gallery/gallery-format.pipe';
+import { ThumbnailComponent } from '../../gallery/thumbnail/thumbnail.component';
+import { ImageContainerComponent } from '../../gallery/image-container/image-container.component';
 
 import { TopPageComponent } from './top-page.component';
 
 describe('TopPageComponent', () => {
+  const mockImageService = new MockImageService();
+
   let component: TopPageComponent;
   let fixture: ComponentFixture<TopPageComponent>;
+  let compiled: HTMLElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TopPageComponent ]
+      imports: [ RouterTestingModule ],
+      declarations: [
+        GalleryFormatPipe,
+        ThumbnailComponent,
+        ImageContainerComponent,
+        TopPageComponent
+      ],
+      providers: [
+        { provide: ImageService, useValue: mockImageService }
+      ]
     })
     .compileComponents();
   }));
@@ -16,10 +35,13 @@
   beforeEach(() => {
     fixture = TestBed.createComponent(TopPageComponent);
     component = fixture.componentInstance;
+    compiled = fixture.debugElement.nativeElement;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create and load images', () => {
     expect(component).toBeTruthy();
+    const thumbnails = compiled.querySelectorAll('jblog-thumbnail');
+    expect(thumbnails.length).toBe(1);
   });
 });
Fix top page component test

