build(schematics): test schematics properly (#12410)

* build(schematics): test schematics properly

* Previously, the spec files that have been pushed to the repository, didn't run at all, or were outdated. This PR updates the tests and also enables most of them (as much as possible).
* Sets up the Bazel test rules (with a few needed workarounds) in order to test the schematics
* Removed devkit utils that can be used from `@schematics/angular` which is **always present** (we can assume that)
* Moved data `.json` files into TypeScript files (in order to workaround a bazel typescript issue; and to allow separation for v6 and v7 data at some point)
* Updates and fixes schematics to properly work within the latest Angular CLI version

* Address feedback

* Remove unnecessary diff

Author: devversion

package-lock.json

@@ -42,8 +42,8 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^0.5.12",
-    "@angular-devkit/schematics": "^0.5.12",
+    "@angular-devkit/core": "^0.7.1",
+    "@angular-devkit/schematics": "^0.7.1",
     "@angular/bazel": "6.0.0",
     "@angular/compiler-cli": "6.0.0",
     "@angular/http": "6.0.0",
@@ -53,7 +53,7 @@
     "@angular/upgrade": "6.0.0",
     "@bazel/ibazel": "0.3.1",
     "@google-cloud/storage": "^1.1.1",
-    "@schematics/angular": "^0.5.12",
+    "@schematics/angular": "^0.7.1",
     "@types/chalk": "^0.4.31",
     "@types/fs-extra": "^4.0.3",
     "@types/glob": "^5.0.33",

package.json

@@ -1,8 +1,12 @@
 package(default_visibility = ["//visibility:public"])
 
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
-load("@build_bazel_rules_nodejs//:defs.bzl", "npm_package")
+load("@build_bazel_rules_nodejs//:defs.bzl", "npm_package", "jasmine_node_test")
 
+filegroup(
+  name = "schematics_assets",
+  srcs = glob(["**/files/**/*"]) + ["README.md", "collection.json", "migration.json"],
+)
 
 ts_library(
   name = "schematics",
@@ -14,8 +18,43 @@ ts_library(
 # This package is intended to be combined into the main @angular/material package as a dep.
 npm_package(
   name = "npm_package",
-  srcs = [
-    ":collection.json",
-  ] + glob(["**/files/**/*", "**/data/**/*", "**/schema.json", "**/migration.json"]),
+  srcs = [":schematics_assets"],
   deps = [":schematics"],
 )
+
+### Testing rules
+
+jasmine_node_test(
+  name = "unit_tests",
+  srcs = [":schematics_test_sources"],
+  data = [":schematics_assets"],
+  deps = [":copy-collection-file", ":copy-migration-file"],
+)
+
+ts_library(
+  name = "schematics_test_sources",
+  srcs = glob(["**/*.spec.ts"], exclude=["**/files/**/*"]),
+  deps = [":schematics"],
+  tsconfig = ":tsconfig.json",
+  testonly = True,
+)
+
+# Workaround for https://github.com/bazelbuild/rules_typescript/issues/154
+genrule(
+  name = "copy-collection-file",
+  srcs = ["collection.json"],
+  outs = ["test-collection.json"],
+  cmd = "cp $< $@",
+  output_to_bindir = True,
+  testonly = True,
+)
+
+# Workaround for https://github.com/bazelbuild/rules_typescript/issues/154
+genrule(
+  name = "copy-migration-file",
+  srcs = ["migration.json"],
+  outs = ["test-migration.json"],
+  cmd = "cp $< $@",
+  output_to_bindir = True,
+  testonly = True,
+)

src/lib/schematics/BUILD.bazel

@@ -7,9 +7,9 @@
  */
 
 import {chain, Rule, noop, Tree} from '@angular-devkit/schematics';
+import {buildComponent} from '../utils/build-component';
 import {Schema} from './schema';
 import {addModuleImportToModule, findModuleFromOptions} from '../utils/ast';
-import {buildComponent} from '../utils/devkit-utils/component';
 
 /**
  * Scaffolds a new table component.

src/lib/schematics/address-form/index.ts

@@ -6,41 +6,37 @@
     "ng-add": {
       "description": "Adds Angular Material to the application without affecting any templates",
       "factory": "./install",
-      "schema": "./install/schema.json",
       "aliases": ["material-shell"]
     },
     // Create a dashboard component
     "dashboard": {
       "description": "Create a card-based dashboard component",
       "factory": "./dashboard/index",
-      "schema": "./dashboard/schema.json",
       "aliases": ["material-dashboard"]
     },
     // Creates a table component
     "table": {
       "description": "Create a component that displays data with a data-table",
       "factory": "./table/index",
-      "schema": "./table/schema.json",
       "aliases": ["material-table"]
     },
     // Creates toolbar and navigation components
     "nav": {
       "description": "Create a component with a responsive sidenav for navigation",
       "factory": "./nav/index",
-      "schema": "./nav/schema.json",
-      "aliases": [ "material-nav", "materialNav" ]
+      // TODO(devversion): re-add `materialNav` alias if we have the latest schematics version
+      // that includes https://github.com/angular/angular-cli/pull/11390
+      "aliases": [ "material-nav"]
     },
     // Create a file tree component
     "tree": {
       "description": "Create a file tree component.",
-      "factory": "./tree/index",
-      "schema": "./tree/schema.json"
+      "factory": "./tree/index"
     },
     // Creates a address form component
     "addressForm": {
       "description": "Create a component with a address form",
       "factory": "./address-form/index",
-      "schema": "./address-form/schema.json",
       "aliases": ["address-form"]
     }
   }

src/lib/schematics/collection.json

@@ -1,48 +1,43 @@
 import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
-import {join} from 'path';
-import {createTestApp} from '../utils/testing';
+import {createTestApp, collectionPath} from '../utils/testing';
 import {getFileContent} from '@schematics/angular/utility/test';
-
-const collectionPath = join(__dirname, '../collection.json');
+import {Schema} from './schema';
 
 describe('material-dashboard-schematic', () => {
   let runner: SchematicTestRunner;
-  const options = {
+  const options: Schema = {
     name: 'foo',
-    path: 'app',
-    sourceDir: 'src',
-    inlineStyle: false,
-    inlineTemplate: false,
+    project: 'material',
     changeDetection: 'Default',
     styleext: 'css',
     spec: true,
-    module: undefined,
     export: false,
-    prefix: undefined,
-    viewEncapsulation: undefined,
   };
 
   beforeEach(() => {
     runner = new SchematicTestRunner('schematics', collectionPath);
   });
 
-  it('should create dashboard files and add them to module', () => {
+  // TODO(devversion): Temporarily disabled because @angular-devkit/schematics is not able to
+  // find the template files for the schematic. As soon as we find a way to properly reference
+  // those files, we can re-enable this test.
+  xit('should create dashboard files and add them to module', () => {
     const tree = runner.runSchematic('dashboard', { ...options }, createTestApp());
     const files = tree.files;
 
-    expect(files).toContain('/src/app/foo/foo.component.css');
-    expect(files).toContain('/src/app/foo/foo.component.html');
-    expect(files).toContain('/src/app/foo/foo.component.spec.ts');
-    expect(files).toContain('/src/app/foo/foo.component.ts');
+    expect(files).toContain('/projects/material/src/app/foo/foo.component.css');
+    expect(files).toContain('/projects/material/src/app/foo/foo.component.html');
+    expect(files).toContain('/projects/material/src/app/foo/foo.component.spec.ts');
+    expect(files).toContain('/projects/material/src/app/foo/foo.component.ts');
 
-    const moduleContent = getFileContent(tree, '/src/app/app.module.ts');
+    const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
     expect(moduleContent).toMatch(/import.*Foo.*from '.\/foo\/foo.component'/);
     expect(moduleContent).toMatch(/declarations:\s*\[[^\]]+?,\r?\n\s+FooComponent\r?\n/m);
   });
 
   it('should add dashboard imports to module', () => {
-    const tree = runner.runSchematic('materialDashboard', { ...options }, createTestApp());
-    const moduleContent = getFileContent(tree, '/src/app/app.module.ts');
+    const tree = runner.runSchematic('dashboard', { ...options }, createTestApp());
+    const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
 
     expect(moduleContent).toContain('MatGridListModule');
     expect(moduleContent).toContain('MatCardModule');

src/lib/schematics/dashboard/index.spec.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {chain, Rule, noop, Tree} from '@angular-devkit/schematics';
-import {Schema} from './schema';
+import {chain, noop, Rule, Tree} from '@angular-devkit/schematics';
 import {addModuleImportToModule, findModuleFromOptions} from '../utils/ast';
-import {buildComponent} from '../utils/devkit-utils/component';
+import {buildComponent} from '../utils/build-component';
+import {Schema} from './schema';
 
 /**
  * Scaffolds a new dashboard component.

src/lib/schematics/dashboard/index.ts

@@ -6,11 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Project} from '../utils/devkit-utils/config';
-
 /** Create custom theme for the given application configuration. */
-export function createCustomTheme(project: Project) {
-  const name = project.name || 'app';
+export function createCustomTheme(name: string = 'app') {
 return `
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming

src/lib/schematics/install/custom-theme.ts

@@ -1,16 +1,13 @@
 import {Tree} from '@angular-devkit/schematics';
 import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
-import {join} from 'path';
+import {getProjectFromWorkspace} from '../utils/get-project';
 import {getFileContent} from '@schematics/angular/utility/test';
-import {createTestApp} from '../utils/testing';
-import {getConfig, getAppFromConfig} from '@schematics/angular/utility/config';
+import {collectionPath, createTestApp} from '../utils/testing';
+import {getConfig, getAppFromConfig, getWorkspace} from '@schematics/angular/utility/config';
 import {getIndexHtmlPath} from '../utils/ast';
 import {normalize} from '@angular-devkit/core';
-import { getWorkspace, getProjectFromWorkspace } from '../utils/devkit-utils/config';
 
-const collectionPath = join(__dirname, '../collection.json');
-
-describe('material-shell-schematic', () => {
+describe('material-install-schematic', () => {
   let runner: SchematicTestRunner;
   let appTree: Tree;
 
@@ -20,47 +17,50 @@ describe('material-shell-schematic', () => {
   });
 
   it('should update package.json', () => {
-    const tree = runner.runSchematic('install', {}, appTree);
+    const tree = runner.runSchematic('ng-add', {}, appTree);
     const packageJson = JSON.parse(getFileContent(tree, '/package.json'));
 
     expect(packageJson.dependencies['@angular/material']).toBeDefined();
     expect(packageJson.dependencies['@angular/cdk']).toBeDefined();
   });
 
   it('should add default theme', () => {
-    const tree = runner.runSchematic('shell', {}, appTree);
-    const config: any = getConfig(tree);
-    config.apps.forEach(app => {
-      expect(app.styles).toContain(
-        '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css');
-    });
+    const tree = runner.runSchematic('ng-add', {}, appTree);
+
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace);
+
+    console.log(tree.files);
+
+    expect(project.architect!['build']).toBeTruthy();
+    expect(project.architect!['build']['options']).toBeTruthy();
+    expect(project.architect!['build']['options']['styles']).toContain(
+      './node_modules/@angular/material/prebuilt-themes/indigo-pink.css');
   });
 
   it('should add custom theme', () => {
-    const tree = runner.runSchematic('install', {
-      theme: 'custom'
-    }, appTree);
+    const tree = runner.runSchematic('ng-add', {theme: 'custom'}, appTree);
 
-    const config = getConfig(tree);
-    const app: any = getAppFromConfig(config, '0');
-    const stylesPath = normalize(`/${app.root}/styles.scss`);
+    const workspace = getWorkspace(tree);
+    const project = getProjectFromWorkspace(workspace);
+    const expectedStylesPath = normalize(`/${project.root}/src/styles.scss`);
 
-    const buffer: any = tree.read(stylesPath);
-    const src = buffer.toString();
+    const buffer = tree.read(expectedStylesPath);
+    const src = buffer!.toString();
 
     expect(src.indexOf(`@import '~@angular/material/theming';`)).toBeGreaterThan(-1);
     expect(src.indexOf(`$app-primary`)).toBeGreaterThan(-1);
   });
 
   it('should add font links', () => {
-    const tree = runner.runSchematic('install', {}, appTree);
-    const config: any = getConfig(tree);
+    const tree = runner.runSchematic('ng-add', {}, appTree);
     const workspace = getWorkspace(tree);
-    const project = getProjectFromWorkspace(workspace, config.project.name);
+    const project = getProjectFromWorkspace(workspace);
 
     const indexPath = getIndexHtmlPath(project);
     const buffer: any = tree.read(indexPath);
     const indexSrc = buffer.toString();
+
     expect(indexSrc.indexOf('fonts.googleapis.com')).toBeGreaterThan(-1);
   });
 });

src/lib/schematics/install/index.spec.ts

@@ -16,8 +16,9 @@ import {
 } from '@angular-devkit/schematics';
 import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
 import {addModuleImportToRootModule, getStylesPath} from '../utils/ast';
-import {InsertChange} from '../utils/devkit-utils/change';
-import {getProjectFromWorkspace, getWorkspace} from '../utils/devkit-utils/config';
+import {InsertChange} from '@schematics/angular/utility/change';
+import {getWorkspace} from '@schematics/angular/utility/config';
+import {getProjectFromWorkspace} from '../utils/get-project';
 import {addHeadLink} from '../utils/html';
 import {angularVersion, materialVersion} from '../utils/lib-versions';
 import {addPackageToPackageJson} from '../utils/package';