From 0beb3568d784de0a5becec97ac797ff665c343c2 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 10 Mar 2022 17:24:46 +0000 Subject: [PATCH 1/2] feat(material/schematics): impl card template migration * implement TemplateMigrator for mat-card * add unit tests for card template migrations * implement migration updates in TemplateMigration * added CardTemplateMigrator to list of MIGRATORS --- .../components/card/card-template.spec.ts | 93 +++++++++++++++++++ .../rules/components/card/card-template.ts | 23 +++++ .../ng-generate/mdc-migration/rules/index.ts | 2 + .../mdc-migration/rules/template-migration.ts | 17 +++- 4 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts create mode 100644 src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts new file mode 100644 index 000000000000..4af51216db86 --- /dev/null +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts @@ -0,0 +1,93 @@ +import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing'; +import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing'; +import {createNewTestRunner, migrateComponents, TEMPLATE_FILE} from '../test-setup-helper'; + +describe('card template migrator', () => { + let runner: SchematicTestRunner; + let cliAppTree: UnitTestTree; + + async function runMigrationTest(oldFileContent: string, newFileContent: string) { + cliAppTree.overwrite(TEMPLATE_FILE, oldFileContent); + const tree = await migrateComponents(['card'], runner, cliAppTree); + expect(tree.readContent(TEMPLATE_FILE)).toBe(newFileContent); + } + + beforeEach(async () => { + runner = createNewTestRunner(); + cliAppTree = patchDevkitTreeToExposeTypeScript(await createTestApp(runner)); + }); + + it('should not update other elements', async () => { + await runMigrationTest('', ''); + }); + + it('should update single', async () => { + await runMigrationTest('', ''); + }); + + it('should update multiple same-line unnested', async () => { + await runMigrationTest( + '', + '', + ); + }); + + it('should update multiple same-line nested', async () => { + await runMigrationTest( + '', + '', + ); + }); + + it('should update multiple same-line nested and unnested', async () => { + await runMigrationTest( + '', + '', + ); + }); + + it('should update multiple multi-line unnested', async () => { + await runMigrationTest( + ` + + + `, + ` + + + `, + ); + }); + + it('should update multiple multi-line nested', async () => { + await runMigrationTest( + ` + + + + `, + ` + + + + `, + ); + }); + + it('should update multiple multi-line nested and unnested', async () => { + await runMigrationTest( + ` + + + + + `, + ` + + + + + `, + ); + }); +}); diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts new file mode 100644 index 000000000000..31d2837f2127 --- /dev/null +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts @@ -0,0 +1,23 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {TmplAstElement} from '@angular/compiler'; +import {TemplateMigrator} from '../../template-migrator'; +import {addAttribute} from '../../tree-traversal'; + +export class CardTemplateMigrator extends TemplateMigrator { + component = 'card'; + tagName = 'mat-card'; + + override updateStartTag(template: string, node: TmplAstElement): string { + if (node.name !== this.tagName) { + return template; + } + return addAttribute(template, node, 'appearance', 'outline'); + } +} diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/index.ts b/src/material/schematics/ng-generate/mdc-migration/rules/index.ts index 82f5fd356ceb..fcd537482e4d 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/index.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/index.ts @@ -8,6 +8,7 @@ import {ButtonStylesMigrator} from './components/button/button-styles'; import {CardStylesMigrator} from './components/card/card-styles'; +import {CardTemplateMigrator} from './components/card/card-template'; import {CheckboxStylesMigrator} from './components/checkbox/checkbox-styles'; import {ChipsStylesMigrator} from './components/chips/chips-styles'; import {DialogStylesMigrator} from './components/dialog/dialog-styles'; @@ -36,6 +37,7 @@ export const MIGRATORS: ComponentMigrator[] = [ { component: 'card', styles: new CardStylesMigrator(), + template: new CardTemplateMigrator(), }, { component: 'checkbox', diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts b/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts index d5598fda0e0a..dc09fde7ccb2 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts @@ -16,10 +16,21 @@ export class TemplateMigration extends Migration m.template).map(m => m.template!); - visitElements(ast.nodes, node => { - // TODO(wagnermaciel): implement the migration updates. - }); + visitElements( + ast.nodes, + node => { + migrators.forEach(m => { + template.content = m.updateEndTag(template.content, node); + }); + }, + node => { + migrators.forEach(m => { + template.content = m.updateStartTag(template.content, node); + }); + }, + ); this.fileSystem.overwrite(template.filePath, template.content); } From 44a7dfaccbbeb2121e2ae484fa6fd4ed1808ee2b Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 10 Mar 2022 22:19:34 +0000 Subject: [PATCH 2/2] fixup! feat(material/schematics): impl card template migration --- .../components/card/card-template.spec.ts | 22 +++++++++---------- .../rules/components/card/card-template.ts | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts index 4af51216db86..c6bec47daede 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts @@ -22,27 +22,27 @@ describe('card template migrator', () => { }); it('should update single', async () => { - await runMigrationTest('', ''); + await runMigrationTest('', ''); }); it('should update multiple same-line unnested', async () => { await runMigrationTest( '', - '', + '', ); }); it('should update multiple same-line nested', async () => { await runMigrationTest( '', - '', + '', ); }); it('should update multiple same-line nested and unnested', async () => { await runMigrationTest( '', - '', + '', ); }); @@ -53,8 +53,8 @@ describe('card template migrator', () => { `, ` - - + + `, ); }); @@ -67,8 +67,8 @@ describe('card template migrator', () => { `, ` - - + + `, ); @@ -83,9 +83,9 @@ describe('card template migrator', () => { `, ` - - - + + + `, ); diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts index 31d2837f2127..ca56b44f4211 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.ts @@ -18,6 +18,6 @@ export class CardTemplateMigrator extends TemplateMigrator { if (node.name !== this.tagName) { return template; } - return addAttribute(template, node, 'appearance', 'outline'); + return addAttribute(template, node, 'appearance', 'outlined'); } }