Unit Tests Failing

[harshabonthu]

Thanks a lot for the work on integration, I think it looks good to use polymer based components in Angular.

I am trying to integrate polymer using your package in a sample project generated with angular-cli and was able to do it without much trouble. When I try to run the unit tests using ng test, I see the below error. Not sure if I am missing anything, I've uploaded the code here https://github.com/harshabonthu/angular2-polymer-integration

system-polyfills.js:4 Potentially unhandled rejection [3] TypeError: Cannot read property 'forEach' of undefined at Object.PolymerElement (http://localhost:9876/base/dist/vendor/@vaadin/angular2-polymer/src/polymer-element.js:10:20) at eval (http://localhost:9876/base/dist/app/poly.component.js:24:36) at Object.eval (http://localhost:9876/base/dist/app/poly.component.js:31:2) at eval (http://localhost:9876/base/dist/app/poly.component.js:34:4) at eval (http://localhost:9876/base/dist/app/poly.component.js:35:3) at Object.eval (http://localhost:9876/base/dist/app/poly.component.spec.js:3:24) at eval (http://localhost:9876/base/dist/app/poly.component.spec.js:15:4) at eval (http://localhost:9876/base/dist/app/poly.component.spec.js:16:3) at F (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:7484) at H (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:7116) at q.when (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:10790) at b.run (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:9826) at t._drain (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:1744) at drain (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:1398) at MutationObserver.e (http://localhost:9876/base/dist/vendor/systemjs/dist/system-polyfills.js:4:3319) at ZoneDelegate.invoke (http://localhost:9876/base/dist/vendor/zone.js/dist/zone.js:323:29) at Zone.runGuarded (http://localhost:9876/base/dist/vendor/zone.js/dist/zone.js:230:48) at MutationObserver.<anonymous> (http://localhost:9876/base/dist/vendor/zone.js/dist/zone.js:206:30) Evaluating http://localhost:9876/base/dist/app/poly.component.js Evaluating http://localhost:9876/base/dist/app/poly.component.spec.js Error loading http://localhost:9876/base/dist/app/poly.component.spec.js

[manolo]

I have double checked the project and everything seems working ok in my environment, I have run:

$ mkdir test && cd test
$ git clone https://github.com/vaadin/angular2-polymer
$ npm i && bower i
$ npm test

I got in my browser the message: 19 specs, 0 failures
Note that you have to run npm test instead of ng test

[harshabonthu]

@manolo Thanks for looking into this. You are running the tests from angular2-polymer package but the issue actually occurs when I try to integrate angular2-polymer to a sample project created using angular-cli and try ng test.

I created a sample angular2 project using angular-cli and then followed the tutorial to integrate angular2-polymer. These are the integration changes I made -> https://github.com/harshabonthu/angular2-polymer-integration/commit/be4d17d2b83d28add78b55577bb5ed8eadeb330f and then tried to run ng test

[manolo]

@harshabonthu, what is your ng-cli version, the structure I get with latest is very different to your project.
Also when I run your project with latest, I don't get that error but a different one.
Seems like in test, polymer dependencies are not being imported.

[manolo]

@harshabonthu, finally I figured out what was happening. The problem is that polymer elements are not loaded in test because it does not uses index.html.
I have created a project like yours using latest ng2-cli and added a script to load components when running tests.
The script assumes that all polymer imports are in an elements.html file instead of in the index.html, so as both index.html and karma framework use the same imports.
This is the significant commit:
manolo/ng2-cli-polymer-app@e26b4b6

[manolo]

@harshabonthu sent a PR [1] to your project which fixes tests. Let me know if it works for you.
We are considering to include some info in the directive documentation.

[1] https://github.com/harshabonthu/angular2-polymer-integration/pull/1

[harshabonthu]

@manolo Weird.. I tried on my repo with PR merged in and also your sample project i.e manolo/ng2-cli-polymer-app and I get the same error as before.

Screencast on my repo -> http://recordit.co/gLdfrkr6jk
Screencast on your repo -> http://recordit.co/vkGJF01Sen

Angular-cli version is
angular-cli: 1.0.0-beta.5 node: 5.8.0 os: darwin x64

Currently I am trying to do integration with angular2-seed -> https://github.com/mgechev/angular2-seed and I think tests are working without any fixes, Will do some more testing and update again.

[manolo]

@harshabonthu Could you try latest PR sent to your project?
Also my project has the same fix.

[harshabonthu]

@manolo Latest fix works, Thanks a lot for looking into this.

[manolo]

@harshabonthu we will maintain this issue opened until we document correctly the issue. Thanks for testing this stuff and your feedback.