Merge pull request #34 from piotrwitek/migrate-to-jest

Migrate to jest

Author: piotrwitek

.gitignore

@@ -29,6 +29,9 @@ src/**/*.map
 node_modules
 jspm_packages
 
+# Test snapshots
+__snapshots__
+
 # Build directory
 dist
 temp

README.md

@@ -1,10 +1,13 @@
 ## _React v15.3 / Redux v3.6 / TypeScript v2.1_ - starter-kit
 #### __React-Router v2.8 / Seamless-Immutable / JSPM (SystemJS & Rollup with tree-shaking)__
 
-> ##### Futuristic, bundle-free development environment for building _Component-Driven SPA with React, Redux and TypeScript_ - utilizing power of Static Type-checking, ES.Next, CSS-Modules, Hot-reload, in-browser transpilation, tree-shaking - powered by JSPM (SystemJS & Rollup with tree-shaking).
+> ##### Futuristic, bundle-free development environment for building _Component-Driven SPA with React, Redux and TypeScript_ - utilizing power of Static Type-checking, ES.Next, CSS-Modules, Hot-reload, in-browser transpilation, tree-shaking - powered by JSPM (SystemJS & Rollup with tree-shaking)
 
-### _Demo Page:_ http://piotrwitek.github.io/react-redux-typescript-starter-kit/
-### _Minimal React-like + Redux starter-kit EVER (13KB Min+Gzip):_ https://github.com/piotrwitek/preact-typescript-rollup-starter-kit 
+**Demo Page:**  
+*- http://piotrwitek.github.io/react-redux-typescript-starter-kit/*
+
+**Check also minimal [Preact](https://github.com/developit/preact) + Redux starter-kit (13KB Min+Gzip):**  
+*- https://github.com/piotrwitek/preact-typescript-rollup-starter-kit*
 
 Table of Contents  
 1. [Innovations](#innovations)  
@@ -22,7 +25,7 @@ Table of Contents
 
 ### - RAPID-SPEED DEVELOPMENT WORKFLOW - no bundling!
 No bundling during development, instead loading source files (.ts/.tsx) directly in the browser (using [plugin-typescript](https://github.com/frankwallis/plugin-typescript)).  
-When file changes - skipping type-checking (which is delegated to seperate process) and reloading only the changed file with hot-reload.
+When file changes - skipping type-checking (which is delegated to seperate process) and reloading only the changed file with hot-reload
 
 ### - DELEGATED TYPE-CHECKING
 Type-checking is delegated to a seperate process using following options:
@@ -35,20 +38,20 @@ __NOTE:__ There are two seperate __tsconfig__ - one for type-checking during dev
 
 [tsconfig for building production bundle](https://github.com/piotrwitek/react-redux-typescript-starter-kit/blob/a00c1b5854c36ea4d31fa1255ce920134bfc3855/jspm.config.js#L129)
 
+### - STRICT NULL CHECKS - Enabled
+Enabled strictNullChecks with noImplicitAny tsc flags, to increase type safety and grant better tooling support using Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) [Source](https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/)
+
 ### - HOT-RELOAD THAT SCALE
 Local dev server with hot-reloading out-of-the-box (using [systemjs-hot-reloader](https://github.com/capaj/systemjs-hot-reloader)).  
-__How:__ Loading each module separately and using SystemJS module registry, on changes it's removing old module from registry and re-importing updated one then re-evaluating only those modules that was importing the changed module.  
+__How:__ Loading each module separately and using SystemJS module registry, on changes it's removing old module from registry and re-importing updated one then re-evaluating only those modules that was importing the changed module  
 
-__Scale well with increasing modules count because you reload only modules that has changed.__
+__Great scaling capability with increasing module count because you reload single module files that has changed without rebuilding anything.__
 > __Differences with Webpack workflow explained__ from real project perspective by [@jonaskello](https://github.com/jonaskello)  https://github.com/Microsoft/TypeScript/issues/1564#issuecomment-252903932
 
 ### - CLI WORKFLOW
 Most often your team is using different Editors/IDE's so you'll need to have a common way to run type-checking using a specific version of TypeScript compiler for consistent results and avoid Editor specific issues.  
 Run `tsc -p src --watch` command for quick incremental type-checking or `tsc -p src` command for one-time complete check (JS emit is disabled to not clutter your project with intermediate JS files)
 
-### - STRICT NULL CHECKS - Enabled
-Enabled strictNullChecks with noImplicitAny tsc flags, to increase type safety and grant better tooling support using Non-nullable Types (v2.0) and Smarter Type Inference (v2.1) [Source](https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/)
-
 ### - ASYNC/AWAIT/GENERATORS transformation when targeting ES5 (No Babel)
 Support for "async & generator functions" when targeting ES5 __without Babel!__  
 - Async/Await - TypeScript v2.1 provide native support for ES5 transformation (https://github.com/Microsoft/TypeScript/pull/9175)  
@@ -59,7 +62,11 @@ __Until then use an alternative solution covered below:__
 
 [Facebook Regenerator Project](https://github.com/facebook/regenerator) instead of __Babel__ to transform Generator Functions. _(NOTE: Internally **Babel** is also running "regenerator runtime" for async and generator functions transformations - https://babeljs.io/docs/usage/caveats/)_
 
-> When building for production use `npm run regenerator` command after completion of build step, this will run "regenerator" on app.js bundle. Alternatively use `npm run build:regenerator` command to automatically run "regenerator" with each production build.
+> When building for production use `npm run regenerator` command after completion of build step, this will run "regenerator" on app.js bundle. Alternatively use `npm run build:regenerator` command to automatically run "regenerator" with each production build
+
+### - TESTING WITH TYPESCRIPT
+- Writing and running tests in TypeScript runtime using source files, abstracting complicated setups and transpilation complexity (use `npm test` CLI command)
+- Test harness using [jest](https://github.com/facebook/jest)
 
 ### - CSS-MODULES WITH TYPED CLASS-NAMES EXPERIMENT
 Locally scoped CSS styles, encapsulated as ES6 Modules that can be imported in UI components, with capability to type-check CSS class-names in your components using interfaces and leverage TypeScript IntelliSense features in Editor/IDE (using [csjs](https://github.com/rtsao/csjs#faq)):  
@@ -72,7 +79,7 @@ __DEMO:__ http://piotrwitek.github.io/react-redux-typescript-starter-kit/#/css-m
 
 ### - Optimized JSPM (SystemJS) loading speed
 To speed up a full page reload by minimizing request count it is possible to create a development "vendor bundle" for external dependencies loaded from node_modules.  
-If not leveraging HTTP/2, it is a best practice to bundle all external dependencies together and load as a one bundle.
+If not leveraging HTTP/2, it is a best practice to bundle all external dependencies together and load as a one bundle
 
 Test reload speed improvement using this simple test procedure:  
 1. run `npm run unbundle` -> open network tab in chrome dev tools -> reload the page -> check logged results  
@@ -82,14 +89,12 @@ Test reload speed improvement using this simple test procedure:
 
 ## Features
 
-- PRODUCTION-WORKFLOW - npm scripts for production bundling & deployment, github-hooks, linter, test runner etc.
+- PRODUCTION-WORKFLOW - cross-platform npm scripts for production bundling & deployment, github-hooks, linter, test runner etc.
 - TYPESAFE-API-CALLS - type checking contracts of REST API calls - forget constantly checking for API docs and let your IDE guide you
 - REACT-ROUTER - included `react-router-redux` to store your routing in state for Time-Travel capabilities
 - REDUX-DEV-TOOLS - installed Redux DevTools capabilities with [chrome-extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
 - IMMUTABLE-STORE - using `seamless-immutable` for simplicity and backwards-compatibility with vanilla JS (no hassle with `toJS()`, `get()`, `getIn()` in your containers and components)
 - BEM & ITCSS - using BEM with Inverted Triangle conventions to give meaning and context to CSS classes
-- TESTING IN TYPESCRIPT - writing and running tests from TypeScript source files without transpilation complexity (use `npm test` CLI command) - test harness using [tape](https://github.com/substack/tape) and [blue-tape](https://github.com/spion/blue-tape).
-- Type-safe React-Redux with TypeScript
 
 #### React Best Practices & Optimizations
 - no mixins -> use ES6 style PureRenderMixin with PureComponent
@@ -140,12 +145,11 @@ Test reload speed improvement using this simple test procedure:
 │   ├── components              # global reusable presentational components
 │   ├── containers              # container components providing redux context
 │   ├── layouts                 # components defining page layouts
-│   ├── store                   # modules containing redux modules (reducers/constants/action creators)
 │   ├── services                # modules abstracting communication with web services
+│   ├── store                   # modules containing redux modules (reducers/constants/action creators)
 │   ├── types                   # custom TypeScript definitions
 │   ├── utils                   # app utility modules
 │   ├── app.tsx                 # app entry module with routing config
-│   ├── test-runner.tsx         # test suites config
 │   └── tsconfig.tsx            # TypeScript compiler config
 ├── index.html                  # index.html
 ├── index.prod.html             # index.html configured for production use
@@ -169,6 +173,9 @@ git clone https://github.com/piotrwitek/react-redux-typescript-starter-kit.git m
 // Install dependencies
 npm install
 
+// Initiate JSPM and dev-bundle
+npm init
+
 // Run development server with HMR
 npm start
 ```
@@ -227,13 +234,15 @@ __NOTE: Use index.prod.html for production, it have slightly different loading l
 
 #### Deployment
 
+`npm run init` - install jspm packages and prebuilds vendor.dev.js bundle
+
 `npm run init:deploy` - clone git repository in `/dist` folder (gh-pages branch)
 
 `npm run deploy` - commit and push all changes found in `/dist` folder
 
 #### Utility & Git Hooks
 
-`npm run clean` - clean dist folder
+`npm run clean` - clean dist, node_modules, jspm_packages folder
 
 `npm run lint` - run linter
 

jest.config.json

@@ -0,0 +1,26 @@
+{
+  "automock": false,
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js"
+  ],
+  "unmockedModulePathPatterns": [
+    "<rootDir>/node_modules/react",
+    "<rootDir>/node_modules/react-redux",
+    "<rootDir>/node_modules/react-dom",
+    "<rootDir>/node_modules/react-addons-test-utils",
+    "<rootDir>/node_modules/fbjs"
+  ],
+  "transform": {
+    "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+  },
+  "testResultsProcessor": "<rootDir>/node_modules/ts-jest/coverageprocessor.js",
+  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
+  "notify": false,
+  "verbose": true,
+  "globals": {
+    "window": {},
+    "__TS_CONFIG__": "<rootDir>/src/tsconfig.json"
+  }
+}

jspm.config.js

@@ -12,7 +12,7 @@ SystemJS.config({
       "plugin-typescript": "github:frankwallis/plugin-typescript@5.2.9",
       "css": "github:systemjs/plugin-css@0.1.32",
       "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@0.6.0",
-      "blue-tape": "npm:blue-tape@0.2.0"
+      "tslib": "npm:tslib@1.2.0"
     },
     "packages": {
       "github:capaj/systemjs-hot-reloader@0.6.0": {
@@ -22,97 +22,6 @@ SystemJS.config({
           "socket.io-client": "github:socketio/socket.io-client@1.5.1"
         }
       },
-      "npm:blue-tape@0.2.0": {
-        "map": {
-          "tape": "npm:tape@4.6.2"
-        }
-      },
-      "npm:resumer@0.0.0": {
-        "map": {
-          "through": "npm:through@2.3.8"
-        }
-      },
-      "npm:string.prototype.trim@1.1.2": {
-        "map": {
-          "function-bind": "npm:function-bind@1.1.0",
-          "es-abstract": "npm:es-abstract@1.6.1",
-          "define-properties": "npm:define-properties@1.1.2"
-        }
-      },
-      "npm:es-abstract@1.6.1": {
-        "map": {
-          "function-bind": "npm:function-bind@1.1.0",
-          "es-to-primitive": "npm:es-to-primitive@1.1.1",
-          "is-callable": "npm:is-callable@1.1.3",
-          "is-regex": "npm:is-regex@1.0.3"
-        }
-      },
-      "npm:has@1.0.1": {
-        "map": {
-          "function-bind": "npm:function-bind@1.1.0"
-        }
-      },
-      "npm:es-to-primitive@1.1.1": {
-        "map": {
-          "is-callable": "npm:is-callable@1.1.3",
-          "is-date-object": "npm:is-date-object@1.0.1",
-          "is-symbol": "npm:is-symbol@1.0.1"
-        }
-      },
-      "npm:define-properties@1.1.2": {
-        "map": {
-          "object-keys": "npm:object-keys@1.0.11",
-          "foreach": "npm:foreach@2.0.5"
-        }
-      },
-      "npm:minimatch@3.0.3": {
-        "map": {
-          "brace-expansion": "npm:brace-expansion@1.1.6"
-        }
-      },
-      "npm:brace-expansion@1.1.6": {
-        "map": {
-          "balanced-match": "npm:balanced-match@0.4.2",
-          "concat-map": "npm:concat-map@0.0.1"
-        }
-      },
-      "npm:once@1.4.0": {
-        "map": {
-          "wrappy": "npm:wrappy@1.0.2"
-        }
-      },
-      "npm:tape@4.6.2": {
-        "map": {
-          "inherits": "npm:inherits@2.0.3",
-          "glob": "npm:glob@7.1.1",
-          "deep-equal": "npm:deep-equal@1.0.1",
-          "through": "npm:through@2.3.8",
-          "function-bind": "npm:function-bind@1.1.0",
-          "resumer": "npm:resumer@0.0.0",
-          "minimist": "npm:minimist@1.2.0",
-          "object-inspect": "npm:object-inspect@1.2.1",
-          "resolve": "npm:resolve@1.1.7",
-          "string.prototype.trim": "npm:string.prototype.trim@1.1.2",
-          "defined": "npm:defined@1.0.0",
-          "has": "npm:has@1.0.1"
-        }
-      },
-      "npm:glob@7.1.1": {
-        "map": {
-          "inherits": "npm:inherits@2.0.3",
-          "minimatch": "npm:minimatch@3.0.3",
-          "fs.realpath": "npm:fs.realpath@1.0.0",
-          "path-is-absolute": "npm:path-is-absolute@1.0.1",
-          "once": "npm:once@1.4.0",
-          "inflight": "npm:inflight@1.0.6"
-        }
-      },
-      "npm:inflight@1.0.6": {
-        "map": {
-          "once": "npm:once@1.4.0",
-          "wrappy": "npm:wrappy@1.0.2"
-        }
-      },
       "npm:debug@2.3.2": {
         "map": {
           "ms": "npm:ms@0.7.2"
@@ -137,6 +46,8 @@ SystemJS.config({
   },
   transpiler: "plugin-typescript",
   typescriptOptions: {
+    "tsconfig": false,
+    "typeCheck": false,
     "module": "system",
     "target": "es5",
     "emitDecoratorMetadata": true,
@@ -145,8 +56,10 @@ SystemJS.config({
     "moduleResolution": "node",
     "preserveConstEnums": true,
     "removeComments": true,
-    "typeCheck": false,
-    "tsconfig": false
+    "noEmitHelpers": false,
+    "importHelpers": false,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true
   },
   packages: {
     "app": {
@@ -552,4 +465,4 @@ SystemJS.config({
       }
     }
   }
-});
+});

package.json

@@ -9,50 +9,51 @@
   "license": "MIT",
   "main": "server.js",
   "scripts": {
-    "postinstall": "jspm install && npm run build:dev",
-    "clean": "node scripts/clean.js",
+    "clean": "shx rm -rf dist node_modules jspm_packages",
+    "init": "jspm install && npm run build:dev",
     "init:deploy": "node scripts/init.js deploy",
     "deploy": "cd dist && git checkout gh-pages && git add --all && git commit -m \"New Release\" && git push",
-    "precommit": "npm run lint",
-    "prepush": "npm run lint && npm test",
+    "precommit": "npm run lint && npm run tsc",
+    "prepush": "npm run precommit && npm test",
     "preversion": "npm run lint && npm test",
-    "unbundle": "rimraf temp/vendor.dev.js",
+    "unbundle": "shx rm temp/vendor.dev.js",
     "build": "npm run build:app && npm run build:vendor",
     "build:app": "node scripts/build.js app",
     "build:vendor": "node scripts/build.js vendor",
     "build:dev": "node scripts/build.js dev",
     "build:debug": "node scripts/build.js debug",
     "bad": "npm run build:app && npm run deploy",
     "bvd": "npm run build:vendor && npm run deploy",
-    "lint": "tslint ./src/**/*.ts[x]",
-    "test": "jspm run src/test-runner | faucet",
+    "lint": "tslint 'src/**/*.ts[x]'",
     "tsc": "tsc -p src",
     "tsc:watch": "tsc -p src -w",
+    "test": "jest --config ./jest.config.json",
+    "test:update": "jest -u --config ./jest.config.json",
     "regenerator": "node scripts/regenerator.js",
     "build:regenerator": "npm run build:app && npm run regenerator"
   },
   "devDependencies": {
-    "@types/blue-tape": "^0.1.30",
     "@types/classnames": "^0.0.32",
+    "@types/jest": "^16.0.1",
     "@types/react": "^0.14.43",
     "@types/react-dom": "^0.14.11",
     "@types/react-redux": "^4.4.32",
     "@types/react-router": "^2.0.39",
     "@types/react-router-redux": "^4.0.34",
-    "@types/redux": "^3.6.31",
     "@types/redux-actions": "^0.8.32",
     "@types/seamless-immutable": "^6.1.2",
-    "@types/tape": "^4.2.28",
+    "@types/systemjs": "^0.19.32",
     "@types/whatwg-fetch": "^0.0.32",
-    "faucet": "^0.0.1",
     "husky": "^0.11.8",
+    "jest": "^17.0.3",
     "jspm": "^0.17.0-beta.32",
     "jspm-hmr": "^0.5.0",
-    "regenerator": "^0.8.46",
-    "rimraf": "^2.5.4",
+    "regenerator": "^0.9.5",
     "shelljs": "^0.7.5",
-    "tslint": "^3.15.1",
-    "typescript": "^2.1.1"
+    "shx": "^0.2.1",
+    "ts-jest": "^17.0.3",
+    "tslint": "^4.0.2",
+    "typescript": "^2.1.4"
   },
   "jspm": {
     "name": "app",
@@ -70,10 +71,10 @@
       "whatwg-fetch": "npm:whatwg-fetch@^1.1.0"
     },
     "devDependencies": {
-      "blue-tape": "npm:blue-tape@^0.2.0",
       "css": "github:systemjs/plugin-css@^0.1.32",
       "plugin-typescript": "github:frankwallis/plugin-typescript@^5.2.9",
-      "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.6.0"
+      "systemjs-hot-reloader": "github:capaj/systemjs-hot-reloader@^0.6.0",
+      "tslib": "npm:tslib@^1.2.0"
     },
     "peerDependencies": {
       "assert": "npm:jspm-nodelibs-assert@^0.2.0",

scripts/clean.js

@@ -28,5 +28,5 @@ function App() {
 }
 
 export const app = ReactDOM.render(
-  <App />, document.getElementById('app-container')
+  <App />, document.getElementById('app-container'),
 );