Fixup some tests that broke with jsdom 7.

Also fix the duped styles in follow-button.
Automattic · Dec 7, 2015 · 03c6ef5 · 03c6ef5
1 parent 2e41fb6
commit 03c6ef5
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 154 deletions.
diff --git a/client/components/drop-zone/index.jsx b/client/components/drop-zone/index.jsx
@@ -102,6 +102,11 @@ module.exports = React.createClass( {
 
 		rect = this.refs.zone.getDOMNode().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;
 	},

diff --git a/client/components/drop-zone/test/index.jsx b/client/components/drop-zone/test/index.jsx
@@ -78,17 +78,16 @@ describe( 'DropZone', function() {
 
 	it( 'should highlight the drop zone when dragging over the body', function() {
 		var tree = React.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;
 		expect( tree.state.isDraggingOverElement ).to.not.be.ok;
 	} );
 
 	it( 'should not highlight if onVerifyValidTransfer returns false', function() {
-		var dragEnterEvent = new window.MouseEvent(),
+		var dragEnterEvent = new window.MouseEvent( 'dragenter' ),
 			tree;
 
 		tree = React.render( React.createElement( DropZone, {
@@ -97,7 +96,6 @@ describe( 'DropZone', function() {
 			}
 		} ), container );
 
-		dragEnterEvent.initMouseEvent( 'dragenter', true, true );
 		window.dispatchEvent( dragEnterEvent );
 
 		expect( tree.state.isDraggingOverDocument ).to.not.be.ok;
@@ -111,8 +109,7 @@ describe( 'DropZone', function() {
 
 		tree = React.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;
@@ -124,8 +121,7 @@ describe( 'DropZone', function() {
 			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;
@@ -142,8 +138,7 @@ describe( 'DropZone', function() {
 			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;
@@ -159,8 +154,7 @@ describe( 'DropZone', function() {
 			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 );
 
@@ -170,7 +164,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' );
 
 		React.render( React.createElement( DropZone, {
 			onFilesDrop: spyDrop,
@@ -179,7 +173,6 @@ describe( 'DropZone', function() {
 			}
 		} ), container );
 
-		dropEvent.initMouseEvent( 'drop', true, true );
 		dropEvent.dataTransfer = { files: [ 1, 2, 3 ] };
 		window.dispatchEvent( dropEvent );
 
@@ -198,8 +191,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 );

diff --git a/client/components/follow-button/_style.scss b/client/components/follow-button/_style.scss
diff --git a/client/components/follow-button/style.scss b/client/components/follow-button/style.scss
@@ -1,64 +1,95 @@
-// FollowButton Component
 .follow-button {
 	position: relative;
+	background: inherit;
+	border: none;
+	border-radius: 0;
+	color: darken( $gray, 10% );
 	cursor: pointer;
+	display: block;
+	font-size: 14px;
+	font-weight: 400;
+	margin: 0;
+	padding: 8px 16px;
+	text-align: left;
 
-	@include breakpoint( "<480px" ) {
-		padding-left: 16px;
+	&:first-child {
+		margin-top: 5px;
 	}
 
-	.gridicon {
-		position: absolute;
-			top: 0;
-			left: 0;
-		height: 24px;
-		width: 24px;
+	&:hover,
+	&:focus {
+		border: 0;
+		box-shadow: none;
+	}
+
+	&:last-child {
+		margin-bottom: 5px;
 	}
 
-	.gridicon-follow {
-		fill: $gray;
+	&::-moz-focus-inner {
+		border: 0;
+	}
+
+	// Menu Items with Icons
+	&.has-icon {
+		padding-left: 42px;
+	}
+
+	.gridicon__follow {
 		opacity: 1;
-		transform: rotate( 0 );
-		transition: all 0.1s ease-in-out;
 	}
 
-	.gridicon-following {
-		fill: $alert-green;
+	.gridicon__following {
 		opacity: 0;
-		transform: rotate( -90deg );
-		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275);
+		pointer-events: none;
+		transform: rotate( 180deg ) scale( 3 );
 	}
 
-	&.is-mini {
-		.follow-button__label {
-			font-size: 13px;
-		}
+	.gridicon__unfollow {
+		display: none;
+	}
+
+	&.is-following {
+		color: $alert-green;
+
 		.gridicon {
-			height: 16px;
-			width: 16px;
+			fill: $alert-green;
 		}
-	}
 
-	&.is-followed {
-		.gridicon-follow {
+		.gridicon__follow {
 			opacity: 0;
-			transform: rotate( -30deg );
+			pointer-events: none;
+			transform: rotate( -180deg ) scale( 0.5 );
 		}
 
-		.gridicon-following {
+		.gridicon__following {
 			opacity: 1;
-			transform: rotate( 0 );
+			pointer-events: auto;
+			transform: rotate( 0 ) scale( 1 );
 		}
 	}
-}
 
-.follow-button__label {
-	display: inline-block;
-	padding-left: 30px;
-	color: $gray;
-	transition: all 0.1s linear;
+	&:hover {
+		color: $alert-green;
+		.gridicon {
+			fill: $alert-green;
+		}
+
+		&.is-following {
+			.gridicon {
+				fill: lighten( $gray, 10 );
+			}
 
-	@include breakpoint( "<480px" ) {
-		display: none;
+			color: lighten( $gray, 10 );
+
+		}
+	}
+
+	.gridicon {
+		position: absolute;
+		top: 8px;
+		left: 13px;
+		fill: lighten( $gray, 10 );
+		transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 	}
 }
diff --git a/client/components/tinymce/plugins/media/restrict-size/test/index.js b/client/components/tinymce/plugins/media/restrict-size/test/index.js
@@ -17,14 +17,15 @@ describe( 'restrictSize', () => {
 	} );
 
 	describe( '#getMaxWidth()', () => {
-		let getMaxWidth, matchMedia;
+		let getMaxWidth, matchMedia, devicePixelRatio;
 		before( () => {
 			getMaxWidth = restrictSize.__get__( 'getMaxWidth' );
 			matchMedia = window.matchMedia;
+			devicePixelRatio = window.devicePixelRatio;
 		} );
 
 		afterEach( () => {
-			delete window.devicePixelRatio;
+			window.devicePixelRatio = devicePixelRatio;
 			window.matchMedia = matchMedia;
 		} );
 
@@ -35,12 +36,14 @@ describe( 'restrictSize', () => {
 		} );
 
 		it( 'should return twice the base if the device resolution matches the retina media query', () => {
+			window.devicePixelRatio = undefined;
 			window.matchMedia = () => ( { matches: true } );
 
 			expect( getMaxWidth() ).to.equal( 1118 );
 		} );
 
 		it( 'should return the base max width if the device is not retina-capable', () => {
+			window.devicePixelRatio = undefined;
 			expect( getMaxWidth() ).to.equal( 559 );
 		} );
 	} );

diff --git a/client/lib/react-test-env-setup/index.js b/client/lib/react-test-env-setup/index.js
@@ -16,7 +16,7 @@ module.exports = function( markup, features ) {
 	features = assign( {}, defaultFeatures, features );
 
 	global.document = jsdom( markup );
-	global.window = document.parentWindow;
+	global.window = document.defaultView;
 	global.navigator = window.navigator;
 	global.Element = window.Element;