fix(schematics): ensure project "style" and "skipTests" options are respected (#15513)

With angular/angular-cli@a12a4e0, the CLI made the
option naming consistent. Since the default schematic are therefore named differently, we need to update our logic
to work with the old option name and the new option name.

Fixes #15502

Author: devversion

package.json

@@ -47,8 +47,8 @@
     "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/core": "7.1.2",
-    "@angular-devkit/schematics": "7.1.2",
+    "@angular-devkit/core": "7.3.6",
+    "@angular-devkit/schematics": "7.3.6",
     "@angular/bazel": "8.0.0-beta.6",
     "@angular/compiler-cli": "8.0.0-beta.6",
     "@angular/http": "8.0.0-beta.6",
@@ -62,7 +62,7 @@
     "@bazel/typescript": "0.26.0",
     "@firebase/app-types": "^0.3.2",
     "@octokit/rest": "^15.9.4",
-    "@schematics/angular": "7.1.2",
+    "@schematics/angular": "7.3.6",
     "@types/browser-sync": "^0.0.42",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^4.0.3",

src/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ renamed to src/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__

@@ -10,7 +10,7 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/dr
   styles: [`
     <%= indentTextContent(resolvedFiles.stylesheet, 4) %>
   `],<% } else { %>
-  styleUrls: ['./<%= dasherize(name) %>.component.<%= styleext %>'],<% } %><% if(!!viewEncapsulation) { %>
+  styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>'],<% } %><% if(!!viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } if (changeDetection !== 'Default') { %>
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %>,<% } %>
 })

src/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -1,4 +1,7 @@
 import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
+import {getProjectFromWorkspace} from '@angular/cdk/schematics';
+import {getWorkspace} from '@schematics/angular/utility/config';
+import {getProject} from '@schematics/angular/utility/project';
 import {createTestApp, getFileContent} from '../../testing';
 import {Schema} from './schema';
 
@@ -38,17 +41,34 @@ describe('CDK drag-drop schematic', () => {
     expect(moduleContent).toContain('DragDropModule');
   });
 
-  describe('styleext option', () => {
+  describe('style option', () => {
     it('should respect the option value', () => {
       const tree = runner.runSchematic(
-          'drag-drop', {styleext: 'scss', ...baseOptions}, createTestApp(runner));
+          'drag-drop', {style: 'scss', ...baseOptions}, createTestApp(runner));
+
+      expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.scss');
+    });
+
+    it('should respect the deprecated "styleext" option value', () => {
+      let tree = createTestApp(runner);
+      const workspace = getWorkspace(tree);
+      const project = getProjectFromWorkspace(workspace);
+
+      // We need to specify the default component options by overwriting
+      // the existing workspace configuration because passing the "styleext"
+      // option is no longer supported. Though we want to verify that we
+      // properly handle old CLI projects which still use the "styleext" option.
+      project.schematics!['@schematics/angular:component'] = {styleext: 'scss'};
+
+      tree.overwrite('angular.json', JSON.stringify(workspace));
+      tree = runner.runSchematic('drag-drop', baseOptions, tree);
 
       expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.scss');
     });
 
     it('should not generate invalid stylesheets', () => {
       const tree = runner.runSchematic(
-          'drag-drop', {styleext: 'styl', ...baseOptions}, createTestApp(runner));
+          'drag-drop', {style: 'styl', ...baseOptions}, createTestApp(runner));
 
       // In this case we expect the schematic to generate a plain "css" file because
       // the component schematics are using CSS style templates which are not compatible
@@ -99,10 +119,27 @@ describe('CDK drag-drop schematic', () => {
     });
   });
 
-  describe('spec option', () => {
+  describe('skipTests option', () => {
     it('should respect the option value', () => {
       const tree = runner.runSchematic(
-          'drag-drop', {spec: false, ...baseOptions}, createTestApp(runner));
+          'drag-drop', {skipTests: true, ...baseOptions}, createTestApp(runner));
+
+      expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.spec.ts');
+    });
+
+    it('should respect the deprecated global "spec" option value', () => {
+      let tree = createTestApp(runner);
+      const workspace = getWorkspace(tree);
+      const project = getProjectFromWorkspace(workspace);
+
+      // We need to specify the default component options by overwriting
+      // the existing workspace configuration because passing the "spec"
+      // option is no longer supported. Though we want to verify that we
+      // properly handle old CLI projects which still use the "spec" option.
+      project.schematics!['@schematics/angular:component'] = {spec: false};
+
+      tree.overwrite('angular.json', JSON.stringify(workspace));
+      tree = runner.runSchematic('drag-drop', baseOptions, tree);
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.spec.ts');
     });

src/cdk/schematics/ng-generate/drag-drop/index.spec.ts

@@ -15,7 +15,7 @@ export default function(options: Schema): Rule {
   return chain([
     buildComponent({...options}, {
       template: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html',
-      stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__',
+      stylesheet: './__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__',
     }),
     options.skipImport ? noop() : addDragDropModulesToModule(options)
   ]);

src/cdk/schematics/ng-generate/drag-drop/index.ts

@@ -55,13 +55,13 @@
       "description": "The prefix to apply to generated selectors.",
       "alias": "p"
     },
-    "styleext": {
+    "style": {
       "description": "The file extension to be used for style files.",
       "type": "string"
     },
-    "spec": {
+    "skipTests": {
       "type": "boolean",
-      "description": "Specifies if a spec file is generated."
+      "description": "When true, does not generate a test file."
     },
     "flat": {
       "type": "boolean",

src/cdk/schematics/ng-generate/drag-drop/schema.json

@@ -51,7 +51,9 @@ export function addModuleImportToModule(host: Tree, modulePath: string, moduleNa
     throw new SchematicsException(`Module not found: ${modulePath}`);
   }
 
-  const changes = addImportToModule(moduleSource, modulePath, moduleName, src);
+  // TODO: TypeScript version mismatch due to @schematics/angular using a different version
+  // than Material. Cast to any to avoid the type assignment failure.
+  const changes = addImportToModule(moduleSource as any, modulePath, moduleName, src);
   const recorder = host.beginUpdate(modulePath);
 
   changes.forEach((change) => {

src/cdk/schematics/utils/ast.ts

@@ -22,7 +22,7 @@ import {
   url,
 } from '@angular-devkit/schematics';
 import {FileSystemSchematicContext} from '@angular-devkit/schematics/tools';
-import {Schema as ComponentOptions} from '@schematics/angular/component/schema';
+import {Schema as ComponentOptions, Style} from '@schematics/angular/component/schema';
 import {
   addDeclarationToModule,
   addEntryComponentToModule,
@@ -72,7 +72,9 @@ function addDeclarationToNgModule(options: ComponentOptions): Rule {
     const classifiedName = strings.classify(`${options.name}Component`);
 
     const declarationChanges = addDeclarationToModule(
-      source,
+      // TODO: TypeScript version mismatch due to @schematics/angular using a different version
+      // than Material. Cast to any to avoid the type assignment failure.
+      source as any,
       modulePath,
       classifiedName,
       relativePath);
@@ -91,7 +93,9 @@ function addDeclarationToNgModule(options: ComponentOptions): Rule {
 
       const exportRecorder = host.beginUpdate(modulePath);
       const exportChanges = addExportToModule(
-        source,
+        // TODO: TypeScript version mismatch due to @schematics/angular using a different version
+        // than Material. Cast to any to avoid the type assignment failure.
+        source as any,
         modulePath,
         strings.classify(`${options.name}Component`),
         relativePath);
@@ -110,7 +114,9 @@ function addDeclarationToNgModule(options: ComponentOptions): Rule {
 
       const entryComponentRecorder = host.beginUpdate(modulePath);
       const entryComponentChanges = addEntryComponentToModule(
-        source,
+        // TODO: TypeScript version mismatch due to @schematics/angular using a different version
+        // than Material. Cast to any to avoid the type assignment failure.
+        source as any,
         modulePath,
         strings.classify(`${options.name}Component`),
         relativePath);
@@ -205,8 +211,10 @@ export function buildComponent(options: ComponentOptions,
     // we generate the stylesheets with the "css" extension. This ensures that we don't
     // accidentally generate invalid stylesheets (e.g. drag-drop-comp.styl) which will
     // break the Angular CLI project. See: https://github.com/angular/material2/issues/15164
-    if (!supportedCssExtensions.includes(options.styleext!)) {
-      options.styleext = 'css';
+    if (!supportedCssExtensions.includes(options.style!)) {
+      // TODO: Cast is necessary as we can't use the Style enum which has been introduced
+      // within CLI v7.3.0-rc.0. This would break the schematic for older CLI versions.
+      options.style = 'css' as Style;
     }
 
     // Object that will be used as context for the EJS templates.
@@ -230,8 +238,8 @@ export function buildComponent(options: ComponentOptions,
     }
 
     const templateSource = apply(url(schematicFilesUrl), [
-      options.spec ? noop() : filter(path => !path.endsWith('.spec.ts')),
-      options.inlineStyle ? filter(path => !path.endsWith('.__styleext__')) : noop(),
+      options.skipTests ? filter(path => !path.endsWith('.spec.ts')) : noop(),
+      options.inlineStyle ? filter(path => !path.endsWith('.__style__')) : noop(),
       options.inlineTemplate ? filter(path => !path.endsWith('.html')) : noop(),
       // Treat the template options as any, because the type definition for the template options
       // is made unnecessarily explicit. Every type of object can be used in the EJS template.

src/cdk/schematics/utils/build-component.ts

@@ -20,11 +20,20 @@ export function getDefaultComponentOptions(project: WorkspaceProject) {
   // Note: Not all options which are available when running "ng new" will be stored in the
   // workspace config. List of options which will be available in the configuration:
   // angular/angular-cli/blob/master/packages/schematics/angular/application/index.ts#L109-L131
+  let skipTests = getDefaultComponentOption<boolean|null>(project, ['skipTests'], null);
+
+  // In case "skipTests" is not set explicitly, also look for the "spec" option. The "spec"
+  // option has been deprecated but can be still used in older Angular CLI projects.
+  // See: https://github.com/angular/angular-cli/commit/a12a4e02a4689b5bdbc6e740c0d9865afb55671a
+  if (skipTests === null) {
+    skipTests = !getDefaultComponentOption(project, ['spec'], true);
+  }
+
   return {
-    styleext: getDefaultComponentOption(project, 'styleext', 'css'),
-    inlineStyle: getDefaultComponentOption(project, 'inlineStyle', false),
-    inlineTemplate: getDefaultComponentOption(project, 'inlineTemplate', false),
-    spec: getDefaultComponentOption(project, 'spec', true),
+    style: getDefaultComponentOption(project, ['style', 'styleext'], 'css'),
+    inlineStyle: getDefaultComponentOption(project, ['inlineStyle'], false),
+    inlineTemplate: getDefaultComponentOption(project, ['inlineTemplate'], false),
+    skipTests: skipTests,
   };
 }
 
@@ -33,13 +42,15 @@ export function getDefaultComponentOptions(project: WorkspaceProject) {
  * by looking at the stored schematic options for `@schematics/angular:component` in the
  * CLI workspace configuration.
  */
-function getDefaultComponentOption<T>(project: WorkspaceProject, optionName: string,
-                                      fallbackValue: T): T | null {
-  if (project.schematics &&
-      project.schematics['@schematics/angular:component'] &&
-      project.schematics['@schematics/angular:component'][optionName] != null) {
+function getDefaultComponentOption<T>(project: WorkspaceProject, optionNames: string[],
+                                      fallbackValue: T): T {
+  for (let optionName of optionNames) {
+    if (project.schematics &&
+        project.schematics['@schematics/angular:component'] &&
+        project.schematics['@schematics/angular:component'][optionName] != null) {
 
-    return project.schematics['@schematics/angular:component'][optionName];
+      return project.schematics['@schematics/angular:component'][optionName];
+    }
   }
 
   return fallbackValue;