From 03c6ef5400c824d2d016359b30ca00610f7d5bb7 Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Mon, 7 Dec 2015 11:08:29 -0500 Subject: [PATCH] Fixup some tests that broke with jsdom 7. Also fix the duped styles in follow-button. --- client/components/drop-zone/index.jsx | 5 + client/components/drop-zone/test/index.jsx | 24 ++-- client/components/follow-button/_style.scss | 95 ---------------- client/components/follow-button/style.scss | 105 ++++++++++++------ .../plugins/media/restrict-size/test/index.js | 7 +- client/lib/react-test-env-setup/index.js | 2 +- package.json | 6 +- 7 files changed, 90 insertions(+), 154 deletions(-) delete mode 100644 client/components/follow-button/_style.scss diff --git a/client/components/drop-zone/index.jsx b/client/components/drop-zone/index.jsx index ec0f6eaa96920..5084e3d861a44 100644 --- 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 index 814a7ed2fcde0..e88b702e50030 100644 --- a/client/components/drop-zone/test/index.jsx +++ b/client/components/drop-zone/test/index.jsx @@ -78,9 +78,8 @@ 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; @@ -88,7 +87,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 = 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 deleted file mode 100644 index 98308e3855d2e..0000000000000 --- a/client/components/follow-button/_style.scss +++ /dev/null @@ -1,95 +0,0 @@ -.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; - - &:first-child { - margin-top: 5px; - } - - &:hover, - &:focus { - border: 0; - box-shadow: none; - } - - &:last-child { - margin-bottom: 5px; - } - - &::-moz-focus-inner { - border: 0; - } - - // Menu Items with Icons - &.has-icon { - padding-left: 42px; - } - - .gridicon__follow { - opacity: 1; - } - - .gridicon__following { - opacity: 0; - pointer-events: none; - transform: rotate( 180deg ) scale( 3 ); - } - - .gridicon__unfollow { - display: none; - } - - &.is-following { - color: $alert-green; - - .gridicon { - fill: $alert-green; - } - - .gridicon__follow { - opacity: 0; - pointer-events: none; - transform: rotate( -180deg ) scale( 0.5 ); - } - - .gridicon__following { - opacity: 1; - pointer-events: auto; - transform: rotate( 0 ) scale( 1 ); - } - } - - &:hover { - color: $alert-green; - .gridicon { - fill: $alert-green; - } - - &.is-following { - .gridicon { - fill: lighten( $gray, 10 ); - } - - 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/follow-button/style.scss b/client/components/follow-button/style.scss index 56760a2857f32..98308e3855d2e 100644 --- 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 index e47c605ef7507..a47dbaa0a81f6 100644 --- 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 index d8f44e38951d5..ebcb6af2489d3 100644 --- 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; diff --git a/package.json b/package.json index ef70ecdb647c9..1397c3a5b552a 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "moment": "2.10.6", "moment-timezone": "^0.4.0", "morgan": "1.2.0", - "node-sass": "3.3.3", + "node-sass": "3.4.2", "page": "1.6.1", "phone": "git+https://github.com/Automattic/node-phone.git#1.0.4-6", "photon": "1.0.4", @@ -91,8 +91,8 @@ "walk": "2.3.4", "webpack": "1.12.6", "webpack-dev-middleware": "1.2.0", - "wpcom-unpublished": "1.0.7", "wpcom-proxy-request": "1.0.5", + "wpcom-unpublished": "1.0.7", "wpcom-xhr-request": "0.3.3", "xgettext-js": "0.2.0" }, @@ -117,7 +117,7 @@ "esformatter-special-bangs": "1.0.1", "eslint": "1.3.1", "eslint-plugin-react": "3.3.1", - "jsdom": "3.1.2", + "jsdom": "7.2.0", "localStorage": "1.0.2", "lodash-deep": "1.5.3", "mocha": "2.3.4",