feat(material/schematics): add tooltip styles migrator and tests

integration/mdc-migration/golden/src/styles.scss

@@ -32,6 +32,8 @@ $sample-project-theme: mat.define-light-theme((
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 @include mat.all-component-themes($sample-project-theme);
+@include mat.mdc-tooltip-theme($sample-project-theme);
+@include mat.mdc-tooltip-typography($sample-project-theme);
 @include mat.mdc-tabs-theme($sample-project-theme);
 @include mat.mdc-tabs-typography($sample-project-theme);
 @include mat.mdc-table-theme($sample-project-theme);

src/material/schematics/ng-generate/mdc-migration/rules/components/tooltip/tooltip-styles.spec.ts

@@ -0,0 +1,259 @@
+import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';
+
+describe('tooltip styles', () => {
+  let runner: SchematicTestRunner;
+  let cliAppTree: UnitTestTree;
+
+  async function runMigrationTest(oldFileContent: string, newFileContent: string) {
+    cliAppTree.create(THEME_FILE, oldFileContent);
+    const tree = await migrateComponents(['tooltip'], runner, cliAppTree);
+    expect(tree.readContent(THEME_FILE)).toBe(newFileContent);
+  }
+
+  beforeEach(async () => {
+    runner = createNewTestRunner();
+    cliAppTree = patchDevkitTreeToExposeTypeScript(await createTestApp(runner));
+  });
+
+  describe('mixin migrations', () => {
+    it('should replace the old theme with the new ones', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+        @include mat.tooltip-theme($theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+        @include mat.mdc-tooltip-theme($theme);
+        @include mat.mdc-tooltip-typography($theme);
+      `,
+      );
+    });
+
+    it('should use the correct namespace', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as arbitrary;
+        $theme: ();
+        @include arbitrary.tooltip-theme($theme);
+      `,
+        `
+        @use '@angular/material' as arbitrary;
+        $theme: ();
+        @include arbitrary.mdc-tooltip-theme($theme);
+        @include arbitrary.mdc-tooltip-typography($theme);
+      `,
+      );
+    });
+
+    it('should handle updating multiple themes', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.tooltip-theme($light-theme);
+        @include mat.tooltip-theme($dark-theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.mdc-tooltip-theme($light-theme);
+        @include mat.mdc-tooltip-typography($light-theme);
+        @include mat.mdc-tooltip-theme($dark-theme);
+        @include mat.mdc-tooltip-typography($dark-theme);
+      `,
+      );
+    });
+
+    it('should add correct theme if all-component-themes mixin included', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+        @include mat.all-component-themes($theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+        @include mat.all-component-themes($theme);
+        @include mat.mdc-tooltip-theme($theme);
+        @include mat.mdc-tooltip-typography($theme);
+      `,
+      );
+    });
+
+    it('should add multiple themes for multiple all-component-themes mixins', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.all-component-themes($light-theme);
+        @include mat.all-component-themes($dark-theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.all-component-themes($light-theme);
+        @include mat.mdc-tooltip-theme($light-theme);
+        @include mat.mdc-tooltip-typography($light-theme);
+        @include mat.all-component-themes($dark-theme);
+        @include mat.mdc-tooltip-theme($dark-theme);
+        @include mat.mdc-tooltip-typography($dark-theme);
+      `,
+      );
+    });
+
+    it('should preserve whitespace', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+
+
+        @include mat.tooltip-theme($theme);
+
+
+      `,
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+
+
+        @include mat.mdc-tooltip-theme($theme);
+        @include mat.mdc-tooltip-typography($theme);
+
+
+      `,
+      );
+    });
+  });
+
+  describe('selector migrations', () => {
+    it('should update the legacy mat-tooltip classname', async () => {
+      await runMigrationTest(
+        `
+        .mat-tooltip {
+          font-size: 24px;
+        }
+      `,
+        `
+        .mat-mdc-tooltip {
+          font-size: 24px;
+        }
+      `,
+      );
+    });
+
+    it('should update multiple legacy classnames', async () => {
+      await runMigrationTest(
+        `
+        .mat-tooltip {
+          font-size: 24px;
+        }
+        .mat-tooltip-panel {
+          padding: 12px;
+        }
+      `,
+        `
+        .mat-mdc-tooltip {
+          font-size: 24px;
+        }
+        .mat-mdc-tooltip-panel {
+          padding: 12px;
+        }
+      `,
+      );
+    });
+
+    it('should update a legacy classname w/ multiple selectors', async () => {
+      await runMigrationTest(
+        `
+        .some-class.mat-tooltip, .another-class {
+          font-size: 24px;
+        }
+      `,
+        `
+        .some-class.mat-mdc-tooltip, .another-class {
+          font-size: 24px;
+        }
+      `,
+      );
+    });
+
+    it('should preserve the whitespace of multiple selectors', async () => {
+      await runMigrationTest(
+        `
+        .some-class,
+        .mat-tooltip,
+        .another-class { font-size: 24px; }
+      `,
+        `
+        .some-class,
+        .mat-mdc-tooltip,
+        .another-class { font-size: 24px; }
+      `,
+      );
+    });
+
+    it('should add comment for potentially deprecated selector', async () => {
+      await runMigrationTest(
+        `
+        .mat-tooltip-handset {
+          font-size: 24px;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of tooltip that may no longer apply for the MDC version. */
+
+        .mat-tooltip-handset {
+          font-size: 24px;
+        }
+      `,
+      );
+    });
+
+    it('should add comment for potentially deprecated multi-line selector', async () => {
+      await runMigrationTest(
+        `
+        .some-class
+        .mat-tooltip-handset {
+          font-size: 24px;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of tooltip that may no longer apply for the MDC version. */
+
+        .some-class
+        .mat-tooltip-handset {
+          font-size: 24px;
+        }
+      `,
+      );
+    });
+
+    it('should update the legacy mat-tooltip class and add comment for potentially deprecated selector', async () => {
+      await runMigrationTest(
+        `
+        .mat-tooltip.some-class, .mat-tooltip-handset {
+          font-size: 24px;
+        }
+      `,
+        `
+        /* TODO: The following rule targets internal classes of tooltip that may no longer apply for the MDC version. */
+
+        .mat-mdc-tooltip.some-class, .mat-tooltip-handset {
+          font-size: 24px;
+        }
+      `,
+      );
+    });
+  });
+});

src/material/schematics/ng-generate/mdc-migration/rules/components/tooltip/tooltip-styles.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 {ClassNameChange, StyleMigrator} from '../../style-migrator';
+
+export class TooltipStylesMigrator extends StyleMigrator {
+  component = 'tooltip';
+
+  deprecatedPrefixes = ['mat-tooltip'];
+
+  mixinChanges = [
+    {
+      old: 'tooltip-theme',
+      new: ['mdc-tooltip-theme', 'mdc-tooltip-typography'],
+    },
+  ];
+
+  classChanges: ClassNameChange[] = [
+    {old: '.mat-tooltip', new: '.mat-mdc-tooltip'},
+    {old: '.mat-tooltip-trigger', new: '.mat-mdc-tooltip-trigger'},
+    {old: '.mat-tooltip-panel', new: '.mat-mdc-tooltip-panel'},
+    {old: '.mat-tooltip-panel-above', new: '.mat-mdc-tooltip-panel-above'},
+    {old: '.mat-tooltip-panel-below', new: '.mat-mdc-tooltip-panel-below'},
+    {old: '.mat-tooltip-panel-left', new: '.mat-mdc-tooltip-panel-left'},
+    {old: '.mat-tooltip-panel-right', new: '.mat-mdc-tooltip-panel-right'},
+    {old: '.mat-tooltip-panel-before', new: '.mat-mdc-tooltip-panel-before'},
+    {old: '.mat-tooltip-panel-after', new: '.mat-mdc-tooltip-panel-after'},
+  ];
+}

src/material/schematics/ng-generate/mdc-migration/rules/index.ts

@@ -27,6 +27,7 @@ import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-
 import {SliderStylesMigrator} from './components/slider/slider-styles';
 import {TableStylesMigrator} from './components/table/table-styles';
 import {TabsStylesMigrator} from './components/tabs/tabs-styles';
+import {TooltipStylesMigrator} from './components/tooltip/tooltip-styles';
 
 /** Contains the migrators to migrate a single component. */
 export interface ComponentMigrator {
@@ -99,4 +100,8 @@ export const MIGRATORS: ComponentMigrator[] = [
     component: 'tabs',
     styles: new TabsStylesMigrator(),
   },
+  {
+    component: 'tooltip',
+    styles: new TooltipStylesMigrator(),
+  },
 ];