Merge pull request #5 from orchestratora/feat-ng8

[Feat] Angular v8 update

Author: Alex Malkevich

README.md

@@ -9,7 +9,7 @@
 
 > Testing utilities for Angular projects
 
-`npm install -D @orchestrator/ngx-testing`
+`npm install -D @orchestrator/ngx-testing@next`
 
 ## Why?
 

package-lock.json

@@ -17,48 +17,45 @@
     "test:report": "cd coverage && codecov",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "format": "npm-run-all -p format:*",
-    "format:code": "prettier --write \"projects/**/*.{ts,js,json,?css}\"",
-    "format:html": "prettyhtml \"projects/**/*.html\"",
+    "format": "prettier --write \"projects/**/*.{ts,js,json,?css,html}\"",
     "pack": "copyfiles LICENSE README.md dist/ngx-testing",
     "presemantic-release": "npm run build && npm run pack",
     "semantic-release": "semantic-release"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
-    "@angular/common": "~7.1.0",
-    "@angular/compiler": "~7.1.0",
-    "@angular/core": "~7.1.0",
-    "@angular/forms": "~7.1.0",
-    "@angular/platform-browser": "~7.1.0",
-    "@angular/platform-browser-dynamic": "~7.1.0",
-    "@angular/router": "~7.1.0",
-    "core-js": "^2.5.4",
-    "rxjs": "~6.3.3",
-    "zone.js": "~0.8.26"
+    "@angular/animations": "~8.0.0",
+    "@angular/common": "~8.0.0",
+    "@angular/compiler": "~8.0.0",
+    "@angular/core": "~8.0.0",
+    "@angular/forms": "~8.0.0",
+    "@angular/platform-browser": "~8.0.0",
+    "@angular/platform-browser-dynamic": "~8.0.0",
+    "@angular/router": "~8.0.0",
+    "core-js": "^2.0.0",
+    "rxjs": "~6.5.2",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.12.2",
-    "@angular-devkit/build-ng-packagr": "^0.12.2",
-    "@angular/cli": "~7.1.4",
-    "@angular/compiler-cli": "~7.1.0",
-    "@angular/language-service": "~7.1.0",
-    "@commitlint/cli": "^7.2.1",
-    "@commitlint/config-conventional": "^7.1.2",
+    "@angular-devkit/build-angular": "~0.800.2",
+    "@angular-devkit/build-ng-packagr": "~0.800.2",
+    "@angular/cli": "~8.0.2",
+    "@angular/compiler-cli": "~8.0.0",
+    "@angular/language-service": "~8.0.0",
+    "@commitlint/cli": "^8.0.0",
+    "@commitlint/config-conventional": "^8.0.0",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/commit-analyzer": "^6.1.0",
     "@semantic-release/git": "^7.0.8",
-    "@semantic-release/github": "^5.2.9",
-    "@semantic-release/npm": "^5.1.4",
+    "@semantic-release/github": "^5.2.10",
+    "@semantic-release/npm": "^5.1.9",
     "@semantic-release/release-notes-generator": "^7.1.4",
-    "@starptech/prettyhtml": "^0.8.16",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
+    "@types/node": "~12.0.8",
     "codecov": "^3.1.0",
-    "codelyzer": "~4.5.0",
-    "commitizen": "^3.0.5",
+    "codelyzer": "^5.1.0",
+    "commitizen": "^3.1.1",
     "copyfiles": "^2.1.0",
     "cz-conventional-changelog": "^2.1.0",
     "husky": "^1.3.1",
@@ -70,16 +67,17 @@
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "lint-staged": "^8.1.0",
-    "ng-packagr": "^4.2.0",
+    "ng-packagr": "^5.3.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^1.18.2",
     "protractor": "~5.4.0",
     "rimraf": "^2.6.3",
-    "semantic-release": "^15.13.2",
-    "ts-node": "~7.0.0",
-    "tsickle": ">=0.29.0",
-    "tslib": "^1.9.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
+    "semantic-release": "^15.13.16",
+    "ts-node": "^8.1.0",
+    "tsickle": "^0.35.0",
+    "tslib": "^1.10.0",
+    "tslint": "~5.17.0",
+    "typescript": "~3.4.5"
   },
   "config": {
     "commitizen": {
@@ -103,13 +101,9 @@
       "tslint -p tsconfig.json -c tslint.json --fix",
       "git add"
     ],
-    "projects/**/*.{ts,js,json,?css}": [
+    "projects/**/*.{ts,js,json,?css,html}": [
       "prettier --write",
       "git add"
-    ],
-    "projects/**/*.html": [
-      "prettyhtml",
-      "git add"
     ]
   }
 }

package.json

@@ -19,8 +19,8 @@
     "bindings"
   ],
   "peerDependencies": {
-    "@angular/common": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/platform-browser": "^7.0.0"
+    "@angular/common": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/platform-browser": "^8.0.0"
   }
 }

projects/ngx-testing/package.json

@@ -65,9 +65,7 @@ export class HostGeneratorService {
         return this.generateForDirective<T>();
       default:
         throw Error(
-          `HostGeneratorService: Cannot generate host component for unknown kind: ${
-            this.typeKind
-          }`,
+          `HostGeneratorService: Cannot generate host component for unknown kind: ${this.typeKind}`,
         );
     }
   }
@@ -139,7 +137,7 @@ export class HostGeneratorService {
 
     @Component(meta)
     class TestHostComponent implements HostComponent<T> {
-      @ViewChild(type)
+      @ViewChild(type, { static: false })
       instance: T;
 
       constructor() {

projects/ngx-testing/src/lib/host-generator.service.ts

@@ -42,6 +42,9 @@ export type AsHostComponent<T> = HostComponent<T> &
   { [K in keyof T]: T[K] extends EventEmitter<infer A> ? OutputMock<A> : T[K] };
 
 export type TemplateBindings = ComponentFactory<any>['inputs'];
+export type TemplateBinding = TemplateBindings extends Array<infer T>
+  ? T
+  : unknown;
 
 export interface DirectiveIO {
   inputs: TemplateBindings;

projects/ngx-testing/src/lib/types.ts

@@ -0,0 +1,38 @@
+import { Directive, EventEmitter, Input, Output } from '@angular/core';
+import { async, TestBed } from '@angular/core/testing';
+
+import { getDirectiveIO } from './util';
+
+describe('Util', () => {
+  describe('getDirectiveIO() function', () => {
+    @Directive({ selector: '[ngtTest]' })
+    class TestDirective {
+      @Input() input1: any;
+      // tslint:disable-next-line: no-input-rename
+      @Input('renamedInput') input2: any;
+
+      @Output() output1 = new EventEmitter();
+      // tslint:disable-next-line: no-output-rename
+      @Output('renamedOutput') output2 = new EventEmitter();
+    }
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        declarations: [TestDirective],
+      }).compileComponents();
+    }));
+
+    it('should return resolved IO of given directive type', () => {
+      expect(getDirectiveIO(TestDirective)).toEqual({
+        inputs: [
+          { propName: 'input1', templateName: 'input1' },
+          { propName: 'input2', templateName: 'renamedInput' },
+        ],
+        outputs: [
+          { propName: 'output1', templateName: 'output1' },
+          { propName: 'output2', templateName: 'renamedOutput' },
+        ],
+      });
+    });
+  });
+});

projects/ngx-testing/src/lib/util.spec.ts

@@ -1,25 +1,67 @@
 import { InjectionToken, Type } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
-import { DirectiveIO } from './types';
+import { DirectiveIO, TemplateBinding, TemplateBindings } from './types';
+
+/**
+ * @internal
+ * Defined by Angular
+ */
+interface PropDecoratorFactory {
+  bindingPropertyName?: string;
+  ngMetadataName: string;
+}
+
+/**
+ * @internal
+ * Defined by Angular
+ */
+interface PropMetadata {
+  [prop: string]: PropDecoratorFactory[];
+}
+
+interface IOMetadata {
+  [prop: string]: PropDecoratorFactory;
+}
 
 /**
  * @internal
  */
 export function getDirectiveIO<T>(dirType: Type<T>): DirectiveIO {
-  const { inputs, outputs } = (dirType as any).ngBaseDef;
-  const defToIO = def =>
-    Object.keys(def).map(key => ({
-      propName: key,
-      templateName: def[key] || key,
-    }));
+  const propMeta = dirType['__prop__metadata__'] as PropMetadata;
+
+  const inputsMeta = filterPropMeta(propMeta, 'Input');
+  const outputsMeta = filterPropMeta(propMeta, 'Output');
 
   return {
-    inputs: defToIO(inputs),
-    outputs: defToIO(outputs),
+    inputs: propMetaToTemplateBindings(inputsMeta),
+    outputs: propMetaToTemplateBindings(outputsMeta),
   };
 }
 
+function propMetaToTemplateBindings(meta: IOMetadata): TemplateBindings {
+  return Object.keys(meta).map(
+    propName =>
+      ({
+        propName,
+        templateName: meta[propName].bindingPropertyName || propName,
+      } as TemplateBinding),
+  );
+}
+
+function filterPropMeta(
+  obj: PropMetadata,
+  type: 'Input' | 'Output',
+): IOMetadata {
+  return Object.keys(obj).reduce(
+    (acc, k) => {
+      const meta = obj[k].find(m => m.ngMetadataName === type);
+      return meta ? { ...acc, [k]: meta } : acc;
+    },
+    {} as IOMetadata,
+  );
+}
+
 /**
  * @internal
  */

projects/ngx-testing/src/lib/util.ts

@@ -5,12 +5,12 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tsconfig.json

@@ -118,12 +118,12 @@
       "check-type"
     ],
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true