Unit tests with ion-fab in template

Hi there,

We’re trying to unit test a page which contains a fab:

<ion-fab bottom right>
	<button ion-fab color="primary" (click)="addSystem()">
		<ion-icon name="add"></ion-icon>
	</button>
</ion-fab>

But the test doesn’t pass with the following error:

 Chrome 60.0.3112 (Mac OS X 10.12.4) Profile Page initialises FAILED
	Error: Error in ./SwitchSystemPage class SwitchSystemPage - inline template:8:2 caused by: unRegEvent is not a function
	TypeError: unRegEvent is not a function
	    at webpack:///~/ionic-angular/gestures/ui-event-manager.js:48:0 <- src/test.ts:23351:13
	    at Array.forEach (<anonymous>)
	    at UIEventManager.unlistenAll (webpack:///~/ionic-angular/gestures/ui-event-manager.js:47:0 <- src/test.ts:23350:19)
	    at UIEventManager.destroy (webpack:///~/ionic-angular/gestures/ui-event-manager.js:56:0 <- src/test.ts:23359:14)
	    at FabContainer.ngOnDestroy (webpack:///~/ionic-angular/components/fab/fab.js:424:0 <- src/test.ts:94343:22)
	    at Wrapper_FabContainer.ngOnDestroy (/IonicModule/FabContainer/wrapper.ngfactory.js:13:16)
	    at CompiledTemplate.proxyViewClass.View_SwitchSystemPage0.destroyInternal (/DynamicTestModule/SwitchSystemPage/component.ngfactory.js:381:27)
	    at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:152981:14)
	    at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:153384:38)
	    at CompiledTemplate.proxyViewClass.View_SwitchSystemPage_Host0.destroyInternal (/DynamicTestModule/SwitchSystemPage/host.ngfactory.js:33:19)
	    at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///~/@angular/core/src/linker/view.js:203:0 <- src/test.ts:152981:14)
	    at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///~/@angular/core/src/linker/view.js:606:0 <- src/test.ts:153384:38)
	    at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (webpack:///~/@angular/core/src/linker/view.js:187:0 <- src/test.ts:152965:14)
	    at ComponentRef_.destroy (webpack:///~/@angular/core/src/linker/component_factory.js:147:51 <- src/test.ts:62171:70)

Any idea, why that doesn’t work? Thanks in advance!

Some additional information: ionic version is 2.2.1 (cli) and 2.2.0 (framework). The test setup is a rather standard one and the error occurs while building TestBed.configureTestingModule.

1 Like

Same issue here, latest ionic and angular version. Renders any Component with a FAB untestable.

I think updating ionic-mocks fixed this for us, since some components where not correctly mocked. I think FABs started to work with 0.13.0

Thanks, I’ll check this out.