Skip to content

Commit

Permalink
Fix spec for window scroll
Browse files Browse the repository at this point in the history
The spec that I previously wrote for when the scrollable parent is equal
to the window element (a3dc459) only worked in Chrome. Our Travis
integration runs a Firefox instance, and in that browser the spec
failed. It turns out that Chrome will allow you to do `window.scrollTop
= x` and it will scroll to x. Firefox silently ignores that call. The
way we found to work in both browsers were `window.scroll(0, x)`.

Once that was fixed, I found another issue with our test setup. We
weren't cleaning up the divs we leave on the page. This caused the last
spec (testing scroll on the window element) to be contaminated by those
divs. We added an afterEach hook to unmount components as they were
tested.
  • Loading branch information
Henric Trotzig + Joe Lencioni committed Jan 30, 2015
1 parent c15bf3d commit fbd2bf4
Showing 1 changed file with 17 additions and 5 deletions.
22 changes: 17 additions & 5 deletions spec/waypoint_spec.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
var React = require('react');
var Waypoint = require('../src/waypoint');

var div;

var renderAttached = function(component) {
var div = document.createElement('div');
div = document.createElement('div');
document.documentElement.appendChild(div);
var renderedComponent = React.render(component, div);
return renderedComponent;
};

var scrollNodeTo = function(node, scrollTop) {
node.scrollTop = scrollTop;
if (node === window) {
window.scroll(0, scrollTop);
} else {
node.scrollTop = scrollTop;
}
var event = document.createEvent('Event');
event.initEvent('scroll', false, false);
node.dispatchEvent(event);
Expand Down Expand Up @@ -44,6 +50,12 @@ describe('Waypoint', function() {
};
});

afterEach(function() {
if (div) {
React.unmountComponentAtNode(div);
}
});

describe('when the Waypoint is visible on mount', function() {
beforeEach(function() {
this.topSpacerHeight = 90;
Expand Down Expand Up @@ -245,8 +257,8 @@ describe('Waypoint', function() {
this.parentStyle = {};

// Make the spacers large enough to make the Waypoint render off-screen
this.topSpacerHeight = 4000;
this.bottomSpacerHeight = 4000;
this.topSpacerHeight = window.innerHeight + 1000;
this.bottomSpacerHeight = 1000;
});

it('does not fire the onEnter handler on mount', function() {
Expand All @@ -256,7 +268,7 @@ describe('Waypoint', function() {
describe('when the Waypoint is in view', function() {
beforeEach(function() {
this.subject();
scrollNodeTo(window, 3900);
scrollNodeTo(window, this.topSpacerHeight - window.innerHeight / 2);
});

it('fires the onEnter handler', function() {
Expand Down

0 comments on commit fbd2bf4

Please sign in to comment.