Login component tests

.eslintrc

@@ -41,7 +41,9 @@
     },
     "env": {
         "es6": true,
-        "browser": true
+        "browser": true,
+        "jasmine": true,
+        "jest": true
     },
     "extends": "eslint:recommended",
     "ecmaFeatures": {

README.md

@@ -24,6 +24,7 @@
 - ```npm run lint``` to run ESLint
 - ```npm test && npm run lint``` to run Tests and ESLint
 - ```gulp test``` to start watcher that runs tests everytime any js file changes
+- ```npm run testdbg``` to debug tests (http://ttrmw.co.uk/code/debugging_jest_tests.html)
 
 (Info on Linting setup here: https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48)
 

gulpfile.js

@@ -2,9 +2,9 @@ var gulp = require('gulp');
 
 var browserSync = require('browser-sync');
 var less = require('gulp-less');
-var rename = require('gulp-rename');
+// var rename = require('gulp-rename');
 var shell = require('gulp-shell');
-var uglify = require('gulp-uglify');
+// var uglify = require('gulp-uglify');
 var webpack = require('gulp-webpack');
 
 var configApp = {
@@ -37,12 +37,12 @@ gulp.task('webpack-app', function() {
 gulp.task('serve', ['webpack-app', 'less'], function(){
   browserSync.init({
     open: false,
-    server: "./dist"
+    server: './dist'
   });
 
-  gulp.watch("src/less/*.less", ['less']);
-  gulp.watch("src/js/**/*.js", ['webpack-app']);
-  gulp.watch("src/*.html").on('change', browserSync.reload);
+  gulp.watch('src/less/*.less', ['less']);
+  gulp.watch('src/js/**/*.js', ['webpack-app']);
+  gulp.watch('src/*.html').on('change', browserSync.reload);
 });
 
 gulp.task('less', function () {

package.json

@@ -35,6 +35,7 @@
   },
   "scripts": {
     "test": "jest",
+    "testdbg": "node debug --harmony ./node_modules/jest-cli/bin/jest.js --runInBand",
     "lint": "eslint src/js"
   },
   "jest": {

src/__tests__/components/Login.tests.js

@@ -0,0 +1,97 @@
+/* Disable Jest Auto mocking, as Login module uses 'import' which won't get
+   automatically mocked (rather then 'require') */
+jest.autoMockOff();
+
+jest.mock('../../js/actions/LoginActions');
+jest.mock('../../js/stores/LoginStore');
+
+const React = require('react/addons');
+const Login = require('../../js/components/Login');
+const LoginActions = require('../../js/actions/LoginActions');
+const LoginStore = require('../../js/stores/LoginStore');
+const TestUtils = React.addons.TestUtils;
+
+let loginInstance;
+
+let loggedInState = {
+  token: '123123123',
+  user: 'admin',
+  serviceCatalog: 'some service catalog',
+  metadata: 'some metadata'
+};
+let notLoggedInState = {};
+
+describe('Login component', () => {
+  describe('When user is not logged in', () => {
+    beforeEach(() => {
+      LoginStore.getState = LoginStore.getState.mockReturnValue(notLoggedInState);
+      LoginStore.isLoggedIn = LoginStore.isLoggedIn.mockReturnValue(false);
+      loginInstance = TestUtils.renderIntoDocument(<Login/>);
+    });
+
+    it('should check for redirection prior to mounting', () => {
+      loginInstance._shouldRedirect = jest.genMockFunction();
+      loginInstance.componentWillMount();
+      expect(loginInstance._shouldRedirect).toBeCalled();
+    });
+
+    it('should render with expected markup', () => {
+      expect(TestUtils.isCompositeComponent(loginInstance)).toBeTruthy();
+
+      let loginForm = TestUtils.findRenderedDOMComponentWithTag(loginInstance, 'form');
+      expect(loginForm.props.onSubmit).toBeDefined();
+
+      let inputs = TestUtils.scryRenderedDOMComponentsWithTag(loginInstance, 'input');
+      expect(inputs.length).toBe(2);
+      expect(inputs[0].props.id).toBe('username');
+      expect(inputs[1].props.id).toBe('password');
+      // alternatively dom node can be tested:
+      // expect(React.findDOMNode(inputs[0]).id).toBe('username');
+
+      let submitButton = TestUtils.findRenderedDOMComponentWithTag(loginInstance, 'button');
+      expect(submitButton.props.children).toBe('Submit');
+      expect(submitButton.props.type).toBe('submit');
+    });
+
+    it('should get state when rendered', () => {
+      expect(LoginStore.isLoggedIn).toBeCalled();
+      expect(LoginStore.getState).toBeCalled();
+    });
+
+    it('updates the component state when user fills the form', function() {
+      let inputs = TestUtils.scryRenderedDOMComponentsWithTag(loginInstance, 'input');
+      TestUtils.Simulate.change(inputs[0], { target: { value: 'myusername' }});
+      TestUtils.Simulate.change(inputs[1], { target: { value: 'somepassword' }});
+      expect(loginInstance.state.username).toEqual('myusername');
+      expect(loginInstance.state.password).toEqual('somepassword');
+    });
+
+    it('should handle the login when user submits the login form', () => {
+      let loginForm = TestUtils.findRenderedDOMComponentWithTag(loginInstance, 'form');
+      TestUtils.Simulate.submit(loginForm);
+      expect(LoginActions.authenticateUser).toBeCalled();
+    });
+  });
+
+  describe('When user is logged in', () => {
+    beforeEach(() => {
+      LoginStore.getState = LoginStore.getState.mockReturnValue(loggedInState);
+      LoginStore.isLoggedIn = LoginStore.isLoggedIn.mockReturnValue(true);
+    });
+    it('redirects to nextPath when user is logged in and visits login page', () => {
+      loginInstance = new Login();
+      loginInstance.context = {
+        router: {
+          getCurrentQuery() {
+            return {
+              nextPath: 'nodes'
+            };
+          }
+        }
+      };
+      loginInstance.context.router.transitionTo = jest.genMockFunction();
+      loginInstance.componentWillMount();
+      expect(loginInstance.context.router.transitionTo).toBeCalledWith('nodes');
+    });
+  });
+});

src/js/components/Login.js

@@ -7,10 +7,14 @@ import LoginStore from '../stores/LoginStore';
 export default class Login extends React.Component {
   constructor() {
     super();
-    this.state = LoginStore.getState();
+    this.state = {};
     this.changeListener = this._onChange.bind(this);
   }
 
+  componentWillMount() {
+    this._shouldRedirect();
+  }
+
   componentDidMount() {
     this.setState(LoginStore.getState());
     LoginStore.addChangeListener(this.changeListener);
@@ -22,6 +26,10 @@ export default class Login extends React.Component {
 
   _onChange() {
     this.setState(LoginStore.getState());
+    this._shouldRedirect();
+  }
+
+  _shouldRedirect() {
     if (LoginStore.isLoggedIn()) {
       let nextPath = this.context.router.getCurrentQuery().nextPath || 'overview';
       this.context.router.transitionTo(nextPath);