refactor: rename nav schematic to navigation (#18364)

Our docs often describe the `nav` schematic as `navigation` schematics,
and it's not quite clear what the actual schematic name is. To avoid
this confusion, we just name it `navigation`, but keep support for
the old `nav` abbreviation.

Author: devversion

guides/schematics.md

@@ -72,7 +72,7 @@ a toolbar with the app name and a responsive side nav based on Material
 breakpoints.
 
 ```
-ng generate @angular/material:nav <component-name>
+ng generate @angular/material:navigation <component-name>
 ```
 
 #### Table schematic

src/material/schematics/collection.json

@@ -30,11 +30,11 @@
       "aliases": ["material-table"]
     },
     // Creates toolbar and navigation components
-    "nav": {
+    "navigation": {
       "description": "Create a component with a responsive sidenav for navigation",
-      "factory": "./ng-generate/nav/index",
-      "schema": "./ng-generate/nav/schema.json",
-      "aliases": ["material-nav", "materialNav"]
+      "factory": "./ng-generate/navigation/index",
+      "schema": "./ng-generate/navigation/schema.json",
+      "aliases": ["material-nav", "materialNav", "nav"]
     },
     // Create a file tree component
     "tree": {

src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template renamed to src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template

@@ -1,9 +1,9 @@
-import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
 import {createTestApp, getFileContent} from '@angular/cdk/schematics/testing';
 
 import {Schema} from './schema';
 
-describe('material-nav-schematic', () => {
+describe('material-navigation-schematic', () => {
   let runner: SchematicTestRunner;
 
   const baseOptions: Schema = {
@@ -15,9 +15,27 @@ describe('material-nav-schematic', () => {
     runner = new SchematicTestRunner('schematics', require.resolve('../../collection.json'));
   });
 
-  it('should create nav files and add them to module', async () => {
+  function expectNavigationSchematicModuleImports(tree: UnitTestTree) {
+    const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
+    expect(moduleContent).toMatch(/LayoutModule,\s+/);
+    expect(moduleContent).toMatch(/MatToolbarModule,\s+/);
+    expect(moduleContent).toMatch(/MatButtonModule,\s+/);
+    expect(moduleContent).toMatch(/MatSidenavModule,\s+/);
+    expect(moduleContent).toMatch(/MatIconModule,\s+/);
+    expect(moduleContent).toMatch(/MatListModule\s+],/);
+    expect(moduleContent).toContain(`import { LayoutModule } from '@angular/cdk/layout';`);
+    expect(moduleContent).toContain(`import { MatButtonModule } from '@angular/material/button';`);
+    expect(moduleContent).toContain(`import { MatIconModule } from '@angular/material/icon';`);
+    expect(moduleContent).toContain(`import { MatListModule } from '@angular/material/list';`);
+    expect(moduleContent)
+        .toContain(`import { MatToolbarModule } from '@angular/material/toolbar';`);
+    expect(moduleContent)
+        .toContain(`import { MatSidenavModule } from '@angular/material/sidenav';`);
+  }
+
+  it('should create navigation files and add them to module', async () => {
     const app = await createTestApp(runner);
-    const tree = await runner.runSchematicAsync('nav', baseOptions, app).toPromise();
+    const tree = await runner.runSchematicAsync('navigation', baseOptions, app).toPromise();
     const files = tree.files;
 
     expect(files).toContain('/projects/material/src/app/foo/foo.component.css');
@@ -30,34 +48,24 @@ describe('material-nav-schematic', () => {
     expect(moduleContent).toMatch(/declarations:\s*\[[^\]]+?,\r?\n\s+FooComponent\r?\n/m);
   });
 
-  it('should add nav imports to module', async () => {
+  it('should add navigation imports to module', async () => {
     const app = await createTestApp(runner);
-    const tree = await runner.runSchematicAsync('nav', baseOptions, app).toPromise();
-    const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
-
-    expect(moduleContent).toContain('LayoutModule');
-    expect(moduleContent).toContain('MatToolbarModule');
-    expect(moduleContent).toContain('MatButtonModule');
-    expect(moduleContent).toContain('MatSidenavModule');
-    expect(moduleContent).toContain('MatIconModule');
-    expect(moduleContent).toContain('MatListModule');
+    const tree = await runner.runSchematicAsync('navigation', baseOptions, app).toPromise();
+    expectNavigationSchematicModuleImports(tree);
+  });
 
-    expect(moduleContent).toContain(`import { LayoutModule } from '@angular/cdk/layout';`);
-    expect(moduleContent).toContain(`import { MatButtonModule } from '@angular/material/button';`);
-    expect(moduleContent).toContain(`import { MatIconModule } from '@angular/material/icon';`);
-    expect(moduleContent).toContain(`import { MatListModule } from '@angular/material/list';`);
-    expect(moduleContent)
-      .toContain(`import { MatToolbarModule } from '@angular/material/toolbar';`);
-    expect(moduleContent)
-      .toContain(`import { MatSidenavModule } from '@angular/material/sidenav';`);
+  it('should support `nav` as schematic alias', async () => {
+    const app = await createTestApp(runner);
+    const tree = await runner.runSchematicAsync('nav', baseOptions, app).toPromise();
+    expectNavigationSchematicModuleImports(tree);
   });
 
   it('should throw if no name has been specified', async () => {
     const appTree = await createTestApp(runner);
     let message: string|null = null;
 
     try {
-      await runner.runSchematicAsync('nav', {project: 'material'}, appTree).toPromise();
+      await runner.runSchematicAsync('navigation', {project: 'material'}, appTree).toPromise();
     } catch (e) {
       message = e.message;
     }
@@ -67,39 +75,42 @@ describe('material-nav-schematic', () => {
 
   describe('style option', () => {
     it('should respect the option value', async () => {
-      const tree = await runner
-                       .runSchematicAsync(
-                           'nav', {style: 'scss', ...baseOptions}, await createTestApp(runner))
-                       .toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'navigation', {style: 'scss', ...baseOptions}, await createTestApp(runner))
+              .toPromise();
 
       expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.scss');
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
-      const tree =
-          await runner
-              .runSchematicAsync('nav', baseOptions, await createTestApp(runner, {style: 'less'}))
-              .toPromise();
+      const tree = await runner
+                       .runSchematicAsync(
+                           'navigation', baseOptions, await createTestApp(runner, {style: 'less'}))
+                       .toPromise();
 
       expect(tree.files).toContain('/projects/material/src/app/foo/foo.component.less');
     });
   });
 
   describe('inlineStyle option', () => {
     it('should respect the option value', async () => {
-      const tree = await runner
-                       .runSchematicAsync(
-                           'nav', {inlineStyle: true, ...baseOptions}, await createTestApp(runner))
-                       .toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'navigation', {inlineStyle: true, ...baseOptions}, await createTestApp(runner))
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.css');
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
-      const tree = await runner
-                       .runSchematicAsync(
-                           'nav', baseOptions, await createTestApp(runner, {inlineStyle: true}))
-                       .toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'navigation', baseOptions, await createTestApp(runner, {inlineStyle: true}))
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.css');
     });
@@ -110,36 +121,39 @@ describe('material-nav-schematic', () => {
       const tree =
           await runner
               .runSchematicAsync(
-                  'nav', {inlineTemplate: true, ...baseOptions}, await createTestApp(runner))
+                  'navigation', {inlineTemplate: true, ...baseOptions}, await createTestApp(runner))
               .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.html');
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
-      const tree = await runner
-                       .runSchematicAsync(
-                           'nav', baseOptions, await createTestApp(runner, {inlineTemplate: true}))
-                       .toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'navigation', baseOptions, await createTestApp(runner, {inlineTemplate: true}))
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.html');
     });
   });
 
   describe('skipTests option', () => {
     it('should respect the option value', async () => {
-      const tree = await runner
-                       .runSchematicAsync(
-                           'nav', {skipTests: true, ...baseOptions}, await createTestApp(runner))
-                       .toPromise();
+      const tree =
+          await runner
+              .runSchematicAsync(
+                  'navigation', {skipTests: true, ...baseOptions}, await createTestApp(runner))
+              .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.spec.ts');
     });
 
     it('should fall back to the @schematics/angular:component option value', async () => {
       const tree =
           await runner
-              .runSchematicAsync('nav', baseOptions, await createTestApp(runner, {skipTests: true}))
+              .runSchematicAsync(
+                  'navigation', baseOptions, await createTestApp(runner, {skipTests: true}))
               .toPromise();
 
       expect(tree.files).not.toContain('/projects/material/src/app/foo/foo.component.spec.ts');

src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template renamed to src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "SchematicsMaterialNav",
-  "title": "Material Nav Options Schema",
+  "id": "SchematicsMaterialNavigation",
+  "title": "Material Navigation Options Schema",
   "type": "object",
   "properties": {
     "path": {