Merge pull request #3 from imagekit-developer/testing

Added missing test cases, fixes #1

Author: vvdwivedi

DEVELOPING.md

@@ -4,7 +4,6 @@ This document describes how to develop Imagekit Angular SDK.
 
 - [Setting up development environment](#setting-up-development-environment)
 - [Building the project](#building-the-project)
-- [File naming convention](#file-naming-convention)
 
 ## Setting up development environment
 
@@ -51,3 +50,13 @@ Use
 npm run build
 ```
 from the `sdk` folder to build the library. This creates a package in `dist/imagekitio-angular` folder.
+
+### Running Tests
+
+The designated directory for tests is `sdk/src/sdk-tests` folder. All tests will be executed once on the Chrome Headless browser.
+
+Use 
+```sh
+npm run test
+```
+from the `sdk` folder to start testing.

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

@@ -4,7 +4,6 @@ import { ImagekitService } from '../imagekit.service';
 @Component({
   selector: 'ik-image',
   template: `<img src={{src}}>`,
-  providers: [ImagekitService]
 })
 export class IkImageComponent implements AfterViewInit, OnInit {
   @Input('src') src:string;
@@ -36,17 +35,17 @@ export class IkImageComponent implements AfterViewInit, OnInit {
     imageObserver.observe(this.el.nativeElement);
   }
 
-  setUrl(src, path, transformation, lqip) {
+  setUrl(src?, path?, transformation?, lqip?) {
     if (src) {
-      this.url = this.imagekit.ikInstance.url({ src: src, transformation: transformation, transformationPosition: "query" });
+      this.url = this.imagekit.getUrl({ src: src, transformation: transformation, transformationPosition: "query" });
     } else if (path) {
-      this.url = this.imagekit.ikInstance.url({ path: path, transformation: transformation });
+      this.url = this.imagekit.getUrl({ path: path, transformation: transformation });
     } else {
       throw new Error('Missing src / path during initialization!');
     }
 
-    if (lqip !== undefined && lqip.active === true) {
-      this.lqipUrl = this.lqipload(lqip.quality);
+    if (lqip && lqip.active === true) {
+      this.lqipUrl = this.lqipload(lqip.quality, this.url, this.path);
     }
   }
 
@@ -69,10 +68,9 @@ export class IkImageComponent implements AfterViewInit, OnInit {
     return target;
   };
 
-  lqipload(quality) {
-    let url = this.url;
+  lqipload(quality, url, path) {
     let lqip = "";
-    if (this.path !== undefined) {
+    if (path) {
       let newUrl = url.split("tr:");
       if (newUrl[0] === url) {
         let temp = url.split("/");

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

@@ -24,19 +24,26 @@ export class IkUploadComponent implements OnInit {
   }
 
   handleFileInput(e) {
+    const onError = this.onError;
+    const onSuccess = this.onSuccess;
     const files = e.target.files;
     this.fileToUpload = files.item(0);
     if (this.onFileInput) {
       this.onFileInput(e);
       return;
     }
-    this.upload(this.fileToUpload, this.fileName, this.useUniqueFileName, this.tags, this.folder, this.isPrivateFile, this.customCoordinates, this.responseFields)
+    const params = this.getUploadParams(this.fileToUpload, this.fileName, this.useUniqueFileName, this.tags, this.folder, this.isPrivateFile, this.customCoordinates, this.responseFields)
+    const ik = this.imagekit.ikInstance;
+    ik.upload(params, function (err, result) {
+      if (err) {
+        onError.emit(err);
+      } else {
+        onSuccess.emit(result);
+      }
+    });
   }
 
-  upload(file, fileName, useUniqueFileName, tags, folder, isPrivateFile, customCoordinates, responseFields) {
-    let ik = this.imagekit.ikInstance;
-    const onError = this.onError;
-    const onSuccess = this.onSuccess;
+  getUploadParams(file, fileName, useUniqueFileName?, tags?, folder?, isPrivateFile?, customCoordinates?, responseFields?) {
     const params:object = {
       file: file,
       fileName: fileName,
@@ -64,14 +71,6 @@ export class IkUploadComponent implements OnInit {
     if (responseFields !== undefined) {
       Object.assign(params, { responseFields: responseFields });
     }
-
-    ik.upload(params, function (err, result) {
-      if (err) {
-        onError.emit(err);
-      } else {
-        onSuccess.emit(result);
-      }
-    });
+    return params;
   }
-
 }

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

@@ -1,38 +1,40 @@
-import { Injectable } from '@angular/core';
-import ImageKit from 'imagekit-javascript';
-const pjson = require('../../package.json');
+import { Injectable } from "@angular/core";
+import * as ImageKit from "imagekit-javascript";
+const pjson = require("../../package.json");
 
 export interface Lqip {
   readonly active: boolean;
   readonly quality: number;
 }
 
 export class ImageKitConfiguration {
-    urlEndpoint: string;
-    publicKey: string;
-    authenticationEndpoint?: string;
-    lqip?: Lqip;
-    fileName?: string;
-    tags?: Array<string>;
-    useUniqueFileName?: boolean;
-    responseFields?: any;
-    isPrivateFile?: boolean;
-    folder?: string;
-    customCoordinates?: any;
-    onError?: Function;
-    onSuccess?: Function;
-    sdkVersion?: string;
+  urlEndpoint: string;
+  publicKey: string;
+  authenticationEndpoint?: string;
+  lqip?: Lqip;
+  fileName?: string;
+  tags?: string;
+  useUniqueFileName?: boolean;
+  responseFields?: any;
+  isPrivateFile?: boolean;
+  folder?: string;
+  customCoordinates?: any;
+  sdkVersion?: string;
 }
 
 @Injectable()
 export class ImagekitService {
   _ikInstance: any;
-  constructor(configuration: ImageKitConfiguration) {
-    configuration.sdkVersion = `angular-${pjson.version}`,
-    this._ikInstance = new ImageKit(configuration)
+  constructor(private configuration: ImageKitConfiguration) {
+    (configuration.sdkVersion = `angular-${pjson.version}`),
+      (this._ikInstance = new ImageKit(this.configuration));
   }
 
   get ikInstance(): any {
     return this._ikInstance;
   }
+
+  getUrl(config: object): string {
+    return this._ikInstance.url(config);
+  }
 }

sdk/lib/src/imagekitio-angular/imagekitio-angular.module.ts

@@ -1,14 +1,15 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 import { IkImageComponent } from './ik-image/ik-image.component';
 import { IkUploadComponent } from './ik-upload/ik-upload.component';
-import { ImageKitConfiguration } from './imagekit.service';
+import { ImageKitConfiguration, ImagekitService } from './imagekit.service';
 
 
 @NgModule({
   declarations: [IkUploadComponent, IkImageComponent],
   imports: [
   ],
-  exports: [IkUploadComponent, IkImageComponent]
+  exports: [IkUploadComponent, IkImageComponent],
+  providers: [ ImagekitService ]
 })
 export class ImagekitioAngularModule {
   constructor (@Optional() @SkipSelf() parentModule: ImagekitioAngularModule) {

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

@@ -1,27 +1,102 @@
-// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+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";
 
-// import { IkImageComponent } from '../../lib/src/imagekitio-angular/ik-image/ik-image.component';
-// import { ImageKitConfiguration } from '../../lib/src/imagekitio-angular/imagekit.service';
+describe("IkImageComponent", () => {
+  let component: IkImageComponent;
+  let imageKitService: ImagekitService;
 
-describe('IkImageComponent', () => {
-  // let component: IkImageComponent;
-  // let fixture: ComponentFixture<IkImageComponent>;
+  beforeEach(() => {
+    imageKitService = new ImagekitService({
+      urlEndpoint: "url",
+      publicKey: "pub",
+      authenticationEndpoint: "auth"
+    });
+    let elRef: ElementRef;
+    component = new IkImageComponent(elRef, imageKitService);
+  });
+
+  it("setUrl should create correct URL when src is provided", () => {
+    component.setUrl("abc");
+    expect(component.url).toContain("/abc?ik-sdk-version=angular-");
+  });
+
+  it("setUrl should create correct URL when path is provided", () => {
+    component.setUrl(null, "def");
+    expect(component.url).toContain("/url/def?ik-sdk-version=angular-");
+  });
 
-  // beforeEach(async(() => {
-  //   TestBed.configureTestingModule({
-  //     declarations: [ IkImageComponent ],
-  //     providers: [ImageKitConfiguration]
-  //   })
-  //   .compileComponents();
-  // }));
+  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.lqipUrl).toContain("tr=q-1");
+  });
 
-  // beforeEach(() => {
-  //   fixture = TestBed.createComponent(IkImageComponent);
-  //   component = fixture.componentInstance;
-  //   fixture.detectChanges();
-  // });
+  it("lqipload should create correct query parameters if path is provided", () => {
+    const lqipURl = component.lqipload(
+      10,
+      "/abc?ik-sdk-version=angular-0.0.0",
+      "/xyz"
+    );
+    expect(lqipURl).toContain("tr:q-10");
+  });
 
-  it('is dummy and should pass', () => {
-    expect(true).toBeTruthy();
+  it("lqipload should create correct query parameters if path is not provided", () => {
+    const lqipURl = component.lqipload(
+      10,
+      "/abc?ik-sdk-version=angular-0.0.0",
+      null
+    );
+    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-");
+  });
+
 });