jest-preset-angular 7.0.0 → 8.0.0

package/.circleci/config.yml

@@ -43,19 +43,21 @@ jobs:
     steps:
       - attach_workspace:
           at: .
-      - restore_cache:
-          keys:
-            - yarn-cache-example-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - yarn-cache-example-{{ .Branch }}-
+      # disabling cache here as it created issues with the preset in the root
+      # not being used, as older version in cache was available
+      #- restore_cache:
+      #    keys:
+      #      - yarn-cache-example-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      #      - yarn-cache-example-{{ .Branch }}-
       - run:
           name: Install Example Dependencies
           command: |
             cd example
             yarn install --frozen-lockfile
-      - save_cache:
-          key: yarn-cache-example-{{ .Branch }}-{{ checksum "yarn.lock" }}
-          paths:
-            - ./example/node_modules
+      #- save_cache:
+      #    key: yarn-cache-example-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      #    paths:
+      #      - ./example/node_modules
       - run:
           name: Test Example
           command: |

package/.vscode/launch.json

@@ -0,0 +1,36 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach to 9226",
+      "port": 9226,
+    },
+    {
+      "type": "node",
+      "name": "vscode-jest-tests",
+      "request": "launch",
+      "args": [
+        "--runInBand"
+      ],
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "program": "${workspaceFolder}/index.js",
+      "preLaunchTask": "tsc: build - tsconfig.json",
+      "outFiles": [
+        "${workspaceFolder}/./**/*.js"
+      ]
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 ## Changelog (master)
 
+### v8.0.0
+
+#### Features
+* (**BREAKING**): Refine ast-transformer behavior: only transform `styles`-assignments inside @Component ([#261](https://github.com/thymikee/jest-preset-angular/pull/261)) and TypeScript v2.9 `createStringLiteral` is polyfilled if an older version is used ([#272](https://github.com/thymikee/jest-preset-angular/issues/272)).
+* (**BREAKING**): Restructure project with `src` and `build` folder ([#307](https://github.com/thymikee/jest-preset-angular/pull/307)).
+* (**BREAKING**): Support `tsconfig.spec.json` in root folder by default ([#309](https://github.com/thymikee/jest-preset-angular/pull/309)).
+* (**BREAKING**): Enable AngularNoAngularNoNgAttributesSnapshotSerializer (created in [#97](https://github.com/thymikee/jest-preset-angular/pull/97)) by default ([#318](https://github.com/thymikee/jest-preset-angular/pull/318)).
+* Remove `core-js` dependency by using internal, minimal reflect-metadata ([#315](https://github.com/thymikee/jest-preset-angular/pull/315)).
+
+#### Chore && Maintenance
+* Update example app to match Angular 8 Boilerplate ([#311](https://github.com/thymikee/jest-preset-angular/pull/311)).
+* Update example app to not use karma, extract jest config, fix paths ([#316](https://github.com/thymikee/jest-preset-angular/pull/316)).
+* Update jsdom to current version 15 ([#318](https://github.com/thymikee/jest-preset-angular/pull/318)).
+
+#### Migration Guide
+* If the `astTransformers` are referenced in a custom `jest` config, `[ 'jest-preset-angular/build/InlineFilesTransformer', 'jest-preset-angular/build/StripStylesTransformer']` have to be set instead.
+* Serializers, transformers and `setupJest` have to be referenced from the `jest-preset-angular/build/`-folder in a custom config. Existing references have to be aligned.
+* If your `tsconfig.spec.json` is located in `src`, move it to your root folder and adjust the referenced files and paths inside, or align your jest configuration as discussed in the [README.md](https://github.com/thymikee/jest-preset-angular/blob/master/README.md#custom-tsconfig).
+* In an Angular 8 project or higher, `core-js` should no longer be a dependency declared in `package.json`, unless it's imported manually in the code.
+
+### v7.1.0
+
+#### Features
+* Added `AngularNoNgAttributesSnapshotSerializer`. Using this serializer makes snapshots clearer and more human-readable. You have to apply this serializer manually by redefining `snapshotSerializers` `jest` option.
+
+#### Chore && Maintenance
+* Fixed a CI cache issue in the example app, which would not always use the current version of the preset in the test runs.
+
 ### v7.0.0
 
 #### Features
@@ -19,10 +47,10 @@
 #### Migration Guide
 
 * If `global` and `transform` are not set in your configuration in `jest.config.json`, `jest.config.js` or `package.json`, you are done.
-* If the `global` value of the configuration was overriden, adjust
+* If the `global` value of the configuration was overridden, adjust
   * The option `"__TRANSFORM_HTML__": true` is not required anymore. Instead the `"stringifyContentPathRegex": "\\.html$"` should be used inside the `ts-jest`-configuration.
   * Change the assignment identifier from `tsConfigFile` to `tsConfig`.
-  * Add the `astTransformer: [ require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')]` so Jest can work with `templateUrl`-assignments in Component decorators.
+  * Add the `astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')]` so Jest can work with `templateUrl`-assignments in Component decorators.
 * If `transform` was overridden, remove the entry pointing at `preprocessor.js` and add `"^.+\\.(ts|js|html)$": "ts-jest"` to the `transform`-object.
 * If in doubt, check the configuration example in `jest-preset.json`.
 
@@ -48,7 +76,7 @@
 
 ### v5.2.2
 
-* Fix: specify angular modules as peerDependancies ([#141](https://github.com/thymikee/jest-preset-angular/pull/141))
+* Fix: specify angular modules as peerDependencies ([#141](https://github.com/thymikee/jest-preset-angular/pull/141))
 * Fix: update `STYLE_URLS_REGEX` to not break on multiple new lines ([#139](https://github.com/thymikee/jest-preset-angular/pull/139))
 * Docs: add more troubleshooting docs ([#129](https://github.com/thymikee/jest-preset-angular/pull/129))
 

package/README.md

@@ -1,7 +1,7 @@
 # jest-preset-angular
 
 [![CircleCI Build Status](https://circleci.com/gh/thymikee/jest-preset-angular.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/thymikee/jest-preset-angular)
-[![NPM version](https://img.shields.io/npm/v/jest-preset-angular.svg)](https://www.npmjs.com/package/jest-preset-angular)
+[![NPM version](https://img.shields.io/npm/v/jest-preset-angular.svg)](https://www.npmjs.com/package/jest-preset-angular) [![Greenkeeper badge](https://badges.greenkeeper.io/thymikee/jest-preset-angular.svg)](https://greenkeeper.io/)
 
 A preset of [Jest](http://facebook.github.io/jest) configuration for [Angular](https://angular.io/) projects.
 
@@ -12,10 +12,12 @@ _Note: This preset does not suport AngularJS (1.x). If you want to set up Jest w
 ## Installation
 
 ```bash
-yarn add -D jest jest-preset-angular
+yarn add -D jest jest-preset-angular @types/jest
+# or
+npm install -D jest jest-preset-angular @types/jest
 ```
 
-This will install `jest`, `@types/jest`, `ts-jest`, `jest-zone-patch` as dependencies needed to run with Angular projects.
+This will install `jest`, `@types/jest`, `ts-jest` as dependencies needed to run with Angular projects.
 
 ## Usage
 
@@ -26,7 +28,7 @@ import 'jest-preset-angular';
 import './jestGlobalMocks'; // browser mocks globally available for every test
 ```
 
-_Note: feel free to copy the `jestGlobalMocks.ts` file from the example directory and save it next to the `setupJest.ts` file._
+_Note: feel free to copy the [`jestGlobalMocks.ts`](https://github.com/thymikee/jest-preset-angular/blob/master/example/src/jestGlobalMocks.ts) file from the example directory and save it next to the `setupJest.ts` file._
 
 ...and include this in your `package.json`:
 
@@ -39,15 +41,22 @@ _Note: feel free to copy the `jestGlobalMocks.ts` file from the example director
 }
 ```
 
+### Avoid karma conflicts
+By Angular CLI defaults you'll have a `src/test.ts` file which will be picked up by jest. To circumvent this you can either rename it to `src/karmaTest.ts` or hide it from jest by adding `<rootDir>/src/test.ts` to jest `testPathIgnorePatterns` option.
+
+
 ## Exposed [configuration](https://github.com/thymikee/jest-preset-angular/blob/master/jest-preset.js)
 
 ```js
 module.exports = {
   globals: {
     'ts-jest': {
-      tsConfig: '<rootDir>/src/tsconfig.spec.json',
+      tsConfig: '<rootDir>/tsconfig.spec.json',
       stringifyContentPathRegex: '\\.html$',
-      astTransformers: [require.resolve('./InlineHtmlStripStylesTransformer')],
+      astTransformers: [
+        'jest-preset-angular/build/InlineFilesTransformer',
+        'jest-preset-angular/build/StripStylesTransformer'
+      ],
     },
   },
   transform: {
@@ -63,8 +72,8 @@ module.exports = {
   },
   transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
   snapshotSerializers: [
-    'jest-preset-angular/AngularSnapshotSerializer.js',
-    'jest-preset-angular/HTMLCommentSerializer.js',
+    'jest-preset-angular/build/AngularSnapshotSerializer.js',
+    'jest-preset-angular/build/HTMLCommentSerializer.js',
   ],
 };
 ```
@@ -78,7 +87,8 @@ module.exports = {
 - `"moduleFileExtensions"` – our modules are TypeScript and JavaScript files
 - `"moduleNameMapper"` – if you're using absolute imports here's how to tell Jest where to look for them; uses regex
 - `"setupFilesAfterEnv"` – this is the heart of our config, in this file we'll setup and patch environment within tests are running
-- `"transformIgnorePatterns"` – unfortunately some modules (like @ngrx ) are released as TypeScript files, not pure JavaScript; in such cases we cannot ignore them (all node_modules are ignored by default), so they can be transformed through TS compiler like any other module in our project.
+- `"transformIgnorePatterns"` – unfortunately some modules (like @ngrx) are released as TypeScript files, not pure JavaScript; in such cases we cannot ignore them (all node_modules are ignored by default), so they can be transformed through TS compiler like any other module in our project.
+- `"snapshotSerializers"` - array of serializers which will be applied to snapshot the code. Note: by default angular adds some angular-specific attributes to the code (like `ng-reflect-*`, `ng-version="*"`, `_ngcontent-c*` etc). This package provides serializer to remove such attributes. This makes snapshots cleaner and more human-readable. To remove such specific attributes use `AngularNoNgAttributesSnapshotSerializer` serializer. You need to add `AngularNoNgAttributesSnapshotSerializer` serializer manually (see [`example` app configuration](https://github.com/thymikee/jest-preset-angular/blob/master/example/package.json#L47-L51)).
 
 ## [AST Transformer](https://github.com/thymikee/jest-preset-angular/blob/master/src/InlineHtmlStripStylesTransformer.ts)
 
@@ -86,7 +96,7 @@ Jest doesn't run in browser nor through dev server. It uses jsdom to abstract br
 
 ## Angular testing environment setup
 
-If you look at your `src/test.ts` (or similar bootstrapping test file) file you'll see similarities to [`setupJest.js`](https://github.com/thymikee/jest-preset-angular/blob/master/setupJest.js). What we're doing here is we're adding globals required by Angular. With [jest-zone-patch](https://github.com/thymikee/jest-zone-patch) we also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal.
+If you look at your `src/test.ts` (or similar bootstrapping test file) file you'll see similarities to [`setupJest.js`](https://github.com/thymikee/jest-preset-angular/blob/master/setupJest.js). What we're doing here is we're adding globals required by Angular. With the included [jest-zone-patch](https://github.com/thymikee/jest-preset-angular/tree/master/zone-patch) we also make sure Jest test methods run in Zone context. Then we initialize the Angular testing environment like normal.
 
 ## Snapshot testing
 
@@ -128,7 +138,7 @@ exports[`CalcComponent should snap 1`] = `
 
 You will immediately notice, that your snapshot files contain a lot of white spaces and blank lines. This is not an issue with Jest, rather with Angular. It can be mitigated via Angular compiler by setting `preserveWhitespaces: false`
 
-> By default it's set to `true` Angular 5.x, although it may change to be set to `false` in upcoming versions
+> By default it's set to `true` Angular 7.x, although it may change to be set to `false` in upcoming versions
 > (if that occurs, you can stop reading right here, because your issue has been already solved)
 
 Your `TestBed` setup should look like following:
@@ -222,6 +232,15 @@ describe('Component snapshots', () => {
 
 Problems may arise if you're using custom builds (this preset is tailored for `angular-cli` as firstly priority). Please be advised that every entry in default configuration may be overridden to best suite your app's needs.
 
+### Can't resolve all parameters for SomeClass(?)
+
+This is related to Angular's reflection and also depends on a reflection library, as e. g. included in `core-js`. We use our own minimal reflection that satisfy Angular's current requirements, but in case these change, you can install `core-js` and import the reflection library in your `setupJest.ts`:
+```typescript
+require('core-js/es/reflect');
+require('core-js/proposals/reflect-metadata');
+```
+Note that this might also be related to other issues with the dependency injection and parameter type reflection.
+
 ### @Input() bindings are not reflected into fixture when `ChangeDetectionStrategy.OnPush` is used
 
 This issue is not related to Jest, [it's a known Angular bug](https://github.com/angular/angular/issues/12313)
@@ -241,7 +260,7 @@ beforeEach(async(() => {
 
 ### The animation trigger "transformMenu" has failed
 
-JSDOM missing transform property when using Angular Material, there is a workaround for it.
+The currenly used JSDOM version handles this, but older versions used before v7 of this preset was missing transform property. To patch it for Angular Material, use this workaround.
 
 Add this to your `jestGlobalMocks` file
 
@@ -296,15 +315,19 @@ Override `globals` object in Jest config:
   "jest": {
     "globals": {
       "ts-jest": {
-        "tsConfigFile": "src/tsconfig.custom.json"
-      },
-      "__TRANSFORM_HTML__": true
+        "tsConfig": "<rootDir>/tsconfig.custom.json",
+        "stringifyContentPathRegex": "\\.html$",
+        "astTransformers": [
+          "jest-preset-angular/build/InlineFilesTransformer",
+          "jest-preset-angular/build/StripStylesTransformer"
+        ],
+      }
     }
   }
 }
 ```
 
-If you choose to overide `globals` in order to point at a specific tsconfig, you will need to add `"__TRANSFORM_HTML__": true` to the `globals` section too, otherwise you will get parse errors on any html templates.
+If you choose to overide `globals` in order to point at a specific tsconfig, you will need to add the `astTransformers` to the `globals.ts-jest` section too, otherwise you will get parse errors on any html templates.
 
 ### Unexpected token [import|export|other]
 
@@ -359,7 +382,7 @@ A default `tsconfig.spec.json` after modifying will look like this
 }
 ```
 
-By default Jest doesn't transform `node_modules`, because they should be valid JavaScript files. However, it happens that library authors assume that you'll compile their sources. So you have to tell this to Jest explicitly. Above snippet means that `@ngrx`, `angular2-ui-switch` and `ng-dynamic` will be transforemed, even though they're `node_modules`.
+By default Jest doesn't transform `node_modules`, because they should be valid JavaScript files. However, it happens that library authors assume that you'll compile their sources. So you have to tell this to Jest explicitly. Above snippet means that `@ngrx`, `angular2-ui-switch` and `ng-dynamic` will be transformed, even though they're `node_modules`.
 
 #### Allow JS files in your TS `compilerOptions`
 
@@ -377,7 +400,9 @@ This tells `ts-jest` (a preprocessor this preset using to transform TS files) to
 
 Some vendors publish their sources without transpiling. You need to say jest to transpile such files manually since `typescript` (and thus `ts-jest` used by this preset) do not transpile them.
 
-1. Install `@babel/preset-env` and add `babel.config.js` (or modify existing if needed) with the following content:
+1. Install dependencies required by Jest official documentation for [Babel integration](https://jest-bot.github.io/jest/docs/babel.html).
+
+2. Install `@babel/preset-env` and add `babel.config.js` (or modify existing if needed) with the following content:
 ```js
 module.exports = function(api) {
   api.cache(true);
@@ -395,13 +420,13 @@ module.exports = function(api) {
 
 *Note: do not use a `.babelrc` file otherwise the packages that you specify in the next step will not be picked up. CF [Babel documentation](https://babeljs.io/docs/en/configuration#what-s-your-use-case) and the comment `You want to compile node_modules? babel.config.js is for you!`*.
 
-2. Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):
+3. Update Jest configuration (by default TypeScript process untranspiled JS files which is source of the problem):
 
 ```js
 {
   "jest": {
     "transform": {
-      "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
+      "^.+\\.(ts|html)$": "ts-jest",
       "^.+\\.js$": "babel-jest"
     },
   }
@@ -410,6 +435,8 @@ module.exports = function(api) {
 
 ### Observable ... is not a function
 
+Note: This fix is only relevant to Angular v5 and lower.
+
 Since v1.0 this preset doesn't import whole `rxjs` library by default for variety of reasons. This may result in breaking your tests that relied on this behavior. It may however become cumbersome to include e.g. `rxjs/add/operator/map` or `rxjs/add/operator/do` for every test, so as a workaround you can include common operators or other necessary imports in your `setupJest.ts` file:
 
 ```js
@@ -446,7 +473,7 @@ Reference: https://github.com/facebook/jest/issues/708
 
 ### Failing with Node v7 or lower
 
-By default we use JSDOM v13, which requires Node v8+. If you want to use Node in a lower version to run your tests, make sure to configure jest to use an older JSDOM version, either in your `jest.config.js`, `jest.config.json` or `package.json`:
+By default we use JSDOM v15, which requires Node v8+. If you want to use Node in a lower version to run your tests, make sure to configure jest to use an older JSDOM version, either in your `jest.config.js`, `jest.config.json` or `package.json`:
 
 ```json
 "testEnvironment": "jsdom"

package/build/AngularNoNgAttributesSnapshotSerializer.js

@@ -0,0 +1,36 @@
+'use strict';
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+var jestDOMElementSerializer = require('pretty-format').plugins.DOMElement;
+var attributesToRemovePatterns = ['ng-reflect', '_nghost', '_ngcontent', 'ng-version'];
+var hasAttributesToRemove = function (attribute) {
+    return attributesToRemovePatterns
+        .some(function (removePattern) { return attribute.name.startsWith(removePattern); });
+};
+var serialize = function (node) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        rest[_i - 1] = arguments[_i];
+    }
+    var nodeCopy = node.cloneNode(true);
+    Object.values(nodeCopy.attributes)
+        .filter(hasAttributesToRemove)
+        .forEach(function (attribute) { return nodeCopy.attributes.removeNamedItem(attribute.name); });
+    return jestDOMElementSerializer.serialize.apply(jestDOMElementSerializer, __spreadArrays([nodeCopy], rest));
+};
+var serializeTestFn = function (val) {
+    return val.attributes !== undefined && Object.values(val.attributes)
+        .some(hasAttributesToRemove);
+};
+var test = function (val) {
+    return jestDOMElementSerializer.test(val) && serializeTestFn(val);
+};
+module.exports = {
+    serialize: serialize,
+    test: test
+};

package/build/AngularSnapshotSerializer.js

@@ -0,0 +1,49 @@
+'use strict';
+var printAttributes = function (val, attributes, print, indent, colors, opts) {
+    return attributes
+        .sort()
+        .map(function (attribute) {
+        return (opts.spacing +
+            indent(colors.prop.open + attribute + colors.prop.close + '=') +
+            colors.value.open +
+            (val.componentInstance[attribute] &&
+                val.componentInstance[attribute].constructor
+                ? '{[Function ' +
+                    val.componentInstance[attribute].constructor.name +
+                    ']}'
+                : "\"" + val.componentInstance[attribute] + "\"") +
+            colors.value.close);
+    })
+        .join('');
+};
+var print = function (val, print, indent, opts, colors) {
+    var componentAttrs = '';
+    var componentName = val.componentRef._elDef.element.name;
+    var nodes = (val.componentRef._view.nodes || [])
+        .filter(function (node) { return node && node.hasOwnProperty('renderElement'); })
+        .map(function (node) { return Array.from(node.renderElement.childNodes).map(print).join(''); })
+        .join(opts.edgeSpacing);
+    var attributes = Object.keys(val.componentInstance);
+    if (attributes.length) {
+        componentAttrs += printAttributes(val, attributes, print, indent, colors, opts);
+    }
+    return ('<' +
+        componentName +
+        componentAttrs +
+        (componentAttrs.length ? '\n' : '') +
+        '>\n' +
+        indent(nodes) +
+        '\n</' +
+        componentName +
+        '>');
+};
+var test = function (val) {
+    return val !== undefined &&
+        val !== null &&
+        typeof val === 'object' &&
+        Object.prototype.hasOwnProperty.call(val, 'componentRef');
+};
+module.exports = {
+    print: print,
+    test: test
+};

package/{HTMLCommentSerializer.js → build/HTMLCommentSerializer.js}

@@ -6,20 +6,17 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  */
-
 'use strict';
-
-const HTML_ELEMENT_REGEXP = /Comment/;
-const test = value =>
-  value !== undefined &&
-  value !== null &&
-  value.nodeType === 8 &&
-  value.constructor !== undefined &&
-  HTML_ELEMENT_REGEXP.test(value.constructor.name);
-
-const print = () => '';
-
+var HTML_ELEMENT_REGEXP = /Comment/;
+var test = function (value) {
+    return value !== undefined &&
+        value !== null &&
+        value.nodeType === 8 &&
+        value.constructor !== undefined &&
+        HTML_ELEMENT_REGEXP.test(value.constructor.name);
+};
+var print = function () { return ''; };
 module.exports = {
-  print: print,
-  test: test
+    print: print,
+    test: test
 };

package/{InlineHtmlStripStylesTransformer.js → build/InlineFilesTransformer.js}

@@ -5,25 +5,27 @@
  *
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+var TransformUtils_1 = require("./TransformUtils");
+// replace original ts-jest ConfigSet with this simple interface, as it would require
+// jest-preset-angular to add several babel devDependencies to get the other types
+// inside the ConfigSet right
 /** Angular component decorator TemplateUrl property name */
 var TEMPLATE_URL = 'templateUrl';
 /** Angular component decorator StyleUrls property name */
 var STYLE_URLS = 'styleUrls';
-/** Angular component decorator Styles property name */
-var STYLES = 'styles';
 /** Angular component decorator Template property name */
 var TEMPLATE = 'template';
 /** Node require function name */
 var REQUIRE = 'require';
 /**
- * Property names inside the decorator argument to transform
+ * Property names anywhere in an angular project to transform
  */
-var TRANSFORM_PROPS = [TEMPLATE_URL, STYLES, STYLE_URLS];
+var TRANSFORM_PROPS = [TEMPLATE_URL, STYLE_URLS];
 /**
  * Transformer ID
  * @internal
  */
-exports.name = 'angular-component-inline-template-strip-styles';
+exports.name = 'angular-component-inline-files';
 // increment this each time the code is modified
 /**
  * Transformer Version
@@ -39,14 +41,15 @@ function factory(cs) {
      * Our compiler (typescript, or a module with typescript-like interface)
      */
     var ts = cs.compilerModule;
+    var createStringLiteral = TransformUtils_1.getCreateStringLiteral(ts);
     /**
-     * Traverses the AST down to the relevant assignments in the decorator
-     * argument and returns them in an array.
+     * Traverses the AST down to the relevant assignments anywhere in the file
+     * and returns a boolean indicating if it should be transformed.
      */
     function isPropertyAssignmentToTransform(node) {
-        return ts.isPropertyAssignment(node) &&
+        return (ts.isPropertyAssignment(node) &&
             ts.isIdentifier(node.name) &&
-            TRANSFORM_PROPS.includes(node.name.text);
+            TRANSFORM_PROPS.includes(node.name.text));
     }
     /**
      * Clones the assignment and manipulates it depending on its name.
@@ -57,29 +60,29 @@ function factory(cs) {
         var assignmentNameText = mutableAssignment.name.text;
         switch (assignmentNameText) {
             case TEMPLATE_URL:
-                // reuse the right-hand-side literal from the assignment
-                var templatePathLiteral = mutableAssignment.initializer;
+                // replace 'templateUrl' with 'template'
+                // reuse the right-hand-side literal (the filepath) from the assignment
+                var pathLiteral = mutableAssignment.initializer;
                 // fix templatePathLiteral if it was a non-relative path
-                if (ts.isStringLiteral(mutableAssignment.initializer)) {
-                    var templatePathStringLiteral = mutableAssignment.initializer;
-                    // match if it starts with ./ or ../ or /
-                    if (templatePathStringLiteral.text &&
-                        !templatePathStringLiteral.text.match(/^(\.\/|\.\.\/|\/)/)) {
-                        // make path relative by appending './'
-                        templatePathLiteral = ts.createStringLiteral("./" + templatePathStringLiteral.text);
+                if (ts.isStringLiteral(pathLiteral)) {
+                    // match if it does not start with ./ or ../ or /
+                    if (pathLiteral.text &&
+                        !pathLiteral.text.match(/^(\.\/|\.\.\/|\/)/)) {
+                        // make path relative by prepending './'
+                        pathLiteral = createStringLiteral("./" + pathLiteral.text);
                     }
                 }
-                // replace 'templateUrl' with 'template'
-                mutableAssignment.name = ts.createIdentifier(TEMPLATE);
                 // replace current initializer with require(path)
-                mutableAssignment.initializer = ts.createCall(
+                var requireCall = ts.createCall(
                 /* expression */ ts.createIdentifier(REQUIRE), 
                 /* type arguments */ undefined, 
-                /* arguments array */ [templatePathLiteral]);
+                /* arguments array */ [pathLiteral]);
+                mutableAssignment.name = ts.createIdentifier(TEMPLATE);
+                mutableAssignment.initializer = requireCall;
                 break;
-            case STYLES:
             case STYLE_URLS:
-                // replace initializer array with empty array
+                // replace styleUrls value with emtpy array
+                // inlining all urls would be way more complicated and slower
                 mutableAssignment.initializer = ts.createArrayLiteral();
                 break;
         }
@@ -96,24 +99,20 @@ function factory(cs) {
          * @param node The node to be visited
          */
         var visitor = function (node) {
-            var resultNode;
+            var resultNode = node;
             // before we create a deep clone to modify, we make sure that
             // this is an assignment which we want to transform
             if (isPropertyAssignmentToTransform(node)) {
                 // get transformed node with changed properties
                 resultNode = transfromPropertyAssignmentForJest(node);
             }
-            else {
-                // look for interesting assignments inside this node
-                resultNode = ts.visitEachChild(node, visitor, ctx);
-            }
+            // look for interesting assignments inside this node in any case
+            resultNode = ts.visitEachChild(resultNode, visitor, ctx);
             // finally return the currently visited node
             return resultNode;
         };
         return visitor;
     }
-    return function (ctx) {
-        return function (sf) { return ts.visitNode(sf, createVisitor(ctx, sf)); };
-    };
+    return function (ctx) { return function (sf) { return ts.visitNode(sf, createVisitor(ctx, sf)); }; };
 }
 exports.factory = factory;