Stencil One: `MockWindow` does not work with some third party libraries

[kensodemann]

Stencil version:

 @stencil/core@1.0.0-alpha.14 

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Tests fail in the MockWindow if a third party library like GSAP (https://greensock.com/gsap) is used. From experimenting with it, it appears that the library itself is not binding this to be the window (or, really, the MockWindow) when making calls to methods such as requestAnimationFrame.

The result is this:

~/Projects/Customers/XXXX/stencil-one (gsap *): npm run test

> stencil-one@0.0.1 test /Users/kensodemann/Projects/Customers/XXXX/stencil-one
> jest

 FAIL  src/components/my-component/my-component.spec.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'setTimeout' of undefined

      at requestAnimationFrame (node_modules/@stencil/core/dist/mock-doc/index.js:2595:21)
      at _req (node_modules/gsap/umd/TweenLite.js:325:13)
      at Object._tick [as wake] (node_modules/gsap/umd/TweenLite.js:374:5)
      at Object.wake [as fps] (node_modules/gsap/umd/TweenLite.js:384:11)
      at new fps (node_modules/gsap/umd/TweenLite.js:395:10)
      at node_modules/gsap/umd/TweenLite.js:438:32
      at Object.<anonymous> (node_modules/gsap/umd/TweenLite.js:13:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.734s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! stencil-one@0.0.1 test: `jest`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the stencil-one@0.0.1 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kensodemann/.npm/_logs/2019-04-29T13_24_42_874Z-debug.lo

**Expected behavior:**
<!-- Describe what the behavior would be without the bug. -->

The call to `requestAnimationFrame` would work without the "this is undefined, so I cannot call setTimeout() on it" error.

**Steps to reproduce:**

1. clone https://github.com/Tallyb/stencil-one
1. `git checkout gsap`
1. `npm i`
1. `npm test`

**Related code:**

```tsx
  requestAnimationFrame(callback: (timestamp: number) => void) {
    return this.setTimeout(() => {
      callback(Date.now());
    }, 0) as number;
  }

Other information:

In examining this, it appears that what is going on is that this is not properly when the call gets over to MockWindow. I am not sure if we can do anything about that or if there was a way that the MockWindow was intended to be used in some cases.

[remjx]

Hi @adamdbradley this is apparently still an issue on Stencil 2.4.0 https://github.com/ionic-team/stencil/issues/2851

[ubalensi-yoobic]

Also still on the Stencil 3.0.1, any chance this has been looked at by then?

[micheltobon]

I am seeing this problem in 3.2.0, was it fixed in later versions?

Also, probably just forcing a .bind(this) on the constructor would potentially solve this once and for all.