Skip to content

Commit 7460ccd

Browse files
amysortommalerba
amysorto
authored and
mmalerba
committed
feat(material/schematics): add snack-bar styles migrator and tests
1 parent b9ee368 commit 7460ccd

File tree

8 files changed

+337
-4
lines changed

8 files changed

+337
-4
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,28 @@ describe('button styles', () => {
3838
);
3939
});
4040

41+
it('should replace the old theme with the non-duplicated new ones', async () => {
42+
await runMigrationTest(
43+
`
44+
@use '@angular/material' as mat;
45+
$theme: ();
46+
@include mat.mdc-button-theme($theme);
47+
@include mat.mdc-button-typography($theme);
48+
@include mat.button-theme($theme);
49+
`,
50+
`
51+
@use '@angular/material' as mat;
52+
$theme: ();
53+
@include mat.mdc-button-theme($theme);
54+
@include mat.mdc-button-typography($theme);
55+
@include mat.mdc-fab-theme($theme);
56+
@include mat.mdc-fab-typography($theme);
57+
@include mat.mdc-icon-button-theme($theme);
58+
@include mat.mdc-icon-button-typography($theme);
59+
`,
60+
);
61+
});
62+
4163
it('should use the correct namespace', async () => {
4264
await runMigrationTest(
4365
`

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export class ButtonStylesMigrator extends StyleMigrator {
2424
'mdc-icon-button-theme',
2525
'mdc-icon-button-typography',
2626
],
27+
checkForDuplicates: true,
2728
},
2829
];
2930

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,30 @@ describe('multiple component styles', () => {
4242
);
4343
});
4444

45+
it('should add theme once if both components include it', async () => {
46+
await runMigrationTest(
47+
['button', 'snack-bar'],
48+
`
49+
@use '@angular/material' as mat;
50+
$theme: ();
51+
@include mat.button-theme($theme);
52+
@include mat.snack-bar-theme($theme);
53+
`,
54+
`
55+
@use '@angular/material' as mat;
56+
$theme: ();
57+
@include mat.mdc-button-theme($theme);
58+
@include mat.mdc-button-typography($theme);
59+
@include mat.mdc-fab-theme($theme);
60+
@include mat.mdc-fab-typography($theme);
61+
@include mat.mdc-icon-button-theme($theme);
62+
@include mat.mdc-icon-button-typography($theme);
63+
@include mat.mdc-snack-bar-theme($theme);
64+
@include mat.mdc-snack-bar-typography($theme);
65+
`,
66+
);
67+
});
68+
4569
it('should add correct theme if all-component-themes mixin included', async () => {
4670
await runMigrationTest(
4771
['checkbox', 'radio'],

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

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
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('snack-bar 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(['snack-bar'], 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.snack-bar-theme($theme);
27+
`,
28+
`
29+
@use '@angular/material' as mat;
30+
$theme: ();
31+
@include mat.mdc-snack-bar-theme($theme);
32+
@include mat.mdc-snack-bar-typography($theme);
33+
@include mat.mdc-button-theme($theme);
34+
@include mat.mdc-button-typography($theme);
35+
`,
36+
);
37+
});
38+
39+
it('should replace the old theme with the new ones and keep the non MDC button theme', async () => {
40+
await runMigrationTest(
41+
`
42+
@use '@angular/material' as mat;
43+
$theme: ();
44+
@include mat.button-theme($theme);
45+
@include mat.snack-bar-theme($theme);
46+
`,
47+
`
48+
@use '@angular/material' as mat;
49+
$theme: ();
50+
@include mat.button-theme($theme);
51+
@include mat.mdc-snack-bar-theme($theme);
52+
@include mat.mdc-snack-bar-typography($theme);
53+
@include mat.mdc-button-theme($theme);
54+
@include mat.mdc-button-typography($theme);
55+
`,
56+
);
57+
});
58+
59+
it('should replace the old theme with the non-duplicated new ones', async () => {
60+
await runMigrationTest(
61+
`
62+
@use '@angular/material' as mat;
63+
$theme: ();
64+
@include mat.snack-bar-theme($theme);
65+
@include mat.mdc-button-theme($theme);
66+
@include mat.mdc-button-typography($theme);
67+
`,
68+
`
69+
@use '@angular/material' as mat;
70+
$theme: ();
71+
@include mat.mdc-snack-bar-theme($theme);
72+
@include mat.mdc-snack-bar-typography($theme);
73+
@include mat.mdc-button-theme($theme);
74+
@include mat.mdc-button-typography($theme);
75+
`,
76+
);
77+
});
78+
79+
it('should use the correct namespace', async () => {
80+
await runMigrationTest(
81+
`
82+
@use '@angular/material' as arbitrary;
83+
$theme: ();
84+
@include arbitrary.snack-bar-theme($theme);
85+
`,
86+
`
87+
@use '@angular/material' as arbitrary;
88+
$theme: ();
89+
@include arbitrary.mdc-snack-bar-theme($theme);
90+
@include arbitrary.mdc-snack-bar-typography($theme);
91+
@include arbitrary.mdc-button-theme($theme);
92+
@include arbitrary.mdc-button-typography($theme);
93+
`,
94+
);
95+
});
96+
97+
it('should handle updating multiple themes', async () => {
98+
await runMigrationTest(
99+
`
100+
@use '@angular/material' as mat;
101+
$light-theme: ();
102+
$dark-theme: ();
103+
@include mat.snack-bar-theme($light-theme);
104+
@include mat.snack-bar-theme($dark-theme);
105+
`,
106+
`
107+
@use '@angular/material' as mat;
108+
$light-theme: ();
109+
$dark-theme: ();
110+
@include mat.mdc-snack-bar-theme($light-theme);
111+
@include mat.mdc-snack-bar-typography($light-theme);
112+
@include mat.mdc-button-theme($light-theme);
113+
@include mat.mdc-button-typography($light-theme);
114+
@include mat.mdc-snack-bar-theme($dark-theme);
115+
@include mat.mdc-snack-bar-typography($dark-theme);
116+
@include mat.mdc-button-theme($dark-theme);
117+
@include mat.mdc-button-typography($dark-theme);
118+
`,
119+
);
120+
});
121+
122+
it('should preserve whitespace', async () => {
123+
await runMigrationTest(
124+
`
125+
@use '@angular/material' as mat;
126+
$theme: ();
127+
128+
129+
@include mat.snack-bar-theme($theme);
130+
131+
132+
`,
133+
`
134+
@use '@angular/material' as mat;
135+
$theme: ();
136+
137+
138+
@include mat.mdc-snack-bar-theme($theme);
139+
@include mat.mdc-snack-bar-typography($theme);
140+
@include mat.mdc-button-theme($theme);
141+
@include mat.mdc-button-typography($theme);
142+
143+
144+
`,
145+
);
146+
});
147+
});
148+
149+
describe('selector migrations', () => {
150+
it('should update the legacy mat-snack-bar-container classname', async () => {
151+
await runMigrationTest(
152+
`
153+
.mat-snack-bar-container {
154+
padding: 24px;
155+
}
156+
`,
157+
`
158+
.mat-mdc-snack-bar-container {
159+
padding: 24px;
160+
}
161+
`,
162+
);
163+
});
164+
165+
it('should update multiple legacy classnames', async () => {
166+
await runMigrationTest(
167+
`
168+
.mat-snack-bar-container {
169+
padding: 24px;
170+
}
171+
.mat-simple-snackbar {
172+
color: red;
173+
}
174+
`,
175+
`
176+
.mat-mdc-snack-bar-container {
177+
padding: 24px;
178+
}
179+
.mat-mdc-simple-snack-bar {
180+
color: red;
181+
}
182+
`,
183+
);
184+
});
185+
186+
it('should update a legacy classname w/ multiple selectors', async () => {
187+
await runMigrationTest(
188+
`
189+
.some-class.mat-snack-bar-container, .another-class {
190+
padding: 24px;
191+
}
192+
`,
193+
`
194+
.some-class.mat-mdc-snack-bar-container, .another-class {
195+
padding: 24px;
196+
}
197+
`,
198+
);
199+
});
200+
201+
it('should preserve the whitespace of multiple selectors', async () => {
202+
await runMigrationTest(
203+
`
204+
.some-class,
205+
.mat-snack-bar-container,
206+
.another-class { padding: 24px; }
207+
`,
208+
`
209+
.some-class,
210+
.mat-mdc-snack-bar-container,
211+
.another-class { padding: 24px; }
212+
`,
213+
);
214+
});
215+
});
216+
});

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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 SnackBarMigrator extends StyleMigrator {
12+
component = 'snack-bar';
13+
14+
// There are no other selectors with the 'mat-snack-bar' prefix available
15+
// aside from the specified changes below
16+
deprecatedPrefixes = [];
17+
18+
mixinChanges = [
19+
{
20+
old: 'snack-bar-theme',
21+
new: [
22+
'mdc-snack-bar-theme',
23+
'mdc-snack-bar-typography',
24+
'mdc-button-theme',
25+
'mdc-button-typography',
26+
],
27+
checkForDuplicates: true,
28+
},
29+
];
30+
31+
classChanges: ClassNameChange[] = [
32+
{old: '.mat-snack-bar-container', new: '.mat-mdc-snack-bar-container'},
33+
{old: '.mat-snack-bar-handset', new: '.mat-mdc-snack-bar-handset'},
34+
{old: '.mat-simple-snackbar', new: '.mat-mdc-simple-snack-bar'},
35+
];
36+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {RuntimeMigrator} from './ts-migration/runtime-migrator';
2929
import {SelectStylesMigrator} from './components/select/select-styles';
3030
import {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles';
3131
import {SliderStylesMigrator} from './components/slider/slider-styles';
32+
import {SnackBarMigrator} from './components/snack-bar/snack-bar-styles';
3233
import {TableStylesMigrator} from './components/table/table-styles';
3334
import {TabsStylesMigrator} from './components/tabs/tabs-styles';
3435
import {TooltipStylesMigrator} from './components/tooltip/tooltip-styles';
@@ -129,6 +130,10 @@ export const MIGRATORS: ComponentMigrator[] = [
129130
styles: new SliderStylesMigrator(),
130131
runtime: new RuntimeMigrator('slider'),
131132
},
133+
{
134+
component: 'snack-bar',
135+
styles: new SnackBarMigrator(),
136+
},
132137
{
133138
component: 'table',
134139
styles: new TableStylesMigrator(),

0 commit comments

Comments
 (0)