Skip to content

Commit 8f8f06f

Browse files
amysortommalerba
amysorto
authored and
mmalerba
committed
feat(material/schematics): add card styles migrator and tests
1 parent d1bbcd6 commit 8f8f06f

File tree

4 files changed

+302
-0
lines changed

4 files changed

+302
-0
lines changed

‎integration/mdc-migration/golden/src/styles.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ $sample-project-theme: mat.define-light-theme((
4646
@include mat.mdc-paginator-typography($sample-project-theme);
4747
@include mat.mdc-checkbox-theme($sample-project-theme);
4848
@include mat.mdc-checkbox-typography($sample-project-theme);
49+
@include mat.mdc-card-theme($sample-project-theme);
50+
@include mat.mdc-card-typography($sample-project-theme);
4951
@include mat.mdc-button-theme($sample-project-theme);
5052
@include mat.mdc-button-typography($sample-project-theme);
5153
@include mat.mdc-fab-theme($sample-project-theme);

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

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
2+
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
3+
import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';
4+
5+
describe('card 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 migrateComponents(['card'], 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.card-theme($theme);
27+
`,
28+
`
29+
@use '@angular/material' as mat;
30+
$theme: ();
31+
@include mat.mdc-card-theme($theme);
32+
@include mat.mdc-card-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.card-theme($theme);
43+
`,
44+
`
45+
@use '@angular/material' as arbitrary;
46+
$theme: ();
47+
@include arbitrary.mdc-card-theme($theme);
48+
@include arbitrary.mdc-card-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.card-theme($light-theme);
60+
@include mat.card-theme($dark-theme);
61+
`,
62+
`
63+
@use '@angular/material' as mat;
64+
$light-theme: ();
65+
$dark-theme: ();
66+
@include mat.mdc-card-theme($light-theme);
67+
@include mat.mdc-card-typography($light-theme);
68+
@include mat.mdc-card-theme($dark-theme);
69+
@include mat.mdc-card-typography($dark-theme);
70+
`,
71+
);
72+
});
73+
74+
it('should add correct theme if all-component-themes mixin included', async () => {
75+
await runMigrationTest(
76+
`
77+
@use '@angular/material' as mat;
78+
$theme: ();
79+
@include mat.all-component-themes($theme);
80+
`,
81+
`
82+
@use '@angular/material' as mat;
83+
$theme: ();
84+
@include mat.all-component-themes($theme);
85+
@include mat.mdc-card-theme($theme);
86+
@include mat.mdc-card-typography($theme);
87+
`,
88+
);
89+
});
90+
91+
it('should add multiple themes for multiple all-component-themes mixins', async () => {
92+
await runMigrationTest(
93+
`
94+
@use '@angular/material' as mat;
95+
$light-theme: ();
96+
$dark-theme: ();
97+
@include mat.all-component-themes($light-theme);
98+
@include mat.all-component-themes($dark-theme);
99+
`,
100+
`
101+
@use '@angular/material' as mat;
102+
$light-theme: ();
103+
$dark-theme: ();
104+
@include mat.all-component-themes($light-theme);
105+
@include mat.mdc-card-theme($light-theme);
106+
@include mat.mdc-card-typography($light-theme);
107+
@include mat.all-component-themes($dark-theme);
108+
@include mat.mdc-card-theme($dark-theme);
109+
@include mat.mdc-card-typography($dark-theme);
110+
`,
111+
);
112+
});
113+
114+
it('should preserve whitespace', async () => {
115+
await runMigrationTest(
116+
`
117+
@use '@angular/material' as mat;
118+
$theme: ();
119+
120+
121+
@include mat.card-theme($theme);
122+
123+
124+
`,
125+
`
126+
@use '@angular/material' as mat;
127+
$theme: ();
128+
129+
130+
@include mat.mdc-card-theme($theme);
131+
@include mat.mdc-card-typography($theme);
132+
133+
134+
`,
135+
);
136+
});
137+
});
138+
139+
describe('selector migrations', () => {
140+
it('should update the legacy mat-card classname', async () => {
141+
await runMigrationTest(
142+
`
143+
.mat-card {
144+
padding-right: 4px;
145+
}
146+
`,
147+
`
148+
.mat-mdc-card {
149+
padding-right: 4px;
150+
}
151+
`,
152+
);
153+
});
154+
155+
it('should update multiple legacy classnames', async () => {
156+
await runMigrationTest(
157+
`
158+
.mat-card {
159+
padding-right: 4px;
160+
}
161+
.mat-card-footer {
162+
padding-left: 4px;
163+
}
164+
`,
165+
`
166+
.mat-mdc-card {
167+
padding-right: 4px;
168+
}
169+
.mat-mdc-card-footer {
170+
padding-left: 4px;
171+
}
172+
`,
173+
);
174+
});
175+
176+
it('should update a legacy classname w/ multiple selectors', async () => {
177+
await runMigrationTest(
178+
`
179+
.some-class.mat-card-title, .another-class {
180+
font-size: 16px;
181+
}
182+
`,
183+
`
184+
.some-class.mat-mdc-card-title, .another-class {
185+
font-size: 16px;
186+
}
187+
`,
188+
);
189+
});
190+
191+
it('should preserve the whitespace of multiple selectors', async () => {
192+
await runMigrationTest(
193+
`
194+
.some-class,
195+
.mat-card-subtitle,
196+
.another-class { padding: 4px; }
197+
`,
198+
`
199+
.some-class,
200+
.mat-mdc-card-subtitle,
201+
.another-class { padding: 4px; }
202+
`,
203+
);
204+
});
205+
206+
it('should add comment for potentially deprecated selector', async () => {
207+
await runMigrationTest(
208+
`
209+
.mat-card-flat {
210+
margin: 4px;
211+
}
212+
`,
213+
`
214+
/* TODO: The following rule targets internal classes of card that may no longer apply for the MDC version. */
215+
216+
.mat-card-flat {
217+
margin: 4px;
218+
}
219+
`,
220+
);
221+
});
222+
223+
it('should add comment for potentially deprecated multi-line selector', async () => {
224+
await runMigrationTest(
225+
`
226+
.some-class
227+
.mat-card-flat {
228+
margin: 4px;
229+
}
230+
`,
231+
`
232+
/* TODO: The following rule targets internal classes of card that may no longer apply for the MDC version. */
233+
234+
.some-class
235+
.mat-card-flat {
236+
margin: 4px;
237+
}
238+
`,
239+
);
240+
});
241+
242+
it('should update the legacy mat-card class and add comment for potentially deprecated selector', async () => {
243+
await runMigrationTest(
244+
`
245+
.mat-card.some-class, .mat-card-flat {
246+
margin: 4px;
247+
}
248+
`,
249+
`
250+
/* TODO: The following rule targets internal classes of card that may no longer apply for the MDC version. */
251+
252+
.mat-mdc-card.some-class, .mat-card-flat {
253+
margin: 4px;
254+
}
255+
`,
256+
);
257+
});
258+
});
259+
});

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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 CardStylesMigrator extends StyleMigrator {
12+
component = 'card';
13+
14+
deprecatedPrefix = 'mat-card';
15+
16+
mixinChanges = [
17+
{
18+
old: 'card-theme',
19+
new: ['mdc-card-theme', 'mdc-card-typography'],
20+
},
21+
];
22+
23+
classChanges: ClassNameChange[] = [
24+
{old: '.mat-card', new: '.mat-mdc-card'},
25+
{old: `.mat-card-title`, new: `.mat-mdc-card-title`},
26+
{old: `.mat-card-title-group`, new: `.mat-mdc-card-title-group`},
27+
{old: `.mat-card-content`, new: `.mat-mdc-card-content`},
28+
{old: `.mat-card-subtitle`, new: `.mat-mdc-card-subtitle`},
29+
{old: `.mat-card-actions`, new: `.mat-mdc-card-actions`},
30+
{old: `.mat-card-header`, new: `.mat-mdc-card-header`},
31+
{old: `.mat-card-footer`, new: `.mat-mdc-card-footer`},
32+
{old: `.mat-card-image`, new: `.mat-mdc-card-image`},
33+
{old: `.mat-card-avatar`, new: `.mat-mdc-card-avatar`},
34+
{old: `.mat-card-sm-image`, new: `.mat-mdc-card-sm-image`},
35+
{old: `.mat-card-md-image`, new: `.mat-mdc-card-md-image`},
36+
{old: `.mat-card-lg-image`, new: `.mat-mdc-card-lg-image`},
37+
{old: `.mat-card-xl-image`, new: `.mat-mdc-card-xl-image`},
38+
];
39+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import {ButtonStylesMigrator} from './components/button/button-styles';
10+
import {CardStylesMigrator} from './components/card/card-styles';
1011
import {CheckboxStylesMigrator} from './components/checkbox/checkbox-styles';
1112
import {PaginatorStylesMigrator} from './components/paginator/paginator-styles';
1213
import {ProgressBarStylesMigrator} from './components/progress-bar/progress-bar-styles';
@@ -18,6 +19,7 @@ import {StyleMigrator} from './style-migrator';
1819

1920
export const MIGRATORS: StyleMigrator[] = [
2021
new ButtonStylesMigrator(),
22+
new CardStylesMigrator(),
2123
new CheckboxStylesMigrator(),
2224
new PaginatorStylesMigrator(),
2325
new ProgressBarStylesMigrator(),

0 commit comments

Comments
 (0)