Merge pull request #3 from emyann/feature/Setup-units-tests

emyann · web-flow · commit 23392e4aa796 · 2017-07-19T16:57:33.000-04:00
Setup Unit Test
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,5 @@ typings/**/*
 ~$*
 *~
 node_modules/
+src/build/
+coverage/
diff --git a/.travis.yml b/.travis.yml
@@ -7,4 +7,10 @@ language: node_js
 node_js:
   - '6.7'
 
-script: true
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+  
+script:
+  - npm run test
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ## Built upon
 
-- [x] [Webpack 2](https://webpack.github.io/docs/roadmap.html#2)
+- [x] [Webpack 3](https://webpack.js.org/)
 - [x] [Typescript 2](https://blogs.msdn.microsoft.com/typescript/2016/07/11/announcing-typescript-2-0-beta/)
 - [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)
 ![Imgur](http://i.imgur.com/pETTX85.png)
@@ -51,7 +51,5 @@ After build phase, 3 files are generated into the `dist` folder:
 
 ## TODO
 
-- [ ] Add TODO example
-- [ ] Setup VSCode debug to match webpack-dev-server
 - [ ] Setup a webpack common configuration and use webpack-merge
-- [ ] Setup unit tests with Jasmine / Karma
+- [ ] `create-ts-app` or `create-typescript-app` CLI instead of cloning the entire repository
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,6 +1,7 @@
 {
 	// See https://go.microsoft.com/fwlink/?LinkId=759670
 	// for the documentation about the jsconfig.json format
+	"sourceMap": true,
 	"compilerOptions": {
 		"target": "es6",
 		"module": "commonjs",
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,61 @@
+var webpackConf = require('./webpack.config.js');
+module.exports = function (config) {
+  config.set({
+    basePath:'',
+    frameworks: ['jasmine'],
+    files: [{ pattern: './tests/unit/spec-bundle.js', watched: false }],
+    preprocessors: { './tests/unit/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
+    webpack: {
+      module: webpackConf.module,
+      resolve: webpackConf.resolve
+    },
+    webpackMiddleware: {
+      noInfo: true,
+      stats: 'errors-only'
+    },
+    reporters: ['kjhtml', 'spec', 'coverage'],
+    // optionally, configure the reporter
+    coverageReporter: {
+      // specify a common output directory
+      dir: './tests/build/reports/coverage',
+      reporters: [
+        // reporters not supporting the `file` property
+        { type: 'html', subdir: 'report-html' },
+        { type: 'lcov', subdir: 'report-lcov' },
+        // reporters supporting the `file` property, use `subdir` to directly
+        // output them in the `dir` directory
+        { type: 'cobertura', subdir: '.', file: 'cobertura.txt' },
+        { type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt' },
+        { type: 'teamcity', subdir: '.', file: 'teamcity.txt' },
+        { type: 'text', subdir: '.', file: 'text.txt' },
+        { type: 'text-summary', subdir: '.', file: 'text-summary.txt' },
+      ]
+    },
+    specReporter: {
+      maxLogLines: 5,         // limit number of lines logged per test 
+      suppressErrorSummary: true,  // do not print error summary 
+      suppressFailed: false,  // do not print information about failed tests 
+      suppressPassed: false,  // do not print information about passed tests 
+      suppressSkipped: true,  // do not print information about skipped tests 
+      showSpecTiming: false // print the time elapsed for each spec 
+    },
+    customLaunchers: {
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: true,
+    concurrency: Infinity
+  });
+
+
+  if (process.env.TRAVIS) {
+    config.browsers = ['Chrome_travis_ci'];
+  }
+};
diff --git a/package.json b/package.json
@@ -6,13 +6,13 @@
   "scripts": {
     "start": "npm run server:dev",
     "server": "npm run server:dev",
-    "server:dev": "webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --profile --watch --content-base dist/",
-    "server:prod": "cross-env NODE_ENV=production webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --profile --watch --content-base dist/",
+    "server:dev": "webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --inline --progress --watch --open",
+    "server:prod": "cross-env NODE_ENV=production webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --profile --watch --open --content-base dist/",
     "build": "npm run build:dev",
     "build:dev": "webpack --config ./webpack.config.js --progress --profile --color --display-error-details --display-cached",
     "build:prod": "cross-env NODE_ENV=production webpack --config ./webpack.config.js  --progress --profile --color --display-error-details --display-cached --bail",
     "clean": "npm cache clear && rimraf -- dist",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "karma start"
   },
   "repository": {
     "type": "git",
@@ -21,25 +21,40 @@
   "author": "yrenaudin",
   "license": "ISC",
   "devDependencies": {
-    "@types/lodash": "^4.14.50",
-    "cross-env": "^3.1.4",
-    "css-loader": "^0.26.1",
+    "@types/jasmine": "^2.5.53",
+    "@types/lodash": "^4.14.70",
+    "awesome-typescript-loader": "^3.2.1",
+    "cross-env": "^5.0.1",
+    "css-loader": "^0.28.4",
     "ejs-loader": "^0.3.0",
-    "eslint": "^3.14.0",
-    "expose-loader": "^0.7.1",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.26.0",
-    "rimraf": "^2.5.4",
-    "style-loader": "^0.13.1",
-    "ts-loader": "^2.0.0",
-    "tslint": "^4.3.1",
-    "tslint-loader": "^3.3.0",
-    "typescript": "^2.1.5",
-    "webpack": "^2.1.0-beta.22",
-    "webpack-dashboard": "^0.2.1",
-    "webpack-dev-server": "2.2.0"
+    "eslint": "^4.2.0",
+    "expose-loader": "^0.7.3",
+    "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.29.0",
+    "jasmine": "^2.6.0",
+    "jasmine-core": "^2.6.4",
+    "karma": "^1.7.0",
+    "karma-babel-preprocessor": "^6.0.1",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-coverage": "^1.1.1",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.31",
+    "karma-webpack": "^2.0.4",
+    "rimraf": "^2.6.1",
+    "source-map-loader": "^0.2.1",
+    "style-loader": "^0.18.2",
+    "tslint": "^5.5.0",
+    "tslint-loader": "^3.5.3",
+    "typescript": "^2.4.1",
+    "webpack": "^3.3.0",
+    "webpack-dashboard": "^0.4.0",
+    "webpack-dev-server": "2.5.1"
   },
   "dependencies": {
     "lodash": "^4.17.4"
   }
-}
+}
diff --git a/src/index.html b/src/index.html
@@ -15,7 +15,8 @@
 </head>
 
 <body>
-  <div> You have successfully started your Typescript application using Webpack. By <a href="https://twitter.com/renaudin_yann">@renaudin_yann</a>    </div>
+  <div> You have successfully started your Typescript application using Webpack. Open your console to see your printed message from the index.ts file </div>
+  <p>By <a href="https://twitter.com/renaudin_yann">@renaudin_yann</a> </p>
 </body>
 
 </html>
diff --git a/src/index.spec.ts b/src/index.spec.ts
@@ -0,0 +1,5 @@
+describe('TypeScript WebPack Starter Tests', () => {
+    it('A good way to start building an awesome lib is by doing Unit Tests 👌🏽', () => {
+        expect(true).toBe(true);
+    });
+})
diff --git a/tests/unit/spec-bundle.js b/tests/unit/spec-bundle.js
@@ -0,0 +1,9 @@
+Error.stackTraceLimit = Infinity;
+
+var testContext = require.context('./../../src', true, /\.spec\.ts/);
+
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext);
+}
+
+var modules = requireAll(testContext);
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,9 +1,16 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "es6",
-    "moduleResolution": "node",
-    "sourceMap": true
+    "module": "commonjs",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
   },
   "exclude": [
     "node_modules",
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,66 +1,77 @@
-const webpack = require('webpack');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const DashboardPlugin = require('webpack-dashboard/plugin');
-const nodeEnv = process.env.NODE_ENV || 'development';
-const isProd = nodeEnv === 'production';
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const DashboardPlugin = require("webpack-dashboard/plugin");
+const nodeEnv = process.env.NODE_ENV || "development";
+const isProd = nodeEnv === "production";
 
 var config = {
-    devtool: isProd ? 'hidden-source-map' : 'cheap-eval-source-map',
-    context: path.resolve('./src'),
-    entry: {
-        app: './index.ts',
-        vendor: './vendor.ts'
-    },
-    output: {
-        path: path.resolve('./dist'),
-        filename: '[name].bundle.js',
-        sourceMapFilename: '[name].map',
-        devtoolModuleFilenameTemplate: function (info) {
-            return "file:///" + info.absoluteResourcePath;
-        }
-    },
-    module: {
-        rules: [
-            { enforce: 'pre', test: /\.ts$/, exclude: ["node_modules"], loader: 'ts-loader' },
-            { test: /\.html$/, loader: "html" },
-            { test: /\.css$/, loaders: ['style', 'css'] }
-        ]
-    },
-    resolve: {
-        extensions: [".ts", ".js"],
-        modules: [path.resolve('./src'), 'node_modules']
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': { // eslint-disable-line quote-props
-                NODE_ENV: JSON.stringify(nodeEnv)
-            }
-        }),
-        new HtmlWebpackPlugin({
-            title: 'Typescript Webpack Starter',
-            template: '!!ejs-loader!src/index.html'
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            minChunks: Infinity,
-            filename: 'vendor.bundle.js'
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: { warnings: false },
-            output: { comments: false },
-            sourceMap: false
-        }),
-        new DashboardPlugin(),
-        new webpack.LoaderOptionsPlugin({
-            options: {
-                tslint: {
-                    emitErrors: true,
-                    failOnHint: true
-                }
-            }
-        })
+  devtool: isProd ? "hidden-source-map" : "source-map",
+  context: path.resolve("./src"),
+  entry: {
+    app: "./index.ts",
+    vendor: "./vendor.ts"
+  },
+  output: {
+    path: path.resolve("./dist"),
+    filename: "[name].bundle.js",
+    sourceMapFilename: "[name].bundle.map",
+    devtoolModuleFilenameTemplate: function (info) {
+        return "file:///" + info.absoluteResourcePath;
+    }
+  },
+  module: {
+    rules: [
+      {
+        enforce: "pre",
+        test: /\.ts?$/,
+        exclude: ["node_modules"],
+        use: ["awesome-typescript-loader", "source-map-loader"]
+      },
+      { test: /\.html$/, loader: "html-loader" },
+      { test: /\.css$/, loaders: ["style-loader", "css-loader"] }
     ]
+  },
+  resolve: {
+    extensions: [".ts", ".js"]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env": {
+        // eslint-disable-line quote-props
+        NODE_ENV: JSON.stringify(nodeEnv)
+      }
+    }),
+    new HtmlWebpackPlugin({
+      title: "Typescript Webpack Starter",
+      template: "!!ejs-loader!src/index.html"
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "vendor",
+      minChunks: Infinity,
+      filename: "vendor.bundle.js"
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: { warnings: false },
+      output: { comments: false },
+      sourceMap: true
+    }),
+    new DashboardPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        tslint: {
+          emitErrors: true,
+          failOnHint: true
+        }
+      }
+    })
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, "dist/"),
+    compress: true,
+    port: 3000,
+    hot: true
+  }
 };
 
 module.exports = config;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`// See https://go.microsoft.com/fwlink/?LinkId=759670`
`3`	`3`	`// for the documentation about the jsconfig.json format`
	`4`	`+ "sourceMap": true,`
`4`	`5`	`"compilerOptions": {`
`5`	`6`	`"target": "es6",`
`6`	`7`	`"module": "commonjs",`