如何在 Ionic2 中测试浮动操作按钮

Question

我有一个 Ionic2 项目，其单元测试设置基于 clicker 存储库。我尝试在组件中使用浮动操作按钮，但在运行单元测试时它抛出异常。我在普通的 clickr 应用程序中添加了一个 FAB 来演示错误。它已添加到 page2.html，您可以在 fab-error branch.

中找到它

当运行测试时，日志如下所示。

> Clicker@2.19.0 test /Users/rkause/test/clicker
> ng test

 10% building modules 1/1 modules 0 active16 08 2017 12:15:52.892:WARN [karma]: No captured browser, open http://localhost:9876/
16 08 2017 12:15:52.902:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
16 08 2017 12:15:52.902:INFO [launcher]: Launching browser ChromeNoSandbox with unlimited concurrency
16 08 2017 12:15:52.915:INFO [launcher]: Starting browser Chrome

WARNING in ./~/ionic-angular/util/ng-module-loader.js
54:11-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ionic-angular/util/ng-module-loader.js
69:11-36 Critical dependency: the request of a dependency is an expression
16 08 2017 12:16:02.325:WARN [karma]: No captured browser, open http://localhost:9876/
16 08 2017 12:16:02.541:INFO [Chrome 60.0.3112 (Mac OS X 10.11.6)]: Connected on socket djJaMpA7zKcR5c3jAAAA with id 17408513
Chrome 60.0.3112 (Mac OS X 10.11.6) Pages: Page2 should create page2 FAILED
    TypeError: unRegEvent is not a function
        at http://localhost:9876/_karma_webpack_/vendor.bundle.js:41527:13
        at Array.forEach (<anonymous>)
        at UIEventManager.webpackJsonp.../../../../ionic-angular/gestures/ui-event-manager.js.UIEventManager.unlistenAll (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41526:19)
        at UIEventManager.webpackJsonp.../../../../ionic-angular/gestures/ui-event-manager.js.UIEventManager.destroy (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41535:14)
        at FabContainer.webpackJsonp.../../../../ionic-angular/components/fab/fab-container.js.FabContainer.ngOnDestroy (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9287:22)
        at callProviderLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:120688:18)
        at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:120657:13)
        at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/vendor.bundle.js:120641:17)
        at destroyView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:121902:5)
        at callViewAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:122048:13)
Chrome 60.0.3112 (Mac OS X 10.11.6): Executed 14 of 30 (1 FAILED) (0 secs / 2.319 secs)
Chrome 60.0.3112 (Mac OS X 10.11.6) Pages: Page2 should create page2 FAILED
    TypeError: unRegEvent is not a function
        at http://localhost:9876/_karma_webpack_/vendor.bundle.js:41527:13
        at Array.forEach (<anonymous>)
        at UIEventManager.webpackJsonp.../../../../ionic-angular/gestures/ui-event-manager.js.UIEventManager.unlistenAll (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41526:19)
        at UIEventManager.webpackJsonp.../../../../ionic-angular/gestures/ui-event-manager.js.UIEventManager.destroy (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41535:14)
        at FabContainer.webpackJsonp.../../../../ionic-angular/components/fab/fab-container.js.FabContainer.ngOnDestroy (http://localhost:9876/_karma_webpack_/vendor.bundle.js:9287:22)
        at callProviderLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:120688:18)
        at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:120657:13)
        at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/vendor.bundle.js:120641:17)
        at destroyView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:121902:5)
ERROR: 'Error during cleanup of component', Page2{title: 'Page 2', OK: function () { ... }, alertController: Object{create: function () { ... }}}

我尝试手动添加组件，模拟各种服务，但无法找出导致此行为的原因。

Answer 1

ionic-mocks 平台模拟正在定义 Platform.registerListener，但没有函数的签名。

https://github.com/stonelasley/ionic-mocks/blob/master/src/angular/platform.ts#L26

添加这一行解决了我的错误

instance.registerListener.and.returnValue(() => {});

如何在 Ionic2 中测试浮动操作按钮

How to test a Floating Action Button in Ionic2

ionic2

angular2-testing

angular