Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(material/schematics): add snack-bar styles migrator and tests
- Loading branch information
Showing
8 changed files
with
337 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
216 changes: 216 additions & 0 deletions
216
.../schematics/ng-generate/mdc-migration/rules/components/snack-bar/snack-bar-styles.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| 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('snack-bar styles', () => { | ||
| let runner: SchematicTestRunner; | ||
| let cliAppTree: UnitTestTree; | ||
|
|
||
| async function runMigrationTest(oldFileContent: string, newFileContent: string) { | ||
| cliAppTree.create(THEME_FILE, oldFileContent); | ||
| const tree = await migrateComponents(['snack-bar'], 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.snack-bar-theme($theme); | ||
| `, | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $theme: (); | ||
| @include mat.mdc-snack-bar-theme($theme); | ||
| @include mat.mdc-snack-bar-typography($theme); | ||
| @include mat.mdc-button-theme($theme); | ||
| @include mat.mdc-button-typography($theme); | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should replace the old theme with the new ones and keep the non MDC button theme', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $theme: (); | ||
| @include mat.button-theme($theme); | ||
| @include mat.snack-bar-theme($theme); | ||
| `, | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $theme: (); | ||
| @include mat.button-theme($theme); | ||
| @include mat.mdc-snack-bar-theme($theme); | ||
| @include mat.mdc-snack-bar-typography($theme); | ||
| @include mat.mdc-button-theme($theme); | ||
| @include mat.mdc-button-typography($theme); | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should replace the old theme with the non-duplicated new ones', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $theme: (); | ||
| @include mat.snack-bar-theme($theme); | ||
| @include mat.mdc-button-theme($theme); | ||
| @include mat.mdc-button-typography($theme); | ||
| `, | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $theme: (); | ||
| @include mat.mdc-snack-bar-theme($theme); | ||
| @include mat.mdc-snack-bar-typography($theme); | ||
| @include mat.mdc-button-theme($theme); | ||
| @include mat.mdc-button-typography($theme); | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should use the correct namespace', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| @use '@angular/material' as arbitrary; | ||
| $theme: (); | ||
| @include arbitrary.snack-bar-theme($theme); | ||
| `, | ||
| ` | ||
| @use '@angular/material' as arbitrary; | ||
| $theme: (); | ||
| @include arbitrary.mdc-snack-bar-theme($theme); | ||
| @include arbitrary.mdc-snack-bar-typography($theme); | ||
| @include arbitrary.mdc-button-theme($theme); | ||
| @include arbitrary.mdc-button-typography($theme); | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should handle updating multiple themes', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $light-theme: (); | ||
| $dark-theme: (); | ||
| @include mat.snack-bar-theme($light-theme); | ||
| @include mat.snack-bar-theme($dark-theme); | ||
| `, | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $light-theme: (); | ||
| $dark-theme: (); | ||
| @include mat.mdc-snack-bar-theme($light-theme); | ||
| @include mat.mdc-snack-bar-typography($light-theme); | ||
| @include mat.mdc-button-theme($light-theme); | ||
| @include mat.mdc-button-typography($light-theme); | ||
| @include mat.mdc-snack-bar-theme($dark-theme); | ||
| @include mat.mdc-snack-bar-typography($dark-theme); | ||
| @include mat.mdc-button-theme($dark-theme); | ||
| @include mat.mdc-button-typography($dark-theme); | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should preserve whitespace', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $theme: (); | ||
| @include mat.snack-bar-theme($theme); | ||
| `, | ||
| ` | ||
| @use '@angular/material' as mat; | ||
| $theme: (); | ||
| @include mat.mdc-snack-bar-theme($theme); | ||
| @include mat.mdc-snack-bar-typography($theme); | ||
| @include mat.mdc-button-theme($theme); | ||
| @include mat.mdc-button-typography($theme); | ||
| `, | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('selector migrations', () => { | ||
| it('should update the legacy mat-snack-bar-container classname', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| .mat-snack-bar-container { | ||
| padding: 24px; | ||
| } | ||
| `, | ||
| ` | ||
| .mat-mdc-snack-bar-container { | ||
| padding: 24px; | ||
| } | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should update multiple legacy classnames', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| .mat-snack-bar-container { | ||
| padding: 24px; | ||
| } | ||
| .mat-simple-snackbar { | ||
| color: red; | ||
| } | ||
| `, | ||
| ` | ||
| .mat-mdc-snack-bar-container { | ||
| padding: 24px; | ||
| } | ||
| .mat-mdc-simple-snack-bar { | ||
| color: red; | ||
| } | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should update a legacy classname w/ multiple selectors', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| .some-class.mat-snack-bar-container, .another-class { | ||
| padding: 24px; | ||
| } | ||
| `, | ||
| ` | ||
| .some-class.mat-mdc-snack-bar-container, .another-class { | ||
| padding: 24px; | ||
| } | ||
| `, | ||
| ); | ||
| }); | ||
|
|
||
| it('should preserve the whitespace of multiple selectors', async () => { | ||
| await runMigrationTest( | ||
| ` | ||
| .some-class, | ||
| .mat-snack-bar-container, | ||
| .another-class { padding: 24px; } | ||
| `, | ||
| ` | ||
| .some-class, | ||
| .mat-mdc-snack-bar-container, | ||
| .another-class { padding: 24px; } | ||
| `, | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
36 changes: 36 additions & 0 deletions
36
...erial/schematics/ng-generate/mdc-migration/rules/components/snack-bar/snack-bar-styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /** | ||
| * @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 SnackBarMigrator extends StyleMigrator { | ||
| component = 'snack-bar'; | ||
|
|
||
| // There are no other selectors with the 'mat-snack-bar' prefix available | ||
| // aside from the specified changes below | ||
| deprecatedPrefixes = []; | ||
|
|
||
| mixinChanges = [ | ||
| { | ||
| old: 'snack-bar-theme', | ||
| new: [ | ||
| 'mdc-snack-bar-theme', | ||
| 'mdc-snack-bar-typography', | ||
| 'mdc-button-theme', | ||
| 'mdc-button-typography', | ||
| ], | ||
| checkForDuplicates: true, | ||
| }, | ||
| ]; | ||
|
|
||
| classChanges: ClassNameChange[] = [ | ||
| {old: '.mat-snack-bar-container', new: '.mat-mdc-snack-bar-container'}, | ||
| {old: '.mat-snack-bar-handset', new: '.mat-mdc-snack-bar-handset'}, | ||
| {old: '.mat-simple-snackbar', new: '.mat-mdc-simple-snack-bar'}, | ||
| ]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.