Problem testing Ionic app (Ionic 2.0.1)

Hi,
After updated Ionic version to 2.0.1 I have problem with test.
I have this spec.ts file and before updated Ionic (using rc4) all the tests worked.

import { async, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { App, Config, Form, IonicModule, Keyboard, DomController, MenuController, NavController, NavParams, LoadingController, Platform, AlertController, ViewController, GestureController } from 'ionic-angular';
import { ConfigMock, NavParamsMock, ViewControllerMock, AlertControllerMock, LoadingControllerMock, UserServiceMock, PlatformMock, SqlMock, StorageMock } from '../../mocks';
import { LogoutPage } from './logout';
import { Storage } from '@ionic/storage';
import { SQLite } from 'ionic-native';
import { UserService } from '../../services/users-service';
import { Observable } from 'rxjs/Rx';

let fixture = null;
let instance = null;
let mockUserService: UserServiceMock;
let mockStorage: StorageMock;


describe('Pagina logout', () => {

    beforeEach(async(() => {

        mockUserService = new UserServiceMock();
        mockStorage = new StorageMock();
        TestBed.configureTestingModule({
            declarations: [LogoutPage],
            providers: [
                App, Platform, Form, Keyboard, MenuController, NavController, GestureController, DomController, 
                { provide: Config, useClass: ConfigMock },
                { provide: NavParams, useClass: NavParamsMock },
                { provide: ViewController, useClass: ViewControllerMock },
                { provide: AlertController, useClass: AlertControllerMock },
                { provide: LoadingController, useClass: LoadingControllerMock },
                { provide: UserService, useValue: mockUserService },
                { provide: Platform, useClass: PlatformMock },
                { provide: SQLite, useClass: SqlMock },
                { provide: Storage, useValue: mockStorage },
            ],
            imports: [
                FormsModule,
                IonicModule,
                ReactiveFormsModule,
            ],
        }).compileComponents().then(() => {               
            fixture = TestBed.createComponent(LogoutPage);
            instance = fixture.debugElement.componentInstance;
            fixture.detectChanges();
        });
    }));

    afterEach(() => {
        fixture.destroy();
    });

      it('initialises', () => {
        expect(instance).toBeTruthy();
    });
});

Now I have this error:
:heavy_multiplication_x: initialises
Chrome 56.0.2924 (Mac OS X 10.11.3)
TypeError: Cannot read property ‘__zone_symbol__addEventListener’ of undefined
at PlatformMock.Platform.registerListener (webpack:///~/ionic-angular/platform/platform.js:579:0 <- src/test.ts:2610:30)
at Keyboard.focusOutline (webpack:///~/ionic-angular/platform/keyboard.js:183:0 <- src/test.ts:16209:18)
at new Keyboard (webpack:///~/ionic-angular/platform/keyboard.js:28:0 <- src/test.ts:16054:14)
at DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:200:61)
at DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:326:48)
at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///~/@angular/core/src/linker/ng_module_factory.js:94:0 <- src/test.ts:59840:27)
at TestBed.get (webpack:///~/@angular/core/bundles/core-testing.umd.js:813:0 <- src/test.ts:24344:51)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:109:0 <- src/test.ts:106013:45)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (webpack:///~/@angular/core/src/linker/view.js:351:0 <- src/test.ts:106255:49)
at CompiledTemplate.proxyViewClass.View_LogoutPage0.createInternal (/DynamicTestModule/LogoutPage/component.ngfactory.js:75:356)
Error: Uncaught (in promise): Error: Error in ./LogoutPage class LogoutPage - inline template:9:0 caused by: Cannot read property ‘__zone_symbol__addEventListener’ of undefined
at resolvePromise (webpack:///~/zone.js/dist/zone.js:468:0 <- src/test.ts:137467:31)
at webpack:///~/zone.js/dist/zone.js:505:0 <- src/test.ts:137504:17
at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:265:0 <- src/test.ts:137264:35)
at ProxyZoneSpec.onInvokeTask (webpack:///~/zone.js/dist/proxy.js:103:0 <- src/test.ts:97003:39)
at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:264:0 <- src/test.ts:137263:40)
at Zone.runTask (webpack:///~/zone.js/dist/zone.js:154:0 <- src/test.ts:137153:47)
at drainMicroTaskQueue (webpack:///~/zone.js/dist/zone.js:401:0 <- src/test.ts:137400:35)

and this is my package.json:
{
“scripts”: {
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”,
“e2e”: “protractor”,
“postinstall”: “ionic state restore && webdriver-manager update”,
“start”: “ionic serve”,
“test”: “ng test”,
“single-test”: “ng test --single-run --browsers PhantomJS”,
“test-coverage”: “ng test --code-coverage”
},
“dependencies”: {
"@angular/common": “2.2.1”,
"@angular/compiler": “2.2.1”,
"@angular/compiler-cli": “2.2.1”,
"@angular/core": “2.2.1”,
"@angular/forms": “2.2.1”,
"@angular/http": “2.2.1”,
"@angular/platform-browser": “2.2.1”,
"@angular/platform-browser-dynamic": “2.2.1”,
"@angular/platform-server": “2.2.1”,
"@ionic/storage": “1.1.7”,
“chart.js”: “^2.4.0”,
“ionic-angular”: “2.0.1”,
“ionic-native”: “2.2.11”,
“ionicons”: “3.0.0”,
“ng2-charts”: “^1.4.4”,
“rxjs”: “5.0.0-beta.12”,
“zone.js”: “0.6.26”,
“sw-toolbox”: “3.4.0”
},
“devDependencies”: {
"@ionic/app-scripts": “1.0.0”,
"@types/jasmine": “2.5.38”,
"@types/node": “6.0.42”,
“angular-cli”: “1.0.0-beta.24”,
“codecov”: “1.0.1”,
“jasmine-core”: “2.5.2”,
“jasmine-spec-reporter”: “2.7.0”,
“karma”: “1.3.0”,
“karma-chrome-launcher”: “2.0.0”,
“karma-cli”: “1.0.1”,
“karma-jasmine”: “1.1.0”,
“karma-mocha-reporter”: “2.2.1”,
“karma-phantomjs-launcher”: “^1.0.2”,
“karma-remap-istanbul”: “0.2.2”,
“protractor”: “4.0.13”,
“protractor-jasmine2-screenshot-reporter”: “0.3.2”,
“ts-node”: “1.7.2”,
“tslint”: “4.1.1”,
“tslint-eslint-rules”: “3.2.0”,
“typescript”: “2.0.10”,
“webpack”: “^2.2.1”
},
“cordovaPlugins”: [
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
“cordova-plugin-splashscreen”,
“ionic-plugin-keyboard”,
“cordova-plugin-inappbrowser”,
“cordova-plugin-screen-orientation”
],
“cordovaPlatforms”: [
“ios”,
{
“platform”: “ios”,
“version”: “”,
“locator”: “ios”
}
],
“config”: {
“ionic_source_map”: “source-map”
}
}

Instead in my service test where I don’t use TestBed.createComponent I don’t have problem.

Can you help me?

Thanks,
Stefano

1 Like

Hello Stefano,

I have the same problem, but my Ionic version is RC5:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v7.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

And my package.json file:

“dependencies”: {
"@angular/common": “2.2.1”,
"@angular/compiler": “2.2.1”,
"@angular/compiler-cli": “2.2.1”,
"@angular/core": “2.2.1”,
"@angular/forms": “2.2.1”,
"@angular/http": “2.2.1”,
"@angular/platform-browser": “2.2.1”,
"@angular/platform-browser-dynamic": “2.2.1”,
"@angular/platform-server": “2.2.1”,
"@ionic/storage": “1.1.7”,
“ionic-angular”: “2.0.0-rc.5”,
“ionic-native”: “2.4.1”,
“ionicons”: “3.0.0”,
“moment”: “2.15.1”,
“ng2-translate”: “^4.0.0”,
“pouchdb”: “^6.1.1”,
“pouchdb-find”: “^0.10.3”,
“pouchdb-upsert”: “^2.0.2”,
“rxjs”: “5.0.0-beta.12”,
“semver”: “^5.3.0”,
“sw-toolbox”: “3.4.0”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@angular/compiler-cli": “2.2.1”,
"@ionic/app-scripts": “1.0.0”,
"@types/jasmine": “2.5.38”,
“angular-cli”: “1.0.0-beta.20-1”,
“codecov”: “1.0.1”,
“jasmine-core”: “2.5.2”,
“jasmine-spec-reporter”: “2.7.0”,
“karma”: “1.3.0”,
“karma-chrome-launcher”: “2.0.0”,
“karma-cli”: “1.0.1”,
“karma-jasmine”: “1.1.0”,
“karma-mocha-reporter”: “2.2.1”,
“karma-remap-istanbul”: “0.2.1”,
“protractor”: “4.0.13”,
“protractor-jasmine2-screenshot-reporter”: “0.3.2”,
“ts-node”: “1.7.2”,
“tslint”: “4.1.1”,
“tslint-eslint-rules”: “3.2.0”,
“typescript”: “2.0.10”
}