initial karma webpack #131

cescoferraro · 2016-08-13T22:07:11Z

karma is running with webpack. But some test dont pass.
I get Error: No provider for TestComponentBuilder!
At this moment this PR is just to share code. It's not ready at all.

lathonez · 2016-08-14T01:40:09Z

nice I will take a look today.

lathonez · 2016-08-14T02:29:23Z

I don't follow why you've added TestComponentBuilder to ClickerButton.spec.ts.

TestComponentBuilder is used in asyncCallbackFactory here. It isn't necessary anywhere else.

Have a look at this post for some background.

Also when I run npm test (ditto travis), I get lots of:

ERROR in Entry module not found: Error: Cannot resolve module 'awesome-typescript' in /home/lathonez/code/clicker

have you installed awesome-typescript globally?

Note that choosing a typescript loader is exactly the kind of thing that would potentially need to change if Ionic went another way with their Webpack build.

cescoferraro · 2016-08-14T09:44:34Z

I was just messing with the TestComponentBuilder thing around to see where it breaks. On my machine 17/29 tests fail beacause of an issue with TestComponentBuilder not being injected to the tests.

I forgot to --save-dev the awesome-typescript. Will commit again to see what travis says with the proper dependencies. I think there are only two options of typescript loaders for webpack. The stardard one the has much less features than the awesome one. Its easy to change it later anyway.

But as far as I tested, we get into an this rxjs issue too later.

cescoferraro · 2016-08-14T10:38:25Z

I think now you can see where both the rxjs and the TestComponentBuilder issues

lathonez · 2016-08-14T10:57:58Z

Looks like there's an issue with typescript:

s-panferov/awesome-typescript-loader#179

cescoferraro · 2016-08-15T06:34:21Z

@lathonez Now there is only the TestComponentBuilder issue.

lathonez · 2016-08-17T12:52:04Z

@cescoferraro sorry I'm really busy with work this week. I'll try my best to take a look asap.

lathonez · 2016-08-21T09:52:54Z

I think the no provider for TestComponentBuilder is a symptom rather than a cause.

When I make the following changes:

diff --git a/test/diExports.ts b/test/diExports.ts
index 262aa89..fce1cff 100644
--- a/test/diExports.ts
+++ b/test/diExports.ts
@@ -8,6 +8,7 @@ import { Utils }                                      from '../app/services/util
 export { TestUtils }                                  from './testUtils';

 export let providers: Array<any> = [
+  TestComponentBuilder,
   disableDeprecatedForms(),
   provideForms(),
   Form,

Then I get the following:

PhantomJS 2.1.1 (Linux 0.0.0) ClickerButton initialises FAILED
    Error: No provider for Compiler! in app/components/clickerButton/clickerButton.spec.ts (line 6200)

lathonez · 2016-08-21T09:56:33Z

And adding compiler:

PhantomJS 2.1.1 (Linux 0.0.0) ClickerButton initialises FAILED
    Error: Runtime compiler is not loaded. Tried to compile ClickerButton in app/components/clickerButton/clickerButton.spec.ts (line 13030)

So yeah, I think it was/is blowing up on TestComponentBuilder because that's the first thing that gets touched.

lathonez · 2016-08-21T10:00:46Z

http://stackoverflow.com/questions/38470128/error-no-provider-for-compiler-di-exception-angular-2-testing

It could be webpack not importing from app.ts

lathonez · 2016-08-21T10:11:09Z

yup.

So:

See the SO above
The setup relies on setBaseTestProviders being called (and setting the base test providers), hence the no provider for TestComponentBuilder. This is done in app.ts, as it should only be done once in the codebase (though there is a resetBaseTestProviders function). I'm unsure why webpack has broken this, it could be something as simple as the order of the imports / tests running?

The following diff will get you past the no provider for TestComponentBuilder error:

diff --git a/test/diExports.ts b/test/diExports.ts
index 262aa89..2b8c328 100644
--- a/test/diExports.ts
+++ b/test/diExports.ts
@@ -1,12 +1,17 @@
+import {
+  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS, TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+}                               from '@angular/platform-browser-dynamic/testing';
 import { provide, Type }                              from '@angular/core';
 import { ComponentFixture, TestComponentBuilder }     from '@angular/compiler/testing';
-import { inject, async }                              from '@angular/core/testing';
+import { inject, async, setBaseTestProviders }                              from '@angular/core/testing';
 import { disableDeprecatedForms, provideForms, FormControl } from '@angular/forms';
 import { App, Config, Form, NavController, Platform } from 'ionic-angular';
 import { ConfigMock, NavMock }                        from './mocks';
 import { Utils }                                      from '../app/services/utils';
 export { TestUtils }                                  from './testUtils';

+setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+
 export let providers: Array<any> = [
   disableDeprecatedForms(),
   provideForms(),

lathonez · 2016-08-25T01:51:06Z

@cescoferraro can you rebase?

lathonez · 2016-08-25T11:59:46Z

From the build it looks like you've still got the same problem that I mention here.

If you apply the diff in that comment to test/diExports.ts (and revert any changes you've made with regard to TestComponentBuilder, you should get by it.

cescoferraro · 2016-08-25T14:38:28Z

test/diExports.ts

 import { disableDeprecatedForms, provideForms, FormControl } from '@angular/forms';
 import { App, Config, Form, NavController, Platform } from 'ionic-angular';
 import { ConfigMock, NavMock }                        from './mocks';
 import { Utils }                                      from '../app/services/utils';
 export { TestUtils }                                  from './testUtils';

+// Your patch suggest I use setBaseTestProviders here?


@lathonez your patch suggests I use setBaseTestProviders here instead of app.spec.ts.
I get this error

Failed: addProviders can't be called after the injector has been already cr
eated for this test. This is most likely because you've already used the injector t
o inject a beforeEach or the current it function.
Error: addProviders can't be called after the injector has been already cre
ated for this test. This is most likely because you've already used the injector to
inject a beforeEach or the current it function.

I didn't get that issue, but you can always use resetBaseTestProviders
before the set.

On 26 Aug 2016 00:39, "cesco" notifications@github.com wrote:

In test/diExports.ts
#131 (comment):

import { disableDeprecatedForms, provideForms, FormControl } from '@angular/forms';
import { App, Config, Form, NavController, Platform } from 'ionic-angular';
import { ConfigMock, NavMock } from './mocks';
import { Utils } from '../app/services/utils';
export { TestUtils } from './testUtils';

+// Your patch suggest I use setBaseTestProviders here?

@lathonez https://github.com/lathonez your patch suggests I use
setBaseTestProviders here instead of app.spec.ts.
I get this error

Failed: addProviders can't be called after the injector has been already cr
eated for this test. This is most likely because you've already used the
injector t
o inject a beforeEach or the current it function.

Error: addProviders can't be called after the injector has been already cre
ated for this test. This is most likely because you've already used the
injector to
inject a beforeEach or the current it function.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/lathonez/clicker/pull/131/files/6020f8148377bc7b8877350b074679f61b73b9ab#r76255563,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AG5tSJw592b9xOQe4HWonZj4GkGTkzvZks5qjajlgaJpZM4JjxWv
.

cescoferraro · 2016-08-26T00:36:55Z

Travis is green now. Errors vanished after I commented out clickers.spec.ts and clickerButton.spec.ts

clickers.spec.ts => this.store.let is not a function ...
clickerButton.spec.ts => addProviders can't be called after the injector .....

cescoferraro · 2016-08-26T00:42:38Z

app/components/clickerButton/clickerButton.spec.ts

-//     testSpec.instance['clicker'].getCount = function (): number { return 10; };
-//   });
+  let beforeEachFn: Function = ((testSpec) => {
+    // addProviders([{ provide: TestComponentBuilder, useClass: null }]);


Commenting this line make the error go away

cescoferraro · 2016-08-26T00:44:12Z

Still got the this.store.let is not a functionon the new ngrx service test

lathonez · 2016-08-26T02:26:57Z

Nice! We'll definitely use this as a base whenever Ionic switch over to Webpack.

The only thing missing afaics is a coverage report. Any ideas on getting the report back?

EDIT: when this is done I'll branch off master and merge this in.

cescoferraro · 2016-08-31T18:56:40Z

Hans @hansl 15:50
there’s a bug ight now between Awesome-Typescript-Loader and Typescript 2.0.2
if you create a new project you’ll get 2.0.2. npm install typescript@2.0.0 (and potentially save it in your pacakge.json) and you’ll be fine

@lathonez Angular itself is using awesome-typescript-loader. I find it hard for the ionic team to use anything else.I will push the coverage report feauture. I got it to work, but the numbers are really low. Will try to take a look again today.

lathonez · 2016-09-01T08:20:07Z

ionic-team/ionic-conference-app#168

We are going to leverage the Angular-CLI's set-up for karma and protractor as well.

Which would mean to end of this project altogether (as a reference point for a unit testing framework, anyway). Which is a good thing for the community.

lathonez · 2016-09-29T08:49:56Z

rc0 is out, they've gone with rollup not webpack.

Please reopen if I've missed something.

initial karma webpack

5220cef

cescoferraro added 3 commits August 14, 2016 12:10

Awesome Typescript dependencie + webpack gulp task

770edce

gulp-util + mistakes

60a19a0

blank line breaks linting

7615fcf

cescoferraro and others added 2 commits August 14, 2016 12:39

single-run issue

2547377

test

6dccfdf

tja4472 and others added 2 commits August 14, 2016 15:57

ngrx page added.

c0ed6f0

downgrade awesome-typescript

c284d7d

chron0 and others added 4 commits August 17, 2016 08:38

Adding screenshots to e2e tests

dd1242d

Tidying up, readme, CL

7156927

Merge branch 'chron0-master'

239e718

CL [ci skip]

7fa4a20

tja4472 added 6 commits August 19, 2016 12:18

ngrx stage 1.

445953c

ngrx - no storage.

2bb6549

ngrx with sqlstorage.

ac85b5c

ngrx references added.

f287790

Tidy.

d5a6486

Merge branch 'ngrx' of C:\VSCode\Ionic2\github\clicker into ngrx

66efea7

Linting

0b09b98

lathonez and others added 3 commits August 24, 2016 23:34

CL [ci skip]

8fd86e5

readme [ci skip]

a3a5d12

single ts modules + TestComponentBuilder + debug

13cd0b9

cescoferraro added 12 commits August 24, 2016 23:29

correct webpack.config.js

56fa24a

initial karma webpack

696569c

Awesome Typescript dependencie + webpack gulp task

26b261a

gulp-util + mistakes

5b2f295

blank line breaks linting

deb8166

single-run issue

daff423

downgrade awesome-typescript

17b22cf

single ts modules + TestComponentBuilder + debug

eb8d970

correct webpack.config.js

4a85dce

rebased

2fd4c44

rebased

95910fa

linting issues

6020f81

cescoferraro reviewed Aug 25, 2016
View reviewed changes

cescoferraro added 2 commits August 25, 2016 14:56

addProviders can't be called

808bc23

isolate failing tests

f1a9253

fix addProviders can't be called

cbfb88d

cescoferraro reviewed Aug 26, 2016
View reviewed changes

lathonez closed this Sep 29, 2016

lathonez mentioned this pull request Oct 4, 2016

Update project to Ionic2-rc0 #148

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

initial karma webpack #131

initial karma webpack #131

cescoferraro commented Aug 13, 2016

lathonez commented Aug 14, 2016

lathonez commented Aug 14, 2016

cescoferraro commented Aug 14, 2016

cescoferraro commented Aug 14, 2016

lathonez commented Aug 14, 2016

cescoferraro commented Aug 15, 2016

lathonez commented Aug 17, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 25, 2016

lathonez commented Aug 25, 2016

cescoferraro Aug 25, 2016

lathonez Aug 25, 2016

cescoferraro commented Aug 26, 2016

cescoferraro Aug 26, 2016

cescoferraro commented Aug 26, 2016

lathonez commented Aug 26, 2016 •

edited

Loading

cescoferraro commented Aug 31, 2016 •

edited

Loading

lathonez commented Sep 1, 2016

lathonez commented Sep 29, 2016

initial karma webpack #131

initial karma webpack #131

Conversation

cescoferraro commented Aug 13, 2016

lathonez commented Aug 14, 2016

lathonez commented Aug 14, 2016

cescoferraro commented Aug 14, 2016

cescoferraro commented Aug 14, 2016

lathonez commented Aug 14, 2016

cescoferraro commented Aug 15, 2016

lathonez commented Aug 17, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 21, 2016

lathonez commented Aug 25, 2016

lathonez commented Aug 25, 2016

cescoferraro Aug 25, 2016

Choose a reason for hiding this comment

lathonez Aug 25, 2016

Choose a reason for hiding this comment

cescoferraro commented Aug 26, 2016

cescoferraro Aug 26, 2016

Choose a reason for hiding this comment

cescoferraro commented Aug 26, 2016

lathonez commented Aug 26, 2016 • edited Loading

cescoferraro commented Aug 31, 2016 • edited Loading

lathonez commented Sep 1, 2016

lathonez commented Sep 29, 2016

lathonez commented Aug 26, 2016 •

edited

Loading

cescoferraro commented Aug 31, 2016 •

edited

Loading