Angular 2 Protractor & Karma migration

deepu105 commented 8 years ago

The protractor and Karma test cases needs to be migrated in order to be compatible with Angular2. The migration needs to be done in the client-2 subgen Related to #3664 @mraible hoping you would be able to help?

TODO:

[ ] migrate karma tests for core
[x] migrate karma tests for entity
[x] migrate protractor tests for core
[x] migrate protractor tests for entity

mraible commented 8 years ago

@deepu105 Yes, I should be able to help. Probably not until later this week though.

deepu105 commented 8 years ago

Sure

Thanks & Regards, Deepu

On Mon, Oct 10, 2016 at 5:48 PM, Matt Raible notifications@github.com wrote:

@deepu105 https://github.com/deepu105 Yes, I should be able to help. Probably not until later this week though.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/4302#issuecomment-252601892, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF84XpFb-xWRl5FnRYAgKEK5Sn6zXks5qyi0LgaJpZM4KSSXP .

deepu105 commented 7 years ago

@jhipster/developers guys can anyone take up this? also we need to decide if we need to keep the same folder structure or move the tests into the same folders as the src similar to angular style guide and angular CLI this will be important if we are gonna support CLI later

jdubois commented 7 years ago

If nobody takes this, I have a new trainee arriving in the middle of November. But that means it won't be finished before several weeks.
For the folder structure, we need to keep the "Maven" folder structure or everyone will be lost: that would just be the root of the folder structure, then we should follow AngularJS style guide and Angular CLI. I remember @jmirc did a trick for that, so we could support the Angular Yeoman generator with JHipster 2, but I can't find the code anymore...

mraible commented 7 years ago

Is it possible to disable the UI-Router state viewer? I think it might be causing issues with Protractor tests.

deepu105 commented 7 years ago

Should be possible I guess. @christopherthielen

christopherthielen commented 7 years ago

Can you toggle debug mode for the tests?

https://github.com/jhipster/generator-jhipster/blob/angular-2/generators/client-2/templates/src/main/webapp/app/blocks/config/_router.config.ts#L11-L14

        if (DEBUG_INFO_ENABLED) {
            trace.enable(Category.TRANSITION);
            SystemJS.import('ui-router-visualizer').then(vis => vis.visualizer(router));
        }

anunnakian commented 7 years ago

I'm working on Protractor migration, I'll upgrade it to version 4 to make it compatible with Angular2. @jdubois

mraible commented 7 years ago

I spent an hour today trying to setup Karma and Webpack to run a simple hello world test. Unfortunately, I failed. I used https://github.com/AngularClass/angular2-webpack-starter as a guide.

I posted my progress so far to https://github.com/mraible/jhipster-ng2-testing. Use npm test to run it, but it doesn't seem that webpack compiles and no tests are run.

mraible commented 7 years ago

I made some progress and got webpack to run when running "npm test". However, now I get a strange error:

WARNING in ./src/test/javascript/spec/helloWorld.component.spec.ts
Module parse failed: /Users/mraible/dev/jhipster-ng2-testing/src/test/javascript/spec/helloWorld.component.spec.ts Unexpected token (15:21)
You may need an appropriate loader to handle this file type.
|
|     it('should say hello world', () => {
|         const fixture: ComponentFixture<HelloWorldComponent> = TestBed.createComponent(HelloWorldComponent);
|         fixture.detectChanges();
|         expect(fixture.nativeElement.innerHTML.trim()).toEqual('Hello world!');
 @ ./src/test/javascript/spec \.spec\.ts
 @ ./src/test/javascript/spec-bundle.js

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
46:15 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
58:15 Critical dependency: the request of a dependency is an expression
webpack: bundle is now VALID.
02 12 2016 20:54:16.331:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
02 12 2016 20:54:16.333:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
02 12 2016 20:54:16.400:INFO [launcher]: Starting browser PhantomJS
02 12 2016 20:54:16.950:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#pXOISkdNJRtDzfNnAAAA with id 3571477

Here's my changes: https://github.com/mraible/jhipster-ng2-testing/commit/a2491f9f533a21a9d7b65eb3ccf0ad590cb5fc86

deepu105 commented 7 years ago

@mraible did you take a look at https://github.com/mgechev/angular-seed they seem to have karma but with systemJs

sendilkumarn commented 7 years ago

@mraible in ng-bootstrap, this was the reason why there was systemJs loader to load the karma ( not totally sure ).

this helps in loading the library. Spent a lot of time in this 😑

deepu105 commented 7 years ago

@mraible did you have any luck with Karma tests?

mraible commented 7 years ago

Nope. Haven't had a chance to look at it since last week. Doesn't look like I'll have time this week either. Maybe next week.

anunnakian commented 7 years ago

I'll work on it this week-end, I could run a simple karma tests without modules import.

sendilkumarn commented 7 years ago

The problem raises when we import modules only

mraible commented 7 years ago

Figured it out after migrating another project to webpack 2 last week. I'll create a PR for the infrastructure.

$ yarn test
yarn test v0.18.1
$ karma start src/test/javascript/karma.conf.js
keywords if/then/else require v5 option
Hash: e0bdc8cc97632b01d813
Version: webpack 2.2.0-rc.2
Time: 36ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
Hash: 95bcd67125e89b8a7004
Version: webpack 2.2.0-rc.2
Time: 5485ms
        Asset     Size  Chunks                    Chunk Names
spec/entry.ts  3.05 MB       0  [emitted]  [big]  spec/entry.ts
chunk    {0} spec/entry.ts (spec/entry.ts) 2.57 MB [entry] [rendered]
  [144] ./~/@angular/core/bundles/core-testing.umd.js 45 kB {0} [built]
  [366] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js 4.63 kB {0} [built]
  [367] ./~/core-js/index.js 639 bytes {0} [built]
  [368] ./~/rxjs/Rx.js 9.58 kB {0} [built]
  [369] ./~/zone.js/dist/async-test.js 3.59 kB {0} [built]
  [370] ./~/zone.js/dist/fake-async-test.js 11.4 kB {0} [built]
  [371] ./~/zone.js/dist/jasmine-patch.js 6.36 kB {0} [built]
  [372] ./~/zone.js/dist/long-stack-trace-zone.js 5.49 kB {0} [built]
  [373] ./~/zone.js/dist/proxy.js 5.61 kB {0} [built]
  [374] ./~/zone.js/dist/sync-test.js 1.42 kB {0} [built]
  [375] ./~/zone.js/dist/zone.js 67 kB {0} [built]
  [376] ./src/test/javascript/spec \.spec 207 bytes {0} [built]
  [784] ./~/rxjs/add/operator/toPromise.js 223 bytes {0} [built]
  [785] ./~/rxjs/add/operator/window.js 205 bytes {0} [built]
  [940] ./src/test/javascript/spec/entry.ts 728 bytes {0} [built]
     + 926 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  spec/entry.ts (3.05 MB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  spec/entry.ts (3.05 MB)
      spec/entry.ts

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
webpack: bundle is now VALID.
23 12 2016 16:03:14.894:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
23 12 2016 16:03:14.897:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
23 12 2016 16:03:14.907:INFO [launcher]: Starting browser PhantomJS
23 12 2016 16:03:15.815:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#XIl2yG80-eBB4g36AAAA with id 74626926
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.002 secs / 0.002 secs)

=============================== Coverage summary ===============================
Statements   : 100% ( 0/0 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 0/0 )
================================================================================
✨  Done in 8.33s.

jdubois commented 7 years ago

I just tested everything here, and it looks like we have a very good progress.

I'm seeing 3 main issues:

Firefox still hangs with Protractor. I would like to use Chrome by default instead -> I think we stick to Firefox as it's easier to get it installed on a CI server, but we can't stay with something broken for so long. @pascalgrimaud you're the boss here, are you OK to move to Chrome?
I'm having 7 test errors with Protractor. I'm going to have a look at this, but of course all tests should pass!
With Karma I have Cannot find namespace 'webdriver'. errors, not sure if that's important or not, but of course those tests should all be green without any errors

pascalgrimaud commented 7 years ago

@jdubois : yes, I'm ok! I'm pretty sure it's possible with Travis

jdubois commented 7 years ago

Thanks @pascalgrimaud ! I'm also doing this for AngularJS, so we are consistent in our builds.

jdubois commented 7 years ago

Migration to Chrome done: https://github.com/jhipster/generator-jhipster/commit/4976da7060c3cfe5fbcd8132dc81f70d50fd8131

jdubois commented 7 years ago

Concerning my 3 issues:

Migration to Chrome is done
Protractor issues are because it doesn't work with i18n yet -> not really a bug, that's a use case that hasn't been coded yet. I'll have a look at it.
Karma issue is fixed with https://github.com/jhipster/generator-jhipster/issues/4768#issuecomment-269471299

This is looking good!

pascalgrimaud commented 7 years ago

@jdubois : I didn't expect that it would work immediatly, without doing anything to our Travis build!

See the Travis logs:

[Wed Dec 28 23:22:44 AEDT 2016] Connected to application. Start protractor tests.
[23:22:46] Using gulpfile ~/app/gulpfile.js
[23:22:46] Starting 'protractor'...
[23:22:47] I/direct - Using ChromeDriver directly...
[23:22:47] I/launcher - Running 1 instances of WebDriver
(...)
76 specs, 0 failures
Finished in 192.192 seconds
[23:26:00] I/launcher - 0 instance(s) of WebDriver still running
[23:26:00] I/launcher - chrome #01 passed
[23:26:00] Finished 'protractor' after 3.23 min
[23:26:00] Starting 'itest'...
[23:26:00] Finished 'itest' after 14 μs

jdubois commented 7 years ago

@pascalgrimaud magic :-)

mraible commented 7 years ago

Just for some background, the reason we switched to Firefox is documented in v2.0 of the JHipster book: https://gist.github.com/mraible/0edc33c496dc55632bd9826ec9766789

"I discovered that logout wasn’t happening consistently for Chrome and Safari, causing some tests to fail. Finally, I switched back to Firefox and was able to get consistent results."

If logout is happening consistently for Chrome, 👍 for this change.

However, I do like to use Firefox for Protractor because I develop in Chrome and having a Firefox window popup doesn't yank my browser away from me.

jdubois commented 7 years ago

@mraible well, I have no issue with logout in Chrome, so I guess it's solved :-)

I have the same issue as you, it's really annoying to run the integration tests on my laptop as I can't use my browser anymore during that time.

But I don't have a better solution: this has been failing on Firefox for a long, long time, and we can't release JHipster 4.0 with something broken.

deepu105 commented 7 years ago

@jhipster/developers guys is anybody working on finishing the remaining karma tests?

pascalgrimaud commented 7 years ago

@deepu105 : maybe @mohamed2a ? Related to what he tried here https://github.com/jhipster/generator-jhipster/pull/4795

mraible commented 7 years ago

@deepu105 Not me, too many other things to work on right now. Maybe the week of Jan 16.

anunnakian commented 7 years ago

@deepu105 I will work on fixing the karma test during the next week

ramzimaalej commented 7 years ago

@mohamed2a can we pair on that ?

anunnakian commented 7 years ago

Okey @ramzimaalej

jdubois commented 7 years ago

@mohamed2a @ramzimaalej I'm currently testing everything, we don't have a lot of Karma tests, and no tests at all on entities -> will you do a PR soon on those? Otherwise this won't be in JHipster 4

deepu105 commented 7 years ago

Im working on karma test for entities. will commit today

Thanks & Regards, Deepu

On Sun, Jan 29, 2017 at 1:57 PM, Julien Dubois notifications@github.com wrote:

@mohamed2a https://github.com/mohamed2a @ramzimaalej https://github.com/ramzimaalej I'm currently testing everything, we don't have a lot of Karma tests, and no tests at all on entities -> will you do a PR soon on those? Otherwise this won't be in JHipster 4

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/4302#issuecomment-275912162, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF3Hg4LX3M945EAX5NMFFRZSyWq7iks5rXIy_gaJpZM4KSSXP .

deepu105 commented 7 years ago

@mohamed2a @ramzimaalej are you guys planning to write any more karma tests? else lets close this

jdubois commented 7 years ago

@deepu105 I thought you were going to push something here? Otherwise let's close this. It's too late to add those tests in JHipster 4, they should be very complex, and we don't have time for this.

jdubois commented 7 years ago

Oh @deepu105 I didn't see you pushed some entities tests. That's already great for me, let's close this. @mohamed2a @ramzimaalej you can still add more later, this is just for the initial JHipster 4 release.

And let's not make a ticket to "add more tests", that's always a good idea to add more tests, so that ticket would never be closed.

deepu105 commented 7 years ago

I already pushed entity tests. But didnt tag them here :)

anunnakian commented 7 years ago

I will add more karma tests today

jdubois commented 7 years ago

Great 👍

jhipster / generator-jhipster

Angular 2 Protractor & Karma migration #4302