Merge pull request #101 from ooyala/pbw-3069-jest

[PBW-3069-jest] added jest, js unit testing framework, to alice. Incl…

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-build
+build
+coverage
+.idea

README.md

@@ -76,5 +76,16 @@ To start a python server, cd into the repo directory and run:
 
 You should now be able to load the sample page by hitting http://localhost:8000/sample.html
 
+## Testing
+To run tests, run this command:
+
+    npm test
+
+Add test files to directory `tests/`.
+
+Test file should have same location and name as `js/` file with `-test` after test file name.
+
+For example, component file `js/components/sharePanel.js` will have test file `tests/components/sharePanel-test.js`.
+
 ## Publisher and Ooyala Customer
 Able to fork git repo and build the skin at will. Terms and condition apply. Please read [Ooyala open-source onboarding guide](http://www.ooyala.com)

gulpfile.js

@@ -7,6 +7,7 @@ var gulp = require('gulp'),
     uglify = require('gulp-uglify'),
     jshint = require('gulp-jshint'),
     react = require('gulp-react');
+    shell = require('gulp-shell');
 
 var path = {
   scripts: ['./js/include/header.js', './js/components/*.js', './js/*.js', './js/include/footer.js'],
@@ -34,6 +35,9 @@ gulp.task('buildCss', function() {
   .pipe(gulp.dest('build'));
 });
 
+// Run tests
+gulp.task('test', shell.task(['npm test']));
+
 // Initiate a watch
 gulp.task('watch', function() {
   gulp.watch(path.scripts, ['concat', 'buildScript']);

package.json

@@ -10,21 +10,24 @@
   "main": "html5-skin.js",
   "scripts": {
     "build": "",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ooyala/html5-skin.git"
   },
   "dependencies": {
     "gulp": "3.8.11",
+    "react": "0.12.2",
     "react-tools":"*"
   },
   "devDependencies": {
     "gulp-concat": "2.5.2",
     "gulp-uglify": "1.1.0",
     "gulp-jshint": "1.10.0",
-    "gulp-react": "3.0.1"
+    "gulp-react": "3.0.1",
+    "gulp-shell": "0.4.2",
+    "jest-cli": "0.4.18"
   },
   "author": "Ooyala",
   "contributors": [
@@ -34,5 +37,28 @@
   "bugs": {
     "url": "https://github.com/ooyala/html5-skin/issues"
   },
-  "homepage": "https://github.com/ooyala/html5-skin"
+  "homepage": "https://github.com/ooyala/html5-skin",
+  "jest": {
+    "modulePathIgnorePatterns": [
+      "/build/",
+      "/node_modules/"
+    ],
+    "persistModuleRegistryBetweenSpecs": true,
+    "preprocessorIgnorePatterns": [
+      "/node_modules/"
+    ],
+    "rootDir": "",
+    "scriptPreprocessor": "scripts/jest/preprocessor.js",
+    "setupEnvScriptFile": "scripts/jest/environment.js",
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react",
+      "react"
+    ],
+
+    "testPathDirs": [
+      "<rootDir>"
+    ],
+    "testDirectoryName": "tests",
+    "collectCoverage": true
+  }
 }

scripts/jest/environment.js

@@ -0,0 +1 @@
+__DEV__ = true;

scripts/jest/preprocessor.js

@@ -0,0 +1,7 @@
+var ReactTools = require('react-tools');
+
+module.exports = {
+  process: function (src) {
+    return ReactTools.transform(src);
+  }
+};

tests/components/sharePanel-test.js

@@ -0,0 +1,17 @@
+jest.dontMock('../../js/components/sharePanel.js');
+
+describe('SharePanel', function () {
+  it('displays social screen after click', function () {
+    var React = require('react/addons');
+    //var SharePanel = require('../../js/components/sharePanel.js');
+    var TestUtils = React.addons.TestUtils;
+
+    // Render share panel in document
+    /*
+     var sharePanel = TestUtils.renderIntoDocument(
+     <SharePanel />
+     );
+     */
+
+  });
+});