From 84398f4b3b206f5a2a180d7ac205df46144e11b0 Mon Sep 17 00:00:00 2001 From: Amy Sorto <8575252+amysorto@users.noreply.github.com> Date: Mon, 7 Mar 2022 23:50:42 +0000 Subject: [PATCH] feat(material/schematics): add table styles migrator and tests --- .../mdc-migration/golden/src/styles.scss | 2 + .../components/table/table-styles.spec.ts | 206 ++++++++++++++++++ .../rules/components/table/table-styles.ts | 43 ++++ .../ng-generate/mdc-migration/rules/index.ts | 2 + 4 files changed, 253 insertions(+) create mode 100644 src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts create mode 100644 src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts diff --git a/integration/mdc-migration/golden/src/styles.scss b/integration/mdc-migration/golden/src/styles.scss index bbd96a86af11..baaee73b528e 100644 --- a/integration/mdc-migration/golden/src/styles.scss +++ b/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-table-theme($sample-project-theme); +@include mat.mdc-table-typography($sample-project-theme); @include mat.mdc-slider-theme($sample-project-theme); @include mat.mdc-slider-typography($sample-project-theme); @include mat.mdc-slide-toggle-theme($sample-project-theme); diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts new file mode 100644 index 000000000000..e3ec416fef43 --- /dev/null +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts @@ -0,0 +1,206 @@ +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('table styles', () => { + let runner: SchematicTestRunner; + let cliAppTree: UnitTestTree; + + async function runMigrationTest(oldFileContent: string, newFileContent: string) { + cliAppTree.create(THEME_FILE, oldFileContent); + const tree = await migrateComponents(['table'], 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.table-theme($theme); + `, + ` + @use '@angular/material' as mat; + $theme: (); + @include mat.mdc-table-theme($theme); + @include mat.mdc-table-typography($theme); + `, + ); + }); + + it('should use the correct namespace', async () => { + await runMigrationTest( + ` + @use '@angular/material' as arbitrary; + $theme: (); + @include arbitrary.table-theme($theme); + `, + ` + @use '@angular/material' as arbitrary; + $theme: (); + @include arbitrary.mdc-table-theme($theme); + @include arbitrary.mdc-table-typography($theme); + `, + ); + }); + + it('should handle updating multiple themes', async () => { + await runMigrationTest( + ` + @use '@angular/material' as mat; + $light-theme: (); + $dark-theme: (); + @include mat.table-theme($light-theme); + @include mat.table-theme($dark-theme); + `, + ` + @use '@angular/material' as mat; + $light-theme: (); + $dark-theme: (); + @include mat.mdc-table-theme($light-theme); + @include mat.mdc-table-typography($light-theme); + @include mat.mdc-table-theme($dark-theme); + @include mat.mdc-table-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-table-theme($theme); + @include mat.mdc-table-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-table-theme($light-theme); + @include mat.mdc-table-typography($light-theme); + @include mat.all-component-themes($dark-theme); + @include mat.mdc-table-theme($dark-theme); + @include mat.mdc-table-typography($dark-theme); + `, + ); + }); + + it('should preserve whitespace', async () => { + await runMigrationTest( + ` + @use '@angular/material' as mat; + $theme: (); + + + @include mat.table-theme($theme); + + + `, + ` + @use '@angular/material' as mat; + $theme: (); + + + @include mat.mdc-table-theme($theme); + @include mat.mdc-table-typography($theme); + + + `, + ); + }); + }); + + describe('selector migrations', () => { + it('should update the legacy mat-table classname', async () => { + await runMigrationTest( + ` + .mat-table { + padding: 4px; + } + `, + ` + .mat-mdc-table { + padding: 4px; + } + `, + ); + }); + + it('should update multiple legacy classnames', async () => { + await runMigrationTest( + ` + .mat-header-row { + background: red; + } + .mat-footer-row { + background: red; + } + `, + ` + .mat-mdc-header-row { + background: red; + } + .mat-mdc-footer-row { + background: red; + } + `, + ); + }); + + it('should update a legacy classname w/ multiple selectors', async () => { + await runMigrationTest( + ` + .some-class.mat-table-sticky-border-elem-left, .another-class { + border-right: 2px solid red; + } + `, + ` + .some-class.mat-mdc-table-sticky-border-elem-left, .another-class { + border-right: 2px solid red; + } + `, + ); + }); + + it('should preserve the whitespace of multiple selectors', async () => { + await runMigrationTest( + ` + .some-class, + .mat-table, + .another-class { padding: 4px; } + `, + ` + .some-class, + .mat-mdc-table, + .another-class { padding: 4px; } + `, + ); + }); + }); +}); diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts new file mode 100644 index 000000000000..807a2e65f020 --- /dev/null +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts @@ -0,0 +1,43 @@ +/** + * @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 TableStylesMigrator extends StyleMigrator { + component = 'table'; + + // There are no other table selectors available aside from the specified + // changes below + deprecatedPrefix = null; + + mixinChanges = [ + { + old: 'table-theme', + new: ['mdc-table-theme', 'mdc-table-typography'], + }, + ]; + + classChanges: ClassNameChange[] = [ + {old: '.mat-table', new: '.mat-mdc-table'}, + {old: '.mat-table-sticky', new: '.mat-mdc-table-sticky'}, + {old: '.mat-header-cell', new: '.mat-mdc-header-cell'}, + {old: '.mat-footer-cell', new: '.mat-mdc-footer-cell'}, + {old: '.mat-cell', new: '.mat-mdc-cell'}, + {old: '.mat-header-row', new: '.mat-mdc-header-row'}, + {old: '.mat-footer-row', new: '.mat-mdc-footer-row'}, + {old: '.mat-row', new: '.mat-mdc-row'}, + { + old: '.mat-table-sticky-border-elem-left', + new: '.mat-mdc-table-sticky-border-elem-left', + }, + { + old: '.mat-table-sticky-border-elem-right', + new: '.mat-mdc-table-sticky-border-elem-right', + }, + ]; +} 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 8939f1c43f73..a262fd2e7f09 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/index.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/index.ts @@ -16,6 +16,7 @@ import {ProgressSpinnerStylesMigrator} from './components/progress-spinner/progr import {RadioStylesMigrator} from './components/radio/radio-styles'; import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles'; import {SliderStylesMigrator} from './components/slider/slider-styles'; +import {TableStylesMigrator} from './components/table/table-styles'; import {StyleMigrator} from './style-migrator'; export const MIGRATORS: StyleMigrator[] = [ @@ -29,4 +30,5 @@ export const MIGRATORS: StyleMigrator[] = [ new RadioStylesMigrator(), new SlideToggleStylesMigrator(), new SliderStylesMigrator(), + new TableStylesMigrator(), ];