Skip to content

Commit

Permalink
feat(material/schematics): add tabs styles migrator and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@amysorto @mmalerba
amysorto authored and mmalerba committed Jul 15, 2022
1 parent 19008ef commit 688443a
Show file tree
Hide file tree
Showing 4 changed files with 300 additions and 2 deletions.
2 changes: 2 additions & 0 deletions integration/mdc-migration/golden/src/styles.scss
View file
Expand Up @@ -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-tabs-theme($sample-project-theme);
@include mat.mdc-tabs-typography($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);
Expand Down
259 changes: 259 additions & 0 deletions src/material/schematics/ng-generate/mdc-migration/rules/components/tabs/tabs-styles.spec.ts
View file
@@ -0,0 +1,259 @@
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('tabs styles', () => {
let runner: SchematicTestRunner;
let cliAppTree: UnitTestTree;

async function runMigrationTest(oldFileContent: string, newFileContent: string) {
cliAppTree.create(THEME_FILE, oldFileContent);
const tree = await migrateComponents(['tabs'], 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.tabs-theme($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.mdc-tabs-theme($theme);
@include mat.mdc-tabs-typography($theme);
`,
);
});

it('should use the correct namespace', async () => {
await runMigrationTest(
`
@use '@angular/material' as arbitrary;
$theme: ();
@include arbitrary.tabs-theme($theme);
`,
`
@use '@angular/material' as arbitrary;
$theme: ();
@include arbitrary.mdc-tabs-theme($theme);
@include arbitrary.mdc-tabs-typography($theme);
`,
);
});

it('should handle updating multiple themes', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.tabs-theme($light-theme);
@include mat.tabs-theme($dark-theme);
`,
`
@use '@angular/material' as mat;
$light-theme: ();
$dark-theme: ();
@include mat.mdc-tabs-theme($light-theme);
@include mat.mdc-tabs-typography($light-theme);
@include mat.mdc-tabs-theme($dark-theme);
@include mat.mdc-tabs-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-tabs-theme($theme);
@include mat.mdc-tabs-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-tabs-theme($light-theme);
@include mat.mdc-tabs-typography($light-theme);
@include mat.all-component-themes($dark-theme);
@include mat.mdc-tabs-theme($dark-theme);
@include mat.mdc-tabs-typography($dark-theme);
`,
);
});

it('should preserve whitespace', async () => {
await runMigrationTest(
`
@use '@angular/material' as mat;
$theme: ();
@include mat.tabs-theme($theme);
`,
`
@use '@angular/material' as mat;
$theme: ();
@include mat.mdc-tabs-theme($theme);
@include mat.mdc-tabs-typography($theme);
`,
);
});
});

describe('selector migrations', () => {
it('should update the legacy mat-tab classname', async () => {
await runMigrationTest(
`
.mat-tab {
height: 50px;
}
`,
`
.mat-mdc-tab {
height: 50px;
}
`,
);
});

it('should update multiple legacy classnames', async () => {
await runMigrationTest(
`
.mat-tab {
height: 50px;
}
.mat-tab-body {
padding: 25px;
}
`,
`
.mat-mdc-tab {
height: 50px;
}
.mat-mdc-tab-body {
padding: 25px;
}
`,
);
});

it('should update a legacy classname w/ multiple selectors', async () => {
await runMigrationTest(
`
.some-class.mat-tab, .another-class {
height: 50px;
}
`,
`
.some-class.mat-mdc-tab, .another-class {
height: 50px;
}
`,
);
});

it('should preserve the whitespace of multiple selectors', async () => {
await runMigrationTest(
`
.some-class,
.mat-tab,
.another-class { height: 50px; }
`,
`
.some-class,
.mat-mdc-tab,
.another-class { height: 50px; }
`,
);
});

it('should add comment for potentially deprecated selector', async () => {
await runMigrationTest(
`
.mat-tab-label-content {
color: red;
}
`,
`
/* TODO: The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.mat-tab-label-content {
color: red;
}
`,
);
});

it('should add comment for potentially deprecated multi-line selector', async () => {
await runMigrationTest(
`
.some-class
.mat-tab-label-content {
color: red;
}
`,
`
/* TODO: The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.some-class
.mat-tab-label-content {
color: red;
}
`,
);
});

it('should update the legacy mat-tab class and add comment for potentially deprecated selector', async () => {
await runMigrationTest(
`
.mat-tab.some-class, .mat-tab-label-content {
padding: 25px;
}
`,
`
/* TODO: The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
.mat-mdc-tab.some-class, .mat-tab-label-content {
padding: 25px;
}
`,
);
});
});
});
31 changes: 31 additions & 0 deletions src/material/schematics/ng-generate/mdc-migration/rules/components/tabs/tabs-styles.ts
View file
@@ -0,0 +1,31 @@
/**
* @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 TabsStylesMigrator extends StyleMigrator {
component = 'tabs';

deprecatedPrefixes = ['mat-tabs', 'mat-tab'];

mixinChanges = [
{
old: 'tabs-theme',
new: ['mdc-tabs-theme', 'mdc-tabs-typography'],
},
];

classChanges: ClassNameChange[] = [
{old: '.mat-tab', new: '.mat-mdc-tab'},
{old: '.mat-tab-body', new: '.mat-mdc-tab-body'},
{old: '.mat-tab-group', new: '.mat-mdc-tab-group'},
{old: '.mat-tab-header', new: '.mat-mdc-tab-header'},
{old: '.mat-tab-nav-bar', new: '.mat-mdc-tab-nav-bar'},
{old: '.mat-tab-link', new: '.mat-mdc-tab-link'},
];
}
10 changes: 8 additions & 2 deletions src/material/schematics/ng-generate/mdc-migration/rules/index.ts
View file
Expand Up @@ -6,6 +6,9 @@
* found in the LICENSE file at https://angular.io/license
*/

import {StyleMigrator} from './style-migrator';
import {TemplateMigrator} from './template-migrator';

import {ButtonRuntimeMigrator} from './components/button/button-runtime';
import {ButtonStylesMigrator} from './components/button/button-styles';
import {CardStylesMigrator} from './components/card/card-styles';
Expand All @@ -22,9 +25,8 @@ import {RadioStylesMigrator} from './components/radio/radio-styles';
import {RuntimeMigrator} from './runtime-migrator';
import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles';
import {SliderStylesMigrator} from './components/slider/slider-styles';
import {StyleMigrator} from './style-migrator';
import {TableStylesMigrator} from './components/table/table-styles';
import {TemplateMigrator} from './template-migrator';
import {TabsStylesMigrator} from './components/tabs/tabs-styles';

/** Contains the migrators to migrate a single component. */
export interface ComponentMigrator {
Expand Down Expand Up @@ -93,4 +95,8 @@ export const MIGRATORS: ComponentMigrator[] = [
component: 'table',
styles: new TableStylesMigrator(),
},
{
component: 'tabs',
styles: new TabsStylesMigrator(),
},
];

0 comments on commit 688443a

Please sign in to comment.