feat (schematics): allow comments in angular.json file (Issue #480) (#550)

* fix(schematics): restore forgotten files

* feat(schematics): add npm scripts 'clean' & 'prebuild'

* refactor(schematics): remove the last occurrences of 'require' & 'import \* as'

* refactor(schematics): unify tree file access functions

* refactor(schematics): add a proxy function for JSON.parse

* feat(schematics): allow comments in angular.json file

ISSUES CLOSED: #480

* fix(schematics): scully-schematics requires js-yaml

* refactor(schematics): remove npm scripts 'clean' & 'prebuild'

Author: atao60

libs/scully-schematics/assets/meta-data-template.yml

@@ -0,0 +1,8 @@
+title: override-me
+thumbnail: assets/images/default.jpg
+author: John Doe
+mail: John.Doe@example.com
+keywords:
+  - angular
+  - scully
+language: en

libs/scully-schematics/package-lock.json

@@ -0,0 +1,27 @@
+import {
+  DisplayProcessor,
+  SpecReporter,
+  StacktraceOption
+} from 'jasmine-spec-reporter';
+import SuiteInfo = jasmine.SuiteInfo;
+import mapping from 'source-map-support';
+
+mapping.install();
+
+const displayStacktrace = StacktraceOption.PRETTY;
+
+class CustomProcessor extends DisplayProcessor {
+  public displayJasmineStarted(info: SuiteInfo, log: string): string {
+    return `TypeScript (${displayStacktrace} format) ${log}`;
+  }
+}
+
+jasmine.getEnv().clearReporters();
+jasmine.getEnv().addReporter(
+  new SpecReporter({
+    spec: {
+      displayStacktrace
+    },
+    customProcessors: [CustomProcessor]
+  })
+);

libs/scully-schematics/spec/helpers/ts_reporter.ts

@@ -0,0 +1,7 @@
+{
+  "spec_dir": "spec",
+  "spec_files": ["**/*[sS]pec.js"],
+  "helpers": ["helpers/**/*.js"],
+  "stopSpecOnExpectationFailure": false,
+  "random": true
+}

libs/scully-schematics/spec/support/jasmine.json

@@ -88,11 +88,7 @@ const addModule = (options: Schema) => (
   let prefix = 'app';
   let styleFormat = 'css';
   if (tree.exists(ANGULAR_CONF_FILE)) {
-    prefix = getPrefix(
-      tree,
-      getFileContents(tree, ANGULAR_CONF_FILE),
-      options.project
-    );
+    prefix = getPrefix(tree, options.project, ANGULAR_CONF_FILE);
     addRouteToModule(tree, options);
     styleFormat =
       getStyle(tree, options.project, ANGULAR_CONF_FILE) || styleFormat;

libs/scully-schematics/src/create-markdown/index.ts

@@ -9,19 +9,24 @@ import {
   NodePackageInstallTask,
   RunSchematicTask
 } from '@angular-devkit/schematics/tasks';
-import * as ts from '@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript';
+import {
+  createSourceFile,
+  ScriptTarget
+} from '@schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript';
 import {
   addImportToModule,
   insertImport
 } from '@schematics/angular/utility/ast-utils';
 import { InsertChange } from '@schematics/angular/utility/change';
+
 import { getSourceFile, getSrc } from '../utils/utils';
 import {
   addPackageToPackageJson,
   getPackageVersionFromPackageJson
 } from './package-config';
 import { Schema } from './schema';
 import { scullyComponentVersion, scullyVersion } from './version-names';
+
 export default (options: Schema): Rule => {
   return chain([
     checkAngularVersion(),
@@ -112,10 +117,10 @@ const addScullyModule = (project: string) => (
     throw new SchematicsException(`File ${mainFilePath} does not exist.`);
   }
   const sourceText = text.toString();
-  const source = ts.createSourceFile(
+  const source = createSourceFile(
     mainFilePath,
     sourceText,
-    ts.ScriptTarget.Latest,
+    ScriptTarget.Latest,
     true
   );
   const changes = addImportToModule(

libs/scully-schematics/src/ng-add/index.ts

@@ -5,6 +5,7 @@ import {
 import { getFileContent } from '@schematics/angular/utility/test';
 import { join } from 'path';
 
+import { getPackageJson } from '../utils/utils';
 import { setupProject } from '../utils/test-utils';
 import { Schema as ModelSchema } from './schema';
 import { scullyVersion, scullyComponentVersion } from './version-names';
@@ -47,19 +48,7 @@ describe('ng-add schematic', () => {
     });
 
     it('should add dependencies', () => {
-      const packageJson = JSON.parse(
-        getFileContent(appTree, PACKAGE_JSON_PATH)
-      );
-      const { dependencies } = packageJson;
-      expect(appTree.files).toContain(PACKAGE_JSON_PATH);
-      expect(dependencies['@scullyio/ng-lib']).toEqual(scullyVersion);
-      expect(dependencies['@scullyio/scully']).toEqual(scullyComponentVersion);
-    });
-
-    it('should add dependencies', () => {
-      const packageJson = JSON.parse(
-        getFileContent(appTree, PACKAGE_JSON_PATH)
-      );
+      const packageJson = getPackageJson(appTree);
       const { dependencies } = packageJson;
       expect(appTree.files).toContain(PACKAGE_JSON_PATH);
       expect(dependencies['@scullyio/ng-lib']).toEqual(scullyVersion);

libs/scully-schematics/src/ng-add/index_spec.ts

@@ -6,6 +6,7 @@ import { getFileContent } from '@schematics/angular/utility/test';
 import { join } from 'path';
 
 import { setupProject } from '../utils/test-utils';
+import { getPackageJson } from '../utils/utils';
 
 const schematicCollectionPath = join(
   __dirname,
@@ -33,6 +34,8 @@ exports.config = {
 };
 `;
 
+const ANGULAR_CONF_PATH = '/angular.json';
+
 const defaultOptions = Object.freeze({
   project: 'defaultProject'
 });
@@ -83,9 +86,7 @@ describe('scully schematic', () => {
 
     it(`should modify the 'package.json'`, () => {
       expect(appTree.files).toContain(PACKAGE_JSON_PATH);
-      const packageJson = JSON.parse(
-        getFileContent(appTree, PACKAGE_JSON_PATH)
-      );
+      const packageJson = getPackageJson(appTree);
       const { scripts } = packageJson;
       expect(scripts.scully).toEqual('scully');
       expect(scripts['scully:serve']).toEqual('scully serve');
@@ -103,4 +104,24 @@ describe('scully schematic', () => {
       expect(getFileContent(appTree, SCULLY_PATH)).toEqual('foo');
     });
   });
+
+  describe('when the angular.json contains any comment', () => {
+    it('should deal with it', async () => {
+      const options = { ...defaultOptions };
+      const angularConfigContent = getFileContent(appTree, ANGULAR_CONF_PATH);
+      const angularConfigLines = angularConfigContent.split('\n');
+      angularConfigLines[3] += `     // dummy comment`;
+      appTree.overwrite(ANGULAR_CONF_PATH, angularConfigLines.join('\n'));
+      const NO_ERROR = '';
+      let error = NO_ERROR;
+      try {
+        await customRunner
+          .runSchematicAsync('scully', options, appTree)
+          .toPromise();
+      } catch (e) {
+        error = e;
+      }
+      expect(error).toEqual(NO_ERROR);
+    });
+  });
 });