Merge pull request #5 from thisissoon/hotfix/load-correct-img-when-inviewport

Hotfix/load correct img when inviewport

Author: Jack Matthews

src/app/image-loader/image-loader.component.spec.ts

@@ -2,10 +2,16 @@ import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
+import { WindowRef } from '@thisissoon/angular-inviewport';
+
 import { ImageLoaderComponent } from './image-loader.component';
 import { Breakpoint, ResponsiveImage } from './shared/image.model';
 import { ImageLoadedEvent } from './index';
 
+class MockWindowRef {
+  public innerWidth = 800;
+}
+
 describe('ImageLoaderComponent', () => {
   let fixture: ComponentFixture<ImageLoaderComponent>;
   let component: ImageLoaderComponent;
@@ -40,7 +46,10 @@ describe('ImageLoaderComponent', () => {
       ],
       declarations: [
         ImageLoaderComponent
-      ]
+      ],
+      providers: [
+        { provide: WindowRef, useClass: MockWindowRef }
+      ],
     }).compileComponents();
   }));
 
@@ -52,13 +61,17 @@ describe('ImageLoaderComponent', () => {
     fixture.detectChanges();
   });
 
+  it('should update size based on window ref object on init', () => {
+    expect(component.size).toEqual('md');
+  });
+
   it('should set placeholder on init', () => {
     const spy = spyOn(component, 'setPlaceholder');
     component.ngOnInit();
     expect(spy).toHaveBeenCalled();
   });
 
-  it('should set fire placeholder loaded event on image load when loaded is false', () => {
+  it('should fire placeholder loaded event on image load when loaded is false', () => {
     const spy = spyOn(component.imagePlaceholderLoaded, 'emit');
     component.loaded = false;
     const imageElement = fixture.debugElement.query(By.css('img'));
@@ -168,4 +181,5 @@ describe('ImageLoaderComponent', () => {
     component.ngOnDestroy();
     expect(spy).toHaveBeenCalled();
   });
+
 });

src/app/image-loader/image-loader.component.ts

@@ -18,6 +18,7 @@ import 'rxjs/add/operator/debounceTime';
 import * as classes from './shared/classes';
 import * as events from './shared/events';
 import { ImageLoadedEvent, ResponsiveImage, RetinaImage, Size, Breakpoint, Retina } from './shared';
+import { WindowRef } from '@thisissoon/angular-inviewport';
 
 /**
  * A component that renders a `img` element with the correct image url
@@ -185,6 +186,15 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
   public get notLoaded(): boolean {
     return !this.loaded;
   }
+  /**
+   * Creates instance of component. Updates this.size
+   * based on window width.
+   *
+   * @memberof ImageLoaderComponent
+   */
+  constructor(private windowRef: WindowRef) {
+    this.onWidthChange(this.windowRef.innerWidth);
+  }
   /**
    * Set placeholder image as image on component init
    *
@@ -207,7 +217,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
       .takeUntil(this.ngUnsubscribe$)
       .debounceTime(10)
       .subscribe((width) => this.onWidthChange(width));
-    this.width$.next(dummyImg.offsetWidth);
+    this.width$.next(this.windowRef.innerWidth);
   }
   /**
    * If element is in viewport preload image by setting the src