ion-slides breaks testing

[ataraxus]

Ionic version: (check one with "x")
[ ] 1.x
[ x ] 2.x
[ x ] 3.x

I'm submitting a ... (check one with "x")
[ x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Test of pages with ion-slides are breaking.

Expected behavior:
ion-slides should not break testing

Steps to reproduce:
See this working(breaking) example.

git clone https://github.com/jensharder91/minimalExampleIonicTest
npm install
npm test 

Related code:

SUMMARY:
✔ 1 test completed
✖ 1 test failed

FAILED TESTS:
  Page: Slide Page
    ✖ is created
      Chrome 57.0.2987 (Mac OS X 10.12.4)
    TypeError: Cannot read property 'removeAttribute' of undefined
        at cleanupStyles (webpack:///~/ionic-angular/components/slides/swiper/swiper.js:895:0 <- src/test.ts:44935:16)
        at destroySwiper (webpack:///~/ionic-angular/components/slides/swiper/swiper.js:932:0 <- src/test.ts:44972:5)
        at Slides.ngOnDestroy (webpack:///~/ionic-angular/components/slides/slides.js:991:0 <- src/test.ts:55896:101)
        at callProviderLifecycles (webpack:///~/@angular/core/@angular/core.es5.js:11109:0 <- src/test.ts:11389:18)
        at callElementProvidersLifecycles (webpack:///~/@angular/core/@angular/core.es5.js:11078:0 <- src/test.ts:11358:13)
        at callLifecycleHooksChildrenFirst (webpack:///~/@angular/core/@angular/core.es5.js:11062:0 <- src/test.ts:11342:17)
        at destroyView (webpack:///~/@angular/core/@angular/core.es5.js:12280:0 <- src/test.ts:12560:5)
        at callViewAction (webpack:///~/@angular/core/@angular/core.es5.js:12391:0 <- src/test.ts:12671:13)
        at execComponentViewsAction (webpack:///~/@angular/core/@angular/core.es5.js:12333:0 <- src/test.ts:12613:13)
        at destroyView (webpack:///~/@angular/core/@angular/core.es5.js:12279:0 <- src/test.ts:12559:5)
        at callWithDebugContext (webpack:///~/@angular/core/@angular/core.es5.js:13060:25 <- src/test.ts:13340:42)
        at Object.debugDestroyView [as destroyView] (webpack:///~/@angular/core/@angular/core.es5.js:12614:0 <- src/test.ts:12894:12)
        at ViewRef_.destroy (webpack:///~/@angular/core/@angular/core.es5.js:10199:0 <- src/test.ts:10479:18)
        at ComponentRef_.destroy (webpack:///~/@angular/core/@angular/core.es5.js:9944:51 <- src/test.ts:10224:67)
        at ComponentFixture.destroy (webpack:///~/@angular/core/@angular/core/testing.es5.js:248:0 <- src/test.ts:40174:31)

Other information:
breaks with ionic 2.x and 3.x on windows and mac host.

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.5
Xcode version: Xcode 8.3 Build version 8E162

[jgw96]

Hello, thanks for opening an issue with us, we will look into this.

[ataraxus]

hey @jgw96,

i dug deeper in this issue and found out, that this is caused because i cleaned up my testcase properly, with fixture.destroy() which triggers ngOnDestroy of the Slide. The Slides Swiper assumes that the Container is not null, but in case of testing this is not always true.
By adding a nullcheck this is usable with Karma & co.

[pfreitag]

I am seeing this same stack trace on random occasions when doing a NavController.popTo back into a Page that has ion-slides in it.

[ataraxus]

It happens when the Slides' Swiper gets disposed by Angular and if the ViewController is not available or the Container is not present, for what ever reason.

[mannuk]

Any solution to this?

[ataraxus]

@mannuk besides my naive PR unfortunately not. I guess this is not high prior, since it's no defect for production :(
Over on slack, there are more people struggling with the swiper component, it seems pretty tightly coupled maybe there will be a rewrite of it for better extensibility and testability....

[brandyscarney]

Can anyone give me a repository or way to reproduce this? Either in our unit tests or in an application. Thanks!

[ataraxus]

Doesn't this work for you?

git clone https://github.com/jensharder91/minimalExampleIonicTest

[brandyscarney]

Thanks, it does! I released a nightly with your fix in it:

npm install --save --save-exact ionic-angular@3.2.1-201705192107

Note: this nightly requires angular 4.1.2

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.