fixture.detectChanges() doesn't play well with <ionic-content>

[devinsabo]

For an ionic2 Page component I am trying to use fixture.detectChanges() (or even the autodetect method) in my tests to run the angular2 lifecycle hooks but I keep running into an error. If I remove any tags from my html the error goes away so it seems very specific to ionic.

The workaround is to only do lifecycle unit tests on angular components that do not have but I am hoping there is a more permanent solution.

BTW: Great example of unit testing with ionic2. Thank you!

Error Message:

FAILED TESTS:
  ClickerList
    ✖ detect changes
      Chrome 54.0.2840 (Mac OS X 10.11.6)
    Error: Error in ./ClickerList class ClickerList - inline template:9:0 caused by: Cannot read property 'bind' of undefined
    TypeError: Cannot read property 'bind' of undefined
        at webpack:///content.ts:177:66 <- src/test.ts:6536:75
        at ZoneDelegate.invoke (webpack:///Users/devinsabo/git/clicker/~/zone.js/dist/zone.js:192:0 <- src/test.ts:64682:28)
        at ProxyZoneSpec.onInvoke (webpack:///Users/devinsabo/git/clicker/~/zone.js/dist/proxy.js:60:0 <- src/test.ts:26367:43)
        at ZoneDelegate.invoke (webpack:///Users/devinsabo/git/clicker/~/zone.js/dist/zone.js:191:0 <- src/test.ts:64681:34)
        at Zone.run (webpack:///Users/devinsabo/git/clicker/~/zone.js/dist/zone.js:85:0 <- src/test.ts:64575:43)
        at NgZone.runOutsideAngular (webpack:///Users/devinsabo/git/clicker/~/@angular/core/src/zone/ng_zone.js:144:56 <- src/test.ts:19019:76)
        at Content.ngOnInit (webpack:///content.ts:175:15 <- src/test.ts:6534:20)
        at Wrapper_Content.detectChangesInternal (/IonicModule/Content/wrapper.ngfactory.js:28:53)
        at _View_ClickerList0.detectChangesInternal (/DynamicTestModule/ClickerList/component.ngfactory.js:203:26)
        at _View_ClickerList0.AppView.detectChanges (webpack:///Users/devinsabo/git/clicker/~/@angular/core/src/linker/view.js:229:0 <- src/test.ts:46491:14)

To Reproduce
I started with a fresh clone of your repo and then added the following test to src/pages/clickerList/clickerList.spec.ts:

  it('detect changes', () => {
    fixture.detectChanges();
    expect(instance).toBeTruthy();
  });

[devinsabo]

Well, I think this was just my own naive approach to blindly using your mock objects. When I used the real ionic 'App' and 'Platform' instead of the mocks the problem went away.

You can close the issue if you want. Otherwise I guess the solution is to come up with more elegant mock objects for some of the ionic components.

[lathonez]

Oddly enough I can't replicate this against this repo, but I found the exact same thing on my closed source project a couple of hours before you raised this.

Regarding the mocks:

• They are very naive and intended to be used in specs where your code relies on them directly. e.g. if your code calls nav.push(). Thus for any given test spec you know the entire api you need to mock out, as it's just the touch points against your code.
• Probably a bug that I was using them in the first place to configure the testing modules

I tried to remove the ConfigMock, which should be the last one remaining, but I ran into this:

FAILED TESTS:
  ClickerButton
    ✖ initialises
      Chrome 54.0.2840 (Linux 0.0.0)
    Failed: Uncaught (in promise): Error: Error in ./ClickerButton class ClickerButton - inline template:0:0 caused by: Cannot read property 'mode' of undefined
    Error: Uncaught (in promise): Error: Error in ./ClickerButton class ClickerButton - inline template:0:0 caused by: Cannot read property 'mode' of undefined
        at resolvePromise (webpack:///home/lathonez/code/clicker/~/zone.js/dist/zone.js:418:0 <- src/test.ts:66815:31)
        at resolvePromise (webpack:///home/lathonez/code/clicker/~/zone.js/dist/zone.js:403:0 <- src/test.ts:66800:17)
        at webpack:///home/lathonez/code/clicker/~/zone.js/dist/zone.js:451:0 <- src/test.ts:66848:17
        at ZoneDelegate.invokeTask (webpack:///home/lathonez/code/clicker/~/zone.js/dist/zone.js:225:0 <- src/test.ts:66622:37)
        at ProxyZoneSpec.onInvokeTask (webpack:///home/lathonez/code/clicker/~/zone.js/dist/proxy.js:84:0 <- src/test.ts:28107:43)
        at ZoneDelegate.invokeTask (webpack:///home/lathonez/code/clicker/~/zone.js/dist/zone.js:224:0 <- src/test.ts:66621:42)
        at Zone.runTask (webpack:///home/lathonez/code/clicker/~/zone.js/dist/zone.js:125:0 <- src/test.ts:66522:47)
        at drainMicroTaskQueue (webpack:///home/lathonez/code/clicker/~/zone.js/dist/zone.js:357:0 <- src/test.ts:66754:35)

Presumably because it isn't loading / reading in the config properly.