Lightweightify

[lathonez]

Main change is to bunde unit tests in the same way that Ionic bundles application code. This has the following benefits:

• Remove System
• Remove test-main.js
• Remove need for having a main method in every spec file
• Remove ionic-angular.js workaround
• Add sourcemaps
• Coverage remapping
• External modules automatically included in testing

See also:

• Karma tests fail when testing implementation with @Page annotation #58
• Why do we need to wrap tests in main() function? #65

[lathonez]

POC is here: e8f946c

Only problem I can see is the coverage data would be gone:

-----------------|----------|----------|----------|----------|----------------|
File             |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-----------------|----------|----------|----------|----------|----------------|
 test/           |    40.84 |    22.68 |    31.51 |    41.93 |                |
  test.bundle.js |    40.84 |    22.68 |    31.51 |    41.93 |... 64576,64577 |
-----------------|----------|----------|----------|----------|----------------|
All files        |    40.84 |    22.68 |    31.51 |    41.93 |                |
-----------------|----------|----------|----------|----------|----------------|

Which may be a non-starter.

TODO:

• get rid of typing errors
• remove all other main methods so we get all tests running
• look into coverage

[lathonez]

https://github.com/SitePen/remap-istanbul#gulp-plugin

Coverage is the most important thing, the other stuff should be trivial

[lathonez]

5781582 - remap istanbul plugged in but not configured properly

[lathonez]

The remapping isn't trivial. remap-istanbul works well and remaps everything in test-bundle.js according to test-bundle.js.map.

The problem is that the map (test-bundle.js.map) produced by tsify contains all referenced sources (node_modules) for debug. Thus the coverage data produced by remap-istanbul is far too comprehensive to be useful.

I've hacked remap-istanbul's remap.js to ignore node_modules and the output looks far more usable, however this is a terrible solution..

Ideally we would be able to produce a map / bundle that doesn't include the external modules, however then we'd be back to having to use module loaders etc. There doesn't seem to be any options to tsify to ignore certain files for mapping, and if we did so we'd lose debug data (no references to external files).

I think the best solution at this point is to write a processor to remove external sources from remap-istanbul's JSON output. Arguably a PR to remap-istanbul to ignore files would also be a way to go, however I think I'd be hesitant to accept such a PR as a maintainer of that project, the problem really doesn't have anything to do with remap-istanbul IMO.

So the workflow will look like:

1. bundle specs and create mappings
2. test and generate coverage JSON according to bundle
3. remap coverage JSON
4. remove external files (and specs, and typings) from remapped coverage
5. create coverage report (using any standard tool that can read coverage JSON)

[lathonez]

d16b4b2 : separate reporting phase, needed to be able to start playing with the remapped JSON

[lathonez]

91be221 : pruning was easy, just remove keys from the JSON object. Includes JSHINT:

-------------------------------|----------|----------|----------|----------|----------------|
File                           |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-------------------------------|----------|----------|----------|----------|----------------|
 app/                          |      100 |      100 |       80 |      100 |                |
  app.ts                       |      100 |      100 |       80 |      100 |                |
 app/components/clickerButton/ |    88.89 |      100 |       50 |     87.5 |                |
  clickerButton.ts             |    88.89 |      100 |       50 |     87.5 |             19 |
 app/components/clickerForm/   |       55 |        0 |    33.33 |    52.63 |                |
  clickerForm.ts               |       55 |        0 |    33.33 |    52.63 |... 38,41,44,46 |
 app/models/                   |    57.14 |        0 |    18.18 |    53.85 |                |
  click.ts                     |       60 |        0 |       25 |    55.56 |     9,10,14,18 |
  clicker.ts                   |    55.56 |      100 |    14.29 |    52.94 |... 23,27,31,35 |
 app/pages/clickerList/        |       75 |      100 |       50 |    72.73 |                |
  clickerList.ts               |       75 |      100 |       50 |    72.73 |       21,22,23 |
 app/pages/page2/              |      100 |      100 |       50 |      100 |                |
  page2.ts                     |      100 |      100 |       50 |      100 |                |
 app/services/                 |    28.92 |        0 |     7.41 |    30.14 |                |
  clickers.ts                  |    27.54 |        0 |     4.35 |    29.51 |... 115,117,121 |
  utils.ts                     |    35.71 |      100 |       25 |    33.33 |... 19,20,21,23 |
 test/                         |    44.44 |        0 |       50 |     37.5 |                |
  testUtils.ts                 |    44.44 |        0 |       50 |     37.5 |   7,8,10,11,12 |
-------------------------------|----------|----------|----------|----------|----------------|
All files                      |    51.89 |        0 |    24.07 |     51.5 |                |
-------------------------------|----------|----------|----------|----------|----------------|

Still need to put everything together and actually see what it looks like on codecov but yeah promising

[lathonez]

TODO:

• remove 404s for HTML
• remove re(main)ing main methods
• html output
• test with codecov
• fix travis vs chrome battle
• get app.stub.ts in the bundle somehow so we can reinstate app.spec.ts. This isn't a show stopper
• refactor gulpfile away from ng2-seed and back to one gulp task per function, remove unnecessary crap. lower-case-naming seems to be the done thing
• document dependencies and remove unnecessary (inc typings)
• test external modules
• changelog

[lathonez]

Maybe we just need an index.html kind of thing for the tests? Or just some stub html file that is sourced by karma that contains <ion-app></ion-app>

EDIT: no.

[lathonez]

woop: https://codecov.io/github/lathonez/clicker/app/pages/clickerList/clickerList.ts?ref=56f9c98c0ae5b36ba53d5f6c11de0196492db61a

[lathonez]

440ac08