❤
npm
Sign UpSign In

gulp-mocha-chrome

0.1.0 • Public • Published

gulp-mocha-phantomjs

☕️ Run Mocha tests using headless Google Chrome through Gulp

Build Status Known Vulnerabilities npm version GitHub version Open Source Love Dependency Status devDependencies Status

Getting Started

To begin, you'll need to install gulp-mocha-chrome:

$ npm install gulp-mocha-chrome --save-dev

Then you'll need a local npm install of mocha for your test html files to reference:

$ npm install mocha --save-dev

To run the tests, you'll need an HTML file with some basics:

<!doctype>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="node_modules/mocha/mocha.css" />
    <script src="node_modules/mocha/mocha.js"></script> 
    <script src="node_modules/chai/chai.js"></script> 
  </head>
  <body>
    <div id="mocha"></div>
    <script>
      expect = chai.expect;
 
      // add tests here
 
      mocha.run();
    </script> 
  </body>
</html>
 

You can then add your tests either through an external script file or inline within a <script> tag.

Gulpfile

Next, you'll need to add the tests to your gulpfile.js.

const gulp = require('gulp');
const mochaChrome = require('gulp-mocha-chrome');
 
gulp.task('test', function () {
  return gulp
    .src('test/runner.html')
    .pipe(mochaChrome());
});

Remote URLs

Because mocha-chrome uses the Chrome Devtools Protocol under the hood, you can also connect to remote (or locally served) urls for testing. eg:

gulp.task('test', function () {
  const stream = mochaPhantomJS();
  stream.write({path: 'http://localhost:8000/index.html'});
  stream.end();
  return stream;
});

Mocha Test Stats

If you're using a Gulp plugin like gulp-tap to inspect the results after the tests run, you can access the Mocha results for individual file via the file.mocha property. eg:

gulp.src('test/runner.html')
  .pipe(mochaChrome())
  .pipe(tap(function(file, t) {
      file.mocha;
  }));
 
/*
file.mocha -> {
  stats:
  {
    suites: 2,
    tests: 2,
    passes: 2,
    pending: 0,
    failures: 0,
    start: '2017-08-07T14:50:33.989Z',
    end: '2017-08-07T14:50:34.003Z',
    duration: 14
  }
}
*/

Contributing

We welcome your contributions! Please have a read of CONTRIBUTING.

Readme

Keywords

Package Sidebar

Install

npm i gulp-mocha-chrome

Repository

github.com/shellscape/gulp-mocha-chrome

Homepage

github.com/shellscape/gulp-mocha-chrome#readme

Weekly Downloads

126

Version

0.1.0

License

MIT

Last publish

Collaborators

  • shellscape
Try on RunKit
Report malware