Fixed responsive with lazy on Firefox (#255)

Author: strausr

package.json

@@ -34,13 +34,14 @@
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
+    "cloudinary-core": "^2.8.1",
     "codelyzer": "~4.2.1",
-    "cloudinary-core": "^2.8.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~1.7.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.0",
+    "karma-firefox-launcher": "^1.3.0",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
     "ng-packagr": "^3.0.0-rc.2",

projects/angular-cld/karma.conf.js

@@ -10,7 +10,8 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
+      require('karma-firefox-launcher')
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
@@ -25,7 +26,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['Chrome', 'Firefox'],
     singleRun: true
   });
 };

projects/angular-cld/package.json

@@ -6,7 +6,7 @@
     "@angular/core": "^6.0.0"
   },
   "devDependencies": {
-    "cloudinary-core": "^2.8.0",
+    "cloudinary-core": "^2.8.1",
     "typescript": "^2.9.2"
   }
 }

projects/angular-cld/src/lib/cloudinary-image.component.spec.ts

@@ -824,8 +824,8 @@ describe('CloudinaryImage', () => {
       tick();
       fixture.detectChanges();
       const img = des[0].children[0].nativeElement as HTMLImageElement;
-      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('image/upload/c_fit,w_30/ar_1,b_auto,' +
-        'c_pad,w_iw_div_2/c_crop,g_north_east,h_10,w_10/c_fill,h_ih,w_iw/f_auto,q_auto/bear'));
+      expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/' +
+        '@@fake_angular2_sdk@@/image/upload/c_fit,w_30/ar_1,b_auto,c_pad,w_iw_div_2/c_crop,g_north_east,h_10,w_10/c_fill,h_ih,w_iw/f_auto,q_auto/bear');
     }));
   });
   describe('placeholder type vectorize', () => {
@@ -947,4 +947,35 @@ describe('CloudinaryImage', () => {
       expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('e_sepia/e_grayscale,l_sample/e_tint:75:black/bear'));
     }));
   });
+  describe('cl-image with responsive and lazy-load', async () => {
+    @Component({
+      template: `<cl-image loading="lazy" width="300" public-id="bear"></cl-image>`
+    })
+    class TestComponent {}
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement[];  // the elements w/ the directive
+    let placeholder: DebugElement[];
+    let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
+      { cloud_name: '@@fake_angular2_sdk@@', client_hints: true } as CloudinaryConfiguration);
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent, LazyLoadDirective],
+        providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
+      }).createComponent(TestComponent);
+
+      fixture.detectChanges(); // initial binding
+      // all elements with an attached CloudinaryImage
+      des = fixture.debugElement.queryAll(By.directive(CloudinaryImage));
+      tick();
+      fixture.detectChanges();
+    }));
+    it('src should not exist on Firefox', () => {
+      const img = des[0].children[0].nativeElement as HTMLImageElement;
+      if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+        expect(img).not.toContain('src');
+      }
+    });
+  });
 });
+

projects/angular-cld/src/lib/cloudinary-placeholder.component.ts

@@ -43,7 +43,7 @@ export class CloudinaryPlaceHolder implements AfterContentChecked {
     if (this.type === 'predominant-color' && this.itemHeight && this.itemWidth) {
       return this.cloudinary.url(this.publicId, {transformation: [this.options, ...predominantColorTransformPxl]});
     } else {
-      return this.cloudinary.url(this.publicId, {transformation: [this.options, ...placeholderImageOptions[this.type] || placeholderImageOptions['blur']]})
+      return this.cloudinary.url(this.publicId, {transformation: [this.options, ...placeholderImageOptions[this.type] || placeholderImageOptions['blur']]});
     }
   }
 }