[#922] Add react tests

with @tayanefernandes

9 files changed, 42 insertions, 4 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/js/account_recovery.js b/web-ui/app/js/account_recovery.js
index a136b261..02183574 100644
--- a/web-ui/app/js/account_recovery.js
+++ b/web-ui/app/js/account_recovery.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import { render } from 'react-dom'
+import Page from 'js/account_recovery/page'
 
 render(
-  <h1>Hello, world!</h1>,
+  <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/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 a41396f7..52124c54 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -6,6 +6,7 @@
   "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",
@@ -13,6 +14,7 @@
     "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",
@@ -22,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",
@@ -41,6 +44,7 @@
     "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",
@@ -49,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() {