René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Unit test within async using fixture.detectChanges() fails","articleBody":"Hello,\r\n\r\n**This is the issue description:**\r\nUsing the method from `ComponentFixture` .`detectChanges()` is failing when you use it within an `async()` unit test.\r\n\r\n**How to reproduce:**\r\n\r\n1. Clone this repo: `git clone https://github.com/ionic-team/ionic-unit-testing-example.git`\r\n2. Install packages: `cd ionic-unit-testing-example \u0026\u0026 sudo npm install`\r\n3. Add the following unit test to the `src/app/app.component.spec.ts`:\r\n\r\n```typescript\r\n  it( 'example test async with fixture.detectChanges()', async(() =\u003e {\r\n    fixture.detectChanges();\r\n  }));\r\n```\r\n\r\n4. Run tests: `npm run test-ci`\r\n\r\n**After running the tests, it fails with the following error:**\r\n\r\n```\r\n..ERROR: 'Unhandled Promise rejection:', 'invalid link: Page1', '; Zone:', 'angular', '; Task:', 'Promise.then', '; Value:', 'invalid link: Page1', undefined\r\n\r\nERROR: 'Unhandled Promise rejection:', 'invalid link: Page1', '; Zone:', 'angular', '; Task:', 'Promise.then', '; Value:', 'invalid link: Page1', undefined\r\nChrome 65.0.3325 (Linux 0.0.0) MyApp Component example test async with fixture.detectChanges() FAILED\r\n        Failed: Uncaught (in promise): invalid link: Page1\r\n        Error: Uncaught (in promise): invalid link: Page1\r\n            at resolvePromise (webpack:///node_modules/zone.js/dist/zone.js:824:0 \u003c- test-config/karma-test-shim.js:117151:31)\r\n            at Object.reject (webpack:///node_modules/zone.js/dist/zone.js:746:0 \u003c- test-config/karma-test-shim.js:117073:17)\r\n            at NavControllerBase._fireError (webpack:///node_modules/ionic-angular/navigation/nav-controller-base.js:223:0 \u003c- test-config/karma-test-shim.js:51342:16)\r\n            at NavControllerBase._failed (webpack:///node_modules/ionic-angular/navigation/nav-controller-base.js:216:0 \u003c- test-config/karma-test-shim.js:51335:14)\r\n            at webpack:///node_modules/ionic-angular/navigation/nav-controller-base.js:263:44 \u003c- test-config/karma-test-shim.js:51382:59\r\n            at ZoneDelegate.invoke (webpack:///node_modules/zone.js/dist/zone.js:392:0 \u003c- test-config/karma-test-shim.js:116719:26)\r\n............\r\n```\r\n**Expected result** should be at least not to throw this error when using `fixture.detectChanges()`.\r\n\r\nThe full `src/app/app.component.spec.ts` file would be as the following:\r\n\r\n```typescript\r\nimport { async, TestBed, fakeAsync, ComponentFixture, tick } from '@angular/core/testing';\r\nimport { IonicModule, Platform, MenuController, Menu } from 'ionic-angular';\r\n\r\nimport { StatusBar } from '@ionic-native/status-bar';\r\nimport { SplashScreen } from '@ionic-native/splash-screen';\r\n\r\nimport { MyApp } from './app.component';\r\nimport {\r\n  PlatformMock,\r\n  StatusBarMock,\r\n  SplashScreenMock\r\n} from '../../test-config/mocks-ionic';\r\nimport { Page } from 'ionic-angular/navigation/nav-util';\r\nimport { By } from '@angular/platform-browser';\r\n\r\ndescribe('MyApp Component', () =\u003e {\r\n  let fixture;\r\n  let component;\r\n\r\n  beforeEach(async(() =\u003e {\r\n    TestBed.configureTestingModule({\r\n      declarations: [MyApp],\r\n      imports: [\r\n        IonicModule.forRoot(MyApp)\r\n      ],\r\n      providers: [\r\n        { provide: StatusBar, useClass: StatusBarMock },\r\n        { provide: SplashScreen, useClass: SplashScreenMock },\r\n        { provide: Platform, useClass: PlatformMock }\r\n      ]\r\n    });\r\n  }));\r\n\r\n  beforeEach(() =\u003e {\r\n    fixture = TestBed.createComponent(MyApp);\r\n    component = fixture.componentInstance;\r\n  });\r\n\r\n  it('should be created', () =\u003e {\r\n    expect(component instanceof MyApp).toBe(true);\r\n  });\r\n\r\n  it('should have two pages', () =\u003e {\r\n    expect(component.pages.length).toBe(2);\r\n  });\r\n\r\n  it( 'example test async with fixture.detectChanges()', async(() =\u003e {\r\n    fixture.detectChanges();\r\n  }));\r\n\r\n});\r\n```\r\nDoest anyone at least know why this could be happenning? I don't know if this could even be an Angular bug with lazy loading or whatever.\r\n\r\nThe only reference to `Page1` is inside `src/app/app.component.ts` in order to set up the page as the rootPage of the app:\r\n\r\n```typescript\r\nimport { Component, ViewChild } from '@angular/core';\r\nimport { SplashScreen } from '@ionic-native/splash-screen';\r\nimport { StatusBar } from '@ionic-native/status-bar';\r\nimport { Nav, Platform, Menu } from 'ionic-angular';\r\n\r\n\r\n@Component({\r\n  templateUrl: 'app.html'\r\n})\r\nexport class MyApp {\r\n  @ViewChild(Nav) nav: Nav;\r\n\r\n  rootPage: any = 'Page1';\r\n\r\n  pages: Array\u003c{ title: string, component: any }\u003e;\r\n\r\n\r\n  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {\r\n    // used for an example of ngFor and navigation\r\n    this.pages = [\r\n      { title: 'Page One', component: 'Page1' },\r\n      { title: 'Page Two', component: 'Page2' }\r\n    ];\r\n\r\n  }\r\n\r\n  ionViewDidLoad() {\r\n    this.platform.ready().then(() =\u003e {\r\n      // Okay, so the platform is ready and our plugins are available.\r\n      // Here you can do any higher level native things you might need.\r\n      this.statusBar.styleDefault();\r\n      this.splashScreen.hide();\r\n    });\r\n  }\r\n\r\n  openPage(page) {\r\n    // Reset the content nav to have just this page\r\n    // we wouldn't want the back button to show in this scenario\r\n    this.nav.setRoot(page.component);\r\n  }\r\n\r\n}\r\n\r\n```\r\n\r\nThank you in advance.\r\n\r\nRegards,\r\n\r\nDavid.","author":{"url":"https://github.com/Dellos7","@type":"Person","name":"Dellos7"},"datePublished":"2018-04-24T10:26:15.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5},"url":"https://github.com/89/ionic-unit-testing-example/issues/89"}