Debug & watch enabled y default in gulp back, webpack HMR, e2e fixes

e2e/helpers/extensions.js

@@ -1,10 +1,10 @@
 /* eslint no-invalid-this: "off" */
 
-import config from './config.js';
 import Nightmare from 'nightmare';
 import {URL} from 'url';
-let currentUser;
+import config from './config.js';
 
+let currentUser;
 
 Nightmare.asyncAction = function(name, func) {
     Nightmare.action(name, function(...args) {
@@ -25,17 +25,42 @@ Nightmare.asyncAction('clearInput', async function(selector) {
 
 let actions = {
     login: function(userName, done) {
-        this.goto(`${config.url}#!/login`)
-            .wait(`vn-login input[name=user]`)
-            .write(`vn-login input[name=user]`, userName)
-            .write(`vn-login input[name=password]`, 'nightmare')
-            .click(`vn-login input[type=submit]`)
-            // FIXME: Wait for dom to be ready: https://github.com/segmentio/nightmare/issues/481
-            // .wait(1000)
-            .then(() => {
-                currentUser = userName;
-                done();
-            })
+        if (currentUser)
+            this.waitToClick('#logout');
+
+        let doLogin = () => {
+            this.wait(`vn-login input[name=user]`)
+                .write(`vn-login input[name=user]`, userName)
+                .write(`vn-login input[name=password]`, 'nightmare')
+                .click(`vn-login input[type=submit]`)
+                .then(() => {
+                    currentUser = userName;
+                    done();
+                })
+                .catch(done);
+        };
+
+        this.waitForURL('#!/login')
+            .then(doLogin)
+            .catch(() => {
+                this.goto(`${config.url}/#!/login`)
+                    .then(doLogin)
+                    .catch(done);
+            });
+    },
+
+    waitForLogin: function(userName, done) {
+        if (currentUser === userName) {
+            return this.waitToClick('vn-topbar a[ui-sref="home"]')
+                .waitForURL('#!/')
+                .then(done)
+                .catch(done);
+        }
+        return this.login(userName)
+            .waitForURL('#!/')
+            .url()
+            .changeLanguageToEnglish()
+            .then(done)
             .catch(done);
     },
 
@@ -65,21 +90,6 @@ let actions = {
             });
     },
 
-    waitForLogin: function(userName, done) {
-        if (currentUser === userName) {
-            return this.waitToClick('vn-topbar a[ui-sref="home"]')
-                .waitForURL('#!/')
-                .then(done)
-                .catch(done);
-        }
-        return this.login(userName)
-            .waitForURL('#!/')
-            .url()
-            .changeLanguageToEnglish()
-            .then(done)
-            .catch(done);
-    },
-
     selectModule: function(moduleName, done) {
         this.waitToClick(`vn-home a[ui-sref="${moduleName}.index"]`)
             .waitForURL(moduleName)

e2e/helpers/nightmare.js

@@ -1,5 +1,6 @@
 /* eslint no-console: 0 */
 import Nightmare from 'nightmare';
+
 let nightmare;
 
 export default function createNightmare(width = 1280, height = 720) {
@@ -22,7 +23,6 @@ export default function createNightmare(width = 1280, height = 720) {
     });
 
     nightmare.header('Accept-Language', 'en');
-
     return nightmare;
 }
 

front/salix/module.js

@@ -106,7 +106,7 @@ function $exceptionHandler(vnApp, $window, $state, $injector) {
                 if (data && data.error instanceof Object)
                     message = data.error.message;
                 else
-                    message = `${exception.status}: ${exception.statusText}`;
+                    message = exception.statusText;
             }
         } else if (exception.name == 'UserError')
             messageT = exception.message;

gulpfile.js

@@ -17,6 +17,11 @@ let srcDir = './front';
 let modulesDir = './modules';
 let buildDir = 'dist';
 
+let backSources = [
+    'loopback',
+    'modules/*/back/**',
+    'back'
+];
 
 // Development
 
@@ -26,12 +31,6 @@ localesRoutes.description = `Builds locales and routes`;
 const front = gulp.series(clean, gulp.parallel(localesRoutes, watch, webpackDevServer));
 front.description = `Starts frontend service`;
 
-const back = gulp.series(dockerStart, backOnly);
-back.description = `Starts backend and database service`;
-
-const defaultTask = gulp.parallel(front, back);
-defaultTask.description = `Starts all application services`;
-
 function backOnly(done) {
     let app = require(`./loopback/server/server`);
     app.start();
@@ -39,7 +38,26 @@ function backOnly(done) {
 }
 backOnly.description = `Starts backend service`;
 
-// backend tests
+function backWatch(done) {
+    const nodemon = require('gulp-nodemon');
+    let sleepBin = isWindows ? 'timeout' : 'sleep';
+
+    nodemon({
+        exec: `${sleepBin} 1 && node --inspect ./node_modules/gulp/bin/gulp.js`,
+        args: ['backOnly'],
+        watch: backSources,
+        done: done
+    });
+}
+backWatch.description = `Starts backend in waching mode`;
+
+const back = gulp.series(dockerStart, backWatch);
+back.description = `Starts backend and database service`;
+
+const defaultTask = gulp.parallel(front, back);
+defaultTask.description = `Starts all application services`;
+
+// Backend tests
 
 function backendUnitTest() {
     let app = require(`./loopback/server/server`);
@@ -78,13 +96,13 @@ function backTest(done) {
     nodemon({
         exec: gulpBin,
         args: ['dockerAndBackTest'],
-        watch: ['loopback', 'modules/*/back/**', 'back'],
+        watch: backSources,
         done: done
     });
 }
 backTest.description = `Watches for changes in modules to execute backTest task`;
 
-// end to end tests
+// End to end tests
 
 function e2eOnly() {
     const jasmine = require('gulp-jasmine');
@@ -173,12 +191,14 @@ function webpackDevServer(done) {
 
     for (let entryName in wpConfig.entry) {
         let entry = wpConfig.entry[entryName];
-        let wdsAssets = [`webpack-dev-server/client?http://127.0.0.1:${devServer.port}/`];
-        if (Array.isArray(entry))
-            wdsAssets = wdsAssets.concat(entry);
-        else
-            wdsAssets.push(entry);
-        wpConfig.entry[entryName] = wdsAssets;
+        if (!Array.isArray(entry))
+            entry = [entry];
+
+        let wdsAssets = [
+            `webpack-dev-server/client?http://localhost:${devServer.port}/`,
+            `webpack/hot/dev-server`
+        ];
+        wpConfig.entry[entryName] = wdsAssets.concat(entry);
     }
 
     let compiler = webpack(wpConfig);
@@ -209,6 +229,7 @@ function locales() {
     const mergeJson = require('gulp-merge-json');
     const yaml = require('gulp-yaml');
     const merge = require('merge-stream');
+    const fs = require('fs-extra');
 
     let streams = [];
     let localePaths = [];
@@ -385,6 +406,7 @@ module.exports = {
     front,
     back,
     backOnly,
+    backWatch,
     backendUnitTest,
     dockerAndBackTest,
     backTest,

webpack.config.js

@@ -107,6 +107,9 @@ let devConfig = {
         filename: '[name].js',
         chunkFilename: '[id].js'
     },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin()
+    ],
     devServer: {
         host: 'localhost',
         port: 5000,
@@ -114,7 +117,8 @@ let devConfig = {
         contentBase: 'dist',
         quiet: false,
         noInfo: false,
-        // hot: true,
+        hot: true,
+        inline: true,
         stats: baseConfig.stats,
         proxy: {
             '/api': 'http://localhost:3000',