Unit test: error if component has an ion-content in the template

Ionic Framework ionic-v3
1

I have some unit tests (karma + jasmine) written that don’t work with a component that has an ion-content in its template.

Example:

about.ts

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
	public versionnumber: any = 1;
	constructor( ) {
	}
}

about.html:

<ion-content>something</ion-content>

the spec is very simple:

let fixture: ComponentFixture<AboutPage> = null;
let instance: any = null;

describe('AboutPage', () => {
	beforeEach(async(() => TestUtils.beforeEachCompiler([AboutPage]).then(compiled => {
		fixture = compiled.fixture;
		instance = compiled.instance;
		fixture.autoDetectChanges(true)
	})))

	it('initialises', () => {
		expect(fixture).not.toBeNull();
		expect(instance).not.toBeNull();
	})

})

the output is:

initialises
Chrome 56.0.2924 (Linux 0.0.0)
TypeError: Cannot read property ‘__zone_symbol__addEventListener’ of undefined
at Platform.registerListener (webpack:///~/ionic-angular/platform/platform.js:616:0 ← src/test.ts:1573:30)
at Keyboard.focusOutline (webpack:///~/ionic-angular/platform/keyboard.js:208:0 ← src/test.ts:22904:18)
at new Keyboard (webpack:///~/ionic-angular/platform/keyboard.js:34:0 ← src/test.ts:22730:14)

if I remove ion-content, this error is not thrown. I can change to any other element (either a html5 one, like a div, or an ionic element, like ion-card). But it the template has an ion-content, the test throws this error.

Ionic info:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.0
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.6.0
Xcode version: Not installed

2

Try adding IonicModule to your testing module imports.

3

Hi @rapropos
I added it but nothing changed:

 beforeEach(async(() => {
         TestBed.configureTestingModule({
               imports: [
            	IonicModule
            ]
         })
     }));

it’s really strange because the error is thrown only if there is an ion-content element. I can use any other ionic element (ion-card. ion-header, etc…) and the spec is correct.

4

If the template contains an ion-slides, same error occurs. If an ion-segment, no.
Very weird.

5

The problem was with the Platform from ionic-angular
I was providing it in the TestUtils and somehow it was not working.
I had to mock it

{ provide: Platform, useClass: PlatformMock }

It’s ok now.

6

That’s interesting. I didn’t need to do that. The only other difference that I see is that I added the app component to declarations (which I assume your TestUtils does) and imported IonicModule.forRoot(AppComponent). In any event, glad it’s working now.

1 Like
7

hey can you please share the code to do the same as i am facing the same issue thanks