test(setup): Adding karma/jasmine and InputBase tests (#81)

.gitignore

@@ -1,6 +1,9 @@
+coverage
+
 # Node
 node_modules/*
 npm-debug.log
+yarn-error.log
 
 # TypeScript
 src/*.js

base.spec.ts

@@ -0,0 +1,17 @@
+import "reflect-metadata";
+import "zone.js/dist/zone.js";
+import "zone.js/dist/proxy.js";
+import "zone.js/dist/sync-test.js";
+import "zone.js/dist/jasmine-patch.js";
+import "zone.js/dist/async-test.js";
+import "zone.js/dist/fake-async-test.js";
+import { TestBed } from "@angular/core/testing";
+import {
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting,
+} from "@angular/platform-browser-dynamic/testing";
+
+TestBed.initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting(),
+);

karma.conf.ts

@@ -0,0 +1,50 @@
+import { Config, ConfigOptions } from "karma";
+import { KarmaTypescriptConfig } from "karma-typescript/src/api/configuration";
+
+const env = process.env.NODE_ENV || "development";
+
+console.log(`*** Running karma in ${env} mode`);
+
+function isDev(): boolean {
+  return env === "development";
+}
+
+const reporters = isDev()
+  ? ["jasmine-diff", "mocha", "kjhtml", "karma-typescript"]
+  : ["jasmine-diff", "mocha", "karma-typescript"];
+
+const browsers = isDev()
+  ? ["Chrome"]
+  : ["PhantomJS"];
+
+module.exports = function (config: Config) {
+  config.set({
+    reporters,
+    browsers,
+    frameworks: ["jasmine", "karma-typescript"],
+    files: [
+      "base.spec.ts",
+      "src/**/*.*(ts|html)",
+    ],
+    preprocessors: {
+      "**/*.ts": ["karma-typescript"],
+    },
+    browserNoActivityTimeout: 100000,
+    karmaTypescriptConfig: {
+      coverageOptions: {
+        instrumentation: false,
+      },
+      tsconfig: "./tsconfig.spec.json",
+      bundlerOptions: {
+        entrypoints: /\.spec\.ts$/,
+        transforms: [
+          require("karma-typescript-angular2-transform"),
+        ],
+      },
+      compilerDelay: 500,
+    } as KarmaTypescriptConfig,
+    client: {
+      clearContext: false,
+    },
+  } as ConfigOptions);
+};

package.json

@@ -5,7 +5,8 @@
     "name": "Carlos Caballero",
     "email": "[email protected]"
   },
-  "maintainers": [{
+  "maintainers": [
+    {
       "name": "Carlos Caballero",
       "email": "[email protected]"
     },
@@ -39,7 +40,7 @@
     "commit": "node_modules/.bin/git-cz",
     "lint": "tslint --type-check --project ./src/tsconfig.json src/**/*.ts",
     "publish": "cd dist && npm publish",
-    "test": "tsc && karma start"
+    "test": "karma start"
   },
   "config": {
     "commitizen": {
@@ -53,15 +54,18 @@
     "@angular/forms": "^4.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^4.1.3",
-    "@angular/compiler": "^4.1.3",
-    "@angular/core": "^4.1.3",
-    "@angular/forms": "^4.1.3",
+    "@angular/common": "^4.2.3",
+    "@angular/compiler": "^4.2.3",
+    "@angular/core": "^4.2.3",
+    "@angular/forms": "^4.2.3",
+    "@angular/platform-browser": "^4.2.3",
+    "@angular/platform-browser-dynamic": "^4.2.3",
     "@types/del": "^2.2.32",
-    "@types/gulp": "^4.0.3",
+    "@types/gulp": "4.0.3",
     "@types/gulp-changed": "^0.0.31",
     "@types/gulp-rename": "^0.0.32",
     "@types/jasmine": "^2.5.47",
+    "@types/karma": "^0.13.36",
     "@types/merge2": "^0.3.30",
     "@types/node": "~7.0.13",
     "@types/run-sequence": "^0.0.28",
@@ -77,16 +81,20 @@
     "gulp-rename": "^1.2.2",
     "gulp-rollup": "^2.11.0",
     "gulp-typescript": "^3.1.6",
-    "jasmine-core": "^2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "^1.6.0",
+    "jasmine-core": "^2.6.4",
+    "jasmine-spec-reporter": "~4.1.1",
+    "karma": "^1.7.0",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "^1.1.0",
+    "karma-jasmine-diff-reporter": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-mocha-reporter": "^2.2.3",
     "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
+    "karma-typescript": "^3.0.4",
+    "karma-typescript-angular2-transform": "^1.0.0",
     "merge2": "^1.0.3",
     "node-watch": "^0.5.2",
     "phantomjs-prebuilt": "~2.1.14",
@@ -98,7 +106,7 @@
     "ts-loader": "^2.0.3",
     "ts-node": "~2.0.0",
     "tslint": "^5.1.0",
-    "typescript": "~2.3.3",
+    "typescript": "~2.3.4",
     "zone.js": "^0.8.5"
   },
   "engines": {

src/inputs/input-base.spec.ts

@@ -0,0 +1,223 @@
+import { TestBed, fakeAsync, tick } from "@angular/core/testing";
+import { Renderer, Injector } from "@angular/core";
+
+import { InputBase } from "./input-base";
+import { inject } from "@angular/core/testing";
+import { InlineEditorService } from "../inline-editor.service";
+import { InlineEditorEvent, Events, ExternalEvent } from "../types/inline-editor-events.class";
+import { InlineEditorState } from "../types/inline-editor-state.class";
+
+let component: InputBase;
+
+let inlineEditorService: InlineEditorService;
+let renderer: Renderer;
+
+function inlineEditorSpyFactory(): InlineEditorService {
+  const createObservableSpy = () => ({
+    subscribe: jasmine.createSpy("subscribe")
+      .and.returnValue(jasmine.createSpyObj("observable", ["unsubscribe"])),
+  });
+
+  const spy = {
+    getConfig: jasmine.createSpy("getConfig").and.returnValue({ disabled: false }),
+    getState: jasmine.createSpy("getState"),
+    events: {
+      internal: {
+        onUpdateConfig: createObservableSpy(),
+        onSave: {
+          emit: jasmine.createSpy("emit"),
+        },
+        onCancel: {
+          emit: jasmine.createSpy("emit"),
+        },
+        onEnter: {
+          emit: jasmine.createSpy("emit"),
+        },
+        onEscape: {
+          emit: jasmine.createSpy("emit"),
+        },
+        onBlur: {
+          emit: jasmine.createSpy("emit"),
+        },
+        onFocus: {
+          emit: jasmine.createSpy("emit"),
+        },
+        onClick: {
+          emit: jasmine.createSpy("emit"),
+        },
+        onUpdateStateOfChild: createObservableSpy(),
+      },
+    },
+    onUpdateStateOfService: {
+      emit: jasmine.createSpy("emit"),
+    },
+  };
+
+  return spy as any as InlineEditorService;
+}
+
+function rendererSpyFactory(): Renderer {
+  const spy = jasmine.createSpyObj("Renderer", ["invokeElementMethod"]);
+
+  return spy as Renderer;
+}
+
+describe("InputBaseComponent", () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [],
+      providers: [
+        {
+          provide: InlineEditorService,
+          useFactory: inlineEditorSpyFactory,
+        },
+        {
+          provide: Renderer,
+          useFactory: rendererSpyFactory,
+        },
+      ],
+    });
+  });
+
+  beforeEach(() => {
+    component = new InputBase(TestBed);
+  });
+
+
+  beforeEach(inject([InlineEditorService, Renderer],
+    (_inlineEditorService: InlineEditorService, _renderer: Renderer) => {
+      inlineEditorService = _inlineEditorService;
+      renderer = _renderer;
+    }),
+  );
+
+  describe("should capture state when", () => {
+
+    it("Call onSave event", () => {
+      component.save();
+      expect(inlineEditorService.events.internal.onSave.emit).toHaveBeenCalledTimes(1);
+      expect(inlineEditorService.events.internal.onSave.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+        state: jasmine.objectContaining({
+          value: "",
+          editing: false,
+          disabled: false,
+          empty: true,
+        }),
+      }));
+    });
+
+    it("Call onCancel event", () => {
+      component.cancel();
+
+      expect(inlineEditorService.events.internal.onCancel.emit).toHaveBeenCalledTimes(1);
+      expect(inlineEditorService.events.internal.onCancel.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+        state: jasmine.objectContaining({
+          value: "",
+          editing: false,
+          disabled: false,
+          empty: true,
+        }),
+      }));
+    });
+
+    it("Call onEnter event", () => {
+      event = null;
+      component.onEnter(event);
+
+      expect(inlineEditorService.events.internal.onEnter.emit).toHaveBeenCalledTimes(1);
+      expect(inlineEditorService.events.internal.onEnter.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+        event,
+        state: jasmine.objectContaining({
+          value: "",
+          editing: false,
+          disabled: false,
+          empty: true,
+        }),
+      }));
+    });
+
+    it("Call onEscape event", () => {
+      event = null;
+      component.onEscape(event);
+
+      expect(inlineEditorService.events.internal.onEscape.emit).toHaveBeenCalledTimes(1);
+      expect(inlineEditorService.events.internal.onEscape.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+        event,
+        state: jasmine.objectContaining({
+          value: "",
+          editing: false,
+          disabled: false,
+          empty: true,
+        }),
+      }));
+    });
+
+    it("Call onBlur event", () => {
+      event = null;
+      component.onBlur(event);
+
+      expect(inlineEditorService.events.internal.onBlur.emit).toHaveBeenCalledTimes(1);
+      expect(inlineEditorService.events.internal.onBlur.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+        event,
+        state: jasmine.objectContaining({
+          value: "",
+          editing: false,
+          disabled: false,
+          empty: true,
+        }),
+      }));
+    });
+
+    it("Call onClick event", () => {
+      event = null;
+      component.onClick(event);
+
+      expect(inlineEditorService.events.internal.onClick.emit).toHaveBeenCalledTimes(1);
+      expect(inlineEditorService.events.internal.onClick.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+        event,
+        state: jasmine.objectContaining({
+          value: "",
+          editing: false,
+          disabled: false,
+          empty: true,
+        }),
+      }));
+    });
+
+    it("Call onFocus event", () => {
+      event = null;
+      component.onFocus(event);
+
+      expect(inlineEditorService.events.internal.onFocus.emit).toHaveBeenCalledTimes(1);
+      expect(inlineEditorService.events.internal.onFocus.emit).toHaveBeenCalledWith(jasmine.objectContaining({
+        event,
+        state: jasmine.objectContaining({
+          value: "",
+          editing: false,
+          disabled: false,
+          empty: true,
+        }),
+      }));
+    });
+
+  });
+
+  describe("should call funtion invokeElementMethod from renderer object when", () => {
+
+    it("Call focus ", fakeAsync(() => {
+      component.focus();
+      tick();
+
+      expect(renderer.invokeElementMethod).toHaveBeenCalledTimes(1);
+      expect(renderer.invokeElementMethod).toHaveBeenCalledWith(component.inputElement, "focus", []);
+    }));
+
+    it("Call select", fakeAsync(() => {
+      component.select();
+      tick();
+
+      expect(renderer.invokeElementMethod).toHaveBeenCalledTimes(1);
+      expect(renderer.invokeElementMethod).toHaveBeenCalledWith(component.inputElement, "select", []);
+    }));
+  });
+});

src/inputs/input-base.ts

@@ -146,7 +146,7 @@ export class InputBase implements OnInit, OnChanges, DoCheck,
     public onKeyPress(event: Event) {
         this.service.events.internal.onKeyPress.emit({
             event,
-            state: this.state,
+            state: this.state.clone(),
         });
     }
 

tsconfig.json

@@ -7,7 +7,9 @@
     "removeComments": true,
     "noUnusedLocals": false,
     "noLib": false,
-    "lib": ["es2016"],
+    "lib": [
+      "es2016"
+    ],
     "sourceMap": true,
     "typeRoots": [
       "./node_modules/@types",