fix(@angular/cli): Fixed e2e task to respect --publicHost setting as baseUrl for protractor (#6266)

#6173 added two new settings
to the serve task. The --publicHost setting is not respected as baseUrl
for protractor in the e2e-task.

With this fix, if --publicHost is set, it will be used as baseUrl for protrator.

Author: ReToCode

packages/@angular/cli/tasks/e2e.ts

@@ -26,7 +26,15 @@ export const E2eTask = Task.extend({
       };
 
       // use serve url as override for protractors baseUrl
-      if (e2eTaskOptions.serve) {
+      if (e2eTaskOptions.serve && e2eTaskOptions.publicHost) {
+        let publicHost = e2eTaskOptions.publicHost;
+        if (!/^\w+:\/\//.test(publicHost)) {
+          publicHost = `${e2eTaskOptions.ssl ? 'https' : 'http'}://${publicHost}`;
+        }
+        const clientUrl = url.parse(publicHost);
+        e2eTaskOptions.publicHost = clientUrl.host;
+        additionalProtractorConfig.baseUrl = url.format(clientUrl);
+      } else if (e2eTaskOptions.serve) {
         additionalProtractorConfig.baseUrl = url.format({
           protocol: e2eTaskOptions.ssl ? 'https' : 'http',
           hostname: e2eTaskOptions.host,

tests/e2e/tests/misc/live-reload.ts

@@ -1,7 +1,9 @@
+import * as os from 'os';
+import * as _ from 'lodash';
 import * as express from 'express';
 import * as http from 'http';
 
-import { appendToFile, writeMultipleFiles } from '../../utils/fs';
+import {appendToFile, writeMultipleFiles, writeFile} from '../../utils/fs';
 import {
   killAllProcesses,
   silentExecAndWaitForOutputToMatch,
@@ -18,21 +20,32 @@ export default function () {
   const app = express();
   const server = http.createServer(app);
   let liveReloadCount = 0;
-  let liveReloadClientCalled = false;
   function resetApiVars() {
     liveReloadCount = 0;
-    liveReloadClientCalled = false;
   }
 
   server.listen(0);
   app.set('port', server.address().port);
+
+  const firstLocalIp = _(os.networkInterfaces())
+    .values()
+    .flatten()
+    .filter({ family: 'IPv4', internal: false })
+    .map('address')
+    .first();
+  const publicHost = `${firstLocalIp}:4200`;
+
   const apiUrl = `http://localhost:${server.address().port}`;
 
   // This endpoint will be pinged by the main app on each reload.
   app.get('/live-reload-count', _ => liveReloadCount++);
-  // This endpoint will be pinged by webpack to check for live reloads.
-  app.get('/sockjs-node/info', _ => liveReloadClientCalled = true);
 
+  const proxyConfigFile = 'proxy.config.json';
+  const proxyConfig = {
+    '/live-reload-count': {
+      target: apiUrl
+    }
+  };
 
   return Promise.resolve()
     .then(_ => writeMultipleFiles({
@@ -122,15 +135,35 @@ export default function () {
     .then(_ => killAllProcesses(), (err) => { killAllProcesses(); throw err; })
     .then(_ => resetApiVars())
     // Serve with live reload client set to api should call api.
+    .then(() => writeFile(proxyConfigFile, JSON.stringify(proxyConfig, null, 2)))
+    // Update the component to call the webserver
+    .then(() => writeFile('./src/app/app.component.ts',
+      `
+        import { Component } from '@angular/core';
+        import { Http } from '@angular/http';
+        @Component({
+          selector: 'app-root',
+          template: '<h1>Live reload test</h1>'
+        })
+        export class AppComponent {
+          constructor(private http: Http) {
+            http.get('http://${publicHost + '/live-reload-count'}').subscribe(res => null);
+          }
+        }`))
     .then(_ => silentExecAndWaitForOutputToMatch(
       'ng',
-      ['e2e', '--watch', `--public-host=${apiUrl}`],
+      ['e2e', '--watch', '--host=0.0.0.0', '--port=4200', `--public-host=${publicHost}`, '--proxy', proxyConfigFile],
       protractorGoodRegEx
     ))
     .then(_ => wait(2000))
+    .then(_ => appendToFile('src/main.ts', 'console.log(1);'))
+    .then(_ => waitForAnyProcessOutputToMatch(webpackGoodRegEx, 5000))
+    .then(_ => wait(2000))
     .then(_ => {
-      if (!liveReloadClientCalled) {
-        throw new Error(`Expected live-reload client to have been called but it was not.`);
+      if (liveReloadCount != 2) {
+        throw new Error(
+          `Expected API to have been called 2 times but it was called ${liveReloadCount} times.`
+        );
       }
     })
     .then(_ => killAllProcesses(), (err) => { killAllProcesses(); throw err; })