diff --git a/guides/schematics.md b/guides/schematics.md index feb149beb0e6..e0973b672018 100644 --- a/guides/schematics.md +++ b/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 +ng generate @angular/material:navigation ``` #### Table schematic diff --git a/src/material/schematics/collection.json b/src/material/schematics/collection.json index 47ee0fe3b982..161d82f3e8a3 100644 --- a/src/material/schematics/collection.json +++ b/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": { diff --git a/src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template similarity index 100% rename from src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template rename to src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__style__.template diff --git a/src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template similarity index 100% rename from src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template rename to src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template diff --git a/src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template similarity index 100% rename from src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template rename to src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template diff --git a/src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template similarity index 100% rename from src/material/schematics/ng-generate/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template rename to src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template diff --git a/src/material/schematics/ng-generate/nav/index.spec.ts b/src/material/schematics/ng-generate/navigation/index.spec.ts similarity index 61% rename from src/material/schematics/ng-generate/nav/index.spec.ts rename to src/material/schematics/ng-generate/navigation/index.spec.ts index a2c7328b5201..7add26af3468 100644 --- a/src/material/schematics/ng-generate/nav/index.spec.ts +++ b/src/material/schematics/ng-generate/navigation/index.spec.ts @@ -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,26 +48,16 @@ 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 () => { @@ -57,7 +65,7 @@ describe('material-nav-schematic', () => { 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,19 +75,20 @@ 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'); }); @@ -87,19 +96,21 @@ describe('material-nav-schematic', () => { 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,17 +121,18 @@ 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'); }); @@ -128,10 +140,11 @@ describe('material-nav-schematic', () => { 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'); }); @@ -139,7 +152,8 @@ describe('material-nav-schematic', () => { 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'); diff --git a/src/material/schematics/ng-generate/nav/index.ts b/src/material/schematics/ng-generate/navigation/index.ts similarity index 100% rename from src/material/schematics/ng-generate/nav/index.ts rename to src/material/schematics/ng-generate/navigation/index.ts diff --git a/src/material/schematics/ng-generate/nav/schema.json b/src/material/schematics/ng-generate/navigation/schema.json similarity index 96% rename from src/material/schematics/ng-generate/nav/schema.json rename to src/material/schematics/ng-generate/navigation/schema.json index bb23b7ef7495..e68ce8c2a7a7 100644 --- a/src/material/schematics/ng-generate/nav/schema.json +++ b/src/material/schematics/ng-generate/navigation/schema.json @@ -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": { diff --git a/src/material/schematics/ng-generate/nav/schema.ts b/src/material/schematics/ng-generate/navigation/schema.ts similarity index 100% rename from src/material/schematics/ng-generate/nav/schema.ts rename to src/material/schematics/ng-generate/navigation/schema.ts