13 files changed, 66 insertions, 5 deletions
diff --git a/web-ui/.babelrc b/web-ui/.babelrc
new file mode 100644
index 00000000..86c445f5
--- /dev/null
+++ b/web-ui/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}
diff --git a/web-ui/.jshintignore b/web-ui/.jshintignore
index 6a32b1a4..df04d870 100644
--- a/web-ui/.jshintignore
+++ b/web-ui/.jshintignore
@@ -2,3 +2,6 @@ app/node_modules
 app/bower_components
 app/js/lib
 app/js/generated
+app/js/account_recovery.js
+app/js/account_recovery
+test/spec/account_recovery
diff --git a/web-ui/app/account_recovery.html b/web-ui/app/account_recovery.html
new file mode 100644
index 00000000..407f5907
--- /dev/null
+++ b/web-ui/app/account_recovery.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Pixelated Account Recovery</title>
+  </head>
+  <body>
+    <div id="root"/>
+    <script type="text/javascript" src="/assets/account_recovery.js"></script>
+  </body>
+</html>
diff --git a/web-ui/app/js/account_recovery.js b/web-ui/app/js/account_recovery.js
new file mode 100644
index 00000000..02183574
--- /dev/null
+++ b/web-ui/app/js/account_recovery.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { render } from 'react-dom'
+import Page from 'js/account_recovery/page'
+
+render(
+  <Page/>,
+  document.getElementById('root')
+);
diff --git a/web-ui/app/js/account_recovery/page.js b/web-ui/app/js/account_recovery/page.js
new file mode 100644
index 00000000..e400dfae
--- /dev/null
+++ b/web-ui/app/js/account_recovery/page.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Page = () => <h1>Hello world</h1>;
+
+export default Page
diff --git a/web-ui/config/copy-webpack.js b/web-ui/config/copy-webpack.js
index 79a5de83..1d2d11c1 100644
--- a/web-ui/config/copy-webpack.js
+++ b/web-ui/config/copy-webpack.js
@@ -4,6 +4,7 @@ module.exports = new CopyWebpackPlugin([
   { context: 'app/', from: '404.html' },
   { context: 'app/', from: 'index.html' },
   { context: 'app/', from: 'sandbox.html' },
+  { context: 'app/', from: 'account_recovery.html' },
   { context: 'app/', from: 'css/*' },
   { context: 'app/', from: 'fonts/*' },
   { context: 'app/', from: 'locales/**/*' },
diff --git a/web-ui/karma.conf.js b/web-ui/karma.conf.js
index 2895dc42..d10667e9 100644
--- a/web-ui/karma.conf.js
+++ b/web-ui/karma.conf.js
@@ -68,7 +68,7 @@ module.exports = function (config) {
     reporters: ['dots', 'junit', 'coverage'],
 
     preprocessors: {
-        'app/js/!(lib)/**/*.js': ['coverage']
+        'app/js/!(lib|account_recovery)/**/*.js': ['coverage']
     },
 
     // enable / disable watching file and executing tests whenever any file changes
diff --git a/web-ui/package.json b/web-ui/package.json
index 480dcc55..52124c54 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -6,12 +6,15 @@
   "private": true,
   "devDependencies": {
     "babel": "^6.5.2",
+    "babel-cli": "^6.22.2",
     "babel-core": "^6.21.0",
     "babel-loader": "^6.2.10",
     "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.22.0",
     "bower": "1.7.9",
     "copy-webpack-plugin": "^4.0.1",
     "dompurify": "^0.8.4",
+    "enzyme": "^2.7.1",
     "font-awesome": "^4.7.0",
     "handlebars": "^4.0.5",
     "he": "^1.1.0",
@@ -21,6 +24,7 @@
     "i18next-xhr-backend": "^1.2.1",
     "iframe-resizer": "^3.5.7",
     "imagemin": "5.2.1",
+    "jasmine": "^2.5.3",
     "jasmine-flight": "^4.0.0",
     "jasmine-jquery": "^2.1.1",
     "jquery": "^3.1.1",
@@ -39,6 +43,9 @@
     "minify": "^2.0.13",
     "modernizr": "^3.3.1",
     "quoted-printable": "^1.0.1",
+    "react": "^15.4.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
     "requirejs": "2.2.0",
     "typeahead.js": "^0.11.1",
     "utf8": "^2.1.2",
@@ -46,7 +53,9 @@
     "webpack": "^1.14.0"
   },
   "scripts": {
-    "test": "npm run jshint --silent && npm run build --silent && karma start --single-run $GRUNT_OPTS",
+    "test": "npm run jshint --silent && npm run build-statics --silent && npm run jasmine-test && npm run karma-test",
+    "jasmine-test": "babel-node ./node_modules/.bin/jasmine JASMINE_CONFIG_PATH=test/jasmine.json",
+    "karma-test": "karma start --single-run $GRUNT_OPTS",
     "debug": "npm run build && karma start --browsers Chrome $GRUNT_OPTS",
     "watch": "npm run compass-watch & npm run handlebars-watch & npm run build-js-watch",
     "watch-test": "karma start",
diff --git a/web-ui/test/jasmine.json b/web-ui/test/jasmine.json
new file mode 100644
index 00000000..969304b6
--- /dev/null
+++ b/web-ui/test/jasmine.json
@@ -0,0 +1,9 @@
+{
+  "spec_dir": "test/spec/account_recovery/",
+  "spec_files": [
+    "**/*[sS]pec.js"
+  ],
+  "helpers": [
+    "helpers/**/*.js"
+  ]
+}
diff --git a/web-ui/test/spec/account_recovery/account_recovery.spec.js b/web-ui/test/spec/account_recovery/account_recovery.spec.js
new file mode 100644
index 00000000..d153f0eb
--- /dev/null
+++ b/web-ui/test/spec/account_recovery/account_recovery.spec.js
@@ -0,0 +1,11 @@
+import {shallow} from 'enzyme'
+import React from 'react'
+import Page from '../../../app/js/account_recovery/page'
+
+describe('test', () => {
+  'use strict';
+  it('react', () => {
+    const page = shallow(<Page />);
+    expect(page.find('h1').text()).toEqual('Hello world');
+  });
+});
diff --git a/web-ui/test/test-main.js b/web-ui/test/test-main.js
index 4396993f..b7dc430f 100644
--- a/web-ui/test/test-main.js
+++ b/web-ui/test/test-main.js
@@ -1,7 +1,7 @@
 
 var tests = Object.keys(window.__karma__.files).filter(function (file) {
   'use strict';
-  return (/\.spec\.js$/.test(file));
+  return !(/account_recovery/.test(file)) && (/\.spec\.js$/.test(file));
 });
 
 beforeEach(function() {
diff --git a/web-ui/webpack.config.js b/web-ui/webpack.config.js
index 99162908..f0f605b0 100644
--- a/web-ui/webpack.config.js
+++ b/web-ui/webpack.config.js
@@ -6,6 +6,7 @@ var aliases = require('./config/alias-webpack');
 module.exports = {
   entry: {
     app: './app/js/index.js',
+    account_recovery: './app/js/account_recovery.js',
     sandbox: './app/js/sandbox.js'
   },
   node: { fs: 'empty' },
@@ -24,7 +25,7 @@ module.exports = {
         test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel',
-        query: { presets: ['es2015']}
+        query: { presets: ['es2015', 'react']}
       }
     ]
   },
diff --git a/web-ui/webpack.production.config.js b/web-ui/webpack.production.config.js
index bddbbe9c..55069c3f 100644
--- a/web-ui/webpack.production.config.js
+++ b/web-ui/webpack.production.config.js
@@ -6,6 +6,7 @@ var aliases = require('./config/alias-webpack');
 module.exports = {
   entry: {
     app: './app/js/index.js',
+    account_recovery: './app/js/account_recovery.js',
     sandbox: './app/js/sandbox.js'
   },
   node: { fs: 'empty' },
@@ -23,7 +24,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel',
-        query: { presets: ['es2015']}
+        query: { presets: ['es2015', 'react']}
       }
     ]
   },