Merge pull request #181 from aitboudad/test

feat(#79): Add initial work for Unit tests

.config/karma-shim.js

@@ -0,0 +1,20 @@
+Error.stackTraceLimit = Infinity;
+
+require('core-js/client/shim');
+require('reflect-metadata');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+var appContext = require.context('./../src', true, /\.spec\.ts/);
+appContext.keys().forEach(appContext);
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

.config/webpack.test.js

@@ -0,0 +1,16 @@
+const webpack = require('webpack');
+
+module.exports = {
+  entry: "./src/index",
+  resolve: {
+    extensions: ['', '.ts', '.webpack.js', '.web.js', '.js'],
+  },
+  devtool: 'source-map',
+  module: {
+    loaders: [
+      { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
+      { test: /\.html$/, loader: 'raw' },
+    ]
+  },
+  plugins: [],
+};

.gitignore

@@ -4,11 +4,4 @@ lib
 node_modules
 npm-debug.log
 yarn-error.log
-/demo/**/*.js
-/demo/**/*.js.map
-/demo/**/*.d.ts
-/src/**/*.js
-/src/**/*.js.map
-/src/**/*.d.ts
-/test/**/*.js
-/test/**/*.js.map
+coverage

.travis.yml

@@ -14,11 +14,9 @@ install:
   - npm install yarn -g
   - yarn install
 
-before_script:
- - chmod +x .config/webpack.build.js
-
 script:
 - npm run lint
+- npm run test
 
 branches:
   only:

karma.conf.js

@@ -1,92 +1,87 @@
-// Karma configuration
-// Generated on Sat Apr 16 2016 02:03:54 GMT+0530 (India Standard Time)
+var path = require('path');
 
-module.exports = function(config) {
-  config.set({
+var webpackConfig = require('./.config/webpack.test');
+
+var ENV = process.env.npm_lifecycle_event;
+var isTestWatch = ENV === 'test-watch';
+
+module.exports = function (config) {
+  var _config = {
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: '',
 
-
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
     frameworks: ['jasmine'],
 
-
     // list of files / patterns to load in the browser
     files: [
-      'test/**/*Spec.ts',
-      'test/**/*Spec.js'
+      { pattern: './.config/karma-shim.js', watched: false }
     ],
 
-
     // list of files to exclude
-    exclude: [
-    ],
-
+    exclude: [],
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      '**/*.ts': ['typescript']
+      './.config/karma-shim.js': ['webpack', 'sourcemap']
     },
 
-    typescriptPreprocessor: {
-      // options passed to the typescript compiler
-      options: {
-        emitDecoratorMetadata: true,
-        experimentalDecorators: true,
-        target: "es5",
-        declaration: false,
-        module: "system",
-        moduleResolution: "node",
-        sourceMap: false, // (optional) Generates corresponding .map file.
-        noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type.
-        noResolve: true, // (optional) Skip resolution and preprocessing.
-        removeComments: true, // (optional) Do not emit comments to output.
-        concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false.
-      },
-      // transforming the filenames
-      transformPath: function(path) {
-        return path.replace(/\.ts$/, '.js');
-      }
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      // webpack-dev-middleware configuration
+      // i. e.
+      stats: 'errors-only'
     },
 
+    webpackServer: {
+      noInfo: true // please don't spam the console when running in karma!
+    },
 
     // test results reporter to use
-    // possible values: 'dots', 'progress'
+    // possible values: 'dots', 'progress', 'mocha'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
-
+    reporters: ["mocha"],
 
     // web server port
     port: 9876,
 
-
     // enable / disable colors in the output (reporters and logs)
     colors: true,
 
-
     // level of logging
     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
     logLevel: config.LOG_INFO,
 
-
     // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: true,
-
+    autoWatch: false,
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome', 'Firefox', 'PhantomJS'],
-
+    browsers: isTestWatch ? ['Chrome'] : ['PhantomJS'],
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: Infinity
-  })
-}
+    singleRun: true
+  };
+
+  if (!isTestWatch) {
+    _config.reporters.push("coverage");
+
+    _config.coverageReporter = {
+      dir: 'coverage/',
+      reporters: [{
+        type: 'json',
+        dir: 'coverage',
+        subdir: 'json',
+        file: 'coverage-final.json'
+      }]
+    };
+  }
+
+  config.set(_config);
+
+};

package.json

@@ -22,7 +22,9 @@
     "build:bundles": "npm run build:bundles:compile && npm run build:bundles:minify",
     "build:bundles:compile": "node ./node_modules/.bin/webpack --config .config/webpack.build.js",
     "build:bundles:minify": "uglifyjs bundles/ng2-formly.umd.js --output bundles/ng2-formly.umd.min.js --in-source-map bundles/ng2-formly.umd.js.map --source-map bundles/ng2-formly.umd.min.js.map",
-    "demo": "NODE_ENV=dev node node_modules/.bin/webpack-dashboard --title ng2-formly-demo -- node_modules/.bin/webpack-dev-server --quiet --port 9000 --content-base demo --config .config/webpack.demo.js --open"
+    "demo": "NODE_ENV=dev node node_modules/.bin/webpack-dashboard --title ng2-formly-demo -- node_modules/.bin/webpack-dev-server --quiet --port 9000 --content-base demo --config .config/webpack.demo.js --open",
+    "test": "./node_modules/.bin/karma start",
+    "test-watch": "./node_modules/.bin/karma start --no-single-run --auto-watch"
   },
   "keywords": [
     "angular",
@@ -55,7 +57,7 @@
     "@angular/forms": "^2.1.1",
     "@angular/platform-browser": "^2.1.1",
     "@angular/platform-browser-dynamic": "^2.1.1",
-    "@types/jasmine": "^2.2.34",
+    "@types/jasmine": "^2.5.35",
     "@types/node": "^6.0.45",
     "angular2-template-loader": "^0.5.0",
     "awesome-typescript-loader": "^2.2.4",
@@ -64,18 +66,21 @@
     "core-js": "^2.4.1",
     "cz-conventional-changelog": "^1.1.5",
     "jasmine": "^2.4.1",
-    "karma": "^0.13.22",
-    "karma-chrome-launcher": "^0.2.3",
-    "karma-firefox-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.8",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-typescript-preprocessor": "^0.1.2",
+    "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-mocha-reporter": "^2.2.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-remap-coverage": "^0.1.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.8.0",
     "phantomjs-prebuilt": "^2.1.7",
     "raw-loader": "^0.5.1",
     "rxjs": "^5.0.0-rc.1",
     "shx": "^0.1.2",
     "tslint": "^3.7.4",
-    "typescript": "^2.0.3",
+    "typescript": "^2.0.6",
     "uglify-js": "^2.6.2",
     "webpack": "^1.13.2",
     "webpack-dashboard": "^0.2.0",

src/components/formly.form.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { createGenericTestComponent } from '../test-utils';
+
+import { Component } from '@angular/core';
+
+import { FormlyForm } from './formly.form';
+import { FormlyModule } from '../core';
+import { FormlyConfig } from '../services/formly.config';
+
+// tslint:disable-next-line
+const createTestComponent = (html: string) =>
+    createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+
+describe('Formly Form Component', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({declarations: [TestComponent], imports: [FormlyModule.forRoot()]});
+  });
+
+  it('should initialize inputs with default values', () => {
+    const formlyForm = new FormlyForm(new FormlyConfig());
+
+    expect(formlyForm.model).toEqual({});
+    expect(formlyForm.fields).toEqual([]);
+  });
+});
+
+@Component({selector: 'formly-form-test', template: '', entryComponents: []})
+class TestComponent {
+}

src/core.ts

@@ -33,7 +33,7 @@ const FORMLY_DIRECTIVES = [FormlyForm, FormlyField, FormlyMessage, FormlyNgFocus
   ],
 })
 export class FormlyModule {
-  static forRoot(config: ConfigOption): ModuleWithProviders {
+  static forRoot(config: ConfigOption = {}): ModuleWithProviders {
     return {
       ngModule: FormlyModule,
       providers: [

src/services/formly.config.ts

@@ -11,7 +11,7 @@ export class FormlyConfig {
   validators: {[name: string]: ValidatorOption} = {};
   wrappers: {[name: string]: WrapperOption} = {};
 
-  constructor(@Inject(FORMLY_CONFIG_TOKEN) configs) {
+  constructor(@Inject(FORMLY_CONFIG_TOKEN) configs = []) {
     configs.map(config => {
       if (config.types) {
         config.types.map(type => this.setType(type));

src/test-utils.ts

@@ -0,0 +1,8 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+
+export function createGenericTestComponent<T>(html: string, type: {new (...args: any[]): T}): ComponentFixture<T> {
+  TestBed.overrideComponent(type, {set: {template: html}});
+  const fixture = TestBed.createComponent(type);
+  fixture.detectChanges();
+  return fixture as ComponentFixture<T>;
+}

tsconfig.json

@@ -21,9 +21,9 @@
   "exclude": [
     "node_modules"
   ],
-  "files": [
-    "src/index.ts",
-    "./demo/hello.ts"
+  "include": [
+    "src/**/*.ts",
+    "demo/**/*.ts"
   ],
   "compileOnSave": false
 }