Fix E2E tests for 5.0.0

src/test/get-expected-files.js

@@ -83,6 +83,7 @@ export function app(options) {
     'server/config/environment/test.js',
     'server/config/environment/shared.js',
     'server/views/404.' + markup,
+    'e2e/.eslintrc',
     'e2e/main/main.po.js',
     'e2e/main/main.spec.js',
     'e2e/components/navbar/navbar.po.js',

templates/app/.editorconfig

@@ -9,7 +9,7 @@ root = true
 
 # Change these settings to your own preference
 indent_style = space
-indent_size = 2
+indent_size = 4
 
 # We recommend you to keep these unchanged
 end_of_line = lf

templates/app/.eslintrc

@@ -149,7 +149,7 @@
         "id-blacklist": 0,                                          //blacklist certain identifiers to prevent them being used
         "id-length": 0,                                             //this option enforces minimum and maximum identifier lengths (variable names, property names etc.)
         "id-match": 0,                                              //require identifiers to match the provided regular expression
-        "indent": ["error", 2],                                     //specify tab or space width for your code
+        "indent": ["warn", 4],                                      //specify tab or space width for your code
         "jsx-quotes": 0,                                            //specify whether double or single quotes should be used in JSX attributes
         "key-spacing": 2,                                           //enforce spacing between keys and values in object literal properties
         "keyword-spacing": [2, {

templates/app/_.babelrc

@@ -1,15 +1,15 @@
 {
     "presets": [
-      "es2015",
-      "es2016",
-      "es2017",
-      "stage-0"
+        ["babel-preset-env", {
+            "targets": {
+                "node": "6.2"
+            }
+        }]
     ],
     "plugins": [
       <%_ if(filters.flow) { -%>
       "transform-flow-comments",
       <%_ } -%>
-      "angular2-annotations",
       "transform-runtime",
       "transform-decorators-legacy"
     ]

templates/app/_package.json

@@ -118,6 +118,7 @@
     "babel-plugin-transform-class-properties": "^6.6.0",
     "babel-plugin-transform-runtime": "^6.6.0",
     "babel-plugin-istanbul": "^4.1.4",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.6.0",
     "eslint": "^2.12.0",
     "del": "^3.0.0",
@@ -181,6 +182,7 @@
     <%# END WEBPACK %>
     "through2": "^2.0.1",
     "open": "~0.0.4",
+    "protractor": "^5.3.0",
     "istanbul": "1.1.0-alpha.1",
     "chai": "^4.1.2",
     "sinon": "^3.2.1",
@@ -217,6 +219,7 @@
     "lint:server": "eslint ./server/**/*.js -c ./server/.eslintrc --ignore-pattern *.spec.js --ignore-pattern *.integration.js",
     "test": "gulp test",
     "test:client": "karma start ./karma.conf.js --single-run",
+    "test:e2e": "gulp webpack:dev && protractor ./protractor.conf.js",
     <%_ if(filters.flow) { -%>
     "flow": "flow",
     <%_ } -%>

templates/app/client/app/account(auth)/login/login.component.js

@@ -1,11 +1,11 @@
+// @flow
 import { Component } from '@angular/core';
 <%_ if(filters.uirouter) { -%>
 import { StateService } from 'ui-router-ng2';<% } %>
 <%_ if(filters.ngroute) { -%>
 import { Router } from '@angular/router';<% } %>
 import { AuthService } from '../../../components/auth/auth.service';
 
-// @flow
 <%_ if(filters.flow) { -%>
 type User = {
     name: string;
@@ -48,8 +48,8 @@ export class LoginComponent {
         this.StateService = _StateService_;<% } %>
     }
 
-    login() {
-        this.submitted = true;
+    login(form) {
+        if(form.invalid) return;
 
         return this.AuthService.login({
             email: this.user.email,
@@ -63,7 +63,7 @@ export class LoginComponent {
                 this.StateService.go('main');<% } %>
             })
             .catch(err => {
-                this.errors.login = err.message;
+                this.errors.login = err.json().message;
             });
     }
 }

templates/app/client/app/account(auth)/login/login.html

@@ -6,7 +6,7 @@ <h1>Login</h1>
       <p>Admin account is <code>[email protected]</code> / <code>admin</code></p>
     </div>
     <div class="col-sm-12">
-      <form class="form" name="loginForm" (ngSubmit)="login()" novalidate #loginForm="ngForm">
+      <form class="form" name="loginForm" (ngSubmit)="login(loginForm)" novalidate #loginForm="ngForm">
 
         <div class="form-group">
           <label>Email</label>

templates/app/client/app/account(auth)/signup/signup.component.js

@@ -5,14 +5,14 @@ import { StateService } from 'ui-router-ng2';<% } %>
 <%_ if(filters.ngroute) { -%>
 import { Router } from '@angular/router';<% } %>
 import { AuthService } from '../../../components/auth/auth.service';
+import template from './signup.html';
 
 <%_ if(filters.flow) { -%>
 type User = {
     name: string;
     email: string;
     password: string;
-};<% } %>
-<%_ if(filters.ts) { -%>
+};<% } %><%_ if(filters.ts) { -%>
 interface User {
     name: string;
     email: string;
@@ -21,7 +21,7 @@ interface User {
 
 @Component({
     selector: 'signup',
-    template: require('./signup.<%=templateExt%>')
+    template,
 })
 export class SignupComponent {
     user: User = {
@@ -61,19 +61,27 @@ export class SignupComponent {
                 <% if(filters.ngroute) { %>this.Router.navigateByUrl('/home');<% } -%>
                 <% if(filters.uirouter) { %>this.StateService.go('main');<% } -%>
             })
-            .catch(err => {
-                err = err.data;
-                this.errors = {};<% if(filters.mongooseModels) { %>
+            .catch(err => {<% if(filters.mongooseModels) { %>
+                this.errors = err.errors;
+
                 // Update validity of form fields that match the mongoose errors
-                err.errors.forEach((error, field) => {
+                Object.entries(err.errors).forEach(([field, error]) => {
                     this.errors[field] = error.message;
+
+                    if(field === 'email' && error.kind === 'user defined') {
+                        form.form.controls[field].setErrors({inUse: true});
+                    }
                 });<% } %><% if(filters.sequelizeModels) { %>
+                this.errors = {};
+
                 // Update validity of form fields that match the sequelize errors
                 if(err.name) {
                     err.fields.forEach(field => {
                         this.errors[field] = err.message;
                     });
                 }<% } %>
+
+                this.submitted = false;
             });
     }
 }

templates/app/client/app/account(auth)/signup/signup.html

@@ -4,7 +4,7 @@
       <h1>Sign up</h1>
     </div>
     <div class="col-sm-12">
-      <form class="form" name="form" (ngSubmit)="register(form)" novalidate #signupForm="ngForm">
+      <form class="form" name="form" (ngSubmit)="register(signupForm)" novalidate #signupForm="ngForm">
 
         <div class="form-group"
           [class.has-success]="name.valid && submitted"
@@ -26,11 +26,11 @@ <h1>Sign up</h1>
             required
             mongoose-error
             #email="ngModel">
-          <p class="help-block" [hidden]="email.valid || (email.pristine && !signupForm.submitted)">
+          <p class="help-block" [hidden]="email.valid || (email.pristine && !signupForm.submitted) || (email.errors ? email.errors.inUse : true)">
             Please enter a valid email address.
           </p>
-          <p class="help-block" [hidden]="!errors.email">
-            {{ errors.email }}
+          <p class="help-block" [hidden]="email.errors ? !email.errors.inUse : true">
+            This email address is already in use.
           </p>
         </div>
 

templates/app/client/app/admin(auth)/admin.module.js

@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';<% if(filters.uirouter
 import { UIRouterModule } from 'ui-router-ng2';<% } %><% if(filters.ngroute) { %>
 import { RouterModule, Routes } from '@angular/router';<% } %>
 import { AuthGuard } from '../../components/auth/auth-guard.service';
+import { AuthModule } from '../../components/auth/auth.module';
 import { AdminComponent } from './admin.component';
 
 <%_ if(filters.uirouter) { -%>
@@ -16,6 +17,7 @@ const adminRoutes: Routes = [{
 
 @NgModule({
     imports: [
+        AuthModule,
         BrowserModule,
         <%_ if(filters.ngroute) { _%>
         RouterModule.forChild(adminRoutes),<% } %>

templates/app/client/components/auth(auth)/auth.module.js

@@ -3,11 +3,13 @@
 import { NgModule } from '@angular/core';
 import { AuthService } from './auth.service';
 import { UserService } from './user.service';
+import { AuthGuard } from '../../components/auth/auth-guard.service';
 
 @NgModule({
     providers: [
         AuthService,
-        UserService
+        UserService,
+        AuthGuard,
     ]
 })
 export class AuthModule {}

templates/app/client/components/auth(auth)/auth.service.js

@@ -122,7 +122,8 @@ export class AuthService {
             })
             .catch(err => {
                 this.logout();
-                return safeCb(callback)(err);
+                safeCb(callback)(err);
+                return Promise.reject(err);
             });
     }
 

templates/app/client/components/auth(auth)/user.service.js

@@ -1,4 +1,4 @@
-'use strict';
+// @flow
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { AuthHttp } from 'angular2-jwt';
@@ -7,7 +7,6 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/toPromise';
 
-// @flow
 type UserType = {
     // TODO: use Mongoose model
     id?: string;
@@ -17,7 +16,7 @@ type UserType = {
 }
 
 function handleError(err) {
-    return Observable.throw(err.json().error || 'Server error');
+    return Observable.throw(err.json() || 'Server error');
 }
 
 @Injectable()

templates/app/client/components/navbar/navbar.component.js

@@ -5,10 +5,11 @@ import { StateService } from 'ui-router-ng2';<% } %>
 <%_ if (filters.ngroute) { -%>
 import { Router } from '@angular/router';<% } %>
 import { AuthService } from '../auth/auth.service';<% } %>
+import template from './navbar.html';
 
 @Component({
     selector: 'navbar',
-    template: require('./navbar.<%=templateExt%>')
+    template,
 })
 export class NavbarComponent {
     isCollapsed = true;
@@ -53,9 +54,10 @@ export class NavbarComponent {
     }
 
     logout() {
-        let promise = this.AuthService.logout();<% if(filters.uirouter) { %>
-        this.StateService.go('login');<% } %><% if(filters.ngroute) { %>
-        this.Router.navigateByUrl('/home');<% } %>
-        return promise;
+        return this.AuthService.logout().then(() => {<% if(filters.uirouter) { %>
+            this.StateService.go('login');<% } %><% if(filters.ngroute) { %>
+            this.Router.navigateByUrl('/home');<% } %>
+            this.reset();
+        });
     }<% } -%>
 }

templates/app/client/components/navbar/navbar.html

@@ -26,7 +26,7 @@
         <li [hidden]="isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>routerLinkActive="active"<% } %>><a <% if(filters.uirouter) { %>uiSref="login"<% } else { %>routerLink="/login"<% } %>>Login</a></li>
         <li [hidden]="!isLoggedIn"><p class="navbar-text">Hello {{ currentUser.name }}</p> </li>
         <li [hidden]="!isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>routerLinkActive="active"<% } %>><a <% if(filters.uirouter) { %>uiSref="settings"<% } else { %>routerLink="/settings"<% } %>><span class="glyphicon glyphicon-cog"></span></a></li>
-        <li [hidden]="!isLoggedIn"><a (click)="logout()">Logout</a></li>
+        <li [hidden]="!isLoggedIn"><a (click)="logout()" style="cursor: pointer;">Log out</a></li>
       </ul><% } %>
     </div>
   </div>

templates/app/e2e/.eslintrc

@@ -0,0 +1,13 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "es6": true,
+        "node": true,<% if(filters.mocha) { %>
+        "mocha": true,<% } else { %>
+        "jasmine": true,<% } %>
+        "protractor": true
+    },
+    "globals": {
+        "expect": true
+    }
+}

templates/app/e2e/account(auth)/login/login.po.js

@@ -3,26 +3,27 @@
  * https://docs.google.com/presentation/d/1B6manhG0zEXkC-H-tPo2vwU06JhL8w9-XCF9oehXzAQ
  */
 
-'use strict';
+import {OauthButtons} from '../../components/oauth-buttons/oauth-buttons.po';
 
-var LoginPage = function() {
-  var form = this.form = element(by.css('.form'));
-  form.email = form.element(by.model('vm.user.email'));
-  form.password = form.element(by.model('vm.user.password'));
-  form.submit = form.element(by.css('.btn-login'));<% if (filters.oauth) { %>
-  form.oauthButtons = require('../../components/oauth-buttons/oauth-buttons.po').oauthButtons;<% } %>
+export class LoginPage {
+    constructor() {
+        this.form = element(by.css('.form'));
+        const form = this.form;
 
-  this.login = function(data) {
-    for (var prop in data) {
-      var formElem = form[prop];
-      if (data.hasOwnProperty(prop) && formElem && typeof formElem.sendKeys === 'function') {
-        formElem.sendKeys(data[prop]);
-      }
+        form.email = form.element(by.name('email'));
+        form.password = form.element(by.name('password'));
+        form.submit = form.element(by.css('.btn-login'));
+        form.oauthButtons = (new OauthButtons()).oauthButtons;
     }
 
-    return form.submit.click();
-  };
-};
-
-module.exports = new LoginPage();
+    login(data) {
+        for(let prop in data) {
+            let formElem = this.form[prop];
+            if(data.hasOwnProperty(prop) && formElem && typeof formElem.sendKeys === 'function') {
+                formElem.sendKeys(data[prop]);
+            }
+        }
 
+        return this.form.submit.click();
+    }
+}