WIP to make it compatible with ts-jest 23.10 and remove regexp replacers

[huafu]

DO NOT MERGE, this is a WIP which I do not have time to continue just right now

see #195

[thymikee]

Awesome, waiting for your availability then :)

[wtho]

So to push this PR a bit

(and maybe start helping out)

As I see what is still missing, it is just a single transformer has to look for the @Component-Decorator and checks if there are

• styles
• styleUrls
• template
• templateUrl

Then the transformer has to

• Replace the styles with an empty string
• Replace styleUrls with an empty array
• Add the inline template somehow (did this work in the old processor?)
• Add the HTML file as require statement to the node

I wonder if adding the HTML as require is sufficient to make ts-jest load the html, or if it has to be added to the context in some other way, any ideas?

[ahnpnl]

inline template works in the current preprocessor. Regarding to adding the HTML file I have no idea because the current preprocessor doesn't do that as far as I'm concerned.

[wtho]

Ok, as @huafu stated in the comments of the PR's preprocessor.js, the inline html part is handled by ts-jest.

As far as I understand it, the current preprocessor checks for templateUrl and replaces it with an inlined template: require(...)-statement:

jest-preset-angular/preprocessor.js

Line 2 in abfb339

const TEMPLATE_URL_REGEX = /templateUrl\s*:\s*('|"|`)(\.\/){0,}(.*)('|"|`)/g;

jest-preset-angular/preprocessor.js

Line 11 in abfb339

.replace(TEMPLATE_URL_REGEX, 'template: require($1./$3$4)')

I will have a try to implement it as an AST transformer.

[wtho]

I am done with the transformer, but need some instructions:

• Should I open a new PR, or do you, @huafu, want to include my commit in yours? Probably depends on how much time you currently have. I forked from your branch and added one commit so far.
• These changes will be a breaking change (transitive of ts-jest's breaking change, suppose users of this library modified the ts-jest config) as ts-jest changed. I think v7 should be published with this change, what do you suggest? Note: I have not updated the Angular packages in the example app to v7, I feel like this should be done in a different PR.
• I wrote the transformer in TS, which was easier for me. I added a build step to compile the TypeScript, and called in the prepare-hook. I hope this is ok.
• I cannot make the example app pass the tests, as it is inside the preset repo, and as it references the preset using .., the module loader cannot find the angular/zone.js packages referenced inside jest-preset-angular/index.js, as they are not dependencies of jest-preset-angular, but outside the example app's folder. The only way I see to make this work is to map all these packages in tsconfig.json explicitly to the subproject's dependencies, but this will result in something other users cannot simply copy & paste (and I am not sure if i works, have not tried it).
  In my eyes the real issue here is that the inner app references the published version in example/package.json (and its dependencies) on npm instead of the version in the repo, but we have a breaking change in the dependency ts-jest now and it cannot work with the old dependency that way.
  It works using "jest-preset-angular": "github:wtho/jest-preset-angular#ts-jest-23-10", (and building it, which will happen for us on publish via prepare), so once this will be merged and published, it will work with referencing the latest version of the package.

Implementation Details:

• The transformer looks for any Class Decorator (not just the ones named Component), as some folks might do import { Component as CustomDecorator } from '@core/angular'
• It checks inside all Class Decorators for assignments to
  • templateUrl with a string literal as value, and changes it to template: require(<same string literal>)
  • styleUrls and sets the initializer to an emtpy array
  • styles and sets the initializer to an emtpy array
• If there would be another Decorator with one of these properties, they would also be transformed (have not heard why this should be the case)
• If the argument is constructed outside the Decorator, it will not be transformed, example:

  const componentArg = { templateUrl: './some-angular.component.ts' };
  
  @Component(componentArg)
  class SomeAngularClass { }

[ahnpnl]

hi @wtho, thank you very much for your effort. In my opinion, I think:

• Fork the current work of @huafu and create a new PR and refer this PR from it seems to be a good way to do.
• Indeed the changes will be breaking because of ts-jest. Since Angular already released v7, we can release your changes in v7 of this preset as well. Would you please add this change to CHANGELOG ?
• I think it's ok to leave a .ts file and compile it into .js.
• Indeed the example app refers to npm package. I think the ideal situation we can have is running pre-build script before running the all the tests inside this repo. But I think it should be in another PR. We can run some tests against your branch to make sure the changes are fine before merging into master.