chore: added test cases for image component

Author: vvdwivedi

sdk/lib/src/imagekitio-angular/ik-image/ik-image.component.ts

@@ -8,7 +8,10 @@ import { ImagekitService } from '../imagekit.service';
 export class IkImageComponent implements AfterViewInit, OnInit {
   @Input('src') src:string;
   @Input('path') path:string;
+  @Input('urlEndpoint') urlEndpoint:string;
   @Input('transformation') transformation:Array<Object> = [];
+  @Input('transformationPosition') transformationPosition:string;
+  @Input('queryParameters') queryParameters:Object;
   @Input('lqip') lqip:any;
   url = '';
   lqipUrl = '';
@@ -19,7 +22,7 @@ export class IkImageComponent implements AfterViewInit, OnInit {
   }
 
   ngOnInit(): void {
-    this.setUrl(this.src, this.path, this.transformation, this.lqip);
+    this.setUrl(this.src, this.path, this.transformation, this.lqip, this.urlEndpoint, this.transformationPosition, this.queryParameters);
   }
 
   ngAfterViewInit() {
@@ -35,18 +38,36 @@ export class IkImageComponent implements AfterViewInit, OnInit {
     imageObserver.observe(this.el.nativeElement);
   }
 
-  setUrl(src?, path?, transformation?, lqip?) {
+  setUrl(src?, path?, transformation?, lqip?, urlEndpoint?, transformationPosition?, queryParameters?) {
+    const config = this.getConfigObject(src, path, transformation, transformationPosition, urlEndpoint, queryParameters)
+    this.url = this.imagekit.getUrl(config);
+    if (lqip && lqip.active === true) {
+      this.lqipUrl = this.lqipload(lqip.quality, this.url, this.path);
+    }
+  }
+
+  getConfigObject(src?, path?, transformation?, transformationPosition?, urlEndpoint?, queryParameters?) {
+    const config = {
+      transformation: transformation,
+    };
+    if (urlEndpoint) {
+      config['urlEndpoint'] = urlEndpoint;
+    }
+    if (queryParameters) {
+      config['queryParameters'] = queryParameters;
+    }
     if (src) {
-      this.url = this.imagekit.getUrl({ src: src, transformation: transformation, transformationPosition: "query" });
+      config['src'] = src;
+      config['transformationPosition'] = 'query';
     } else if (path) {
-      this.url = this.imagekit.getUrl({ path: path, transformation: transformation });
+      config['path'] = path;
+      if (transformationPosition) {
+        config['transformationPosition'] = transformationPosition;
+      }
     } else {
       throw new Error('Missing src / path during initialization!');
     }
-
-    if (lqip && lqip.active === true) {
-      this.lqipUrl = this.lqipload(lqip.quality, this.url, this.path);
-    }
+    return config;
   }
 
   loadImage(url:string) {

sdk/lib/src/imagekitio-angular/imagekit.service.ts

@@ -35,6 +35,7 @@ export class ImagekitService {
   }
 
   getUrl(config: object): string {
-    return this._ikInstance.url(config);
+    const url = this._ikInstance.url(config);
+    return url;
   }
 }

sdk/src/sdk-tests/ik-image.component.spec.ts

@@ -1,34 +1,128 @@
 import { ElementRef } from "@angular/core";
 import { IkImageComponent } from "../../lib/src/imagekitio-angular/ik-image/ik-image.component";
 import { ImagekitService } from "../../lib/src/imagekitio-angular/imagekit.service";
+const pjson = require("../../lib/package.json");
+const version = `angular-${pjson.version}`;
 
 describe("IkImageComponent", () => {
   let component: IkImageComponent;
   let imageKitService: ImagekitService;
 
   beforeEach(() => {
     imageKitService = new ImagekitService({
-      urlEndpoint: "url",
-      publicKey: "pub",
-      authenticationEndpoint: "auth"
+      urlEndpoint: "https://ik.imagekit.io/company/",
+      publicKey: "abc",
+      authenticationEndpoint: "http://example.com/auth"
     });
     let elRef: ElementRef;
     component = new IkImageComponent(elRef, imageKitService);
   });
 
+  it("urlEndpoint passed to component should be used over initialized value", () => {
+    component.setUrl(null, "def", null, null, 'localhost:3000');
+    expect(component.url).toBe(`localhost:3000/def?ik-sdk-version=${version}`);
+  });
+
+  it("Presence and absence of trailing slash in should not result in double slash (//) in the returned url", () => {
+    let comp: IkImageComponent;
+    let iKService: ImagekitService;
+    iKService = new ImagekitService({
+      urlEndpoint: "https://ik.imagekit.io/company",
+      publicKey: "abc",
+      authenticationEndpoint: "http://example.com/auth"
+    });
+    let elRef: ElementRef;
+    comp = new IkImageComponent(elRef, iKService);
+
+    comp.setUrl(null, "/abc.png");
+    expect(comp.url).toBe(
+      `https://ik.imagekit.io/company/abc.png?ik-sdk-version=${version}`
+    );
+    iKService = new ImagekitService({
+      urlEndpoint: "https://ik.imagekit.io/company/",
+      publicKey: "abc",
+      authenticationEndpoint: "http://example.com/auth"
+    });
+    comp.setUrl(null, "/def.png");
+    expect(comp.url).toBe(
+      `https://ik.imagekit.io/company/def.png?ik-sdk-version=${version}`
+    );
+  });
+
+  it("Presence and absence of leading slash in parameter should not result in double slash (//) in the returned url", () => {
+    let comp: IkImageComponent;
+    let iKService: ImagekitService;
+    iKService = new ImagekitService({
+      urlEndpoint: "https://ik.imagekit.io/company/",
+      publicKey: "abc",
+      authenticationEndpoint: "http://example.com/auth"
+    });
+    let elRef: ElementRef;
+    comp = new IkImageComponent(elRef, iKService);
+    comp.setUrl(null, "/abc.png");
+    expect(comp.url).toContain(
+      `https://ik.imagekit.io/company/abc.png?ik-sdk-version=${version}`
+    );
+    comp.setUrl(null, "abc.png");
+    expect(comp.url).toContain(
+      `https://ik.imagekit.io/company/abc.png?ik-sdk-version=${version}`
+    );
+  });
+
+  it("new unsupported transformation parameter is passed then it should come in URL as it is", () => {
+    const transformation = [{ foo: "200", bar: "200" }];
+    component.setUrl("https://abc.com/def", null, transformation);
+    expect(component.url).toBe(`https://abc.com/def?ik-sdk-version=${version}&tr=foo-200%2Cbar-200`);
+  });
+
+  it("supported transformation parameter is passed then it should come in query parameters after transformation", () => {
+    const transformation = [{ height: "200", width: "200" }, { rotation: "90"}];
+    component.setUrl("https://abc.com/def", null, transformation);
+    expect(component.url).toBe(`https://abc.com/def?ik-sdk-version=${version}&tr=h-200%2Cw-200%3Art-90`);
+  });
+
+  it("if SRC is used to create URL, transformartioPosition should be query", () => {
+    const config = component.getConfigObject('abc');
+    expect(config['transformationPosition']).toBe('query')
+  });
+
+  it("if SRC is used to create URL, transformartioPosition should be query even if anything else is passed", () => {
+    const transformation = [{ height: "200", width: "200" }, { rotation: "90"}];
+    const config = component.getConfigObject('https://example.com/ab.png', null, transformation, 'path', null);
+    expect(config['transformationPosition']).toBe('query')
+    component.setUrl('https://example.com/ab.png', null, transformation, 'path', null)
+    expect(component.url).toContain('&tr=');
+  });
+
+  it("Parameters passed to queryParameters should be present in URL if src is used", () => {
+    component.setUrl('https://example.com/ab.png', null, null, null, null, null, {version:5, name: 'check'});
+    expect(component.url).toContain('&version=5&name=check');
+  });
+
+  it("Parameters passed to queryParameters should be present in URL if src with existing query is used", () => {
+    component.setUrl('https://example.com/ab.png?foo=bar&baz=nax', null, null, null, null, null, {version:5, name: 'check'});
+    expect(component.url).toContain('&version=5&name=check');
+    expect(component.url).toBe('https://example.com/ab.png?foo=bar&baz=nax&ik-sdk-version=angular-0.0.1&version=5&name=check');
+  });
+
+  it("Parameters passed to queryParameters should be present in URL if path is used", () => {
+    component.setUrl(null, '/default.png', null, null, null, null, {version:6, name: 'bar'});
+    expect(component.url).toContain('&version=6&name=bar');
+  });
+
   it("setUrl should create correct URL when src is provided", () => {
     component.setUrl("abc");
-    expect(component.url).toContain("/abc?ik-sdk-version=angular-");
+    expect(component.url).toContain(`/abc?ik-sdk-version=${version}`);
   });
 
   it("setUrl should create correct URL when path is provided", () => {
-    component.setUrl(null, "def");
-    expect(component.url).toContain("/url/def?ik-sdk-version=angular-");
+    component.setUrl(null, "def", null, null);
+    expect(component.url).toContain(`https://ik.imagekit.io/company/def?ik-sdk-version=${version}`);
   });
 
   it("setUrl should create correct lqipURL in addition to URL when lqip is provided", () => {
     component.setUrl("abc", null, null, { active: true, quality: 1 });
-    expect(component.url).toContain("/abc?ik-sdk-version=angular-");
+    expect(component.url).toContain(`/abc?ik-sdk-version=${version}`);
     expect(component.lqipUrl).toContain("tr=q-1");
   });
 
@@ -49,54 +143,4 @@ describe("IkImageComponent", () => {
     );
     expect(lqipURl).toContain("tr=q-10");
   });
-
-  it("setUrl should add transformations in query parameters", () => {
-    const transformation = [
-      { height: "200", width: "200" },
-      {
-        rotation: "90"
-      }
-    ];
-    component.setUrl("abc", null, transformation);
-    expect(component.url).toContain("&tr=h-200%2Cw-200%3Art-90");
-  });
-
-  it("setUrl should handle the presence and absence of leading slash in path parameters", () => {
-    let comp: IkImageComponent;
-    let iKService: ImagekitService;
-    iKService = new ImagekitService({
-      urlEndpoint: "https://ik.imagekit.io/company/",
-      publicKey: "abc",
-      authenticationEndpoint: "http://example.com/auth"
-    });
-    let elRef: ElementRef;
-    comp = new IkImageComponent(elRef, iKService);
-    comp.setUrl(null, "/abc.png");
-    expect(comp.url).toContain("https://ik.imagekit.io/company/abc.png?ik-sdk-version=angular-");
-    comp.setUrl(null, "abc.png");
-    expect(comp.url).toContain("https://ik.imagekit.io/company/abc.png?ik-sdk-version=angular-");
-  });
-
-  it("setUrl should handle the presence and absence of leading slash in urlEndpoint parameters", () => {
-    let comp: IkImageComponent;
-    let iKService: ImagekitService;
-    iKService = new ImagekitService({
-      urlEndpoint: "https://ik.imagekit.io/company",
-      publicKey: "abc",
-      authenticationEndpoint: "http://example.com/auth"
-    });
-    let elRef: ElementRef;
-    comp = new IkImageComponent(elRef, iKService);
-
-    comp.setUrl(null, "/abc.png");
-    expect(comp.url).toContain("https://ik.imagekit.io/company/abc.png?ik-sdk-version=angular-");
-    iKService = new ImagekitService({
-      urlEndpoint: "https://ik.imagekit.io/company/",
-      publicKey: "abc",
-      authenticationEndpoint: "http://example.com/auth"
-    });
-    comp.setUrl(null, "/def.png");
-    expect(comp.url).toContain("https://ik.imagekit.io/company/def.png?ik-sdk-version=angular-");
-  });
-
 });

sdk/src/sdk-tests/imagekit.service.spec.ts

@@ -1,4 +1,6 @@
 import { ImagekitService } from "../../lib/src/imagekitio-angular/imagekit.service";
+const pjson = require("../../lib/package.json");
+const version = `angular-${pjson.version}`;
 
 describe("ImagekitService", () => {
   let imagekitService: ImagekitService;
@@ -10,7 +12,7 @@ describe("ImagekitService", () => {
     });
   })
 
-  it("getUrl should return correct url with correct SDK name", () => {
-    expect(imagekitService.getUrl({src: 'abc'})).toContain('ik-sdk-version=angular-')
+  it("The url returned should have parameter with the value", () => {
+    expect(imagekitService.getUrl({src: 'abc'})).toContain(`ik-sdk-version=${version}`)
   });
 });