From 54d157f3d2b629d6e025ab92edfd64172a81decd Mon Sep 17 00:00:00 2001 From: llorenspujol Date: Wed, 1 Mar 2023 00:31:55 +0100 Subject: [PATCH] fix(material/schematics): migrate to mdc components selectively bug (#26427) Fixes mdc-migration to migrate only the selected components. (cherry picked from commit fba14dc3293416908bd69463281133130390704f) --- .../ng-generate/mdc-migration/rules/index.ts | 2 + .../rules/ts-migration/runtime-migration.ts | 15 +++- .../ts-migration/runtime-migrator.spec.ts | 72 +++++++++++++++++++ 3 files changed, 87 insertions(+), 2 deletions(-) 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 11cf6dea877e..374b025b594c 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/index.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/index.ts @@ -203,3 +203,5 @@ export const PERMANENT_MIGRATORS: ComponentMigrator[] = [ styles: new TypographyHierarchyStylesMigrator(), }, ]; + +export const CORE_COMPONENTS = ['option', 'optgroup']; diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migration.ts b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migration.ts index 7b90411fb624..537fda4aa8ad 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migration.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migration.ts @@ -8,7 +8,7 @@ import {Migration, getPropertyNameText} from '@angular/cdk/schematics'; import {SchematicContext} from '@angular-devkit/schematics'; -import {ComponentMigrator, LEGACY_MODULES} from '../index'; +import {ComponentMigrator, CORE_COMPONENTS, LEGACY_MODULES} from '../index'; import * as ts from 'typescript'; import {ThemingStylesMigration} from '../theming-styles'; import {TemplateMigration} from '../template-migration'; @@ -65,6 +65,16 @@ export class RuntimeCodeMigration extends Migration { + return ( + lastImportName.includes(componentMigrator.component) || + (lastImportName === 'legacy-core' && CORE_COMPONENTS.includes(componentMigrator.component)) + ); + }); + } + /** Finds the imported symbols in a file that need to be migrated. */ private _findImportsToMigrate(sourceFile: ts.SourceFile) { const importSpecifiersToNewNames = new Map(); @@ -77,7 +87,8 @@ export class RuntimeCodeMigration extends Migration { const oldName = (element.propertyName || element.name).text; diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migrator.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migrator.spec.ts index e4d8c448115a..2c0e724b057d 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migrator.spec.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/runtime-migrator.spec.ts @@ -385,6 +385,78 @@ describe('runtime code migration', () => { ); }); + it('should not replace imports from non selected components', async () => { + declareLibrarySymbols('legacy-button', 'export declare class MatLegacyButtonModule {};'); + declareLibrarySymbols('legacy-checkbox', 'export declare class MatLegacyCheckboxModule {};'); + + await runMigrationTest( + ` + import {NgModule} from '@angular/core'; + import {MatLegacyButtonModule} from '@angular/material/legacy-button'; + import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; + + @NgModule({imports: [MatLegacyButtonModule, MatLegacyCheckboxModule]}) + export class AppModule {} + `, + ` + import {NgModule} from '@angular/core'; + import {MatButtonModule} from '@angular/material/button'; + import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; + + @NgModule({imports: [MatButtonModule, MatLegacyCheckboxModule]}) + export class AppModule {} + `, + ); + }); + + it('should migrate legacy-core symbols when option or optgroup is choosen for migration', async () => { + declareLibrarySymbols('legacy-select', 'export declare class MatLegacySelectModule {};'); + + async function runMigrationSelectTest(oldFileContent: string, newFileContent: string) { + cliAppTree.overwrite(APP_MODULE_FILE, oldFileContent); + const tree = await migrateComponents(['select'], runner, cliAppTree); + expect(tree.readContent(APP_MODULE_FILE)).toBe(newFileContent); + } + + await runMigrationSelectTest( + ` + import {NgModule} from '@angular/core'; + import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; + import {MatLegacyOptionModule as MatOptionModule, LEGACY_VERSION as VERSION} from '@angular/material/legacy-core'; + + @NgModule({imports: [MatSelectModule, MatOptionModule]}) + export class AppModule {} + `, + ` + import {NgModule} from '@angular/core'; + import {MatSelectModule} from '@angular/material/select'; + import {MatOptionModule, VERSION} from '@angular/material/core'; + + @NgModule({imports: [MatSelectModule, MatOptionModule]}) + export class AppModule {} + `, + ); + }); + + it('should not migrate legacy-core symbols when option or optgroup are not choosen for migration', async () => { + await runMigrationTest( + ` + import {NgModule} from '@angular/core'; + import {MatLegacyOptionModule as MatOptionModule, LEGACY_VERSION as VERSION} from '@angular/material/legacy-core'; + + @NgModule({imports: [MatOptionModule]}) + export class AppModule {} + `, + ` + import {NgModule} from '@angular/core'; + import {MatLegacyOptionModule as MatOptionModule, LEGACY_VERSION as VERSION} from '@angular/material/legacy-core'; + + @NgModule({imports: [MatOptionModule]}) + export class AppModule {} + `, + ); + }); + it('should migrate styles for a component', async () => { await runMigrationTest( `