Skip to content

Commit da07c36

Browse files
amysortommalerba
amysorto
authored and
mmalerba
committed
feat(material/schematics): add radio styles migrator and tests
1 parent 7646c73 commit da07c36

File tree

3 files changed

+248
-0
lines changed

3 files changed

+248
-0
lines changed

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

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
2+
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
3+
import {createNewTestRunner, migrateComponent, THEME_FILE} from '../test-setup-helper';
4+
5+
describe('radio styles', () => {
6+
let runner: SchematicTestRunner;
7+
let cliAppTree: UnitTestTree;
8+
9+
async function runMigrationTest(oldFileContent: string, newFileContent: string) {
10+
cliAppTree.create(THEME_FILE, oldFileContent);
11+
const tree = await migrateComponent('radio', runner, cliAppTree);
12+
expect(tree.readContent(THEME_FILE)).toBe(newFileContent);
13+
}
14+
15+
beforeEach(async () => {
16+
runner = createNewTestRunner();
17+
cliAppTree = patchDevkitTreeToExposeTypeScript(await createTestApp(runner));
18+
});
19+
20+
describe('mixin migrations', () => {
21+
it('should replace the old theme with the new ones', async () => {
22+
await runMigrationTest(
23+
`
24+
@use '@angular/material' as mat;
25+
$theme: ();
26+
@include mat.radio-theme($theme);
27+
`,
28+
`
29+
@use '@angular/material' as mat;
30+
$theme: ();
31+
@include mat.mdc-radio-theme($theme);
32+
@include mat.mdc-radio-typography($theme);
33+
`,
34+
);
35+
});
36+
37+
it('should use the correct namespace', async () => {
38+
await runMigrationTest(
39+
`
40+
@use '@angular/material' as arbitrary;
41+
$theme: ();
42+
@include arbitrary.radio-theme($theme);
43+
`,
44+
`
45+
@use '@angular/material' as arbitrary;
46+
$theme: ();
47+
@include arbitrary.mdc-radio-theme($theme);
48+
@include arbitrary.mdc-radio-typography($theme);
49+
`,
50+
);
51+
});
52+
53+
it('should handle updating multiple themes', async () => {
54+
await runMigrationTest(
55+
`
56+
@use '@angular/material' as mat;
57+
$light-theme: ();
58+
$dark-theme: ();
59+
@include mat.radio-theme($light-theme);
60+
@include mat.radio-theme($dark-theme);
61+
`,
62+
`
63+
@use '@angular/material' as mat;
64+
$light-theme: ();
65+
$dark-theme: ();
66+
@include mat.mdc-radio-theme($light-theme);
67+
@include mat.mdc-radio-typography($light-theme);
68+
@include mat.mdc-radio-theme($dark-theme);
69+
@include mat.mdc-radio-typography($dark-theme);
70+
`,
71+
);
72+
});
73+
74+
it('should preserve whitespace', async () => {
75+
await runMigrationTest(
76+
`
77+
@use '@angular/material' as mat;
78+
$theme: ();
79+
80+
81+
@include mat.radio-theme($theme);
82+
83+
84+
`,
85+
`
86+
@use '@angular/material' as mat;
87+
$theme: ();
88+
89+
90+
@include mat.mdc-radio-theme($theme);
91+
@include mat.mdc-radio-typography($theme);
92+
93+
94+
`,
95+
);
96+
});
97+
});
98+
99+
describe('selector migrations', () => {
100+
it('should update the legacy mat-radio-group classname', async () => {
101+
await runMigrationTest(
102+
`
103+
.mat-radio-group {
104+
display: block;
105+
}
106+
`,
107+
`
108+
.mat-mdc-radio-group {
109+
display: block;
110+
}
111+
`,
112+
);
113+
});
114+
115+
it('should update multiple legacy classnames', async () => {
116+
await runMigrationTest(
117+
`
118+
.mat-radio-button {
119+
display: block;
120+
}
121+
.mat-radio-group {
122+
padding: 16px;
123+
}
124+
`,
125+
`
126+
.mat-mdc-radio-button {
127+
display: block;
128+
}
129+
.mat-mdc-radio-group {
130+
padding: 16px;
131+
}
132+
`,
133+
);
134+
});
135+
136+
it('should update a legacy classname w/ multiple selectors', async () => {
137+
await runMigrationTest(
138+
`
139+
.some-class.mat-radio-button, .another-class {
140+
display: block;
141+
}
142+
`,
143+
`
144+
.some-class.mat-mdc-radio-button, .another-class {
145+
display: block;
146+
}
147+
`,
148+
);
149+
});
150+
151+
it('should preserve the whitespace of multiple selectors', async () => {
152+
await runMigrationTest(
153+
`
154+
.some-class,
155+
.mat-radio-button,
156+
.another-class { padding: 16px; }
157+
`,
158+
`
159+
.some-class,
160+
.mat-mdc-radio-button,
161+
.another-class { padding: 16px; }
162+
`,
163+
);
164+
});
165+
166+
it('should add comment for potentially deprecated selector', async () => {
167+
await runMigrationTest(
168+
`
169+
.mat-radio-label-content {
170+
font-size: 24px;
171+
}
172+
`,
173+
`
174+
/* TODO: The following rule targets internal classes of radio that may no longer apply for the MDC version. */
175+
176+
.mat-radio-label-content {
177+
font-size: 24px;
178+
}
179+
`,
180+
);
181+
});
182+
183+
it('should add comment for potentially deprecated multi-line selector', async () => {
184+
await runMigrationTest(
185+
`
186+
.some-class
187+
.mat-radio-container {
188+
padding: 16px;
189+
}
190+
`,
191+
`
192+
/* TODO: The following rule targets internal classes of radio that may no longer apply for the MDC version. */
193+
194+
.some-class
195+
.mat-radio-container {
196+
padding: 16px;
197+
}
198+
`,
199+
);
200+
});
201+
202+
it('should update the legacy mat-radio-group class and add comment for potentially deprecated selector', async () => {
203+
await runMigrationTest(
204+
`
205+
.mat-radio-group.some-class, .mat-radio-container {
206+
padding: 16px;
207+
}
208+
`,
209+
`
210+
/* TODO: The following rule targets internal classes of radio that may no longer apply for the MDC version. */
211+
212+
.mat-mdc-radio-group.some-class, .mat-radio-container {
213+
padding: 16px;
214+
}
215+
`,
216+
);
217+
});
218+
});
219+
});

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {ClassNameChange, StyleMigrator} from '../../style-migrator';
10+
11+
export class RadioStylesMigrator extends StyleMigrator {
12+
component = 'radio';
13+
14+
deprecatedPrefix = 'mat-radio';
15+
16+
mixinChanges = [
17+
{
18+
old: 'radio-theme',
19+
new: ['mdc-radio-theme', 'mdc-radio-typography'],
20+
},
21+
];
22+
23+
classChanges: ClassNameChange[] = [
24+
{old: '.mat-radio-group', new: '.mat-mdc-radio-group'},
25+
{old: '.mat-radio-button', new: '.mat-mdc-radio-button'},
26+
];
27+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
import {ButtonStylesMigrator} from './components/button/button-styles';
1010
import {CheckboxStylesMigrator} from './components/checkbox/checkbox-styles';
1111
import {ProgressBarStylesMigrator} from './components/progress-bar/progress-bar-styles';
12+
import {RadioStylesMigrator} from './components/radio/radio-styles';
1213
import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles';
1314
import {StyleMigrator} from './style-migrator';
1415

1516
export const MIGRATORS: StyleMigrator[] = [
1617
new ButtonStylesMigrator(),
1718
new CheckboxStylesMigrator(),
1819
new ProgressBarStylesMigrator(),
20+
new RadioStylesMigrator(),
1921
new SlideToggleStylesMigrator(),
2022
];

0 commit comments

Comments
 (0)