diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-styles.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-styles.spec.ts new file mode 100644 index 000000000000..8f162f1ff415 --- /dev/null +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-styles.spec.ts @@ -0,0 +1,151 @@ +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('slider styles', () => { + let runner: SchematicTestRunner; + let cliAppTree: UnitTestTree; + + async function runMigrationTest(oldFileContent: string, newFileContent: string) { + cliAppTree.create(THEME_FILE, oldFileContent); + const tree = await migrateComponent('slider', 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.slider-theme($theme); + `, + ` + @use '@angular/material' as mat; + $theme: (); + @include mat.mdc-slider-theme($theme); + @include mat.mdc-slider-typography($theme); + `, + ); + }); + + it('should use the correct namespace', async () => { + await runMigrationTest( + ` + @use '@angular/material' as arbitrary; + $theme: (); + @include arbitrary.slider-theme($theme); + `, + ` + @use '@angular/material' as arbitrary; + $theme: (); + @include arbitrary.mdc-slider-theme($theme); + @include arbitrary.mdc-slider-typography($theme); + `, + ); + }); + + it('should handle updating multiple themes', async () => { + await runMigrationTest( + ` + @use '@angular/material' as mat; + $light-theme: (); + $dark-theme: (); + @include mat.slider-theme($light-theme); + @include mat.slider-theme($dark-theme); + `, + ` + @use '@angular/material' as mat; + $light-theme: (); + $dark-theme: (); + @include mat.mdc-slider-theme($light-theme); + @include mat.mdc-slider-typography($light-theme); + @include mat.mdc-slider-theme($dark-theme); + @include mat.mdc-slider-typography($dark-theme); + `, + ); + }); + + it('should preserve whitespace', async () => { + await runMigrationTest( + ` + @use '@angular/material' as mat; + $theme: (); + + + @include mat.slider-theme($theme); + + + `, + ` + @use '@angular/material' as mat; + $theme: (); + + + @include mat.mdc-slider-theme($theme); + @include mat.mdc-slider-typography($theme); + + + `, + ); + }); + }); + + describe('selector migrations', () => { + it('should update the legacy mat-slider classname', async () => { + await runMigrationTest( + ` + .mat-slider { + width: 100%; + } + `, + ` + .mat-mdc-slider { + width: 100%; + } + `, + ); + }); + + it('should add comment for potentially deprecated multi-line selector', async () => { + await runMigrationTest( + ` + .some-class + .mat-slider-thumb { + height: 16px; + } + `, + ` + /* TODO: The following rule targets internal classes of slider that may no longer apply for the MDC version. */ + + .some-class + .mat-slider-thumb { + height: 16px; + } + `, + ); + }); + + it('should update the legacy mat-slider class and add comment for potentially deprecated selector', async () => { + await runMigrationTest( + ` + .mat-slider.some-class, .mat-slider-thumb { + background-color: transparent; + } + `, + ` + /* TODO: The following rule targets internal classes of slider that may no longer apply for the MDC version. */ + + .mat-mdc-slider.some-class, .mat-slider-thumb { + background-color: transparent; + } + `, + ); + }); + }); +}); diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-styles.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-styles.ts new file mode 100644 index 000000000000..0d18db952f25 --- /dev/null +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/slider/slider-styles.ts @@ -0,0 +1,24 @@ +/** + * @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 SliderStylesMigrator extends StyleMigrator { + component = 'slider'; + + deprecatedPrefix = 'mat-slider'; + + mixinChanges = [ + { + old: 'slider-theme', + new: ['mdc-slider-theme', 'mdc-slider-typography'], + }, + ]; + + classChanges: ClassNameChange[] = [{old: '.mat-slider', new: '.mat-mdc-slider'}]; +} 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 ee81005a3b28..4de832025dff 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/index.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/index.ts @@ -11,6 +11,7 @@ import {CheckboxStylesMigrator} from './components/checkbox/checkbox-styles'; import {ProgressBarStylesMigrator} from './components/progress-bar/progress-bar-styles'; import {RadioStylesMigrator} from './components/radio/radio-styles'; import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles'; +import {SliderStylesMigrator} from './components/slider/slider-styles'; import {StyleMigrator} from './style-migrator'; export const MIGRATORS: StyleMigrator[] = [ @@ -19,4 +20,5 @@ export const MIGRATORS: StyleMigrator[] = [ new ProgressBarStylesMigrator(), new RadioStylesMigrator(), new SlideToggleStylesMigrator(), + new SliderStylesMigrator(), ];