[FEATURE] toggle document.hidden in jsdom

Basic info:

• Node.js version: 8.12.0
• jsdom version: 12.2.0

I need to test code that set a timestamp value depending on document.hidden. jsdom toggles the value depending on pretendToBeVisual as documented in the jsdom README.

I am using jest which uses jsdom.

Minimal reproduction case

I need a way to toggle document.hidden in jsdom in order to test code that has different code paths depending on the value.

To test the following function getTimeDuration:

/**
 * First call starts a timer and returns a function
 * that when called will give the elapsed time in
 * milisecond, while subtracting "hidden" time.
 * @returns {function} Calling this function will return the elapsed time.
 */
export default function getTimeDuration () {
  const startTimestamp = Date.now()
  let hiddenTimeDelta = 0
  let hiddenTimeStart = 0

  document.addEventListener('visibilitychange', trackHiddenTime)

  function trackHiddenTime () {
    if (document.hidden) {
      hiddenTimeStart = Date.now()
    } else {
      hiddenTimeDelta += (Date.now() - hiddenTimeStart)
    }
  }

  return () => {
    document.removeEventListener('visibilitychange', trackHiddenTime)

    return (Date.now() - hiddenTimeDelta) - startTimestamp
  }
}

We could write the following test code:

test('visibilitychange duration used by PayloadTiming', () => {
  // jestDateMock.advanceTo(0) is
  // needed due to issue: https://github.com/hustcc/jest-date-mock/issues/15
  jestDateMock.advanceTo(0)

  const timer = getTimeDuration()

  jestDateMock.advanceBy(10) // visible state

  jsdom.pretendToBeVisual = false // hidden state
  document.dispatchEvent(new Event('visibilitychange'))
  jestDateMock.advanceBy(10)
  
  jsdom.pretendToBeVisual = true // visible state
  document.dispatchEvent(new Event('visibilitychange'))
  jestDateMock.advanceBy(10)

  expect(timer()).toBe(20)
  jestDateMock.clear()
})

Ref: https://github.com/facebook/jest/issues/7142

[kapouer]

@dotnetCarpenter try something like

Object.defineProperty(document, "hidden", {
  configurable: true,
  get: function() { return whatever; }
});

[princefishthrower]

Super old thread here, but is there a way to mock visibilityState? Would using the same form of @kapouer 's solution work?