yannickcr/1.Readme.md

## 1.Readme.md

      
    Raw
  

              1.Readme.md
            
          
    Testing ES6 React components with Gulp + Mocha + Istanbul

Recipe to test your ES6 React components.
$ npm install gulp gulp-util gulp-mocha gulp-istanbul isparta run-sequence babel jsdom
Note: You must name all your files .js, even if they contains JSX, or istanbul will not instrument them.

gulp test: Run unit tests
gulp test:coverage: Run unit tests with code coverage (the report is stored in ./coverage)
gulp tdd: Watch files and run unit tests (without coverage) on changes


## 2.test.js
'use strict';

var gulp = require('gulp');
var gutil = require('gulp-util');
var mocha = require('gulp-mocha');
var istanbul = require('gulp-istanbul');
var isparta = require('isparta');
var runSequence = require('run-sequence');

// Transform all required files with Babel
require('babel/register');

// Files to process
var TEST_FILES = 'tests/**/*.js';
var SRC_FILES = 'js/**/*.js';

/*
 * Instrument files using istanbul and isparta
 */
gulp.task('coverage:instrument', function() {
  return gulp.src(SRC_FILES)
    .pipe(istanbul({
      instrumenter: isparta.Instrumenter // Use the isparta instrumenter (code coverage for ES6)
      // Istanbul configuration (see https://github.com/SBoudrias/gulp-istanbul#istanbulopt)
      // ...
    }))
    .pipe(istanbul.hookRequire()); // Force `require` to return covered files
});

/*
 * Write coverage reports after test success
 */
gulp.task('coverage:report', function(done) {
  return gulp.src(SRC_FILES, {read: false})
    .pipe(istanbul.writeReports({
      // Istanbul configuration (see https://github.com/SBoudrias/gulp-istanbul#istanbulwritereportsopt)
      // ...
    }));
});

/**
 * Run unit tests
 */
gulp.task('test', function() {
  return gulp.src(TEST_FILES, {read: false})
    .pipe(mocha({
      require: [__dirname + '/lib/jsdom'] // Prepare environement for React/JSX testing
    }));
});

/**
 * Run unit tests with code coverage
 */
gulp.task('test:coverage', function(done) {
  runSequence('coverage:instrument', 'test', 'coverage:report', done);
});

/**
 * Watch files and run unit tests on changes
 */
gulp.task('tdd', function(done) {
  gulp.watch([
    TEST_FILES,
    SRC_FILES
  ], ['test']).on('error', gutil.log);
});

## 3.jsdom.js
'use strict';

var jsdom = require('jsdom');

/**
 * Borrowed from: https://github.com/tmpvar/jsdom/issues/135#issuecomment-68191941
 */
function applyJsdomWorkaround(window) {
  Object.defineProperties(window.HTMLElement.prototype, {
    offsetLeft: {
      get: function() {
        return parseFloat(window.getComputedStyle(this).marginLeft) || 0;
      }
    },
    offsetTop: {
      get: function() {
        return parseFloat(window.getComputedStyle(this).marginTop) || 0;
      }
    },
    offsetHeight: {
      get: function() {
        return parseFloat(window.getComputedStyle(this).height) || 0;
      }
    },
    offsetWidth: {
      get: function() {
        return parseFloat(window.getComputedStyle(this).width) || 0;
      }
    }
  });
}

function setupDom() {
  var baseMarkup = '<!DOCTYPE html><html><head><title></title></head><body></body></html>';
  var window = jsdom.jsdom(baseMarkup).defaultView;

  global.window = window;
  global.document = window.document;
  global.navigator = window.navigator;
  applyJsdomWorkaround(window);
}

setupDom();
	'use strict';

	var gulp = require('gulp');
	var gutil = require('gulp-util');
	var mocha = require('gulp-mocha');
	var istanbul = require('gulp-istanbul');
	var isparta = require('isparta');
	var runSequence = require('run-sequence');

	// Transform all required files with Babel
	require('babel/register');

	// Files to process
	var TEST_FILES = 'tests/*/.js';
	var SRC_FILES = 'js/*/.js';

	/*
	* Instrument files using istanbul and isparta
	*/
	gulp.task('coverage:instrument', function() {
	return gulp.src(SRC_FILES)
	.pipe(istanbul({
	instrumenter: isparta.Instrumenter // Use the isparta instrumenter (code coverage for ES6)
	// Istanbul configuration (see https://github.com/SBoudrias/gulp-istanbul#istanbulopt)
	// ...
	}))
	.pipe(istanbul.hookRequire()); // Force `require` to return covered files
	});

	/*
	* Write coverage reports after test success
	*/
	gulp.task('coverage:report', function(done) {
	return gulp.src(SRC_FILES, {read: false})
	.pipe(istanbul.writeReports({
	// Istanbul configuration (see https://github.com/SBoudrias/gulp-istanbul#istanbulwritereportsopt)
	// ...
	}));
	});

	/**
	* Run unit tests
	*/
	gulp.task('test', function() {
	return gulp.src(TEST_FILES, {read: false})
	.pipe(mocha({
	require: [__dirname + '/lib/jsdom'] // Prepare environement for React/JSX testing
	}));
	});

	/**
	* Run unit tests with code coverage
	*/
	gulp.task('test:coverage', function(done) {
	runSequence('coverage:instrument', 'test', 'coverage:report', done);
	});

	/**
	* Watch files and run unit tests on changes
	*/
	gulp.task('tdd', function(done) {
	gulp.watch([
	TEST_FILES,
	SRC_FILES
	], ['test']).on('error', gutil.log);
	});
	'use strict';

	var jsdom = require('jsdom');

	/**
	* Borrowed from: https://github.com/tmpvar/jsdom/issues/135#issuecomment-68191941
	*/
	function applyJsdomWorkaround(window) {
	Object.defineProperties(window.HTMLElement.prototype, {
	offsetLeft: {
	get: function() {
	return parseFloat(window.getComputedStyle(this).marginLeft) \|\| 0;
	}
	},
	offsetTop: {
	get: function() {
	return parseFloat(window.getComputedStyle(this).marginTop) \|\| 0;
	}
	},
	offsetHeight: {
	get: function() {
	return parseFloat(window.getComputedStyle(this).height) \|\| 0;
	}
	},
	offsetWidth: {
	get: function() {
	return parseFloat(window.getComputedStyle(this).width) \|\| 0;
	}
	}
	});
	}

	function setupDom() {
	var baseMarkup = '<!DOCTYPE html><html><head><title></title></head><body></body></html>';
	var window = jsdom.jsdom(baseMarkup).defaultView;

	global.window = window;
	global.document = window.document;
	global.navigator = window.navigator;
	applyJsdomWorkaround(window);
	}

	setupDom();