fix(material/schematics): fix various issues with mdc-migration (#25772)

mmalerba · web-flow · commit a0ec4becacf8 · 2022-10-10T11:00:17.000-07:00
* fix(material/schematics): add missing material/core transforms

* test(material/schematics): fix integration test diff output

* fix(material/schematics): delete legacy mixin when migrating if new mixin is already present

* fix(material/schematics): handle form-field appearance

* test(material/schematics): fix test errors in mdc migration sample app

* test(material/schematics): verify golden builds and doesn't contain 'legacy'
diff --git a/integration/mdc-migration/BUILD.bazel b/integration/mdc-migration/BUILD.bazel
@@ -40,6 +40,16 @@ migration_test(
         "sample-project/**/*",
     ]),
     approve = False,
+    verify = [
+        "! grep" +
+        "  --include=*.{ts,css,scss,html}" +
+        "  --exclude-dir={node_modules,.angular,.yarn_cache_folder}" +
+        "  -ir legacy" +
+        "  || { echo \"Error: golden project contains 'legacy'.\" >&2; exit 1; }",
+        "yarn build",
+        # TODO(mmalerba): add back once slider tests pass.
+        # "yarn test",
+    ],
 )
 
 migration_test(
diff --git a/integration/mdc-migration/golden/angular.json b/integration/mdc-migration/golden/angular.json
@@ -36,7 +36,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
diff --git a/integration/mdc-migration/golden/src/app/app.module.ts b/integration/mdc-migration/golden/src/app/app.module.ts
@@ -25,6 +25,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatOptionModule, VERSION} from '@angular/material/core';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -94,9 +95,12 @@ import {TooltipComponent} from './components/tooltip/tooltip.component';
     MatTableModule,
     MatTabsModule,
     MatTooltipModule,
+    MatOptionModule,
     ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  version = VERSION;
+}
diff --git a/integration/mdc-migration/golden/src/app/components/form-field/form-field.component.html b/integration/mdc-migration/golden/src/app/components/form-field/form-field.component.html
@@ -2,5 +2,8 @@ <h2>Form field example</h2>
 <mat-form-field hintLabel="Max 10 characters" appearance="fill">
   <mat-label>Enter some input</mat-label>
   <input matInput #input maxlength="10" placeholder="Ex. Nougat">
-  <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+  <mat-hint align="end">{{input.value.length}}/10</mat-hint>
 </mat-form-field>
+<mat-form-field appearance="outline"><input matInput></mat-form-field>
+<mat-form-field><input matInput></mat-form-field>
+<mat-form-field><input matInput></mat-form-field>
diff --git a/integration/mdc-migration/golden/src/styles.scss b/integration/mdc-migration/golden/src/styles.scss
@@ -7,8 +7,8 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.all-component-typographies();
-@include mat.legacy-core();
+@include mat.all-component-typographies(mat.define-typography-config());
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -26,9 +26,11 @@ $sample-project-theme: mat.define-light-theme((
     primary: $sample-project-primary,
     accent: $sample-project-accent,
     warn: $sample-project-warn,
-  )
+  ),
+  typography: mat.define-typography-config(),
 ));
 
+@include mat.core-theme($sample-project-theme);
 @include mat.autocomplete-theme($sample-project-theme);
 @include mat.button-theme($sample-project-theme);
 @include mat.fab-theme($sample-project-theme);
@@ -45,13 +47,14 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.progress-bar-theme($sample-project-theme);
 @include mat.progress-spinner-theme($sample-project-theme);
 @include mat.radio-theme($sample-project-theme);
-@include mat.legacy-select-theme($sample-project-theme);
 @include mat.slide-toggle-theme($sample-project-theme);
 @include mat.slider-theme($sample-project-theme);
 @include mat.snack-bar-theme($sample-project-theme);
 @include mat.table-theme($sample-project-theme);
 @include mat.tabs-theme($sample-project-theme);
 @include mat.tooltip-theme($sample-project-theme);
+@include mat.option-theme($sample-project-theme);
+@include mat.optgroup-theme($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */
 
diff --git a/integration/mdc-migration/migration-test.bzl b/integration/mdc-migration/migration-test.bzl
@@ -21,7 +21,7 @@ IGNORED_FILES = [
     "yarn.lock",
 ]
 
-def migration_test(name, srcs, approve):
+def migration_test(name, srcs, approve, verify = []):
     node_integration_test(
         name = name,
         srcs = srcs,
@@ -32,15 +32,13 @@ def migration_test(name, srcs, approve):
             # TODO(devversion): determine if a solution/workaround could live in the test runner.
             "yarn install --cache-folder .yarn_cache_folder/",
             "yarn ng generate @angular/material:mdc-migration --components all",
-            # TODO(amysorto): add back once MDC components are in @angular/material
-            # "yarn test",
             " ".join([
                 "$(rootpath :verify_golden)",
                 "%s" % approve,
                 "../golden",
                 "integration/mdc-migration/golden",
             ] + IGNORED_FILES),
-        ],
+        ] + verify,
         data = [
             ":golden_project",
             ":test_project",
diff --git a/integration/mdc-migration/sample-project/angular.json b/integration/mdc-migration/sample-project/angular.json
@@ -36,7 +36,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
diff --git a/integration/mdc-migration/sample-project/src/app/app.module.ts b/integration/mdc-migration/sample-project/src/app/app.module.ts
@@ -25,6 +25,7 @@ import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/le
 import {MatLegacyTableModule as MatTableModule} from '@angular/material/legacy-table';
 import {MatLegacyTabsModule as MatTabsModule} from '@angular/material/legacy-tabs';
 import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatLegacyOptionModule, LEGACY_VERSION} from '@angular/material/legacy-core';
 import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
 import {ButtonComponent} from './components/button/button.component';
 import {CardComponent} from './components/card/card.component';
@@ -94,9 +95,12 @@ import {TooltipComponent} from './components/tooltip/tooltip.component';
     MatTableModule,
     MatTabsModule,
     MatTooltipModule,
+    MatLegacyOptionModule,
     ReactiveFormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+  version = LEGACY_VERSION;
+}
diff --git a/integration/mdc-migration/sample-project/src/app/components/form-field/form-field.component.html b/integration/mdc-migration/sample-project/src/app/components/form-field/form-field.component.html
@@ -2,5 +2,8 @@ <h2>Form field example</h2>
 <mat-form-field hintLabel="Max 10 characters" appearance="fill">
   <mat-label>Enter some input</mat-label>
   <input matInput #input maxlength="10" placeholder="Ex. Nougat">
-  <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+  <mat-hint align="end">{{input.value.length}}/10</mat-hint>
 </mat-form-field>
+<mat-form-field appearance="outline"><input matInput></mat-form-field>
+<mat-form-field appearance="standard"><input matInput></mat-form-field>
+<mat-form-field appearance="legacy"><input matInput></mat-form-field>
diff --git a/integration/mdc-migration/sample-project/src/app/components/progress-spinner/progress-spinner.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/progress-spinner/progress-spinner.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
 import {ProgressSpinnerComponent} from './progress-spinner.component';
 
 describe('ProgressSpinnerComponent', () => {
diff --git a/integration/mdc-migration/sample-project/src/app/components/slide-toggle/slide-toggle.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/slide-toggle/slide-toggle.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
 import {SlideToggleComponent} from './slide-toggle.component';
 
 describe('SlideToggleComponent', () => {
diff --git a/integration/mdc-migration/sample-project/src/app/components/snack-bar/snack-bar.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/snack-bar/snack-bar.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatSnackBarModule} from '@angular/material/legacy-snack-bar';
+import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
 import {SnackBarComponent} from './snack-bar.component';
 
 describe('SnackBarComponent', () => {
diff --git a/integration/mdc-migration/sample-project/src/app/components/table/table.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/table/table.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatTableModule} from '@angular/material/legacy-table';
+import {MatLegacyTableModule as MatTableModule} from '@angular/material/legacy-table';
 import {TableComponent} from './table.component';
 
 describe('TableComponent', () => {
diff --git a/integration/mdc-migration/sample-project/src/app/components/tabs/tabs.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/tabs/tabs.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatTabsModule} from '@angular/material/legacy-tabs';
+import {MatLegacyTabsModule as MatTabsModule} from '@angular/material/legacy-tabs';
 import {TabsComponent} from './tabs.component';
 
 describe('TabsComponent', () => {
diff --git a/integration/mdc-migration/sample-project/src/styles.scss b/integration/mdc-migration/sample-project/src/styles.scss
@@ -7,7 +7,7 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.all-legacy-component-typographies();
+@include mat.all-legacy-component-typographies(mat.define-legacy-typography-config());
 @include mat.legacy-core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
@@ -26,9 +26,11 @@ $sample-project-theme: mat.define-light-theme((
     primary: $sample-project-primary,
     accent: $sample-project-accent,
     warn: $sample-project-warn,
-  )
+  ),
+  typography: mat.define-legacy-typography-config(),
 ));
 
+@include mat.legacy-core-theme($sample-project-theme);
 @include mat.legacy-autocomplete-theme($sample-project-theme);
 @include mat.legacy-button-theme($sample-project-theme);
 @include mat.legacy-card-theme($sample-project-theme);
@@ -49,6 +51,8 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.legacy-table-theme($sample-project-theme);
 @include mat.legacy-tabs-theme($sample-project-theme);
 @include mat.legacy-tooltip-theme($sample-project-theme);
+@include mat.legacy-option-theme($sample-project-theme);
+@include mat.legacy-optgroup-theme($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */
 
diff --git a/integration/mdc-migration/verify-golden.ts b/integration/mdc-migration/verify-golden.ts
@@ -64,8 +64,8 @@ async function compareFiles(
   const [testContent, goldenContent] = await Promise.allSettled(contentPromises);
   const diff = {
     filename,
-    actual: getDiffValue(goldenStats, goldenContent),
-    expected: getDiffValue(testStats, testContent),
+    actual: getDiffValue(testStats, testContent),
+    expected: getDiffValue(goldenStats, goldenContent),
   };
   if (testStats.status === 'rejected' && goldenStats.status === 'rejected') {
     return null; // Neither file exists.
@@ -92,9 +92,9 @@ function showDiffs(diffs: FileDiff[]) {
     console.error(
       [
         ''.padEnd(80, '='),
-        `----- ${diff.filename} (actual) `.padEnd(80, '-'),
+        `----- ${diff.filename} (this run) `.padEnd(80, '-'),
         diff.actual,
-        `----- ${diff.filename} (expected) `.padEnd(80, '-'),
+        `----- ${diff.filename} (golden) `.padEnd(80, '-'),
         diff.expected,
         '',
       ].join('\n'),
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
@@ -8,7 +8,7 @@
 
 import * as compiler from '@angular/compiler';
 import {TemplateMigrator} from '../../template-migrator';
-import {addAttribute, visitElements} from '../../tree-traversal';
+import {updateAttribute, visitElements} from '../../tree-traversal';
 import {Update} from '../../../../../migration-utilities';
 
 export class CardTemplateMigrator extends TemplateMigrator {
@@ -22,7 +22,7 @@ export class CardTemplateMigrator extends TemplateMigrator {
 
       updates.push({
         offset: node.startSourceSpan.start.offset,
-        updateFn: html => addAttribute(html, node, 'appearance', 'outlined'),
+        updateFn: html => updateAttribute(html, node, 'appearance', () => 'outlined'),
       });
     });
 
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/form-field/form-field-template.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/form-field/form-field-template.spec.ts
@@ -0,0 +1,61 @@
+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('form-field template migrator', () => {
+  let runner: SchematicTestRunner;
+  let cliAppTree: UnitTestTree;
+
+  async function runMigrationTest(oldFileContent: string, newFileContent: string) {
+    cliAppTree.overwrite(TEMPLATE_FILE, oldFileContent);
+    const tree = await migrateComponents(['form-field'], runner, cliAppTree);
+    expect(tree.readContent(TEMPLATE_FILE)).toBe(newFileContent);
+  }
+
+  beforeEach(async () => {
+    runner = createNewTestRunner();
+    cliAppTree = patchDevkitTreeToExposeTypeScript(await createTestApp(runner));
+  });
+
+  it('should not update other elements appearance', async () => {
+    await runMigrationTest(
+      '<mat-card appearance="raised"></mat-card>',
+      '<mat-card appearance="raised"></mat-card>',
+    );
+  });
+
+  it('should not update default appearance', async () => {
+    await runMigrationTest(
+      '<mat-form-field></mat-form-field>',
+      '<mat-form-field></mat-form-field>',
+    );
+  });
+
+  it('should not update outline appearance', async () => {
+    await runMigrationTest(
+      '<mat-form-field appearance="outline"></mat-form-field>',
+      '<mat-form-field appearance="outline"></mat-form-field>',
+    );
+  });
+
+  it('should not update fill appearance', async () => {
+    await runMigrationTest(
+      '<mat-form-field appearance="fill"></mat-form-field>',
+      '<mat-form-field appearance="fill"></mat-form-field>',
+    );
+  });
+
+  it('should update standard appearance', async () => {
+    await runMigrationTest(
+      '<mat-form-field appearance="standard"></mat-form-field>',
+      '<mat-form-field></mat-form-field>',
+    );
+  });
+
+  it('should update legacy appearance', async () => {
+    await runMigrationTest(
+      '<mat-form-field appearance="legacy"></mat-form-field>',
+      '<mat-form-field></mat-form-field>',
+    );
+  });
+});
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/form-field/form-field-template.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/form-field/form-field-template.ts
@@ -0,0 +1,34 @@
+/**
+ * @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 * as compiler from '@angular/compiler';
+import {TemplateMigrator} from '../../template-migrator';
+import {updateAttribute, visitElements} from '../../tree-traversal';
+import {Update} from '../../../../../migration-utilities';
+
+export class FormFieldTemplateMigrator extends TemplateMigrator {
+  getUpdates(ast: compiler.ParsedTemplate): Update[] {
+    const updates: Update[] = [];
+
+    visitElements(ast.nodes, (node: compiler.TmplAstElement) => {
+      if (node.name !== 'mat-form-field') {
+        return;
+      }
+
+      updates.push({
+        offset: node.startSourceSpan.start.offset,
+        updateFn: html =>
+          updateAttribute(html, node, 'appearance', old =>
+            ['legacy', 'standard'].includes(old || '') ? null : old,
+          ),
+      });
+    });
+
+    return updates;
+  }
+}
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/multiple-components-styles.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/multiple-components-styles.spec.ts
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/option/option-styles.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/option/option-styles.ts
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/index.ts b/src/material/schematics/ng-generate/mdc-migration/rules/index.ts
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/style-migrator.ts b/src/material/schematics/ng-generate/mdc-migration/rules/style-migrator.ts
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts b/src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/tree-traversal.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/tree-traversal.spec.ts
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/tree-traversal.ts b/src/material/schematics/ng-generate/mdc-migration/rules/tree-traversal.ts
diff --git a/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts b/src/material/schematics/ng-update/test-cases/v15/legacy-components-v15.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`{`
`37`	`37`	`"type": "initial",`
`38`	`38`	`"maximumWarning": "500kb",`
`39`		`- "maximumError": "1mb"`
	`39`	`+ "maximumError": "2mb"`
`40`	`40`	`},`
`41`	`41`	`{`
`42`	`42`	`"type": "anyComponentStyle",`