Skip to content

Commit 7646c73

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

File tree

3 files changed

+194
-0
lines changed

3 files changed

+194
-0
lines changed

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

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
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('slide-toggle 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('slide-toggle', 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.slide-toggle-theme($theme);
27+
`,
28+
`
29+
@use '@angular/material' as mat;
30+
$theme: ();
31+
@include mat.mdc-slide-toggle-theme($theme);
32+
@include mat.mdc-slide-toggle-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.slide-toggle-theme($theme);
43+
`,
44+
`
45+
@use '@angular/material' as arbitrary;
46+
$theme: ();
47+
@include arbitrary.mdc-slide-toggle-theme($theme);
48+
@include arbitrary.mdc-slide-toggle-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.slide-toggle-theme($light-theme);
60+
@include mat.slide-toggle-theme($dark-theme);
61+
`,
62+
`
63+
@use '@angular/material' as mat;
64+
$light-theme: ();
65+
$dark-theme: ();
66+
@include mat.mdc-slide-toggle-theme($light-theme);
67+
@include mat.mdc-slide-toggle-typography($light-theme);
68+
@include mat.mdc-slide-toggle-theme($dark-theme);
69+
@include mat.mdc-slide-toggle-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.slide-toggle-theme($theme);
82+
83+
84+
`,
85+
`
86+
@use '@angular/material' as mat;
87+
$theme: ();
88+
89+
90+
@include mat.mdc-slide-toggle-theme($theme);
91+
@include mat.mdc-slide-toggle-typography($theme);
92+
93+
94+
`,
95+
);
96+
});
97+
});
98+
99+
describe('selector migrations', () => {
100+
it('should update the legacy mat-slide-toggle classname', async () => {
101+
await runMigrationTest(
102+
`
103+
.mat-slide-toggle {
104+
padding: 4px;
105+
}
106+
`,
107+
`
108+
.mat-mdc-slide-toggle {
109+
padding: 4px;
110+
}
111+
`,
112+
);
113+
});
114+
115+
it('should add comment for potentially deprecated selector', async () => {
116+
await runMigrationTest(
117+
`
118+
.mat-slide-toggle-thumb {
119+
height: 16px;
120+
}
121+
`,
122+
`
123+
/* TODO: The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
124+
125+
.mat-slide-toggle-thumb {
126+
height: 16px;
127+
}
128+
`,
129+
);
130+
});
131+
132+
it('should add comment for potentially deprecated multi-line selector', async () => {
133+
await runMigrationTest(
134+
`
135+
.some-class
136+
.mat-slide-toggle-thumb {
137+
height: 16px;
138+
}
139+
`,
140+
`
141+
/* TODO: The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
142+
143+
.some-class
144+
.mat-slide-toggle-thumb {
145+
height: 16px;
146+
}
147+
`,
148+
);
149+
});
150+
151+
it('should update the legacy mat-slide-toggle class and add comment for potentially deprecated selector', async () => {
152+
await runMigrationTest(
153+
`
154+
.mat-slide-toggle.some-class, .mat-slide-toggle-thumb {
155+
background-color: transparent;
156+
}
157+
`,
158+
`
159+
/* TODO: The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
160+
161+
.mat-mdc-slide-toggle.some-class, .mat-slide-toggle-thumb {
162+
background-color: transparent;
163+
}
164+
`,
165+
);
166+
});
167+
});
168+
});

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 SlideToggleStylesMigrator extends StyleMigrator {
12+
component = 'slide-toggle';
13+
14+
deprecatedPrefix = 'mat-slide-toggle';
15+
16+
mixinChanges = [
17+
{
18+
old: 'slide-toggle-theme',
19+
new: ['mdc-slide-toggle-theme', 'mdc-slide-toggle-typography'],
20+
},
21+
];
22+
23+
classChanges: ClassNameChange[] = [{old: '.mat-slide-toggle', new: '.mat-mdc-slide-toggle'}];
24+
}

‎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,10 +9,12 @@
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 {SlideToggleStylesMigrator} from './components/slide-toggle/slide-toggle-styles';
1213
import {StyleMigrator} from './style-migrator';
1314

1415
export const MIGRATORS: StyleMigrator[] = [
1516
new ButtonStylesMigrator(),
1617
new CheckboxStylesMigrator(),
1718
new ProgressBarStylesMigrator(),
19+
new SlideToggleStylesMigrator(),
1820
];

0 commit comments

Comments
 (0)