ci: add CLI build track

Author: filipesilva

.travis.yml

@@ -17,6 +17,7 @@ env:
     # current angular release jobs
     - TASK=lint
     - TASK="run-e2e-tests --fast" SCRIPT=examples-install.sh
+    - TASK="run-e2e-tests --fast --lang=ts --cli" SCRIPT=examples-install.sh
     - TASK=build-compile SCRIPT=deploy-install.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
     # current angular release branch jobs
     - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH
@@ -27,6 +28,8 @@ env:
 matrix:
   fast_finish: true
   allow_failures:
+    # cli based e2e tests
+    - env: TASK="run-e2e-tests --fast --lang=ts --cli" SCRIPT=examples-install.sh
     # allow current angular release branch and master to fail
     # these should be moved to a daily task instead of being ran on every PR
     - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH

gulpfile.js

@@ -89,7 +89,8 @@ var _exampleBoilerplateFiles = [
   'styles.css',
   'systemjs.config.js',
   'tsconfig.json',
-  'tslint.json'
+  'tslint.json',
+  'angular-cli.json'
 ];
 
 var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css'];
@@ -154,6 +155,24 @@ function excludeDartPaths(paths) {
   return paths.filter(function (p) { return !isDartPath(p); });
 }
 
+// Load example config and set defaults
+function getExampleConfig(appDir){
+  var exampleConfig = {};
+  try {
+    exampleConfig = fs.readJsonSync(`${appDir}/${_exampleConfigFilename}`);
+  } catch (e) { }
+
+  exampleConfig.build = exampleConfig.build || 'tsc';
+  exampleConfig.run = exampleConfig.run || 'http-server:e2e';
+
+  // Override config if the cli flag is set for tests
+  if (argv.cli){
+    exampleConfig.build = 'build:cli';
+    exampleConfig.run = 'http-server:cli';
+  }
+  return exampleConfig;
+}
+
 /**
  * Run Protractor End-to-End Specs for Doc Samples
  * Alias for 'run-e2e-tests'
@@ -249,11 +268,32 @@ function findAndRunE2eTests(filter, outputFile) {
     localExamplePaths = localExamplePaths.filter(function (fn) {
       return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
     });
+
     localExamplePaths.forEach(function(examplePath) {
       examplePaths.push(examplePath);
     })
   });
 
+  // Filter suites that
+  if (argv.cli){
+    var cliSuitesSkipped = [];
+    examplePaths = examplePaths.filter(function (appDir) {
+      var config = getExampleConfig(appDir);
+      if (config.skipCli){ cliSuitesSkipped.push(appDir); }
+      return !config.skipCli;
+    });
+    if (cliSuitesSkipped.length > 0){
+      var log = [''];
+      log.push(`Suites skipped due to "skipCli" in ${_exampleConfigFilename}:`);
+      cliSuitesSkipped.forEach(function(val) {
+        log.push('  ' + val);
+      });
+      log = log.join('\n');
+      gutil.log(log);
+      fs.appendFileSync(outputFile, log);
+    }
+  }
+
   // run the tests sequentially
   var status = { passed: [], failed: [] };
   return examplePaths.reduce(function (promise, examplePath) {
@@ -275,24 +315,13 @@ function findAndRunE2eTests(filter, outputFile) {
 // fileName; then shut down the example.  All protractor output is appended
 // to the outputFile.
 function runE2eTsTests(appDir, outputFile) {
-  // Grab protractor configuration or defaults to systemjs config.
-  try {
-    var exampleConfig = fs.readJsonSync(`${appDir}/${_exampleConfigFilename}`);
-  } catch (e) {
-    exampleConfig = {};
-  }
-
-  var config = {
-    build: exampleConfig.build || 'tsc',
-    run: exampleConfig.run || 'http-server:e2e'
-  };
-
+  var config = getExampleConfig(appDir);
   var appBuildSpawnInfo = spawnExt('npm', ['run', config.build], { cwd: appDir });
   var appRunSpawnInfo = spawnExt('npm', ['run', config.run, '--', '-s'], { cwd: appDir });
 
   var run = runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
 
-  if (fs.existsSync(appDir + '/aot/index.html')) {
+  if (fs.existsSync(appDir + '/aot/index.html') && !argv.cli) {
     run = run.then(() => runProtractorAoT(appDir, outputFile));
   }
   return run;

public/docs/_examples/.gitignore

@@ -8,6 +8,8 @@ systemjs.config.js
 */**/tsconfig.json
 tslint.json
 wallaby.js
+*/**/angular-cli.json
+*/ts/dist/**
 
 _test-output
 **/ts/**/*.js

public/docs/_examples/_boilerplate/angular-cli.json

@@ -0,0 +1,15 @@
+{
+  "apps": [
+    {
+      "root": ".",
+      "main": "app/main.ts",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [
+        "./node_modules/core-js/client/shim.min.js",
+        "./node_modules/zone.js/dist/zone.js"
+      ]
+    }
+  ]
+}

public/docs/_examples/_boilerplate/package.json

@@ -17,7 +17,8 @@
     "start:webpack": "webpack-dev-server --inline --progress --port 8080",
     "test:webpack": "karma start karma.webpack.conf.js",
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
-    "build:cli": "ng build",
+    "build:cli": "ng build --no-progress",
+    "build:cli-aot": "ng build --aot --no-progress",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
     "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
     "copy-dist-files": "node ./copy-dist-files.js",
@@ -27,6 +28,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "angular-cli": "1.0.0-beta.24"
+  },
   "repository": {}
 }

public/docs/_examples/cb-aot-compiler/ts/example-config.json

@@ -1,4 +1,5 @@
 {
-  "build": "build:aot",  
-  "run": "http-server:e2e" 
-}
+  "build": "build:aot",
+  "run": "http-server:e2e",
+  "skipCli": true
+}

public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts

@@ -18,8 +18,7 @@ import { CountdownTimerComponent }  from './countdown-timer.component';
   <button (click)="timer.stop()">Stop</button>
   <div class="seconds">{{timer.seconds}}</div>
   <countdown-timer #timer></countdown-timer>
-  `,
-  styleUrls: ['demo.css']
+  `
 })
 export class CountdownLocalVarParentComponent { }
 // #enddocregion lv
@@ -34,8 +33,7 @@ export class CountdownLocalVarParentComponent { }
   <button (click)="stop()">Stop</button>
   <div class="seconds">{{ seconds() }}</div>
   <countdown-timer></countdown-timer>
-  `,
-  styleUrls: ['demo.css']
+  `
 })
 export class CountdownViewChildParentComponent implements AfterViewInit {
 

public/docs/_examples/cb-component-relative-paths/ts/example-config.json

@@ -0,0 +1,3 @@
+{
+  "skipCli": true
+}

public/docs/_examples/cb-i18n/ts/example-config.json

@@ -0,0 +1,3 @@
+{
+  "skipCli": true
+}

public/docs/_examples/component-styles/ts/example-config.json

@@ -0,0 +1,3 @@
+{
+  "skipCli": true
+}