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

Author: amysorto

src/material/schematics/ng-generate/mdc-migration/BUILD.bazel

@@ -11,12 +11,11 @@ ts_library(
     name = "mdc_migration_lib",
     srcs = glob(
         ["**/*.ts"],
-        exclude = ["**/*.spec.ts"],
+        exclude = ["**/*.spec.ts"] + ["rules/components/test-setup-helper.ts"],
     ),
     deps = [
         "//src/cdk/schematics",
         "@npm//@angular-devkit/schematics",
-        "@npm//@bazel/runfiles",
         "@npm//@types/node",
         "@npm//postcss",
         "@npm//postcss-scss",
@@ -51,12 +50,13 @@ pkg_npm(
 ts_library(
     name = "unit_tests_lib",
     testonly = True,
-    srcs = glob(["**/*.spec.ts"]),
+    srcs = glob(["**/*.spec.ts"] + ["rules/components/test-setup-helper.ts"]),
     deps = [
         ":mdc_migration_lib",
         "//src/cdk/schematics/testing",
         "@npm//@angular-devkit/core",
         "@npm//@angular-devkit/schematics",
+        "@npm//@bazel/runfiles",
         "@npm//@types/jasmine",
         "@npm//@types/node",
     ],

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

@@ -1,6 +1,6 @@
 import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
 import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
-import {createNewTestRunner, migrateComponent, THEME_FILE} from '../util';
+import {createNewTestRunner, migrateComponent, THEME_FILE} from '../test-setup-helper';
 
 describe('button styles', () => {
   let runner: SchematicTestRunner;

src/material/schematics/ng-generate/mdc-migration/rules/components/checkbox/checkbox-styles.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('checkbox styles', () => {
+  let runner: SchematicTestRunner;
+  let cliAppTree: UnitTestTree;
+
+  async function runMigrationTest(oldFileContent: string, newFileContent: string) {
+    cliAppTree.create(THEME_FILE, oldFileContent);
+    const tree = await migrateComponent('checkbox', 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.checkbox-theme($theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+        @include mat.mdc-checkbox-theme($theme);
+        @include mat.mdc-checkbox-typography($theme);
+      `,
+      );
+    });
+
+    it('should use the correct namespace', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as arbitrary;
+        $theme: ();
+        @include arbitrary.checkbox-theme($theme);
+      `,
+        `
+        @use '@angular/material' as arbitrary;
+        $theme: ();
+        @include arbitrary.mdc-checkbox-theme($theme);
+        @include arbitrary.mdc-checkbox-typography($theme);
+      `,
+      );
+    });
+
+    it('should handle updating multiple themes', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.checkbox-theme($light-theme);
+        @include mat.checkbox-theme($dark-theme);
+      `,
+        `
+        @use '@angular/material' as mat;
+        $light-theme: ();
+        $dark-theme: ();
+        @include mat.mdc-checkbox-theme($light-theme);
+        @include mat.mdc-checkbox-typography($light-theme);
+        @include mat.mdc-checkbox-theme($dark-theme);
+        @include mat.mdc-checkbox-typography($dark-theme);
+      `,
+      );
+    });
+
+    it('should preserve whitespace', async () => {
+      await runMigrationTest(
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+
+
+        @include mat.checkbox-theme($theme);
+
+
+      `,
+        `
+        @use '@angular/material' as mat;
+        $theme: ();
+
+
+        @include mat.mdc-checkbox-theme($theme);
+        @include mat.mdc-checkbox-typography($theme);
+
+
+      `,
+      );
+    });
+  });
+
+  describe('selector migrations', () => {
+    it('should update the legacy mat-checkbox classname', async () => {
+      await runMigrationTest(
+        `
+        .mat-checkbox {
+          padding-right: 4px;
+        }
+      `,
+        `
+        .mat-mdc-checkbox {
+          padding-right: 4px;
+        }
+      `,
+      );
+    });
+  });
+});

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

@@ -0,0 +1,22 @@
+/**
+ * @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 CheckboxStylesMigrator extends StyleMigrator {
+  component = 'checkbox';
+
+  mixinChanges = [
+    {
+      old: 'checkbox-theme',
+      new: ['mdc-checkbox-theme', 'mdc-checkbox-typography'],
+    },
+  ];
+
+  classChanges: ClassNameChange[] = [{old: '.mat-checkbox', new: '.mat-mdc-checkbox'}];
+}

src/material/schematics/ng-generate/mdc-migration/rules/components/util.ts renamed to src/material/schematics/ng-generate/mdc-migration/rules/components/test-setup-helper.ts

@@ -26,6 +26,6 @@ export async function migrateComponent(
   tree: UnitTestTree,
 ): Promise<UnitTestTree> {
   return await runner
-    .runSchematicAsync('mdcMigration', {TS_CONFIG, components: [component]}, tree)
+    .runSchematicAsync('mdcMigration', {tsconfig: TS_CONFIG, components: [component]}, tree)
     .toPromise();
 }

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

@@ -7,6 +7,10 @@
  */
 
 import {ButtonStylesMigrator} from './components/button/button-styles';
+import {CheckboxStylesMigrator} from './components/checkbox/checkbox-styles';
 import {StyleMigrator} from './style-migrator';
 
-export const MIGRATORS: StyleMigrator[] = [new ButtonStylesMigrator()];
+export const MIGRATORS: StyleMigrator[] = [
+  new ButtonStylesMigrator(),
+  new CheckboxStylesMigrator(),
+];