fix(Visibility): handle context scroll instead of just window scroll (#3400)

* fix(Visibility): handle context scroll instead of just window scroll * fix(Visibility): refactor and uncomment failing test * add new test, fix broken behavior * add note * remove comment * Update Visibility.js * Update Visibility.js

Author: johnkeane475

src/behaviors/Visibility/Visibility.js

@@ -209,7 +209,7 @@ export default class Visibility extends Component {
  if (!isBrowser()) return
  const { context, fireOnMount, updateOn } = this.props
 
- this.pageYOffset = window.pageYOffset
+ this.pageYOffset = this.getPageYOffset()
  this.attachHandlers(context, updateOn)
 
  if (fireOnMount) this.update()
@@ -310,7 +310,7 @@ export default class Visibility extends Component {
 
  this.oldCalculations = this.calculations
  this.calculations = this.computeCalculations()
- this.pageYOffset = window.pageYOffset
+ this.pageYOffset = this.getPageYOffset()
 
  const {
  onBottomPassed,
@@ -364,7 +364,8 @@ export default class Visibility extends Component {
  const { bottom, height, top, width } = this.ref.current.getBoundingClientRect()
  const [topOffset, bottomOffset] = normalizeOffset(offset)
 
- const direction = window.pageYOffset > this.pageYOffset ? 'down' : 'up'
+ const newOffset = this.getPageYOffset()
+ const direction = newOffset > this.pageYOffset ? 'down' : 'up'
  const topPassed = top < topOffset
  const bottomPassed = bottom < bottomOffset
 
@@ -397,6 +398,17 @@ export default class Visibility extends Component {
  }
  }
 
+ getPageYOffset() {
+ const { context } = this.props
+
+ if (context) {
+ // Heads up! `window` doesn't have `pageYOffset` property
+ return context === window ? window.pageYOffset : context.scrollTop
+ }
+
+ return 0
+ }
+
  // ----------------------------------------
  // Render
  // ----------------------------------------

test/setup.js

@@ -50,7 +50,7 @@ let info
 let warn
 let error
 
-const throwOnConsole = method => (...args) => {
+const throwOnConsole = (method) => (...args) => {
  throw new Error(
  `console.${method} should never be called but was called with:\n${args.join(' ')}`,
  )

test/specs/behaviors/Visibility/Visibility-test.js

@@ -276,6 +276,20 @@ describe('Visibility', () => {
  calculations: { direction: 'up' },
  })
  })
+
+ it('gets direction from `context` element', () => {
+ const context = document.createElement('div')
+ const onUpdate = sandbox.spy()
+
+ sandbox.stub(context, 'scrollTop').value(0)
+ mount(<Visibility context={context} onUpdate={onUpdate} />)
+
+ sandbox.stub(context, 'scrollTop').value(5)
+ domEvent.scroll(context)
+ onUpdate.should.have.been.calledWithMatch(null, {
+ calculations: { direction: 'down' },
+ })
+ })
  })
  })
 
@@ -367,8 +381,8 @@ describe('Visibility', () => {
  const opts = { [callbackName]: callback }
 
  const offset = 10
- const falsyCond = _.map(_.first(falsy), value => value + offset)
- const truthyCond = _.map(_.first(truthy), value => value + offset)
+ const falsyCond = _.map(_.first(falsy), (value) => value + offset)
+ const truthyCond = _.map(_.first(truthy), (value) => value + offset)
 
  wrapperMount(<Visibility {...opts} offset={offset} />)
  mockScroll(...truthyCond)
@@ -546,7 +560,7 @@ describe('Visibility', () => {
  describe('updateOn', () => {
  beforeEach(() => {
  requestAnimationFrame.restore()
- sandbox.stub(window, 'requestAnimationFrame').callsFake(fn => setTimeout(() => fn(), 0))
+ sandbox.stub(window, 'requestAnimationFrame').callsFake((fn) => setTimeout(() => fn(), 0))
  })
 
  it('defaults to "events"', () => {