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

Author: amysorto

src/material/schematics/ng-generate/mdc-migration/rules/components/progress-spinner/progress-spinner-styles.ts

@@ -0,0 +1,29 @@
+/**
+ * @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 ProgressSpinnerStylesMigrator extends StyleMigrator {
+  component = 'progress-spinner';
+
+  // There are no other progress spinner selectors available aside from the
+  // specified changes below
+  deprecatedPrefix = null;
+
+  mixinChanges = [
+    {
+      old: 'progress-spinner-theme',
+      new: ['mdc-progress-spinner-theme', 'mdc-progress-spinner-typography'],
+    },
+  ];
+
+  classChanges: ClassNameChange[] = [
+    {old: '.mat-progress-spinner', new: '.mat-mdc-progress-spinner'},
+    {old: '.mat-spinner', new: '.mat-mdc-progress-spinner'},
+  ];
+}

src/material/schematics/ng-generate/mdc-migration/rules/components/progress-spinner/progress-spinner.spec.ts

@@ -0,0 +1,115 @@
+import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+import {createNewTestRunner, migrateComponent, THEME_FILE} from '../test-setup-helper';
+
+describe('progress-spinner styles', () => {
+  let runner: SchematicTestRunner;
+  let cliAppTree: UnitTestTree;
+
+  async function runMigrationTest(oldFileContent: string, newFileContent: string) {
+    cliAppTree.create(THEME_FILE, oldFileContent);
+    const tree = await migrateComponent('progress-spinner', 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.progress-spinner-theme($theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+        @include mat.mdc-progress-spinner-theme($theme);
+        @include mat.mdc-progress-spinner-typography($theme);
+      `,
+      );
+    });
+
+    it('should use the correct namespace', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as arbitrary;
+        $theme: ();
+        @include arbitrary.progress-spinner-theme($theme);
+      `,
+        `
+        @use '@angular/material' as arbitrary;
+        $theme: ();
+        @include arbitrary.mdc-progress-spinner-theme($theme);
+        @include arbitrary.mdc-progress-spinner-typography($theme);
+      `,
+      );
+    });
+
+    it('should handle updating multiple themes', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.progress-spinner-theme($light-theme);
+        @include mat.progress-spinner-theme($dark-theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.mdc-progress-spinner-theme($light-theme);
+        @include mat.mdc-progress-spinner-typography($light-theme);
+        @include mat.mdc-progress-spinner-theme($dark-theme);
+        @include mat.mdc-progress-spinner-typography($dark-theme);
+      `,
+      );
+    });
+
+    it('should preserve whitespace', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+
+
+        @include mat.progress-spinner-theme($theme);
+
+
+      `,
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+
+
+        @include mat.mdc-progress-spinner-theme($theme);
+        @include mat.mdc-progress-spinner-typography($theme);
+
+
+      `,
+      );
+    });
+  });
+
+  describe('selector migrations', () => {
+    it('should update the legacy mat-progress-spinner classname', async () => {
+      await runMigrationTest(
+        `
+        .mat-progress-spinner {
+          margin: 4px;
+        }
+      `,
+        `
+        .mat-mdc-progress-spinner {
+          margin: 4px;
+        }
+      `,
+      );
+    });
+  });
+});

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

@@ -9,6 +9,7 @@
 import {ButtonStylesMigrator} from './components/button/button-styles';
 import {CheckboxStylesMigrator} from './components/checkbox/checkbox-styles';
 import {ProgressBarStylesMigrator} from './components/progress-bar/progress-bar-styles';
+import {ProgressSpinnerStylesMigrator} from './components/progress-spinner/progress-spinner-styles';
 import {RadioStylesMigrator} from './components/radio/radio-styles';
 import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles';
 import {SliderStylesMigrator} from './components/slider/slider-styles';
@@ -18,6 +19,7 @@ export const MIGRATORS: StyleMigrator[] = [
   new ButtonStylesMigrator(),
   new CheckboxStylesMigrator(),
   new ProgressBarStylesMigrator(),
+  new ProgressSpinnerStylesMigrator(),
   new RadioStylesMigrator(),
   new SlideToggleStylesMigrator(),
   new SliderStylesMigrator(),

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

@@ -40,7 +40,7 @@ export abstract class StyleMigrator {
   abstract mixinChanges: MixinChange[];
 
   /** The prefix of classes that are specific to the old components */
-  abstract deprecatedPrefix: string;
+  abstract deprecatedPrefix: string | null;
 
   /**
    * Returns whether the given at-include at-rule is a use of a legacy mixin for this component.
@@ -125,7 +125,7 @@ export abstract class StyleMigrator {
    * @returns `true` if the given Rule uses a selector with the deprecated prefix.
    */
   isDeprecatedSelector(rule: postcss.Rule): boolean {
-    return rule.selector.includes(this.deprecatedPrefix);
+    return this.deprecatedPrefix ? rule.selector.includes(this.deprecatedPrefix) : false;
   }
 
   /**