Merge pull request #53 from FountainJS/jsdom

Angular 2.0 & tests with jsdom

Author: Mehdy Dara

.travis.yml

@@ -39,11 +39,6 @@ cache:
 addons:
   # Install Firefox
   firefox: '46.0'
-  # Configure Sauce Labs fot e2e tests
-  sauce_connect:
-    username: "zckrs"
-    access_key:
-      secure: "GRCFdTA5lYr51KaW4UAMV/oDxnm0CoPeYs1hZ2fynvv24X9KJhpukCNZNfYBVRg31gMUxGSzPOllFaHNBoExwb7/F7nndpG2FtBMlp8K22iGYDr8flRFJhd+5KJJRO4ed7z7hfHrbIwq3E2anoByh0NIFn5YO4FDwnf2ObFlFLAtyGppcTvr/UWpqzovFZLlAwU89YRZIFh7nzFUT2IU2BEWlR0TvVIhhNflpw7oScQDNtptZbGVKrJAMWT5VO15gTd97LKjyluHedZ6xWsN8TlOG2PSykI+7YYbz5Sat9l6PfBV2G4Nk5MOXivvW5mHZmXKcdGTfAoDGu9VSYFC+JdeW6DfOvS/ALagDaqmqKUyUY9eWRmt0UEMNoKhiCCe8agW2J3SiVaGVcobtCoB01nEU9iBmaVKAoZu9HbirSyEyc4j3DuQl8gAHEm/JOoTRFVIB/R7t9DPOjuFN5tHnGwO1tjkQtjCVuIz+feC3+EL819zuYCjzJ39MbQJZIiDtrsuBTkWj/SU5ECJgLyTM+qsI87XGVhtsD4UaWTCehvjs915yyLmGwm/D7dRHtno624e0zJo2Y4HHFOcKj1YXf2DaJI8NsApcyfOSWHg/O3yTURcNC/hKQ1avPDtaLpPYG3b4bpU4ubfyZCjzgjELEC7SpiL3AV17ieBCr2h3tM="
 
 before_install:
   - export DISPLAY=:99.0

generator-fountain-angular2

@@ -33,6 +33,7 @@
     "eslint-plugin-react": "^4.3.0",
     "fixture-stdout": "^0.2.1",
     "globby": "^4.0.0",
+    "jsdom": "swiip/jsdom#zonejs-compat-usable",
     "lodash": "^4.6.1",
     "mkdirp-promise": "^2.0.0",
     "mocha": "^2.4.5",
@@ -48,7 +49,7 @@
     "yeoman-test": "^1.1.0"
   },
   "scripts": {
-    "test": "mocha test/travis-techs",
+    "test": "mocha test/test-jsdom",
     "localTest": "mocha test/local-test",
     "linkAll": "node scripts/links",
     "unlinkAll": "node scripts/unlinks"

generator-fountain-eslint

@@ -9,19 +9,23 @@ let serveProcess = null;
 
 function execServe(task) {
   return new Promise(resolve => {
-    let logs = '';
-    if (serveProcess !== null) {
-      console.warn('Server process still running !!!!');
-    }
-    serveProcess = exec('gulp', [task], {stdio: 'pipe'}).process;
-    serveProcess.stderr.pipe(process.stderr);
-    serveProcess.stdout.pipe(spy(chunk => {
-      logs += chunk.toString();
-      const result = regex.exec(logs);
-      if (result !== null) {
-        resolve(result[1]);
+    try {
+      let logs = '';
+      if (serveProcess !== null) {
+        console.warn('Server process still running !!!!');
       }
-    })).pipe(process.stdout);
+      serveProcess = exec('gulp', [task], {stdio: 'pipe'}).process;
+      serveProcess.stderr.pipe(process.stderr);
+      serveProcess.stdout.pipe(spy(chunk => {
+        logs += chunk.toString();
+        const result = regex.exec(logs);
+        if (result !== null) {
+          resolve(result[1]);
+        }
+      })).pipe(process.stdout);
+    } catch (error) {
+      console.error('Server error', error);
+    }
   });
 }
 
@@ -34,9 +38,13 @@ exports.serveDist = function serveDist() {
 };
 
 exports.killServe = function killServe() {
-  serveProcess.kill('SIGTERM');
-  serveProcess = null;
-  console.log('Gulp serve killed!');
+  try {
+    serveProcess.kill('SIGTERM');
+    serveProcess = null;
+    console.log('Gulp serve killed!');
+  } catch (error) {
+    console.error('Server kill error', error);
+  }
 };
 
 exports.test = function () {
@@ -48,8 +56,8 @@ exports.test = function () {
       logs += chunk.toString();
       const result = testRegex.exec(logs);
       if (result !== null) {
-        resolve(logs);
         testProcess.kill('SIGTERM');
+        resolve(logs);
       }
     })).pipe(process.stdout);
   });

generator-fountain-gulp

@@ -0,0 +1,93 @@
+'use strict';
+
+const jsdom = require('jsdom');
+const expect = require('chai').expect;
+const spawn = require('cross-spawn');
+
+exports.run = function run(url) {
+  return new Promise((resolve, reject) => {
+    const result = spawn.sync('node', [`${__dirname}/jsdom-runner`, url], {stdio: 'inherit'});
+    if (result.status === 0) {
+      console.log('jsdom run success');
+      resolve();
+    } else {
+      console.log('jsdom run failed', result);
+      reject();
+    }
+  });
+};
+
+exports.open = function open(url) {
+  const virtualConsole = jsdom.createVirtualConsole().sendTo(console);
+
+  virtualConsole.on('jsdomError', error => {
+    console.error('jsdom Error', error.stack, error.detail);
+  });
+
+  return new Promise((resolve, reject) => {
+    jsdom.env({
+      url,
+      virtualConsole,
+      features: {
+        FetchExternalResources: ['script'],
+        ProcessExternalResources: ['script']
+      },
+      created(error, window) {
+        console.log('jsdom started on URL', url);
+        if (error) {
+          console.log('jsdom en creation error', error.stack, error.detail);
+          reject();
+        }
+        window.addEventListener('error', event => {
+          console.error("Script error", event.error.stack, event.error.detail);
+        });
+        resolve(window);
+      }
+    });
+  });
+};
+
+function wait(time) {
+  return new Promise(resolve => {
+    setTimeout(resolve, time);
+  });
+}
+
+function waitFor(test, retryTime, attemptsMax) {
+  console.log('[WaitFor] First try');
+  const firstResult = test();
+  if (firstResult.length > 0) {
+    return Promise.resolve(firstResult);
+  }
+  let attempts = 1;
+  function oneTry() {
+    return wait(retryTime).then(() => {
+      console.log('[WaitFor] Try', attempts);
+      const result = test();
+      if (result.length > 0) {
+        return result;
+      }
+      attempts++;
+      if (attempts >= attemptsMax) {
+        throw new Error(`[WaitFor] Max attemps reached (${attemptsMax})`);
+      }
+      return oneTry();
+    });
+  }
+  return oneTry();
+}
+
+exports.testTechs = function testTechs(window) {
+  return waitFor(() => {
+    return window.document.querySelectorAll('h3');
+  }, 1000, 20)
+    .then(
+      elements => {
+        expect(elements.length).to.equal(8);
+      },
+      error => {
+        console.log('Test techs error', error.stack, error.detail);
+        throw error;
+      }
+    );
+};

generator-fountain-karma

@@ -0,0 +1,11 @@
+const jsdom = require('./jsdom-helper');
+
+jsdom.open(process.argv[2])
+  .then(window => jsdom.testTechs(window))
+  .then(
+    () => process.exit(0),
+    error => {
+      console.log('jsdom runner failed', error.stack, error.detail);
+      process.exit(1);
+    }
+  );

generator-fountain-react

@@ -0,0 +1,69 @@
+'use strict';
+
+require('co-mocha');
+const product = require('cartesian-product');
+
+const gulp = require('./helpers/gulp-helper');
+const yeoman = require('./helpers/yeoman-helper');
+const linter = require('./helpers/linter-helper');
+const unit = require('./helpers/unit-helper');
+const jsdom = require('./helpers/jsdom-helper');
+
+describe('fountain travis integration test with jsdom', function () {
+  this.timeout(0);
+
+  const combinations = product([
+    ['react', 'angular1', 'angular2', 'vue'],
+    ['webpack', 'systemjs', 'inject'],
+    ['babel', 'js', 'typescript']
+  ])
+    // Angular 2 and Bower are not supported right now
+    .filter(combination => combination[0] !== 'angular2' || combination[1] !== 'inject')
+    // Vue only with Webpack and Babel
+    .filter(combination => combination[0] !== 'vue' || (combination[1] === 'webpack' && combination[2] === 'babel'));
+
+  combinations.forEach(combination => {
+    const options = {
+      framework: combination[0],
+      modules: combination[1],
+      css: 'scss',
+      js: combination[2],
+      sample: 'techs',
+      router: combination[0] === 'angular1' ? 'uirouter' : 'router',
+      ci: 'travis'
+    };
+
+    describe(`tests with ${options.framework}, ${options.modules}, ${options.js}`, () => {
+      before(function * () {
+        console.log(`travis_fold:start:${options.framework}-${options.modules}-${options.js}`);
+        yield yeoman.prepare();
+        yield yeoman.run(options);
+      });
+
+      it('test linter', function * () {
+        yield linter.linterTest(options);
+      });
+
+      it('run "gulp test"', function * () {
+        const result = yield gulp.test();
+        unit.unitTests(result);
+      });
+
+      it('run "gulp serve" and e2e on number of Techs listed', function * () {
+        const url = yield gulp.serve();
+        yield jsdom.run(url);
+        gulp.killServe();
+      });
+
+      it('run "gulp serve:dist" and e2e on number of Techs listed', function * () {
+        const url = yield gulp.serveDist();
+        yield jsdom.run(url);
+        gulp.killServe();
+      });
+
+      after(() => {
+        console.log(`travis_fold:end:${options.framework}-${options.modules}-${options.js}`);
+      });
+    });
+  });
+});