Framework: Move to Node 4

Dockerfile

@@ -14,7 +14,7 @@ RUN     apt-get -y update && apt-get -y install \
           make \
           build-essential
 
-ENV NODE_VERSION 0.12.9
+ENV NODE_VERSION 4.2.3
 
 RUN     wget https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-linux-x64.tar.gz && \
           tar -zxf node-v$NODE_VERSION-linux-x64.tar.gz -C /usr/local && \

Makefile

@@ -56,14 +56,17 @@ install: node_modules
 run: welcome githooks-commit install build
 	@$(NODE) build/bundle-$(CALYPSO_ENV).js
 
+node-version:
+	@NPM_GLOBAL_ROOT=
+
 # a helper rule to ensure that a specific module is installed,
 # without relying on a generic `npm install` command
-node_modules/%:
+node_modules/%: | node-version
 	@$(NPM) install $(notdir $@)
 
 # ensures that the `node_modules` directory is installed and up-to-date with
 # the dependencies listed in the "package.json" file.
-node_modules: package.json
+node_modules: package.json | node-version
 	@$(NPM) prune
 	@$(NPM) install
 	@touch node_modules
@@ -161,5 +164,5 @@ githooks-push:
 FORCE:
 
 .PHONY: build build-development build-server
-.PHONY: run install test clean distclean translate route
+.PHONY: run install test clean distclean translate route node-version
 .PHONY: githooks githooks-commit githooks-push

bin/check-node-version

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+const requiredVersion = require( '../package' ).engines.node,
+	semver = require( process.env.NPM_GLOBAL_ROOT + '/npm/node_modules/semver' );
+
+if ( ! semver.satisfies( process.version, requiredVersion ) ) {
+	console.error( 'wp-calypso requires node ' + requiredVersion + '. Please upgrade! See https://nodejs.org for instructions.' );
+	process.exitCode = 1;
+}

circle.yml

@@ -0,0 +1,4 @@
+machine:
+  node:
+    version: 4.2.3
+

client/components/drop-zone/index.jsx

@@ -153,6 +153,11 @@ module.exports = React.createClass( {
 
 		rect = this.refs.zone.getBoundingClientRect();
 
+		/// make sure the rect is a valid rect
+		if ( rect.bottom === rect.top || rect.left === rect.right ) {
+			return false;
+		}
+
 		return x >= rect.left && x <= rect.right &&
 			y >= rect.top && y <= rect.bottom;
 	},

client/components/drop-zone/test/index.jsx

@@ -83,8 +83,8 @@ describe( 'DropZone', function() {
 
 	it( 'should accept an icon to override the default icon', function() {
 		var tree = ReactDom.render( React.createElement( DropZone, {
-			icon: 'hello-world'
-		} ), container ), icon;
+				icon: 'hello-world'
+			} ), container ), icon;
 
 		icon = TestUtils.findRenderedDOMComponentWithClass( tree, 'drop-zone__content-icon' );
 
@@ -93,9 +93,8 @@ describe( 'DropZone', function() {
 
 	it( 'should highlight the drop zone when dragging over the body', function() {
 		var tree = ReactDom.render( React.createElement( DropZone ), container ),
-			dragEnterEvent = new window.MouseEvent();
+			dragEnterEvent = new window.MouseEvent( 'dragenter' );
 
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
 		window.dispatchEvent( dragEnterEvent );
 
 		expect( tree.state.isDraggingOverDocument ).to.be.ok;
@@ -104,9 +103,8 @@ describe( 'DropZone', function() {
 
 	it( 'should start observing the body for mutations when dragging over', function( done ) {
 		var tree = ReactDom.render( React.createElement( DropZone ), container ),
-			dragEnterEvent = new window.MouseEvent();
+			dragEnterEvent = new window.MouseEvent( 'dragenter' );
 
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
 		window.dispatchEvent( dragEnterEvent );
 
 		process.nextTick( function() {
@@ -117,13 +115,10 @@ describe( 'DropZone', function() {
 
 	it( 'should stop observing the body for mutations upon drag ending', function( done ) {
 		var tree = ReactDom.render( React.createElement( DropZone ), container ),
-			dragEnterEvent = new window.MouseEvent(),
-			dragLeaveEvent = new window.MouseEvent();
+			dragEnterEvent = new window.MouseEvent( 'dragenter' ),
+			dragLeaveEvent = new window.MouseEvent( 'dragleave' );
 
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
 		window.dispatchEvent( dragEnterEvent );
-
-		dragLeaveEvent.initMouseEvent( 'dragleave', true, true );
 		window.dispatchEvent( dragLeaveEvent );
 
 		process.nextTick( function() {
@@ -133,7 +128,7 @@ describe( 'DropZone', function() {
 	} );
 
 	it( 'should not highlight if onVerifyValidTransfer returns false', function() {
-		var dragEnterEvent = new window.MouseEvent(),
+		var dragEnterEvent = new window.MouseEvent( 'dragenter' ),
 			tree;
 
 		tree = ReactDom.render( React.createElement( DropZone, {
@@ -142,7 +137,6 @@ describe( 'DropZone', function() {
 			}
 		} ), container );
 
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
 		window.dispatchEvent( dragEnterEvent );
 
 		expect( tree.state.isDraggingOverDocument ).to.not.be.ok;
@@ -156,8 +150,7 @@ describe( 'DropZone', function() {
 
 		tree = ReactDom.render( React.createElement( DropZone ), container );
 
-		dragEnterEvent = new window.MouseEvent();
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
+		dragEnterEvent = new window.MouseEvent( 'dragenter' );
 		window.dispatchEvent( dragEnterEvent );
 
 		expect( tree.state.isDraggingOverDocument ).to.be.ok;
@@ -166,46 +159,43 @@ describe( 'DropZone', function() {
 
 	it( 'should further highlight the drop zone when dragging over the body if fullScreen', function() {
 		var tree = ReactDom.render( React.createElement( DropZone, {
-			fullScreen: true
-		} ), container ), dragEnterEvent;
+				fullScreen: true
+			} ), container ), dragEnterEvent;
 
-		dragEnterEvent = new window.MouseEvent();
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
+		dragEnterEvent = new window.MouseEvent( 'dragenter' );
 		window.dispatchEvent( dragEnterEvent );
 
 		expect( tree.state.isDraggingOverDocument ).to.be.ok;
 		expect( tree.state.isDraggingOverElement ).to.be.ok;
 	} );
 
 	it( 'should call onDrop with the raw event data when a drop occurs', function() {
-		var tree, dropEvent,
+		var dropEvent,
 			spyDrop = sandbox.spy();
 
 		sandbox.stub( window.HTMLElement.prototype, 'contains' ).returns( true );
 
-		tree = ReactDom.render( React.createElement( DropZone, {
+		ReactDom.render( React.createElement( DropZone, {
 			onDrop: spyDrop
 		} ), container );
 
-		dropEvent = new window.MouseEvent();
-		dropEvent.initMouseEvent( 'drop', true, true );
+		dropEvent = new window.MouseEvent( 'drop' );
 		window.dispatchEvent( dropEvent );
 
 		expect( spyDrop.calledOnce ).to.be.ok;
 		expect( spyDrop.getCall( 0 ).args[0] ).to.eql( dropEvent );
 	} );
 
 	it( 'should call onFilesDrop with the files array when a drop occurs', function() {
-		var tree, dropEvent,
+		var dropEvent,
 			spyDrop = sandbox.spy();
 
 		sandbox.stub( window.HTMLElement.prototype, 'contains' ).returns( true );
-		tree = ReactDom.render( React.createElement( DropZone, {
+		ReactDom.render( React.createElement( DropZone, {
 			onFilesDrop: spyDrop
 		} ), container );
 
-		dropEvent = new window.MouseEvent();
-		dropEvent.initMouseEvent( 'drop', true, true );
+		dropEvent = new window.MouseEvent( 'drop' );
 		dropEvent.dataTransfer = { files: [ 1, 2, 3 ] };
 		window.dispatchEvent( dropEvent );
 
@@ -215,7 +205,7 @@ describe( 'DropZone', function() {
 
 	it( 'should not call onFilesDrop if onVerifyValidTransfer returns false', function() {
 		var spyDrop = sandbox.spy(),
-			dropEvent = new window.MouseEvent();
+			dropEvent = new window.MouseEvent( 'drop' );
 
 		ReactDom.render( React.createElement( DropZone, {
 			onFilesDrop: spyDrop,
@@ -224,7 +214,6 @@ describe( 'DropZone', function() {
 			}
 		} ), container );
 
-		dropEvent.initMouseEvent( 'drop', true, true );
 		dropEvent.dataTransfer = { files: [ 1, 2, 3 ] };
 		window.dispatchEvent( dropEvent );
 
@@ -244,8 +233,7 @@ describe( 'DropZone', function() {
 
 		rendered = TestUtils.scryRenderedComponentsWithType( tree, DropZone );
 
-		dragEnterEvent = new window.MouseEvent();
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
+		dragEnterEvent = new window.MouseEvent( 'dragenter' );
 		window.dispatchEvent( dragEnterEvent );
 
 		expect( rendered ).to.have.length.of( 2 );