Skip to content

Commit 9491ef6

Browse files
brandyscarneybrandyscarney
committed
test(css): simplify tests
1 parent 281163e commit 9491ef6

File tree

2 files changed

+56
-137
lines changed

2 files changed

+56
-137
lines changed

‎core/src/css/test/display.test.mjs

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,25 @@ const css = fs.readFileSync(
77
'utf8'
88
);
99

10+
const INFIXES = ['', '-sm', '-md', '-lg', '-xl'];
11+
1012
// Check for the `ion-hide-*` classes
11-
// TODO(FW-6697): remove these
13+
// TODO(FW-6697): remove all `ion-hide-*` asserts
1214
assert(css.includes('.ion-hide'), 'CSS should include .ion-hide class');
13-
assert(css.includes('.ion-hide-up'), 'CSS should include .ion-hide-up class');
14-
assert(css.includes('.ion-hide-down'), 'CSS should include .ion-hide-down class');
15-
16-
// Check for the `ion-hide-*` media classes
17-
// TODO(FW-6697): remove these
18-
assert(css.includes('.ion-hide-sm-up'), 'CSS should include .ion-hide-sm-up class');
19-
assert(css.includes('.ion-hide-sm-down'), 'CSS should include .ion-hide-sm-down class');
20-
assert(css.includes('.ion-hide-md-up'), 'CSS should include .ion-hide-md-up class');
21-
assert(css.includes('.ion-hide-md-down'), 'CSS should include .ion-hide-md-down class');
22-
assert(css.includes('.ion-hide-lg-up'), 'CSS should include .ion-hide-lg-up class');
23-
assert(css.includes('.ion-hide-lg-down'), 'CSS should include .ion-hide-lg-down class');
24-
assert(css.includes('.ion-hide-xl-up'), 'CSS should include .ion-hide-xl-up class');
25-
assert(css.includes('.ion-hide-xl-down'), 'CSS should include .ion-hide-xl-down class');
15+
16+
const HIDE_VALUES = [
17+
'up',
18+
'down'
19+
];
20+
21+
for (const value of HIDE_VALUES) {
22+
for (const infix of INFIXES) {
23+
assert(
24+
css.includes(`.ion-hide${infix}-${value}`),
25+
`CSS should include .ion-hide${infix}-${value} class`
26+
);
27+
}
28+
}
2629

2730
const DISPLAY_VALUES = [
2831
'none',
@@ -38,18 +41,12 @@ const DISPLAY_VALUES = [
3841
'table-row'
3942
];
4043

41-
// Check for the base and responsive display classes
44+
// Check for the base and responsive `ion-display-*` classes
4245
for (const value of DISPLAY_VALUES) {
43-
// Base class
44-
assert(
45-
css.includes(`.ion-display-${value}`),
46-
`CSS should include .ion-display-${value} class`
47-
);
48-
// Responsive classes
49-
for (const bp of ['sm', 'md', 'lg', 'xl']) {
46+
for (const infix of INFIXES) {
5047
assert(
51-
css.includes(`.ion-display-${bp}-${value}`),
52-
`CSS should include .ion-display-${bp}-${value} class`
48+
css.includes(`.ion-display${infix}-${value}`),
49+
`CSS should include .ion-display${infix}-${value} class`
5350
);
5451
}
5552
}

‎core/src/css/test/flex-utils.test.mjs

Lines changed: 35 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ const css = fs.readFileSync(
77
'utf8'
88
);
99

10-
// Breakpoints
11-
const BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];
10+
const INFIXES = ['', '-sm', '-md', '-lg', '-xl'];
1211

1312
// Align Content
1413
// ------------------------------------------------------------
@@ -22,18 +21,11 @@ const ALIGN_CONTENT_VALUES = [
2221
'stretch'
2322
];
2423

25-
for (const value of ALIGN_CONTENT_VALUES) {
26-
assert(
27-
css.includes(`.ion-align-content-${value}`),
28-
`CSS should include .ion-align-content-${value} class`
29-
);
30-
}
31-
32-
for (const bp of BREAKPOINTS) {
24+
for (const infix of INFIXES) {
3325
for (const value of ALIGN_CONTENT_VALUES) {
3426
assert(
35-
css.includes(`.ion-align-content-${bp}-${value}`),
36-
`CSS should include .ion-align-content-${bp}-${value} class`
27+
css.includes(`.ion-align-content${infix}-${value}`),
28+
`CSS should include .ion-align-content${infix}-${value} class`
3729
);
3830
}
3931
}
@@ -49,18 +41,11 @@ const ALIGN_ITEMS_VALUES = [
4941
'baseline'
5042
];
5143

52-
for (const value of ALIGN_ITEMS_VALUES) {
53-
assert(
54-
css.includes(`.ion-align-items-${value}`),
55-
`CSS should include .ion-align-items-${value} class`
56-
);
57-
}
58-
59-
for (const bp of BREAKPOINTS) {
44+
for (const infix of INFIXES) {
6045
for (const value of ALIGN_ITEMS_VALUES) {
6146
assert(
62-
css.includes(`.ion-align-items-${bp}-${value}`),
63-
`CSS should include .ion-align-items-${bp}-${value} class`
47+
css.includes(`.ion-align-items${infix}-${value}`),
48+
`CSS should include .ion-align-items${infix}-${value} class`
6449
);
6550
}
6651
}
@@ -77,18 +62,11 @@ const ALIGN_SELF_VALUES = [
7762
'auto'
7863
];
7964

80-
for (const value of ALIGN_SELF_VALUES) {
81-
assert(
82-
css.includes(`.ion-align-self-${value}`),
83-
`CSS should include .ion-align-self-${value} class`
84-
);
85-
}
86-
87-
for (const bp of BREAKPOINTS) {
65+
for (const infix of INFIXES) {
8866
for (const value of ALIGN_SELF_VALUES) {
8967
assert(
90-
css.includes(`.ion-align-self-${bp}-${value}`),
91-
`CSS should include .ion-align-self-${bp}-${value} class`
68+
css.includes(`.ion-align-self${infix}-${value}`),
69+
`CSS should include .ion-align-self${infix}-${value} class`
9270
);
9371
}
9472
}
@@ -105,18 +83,11 @@ const JUSTIFY_CONTENT_VALUES = [
10583
'evenly'
10684
];
10785

108-
for (const value of JUSTIFY_CONTENT_VALUES) {
109-
assert(
110-
css.includes(`.ion-justify-content-${value}`),
111-
`CSS should include .ion-justify-content-${value} class`
112-
);
113-
}
114-
115-
for (const bp of BREAKPOINTS) {
86+
for (const infix of INFIXES) {
11687
for (const value of JUSTIFY_CONTENT_VALUES) {
11788
assert(
118-
css.includes(`.ion-justify-content-${bp}-${value}`),
119-
`CSS should include .ion-justify-content-${bp}-${value} class`
89+
css.includes(`.ion-justify-content${infix}-${value}`),
90+
`CSS should include .ion-justify-content${infix}-${value} class`
12091
);
12192
}
12293
}
@@ -131,18 +102,11 @@ const FLEX_DIRECTION_VALUES = [
131102
'column-reverse'
132103
];
133104

134-
for (const value of FLEX_DIRECTION_VALUES) {
135-
assert(
136-
css.includes(`.ion-flex-${value}`),
137-
`CSS should include .ion-flex-${value} class`
138-
);
139-
}
140-
141-
for (const bp of BREAKPOINTS) {
105+
for (const infix of INFIXES) {
142106
for (const value of FLEX_DIRECTION_VALUES) {
143107
assert(
144-
css.includes(`.ion-flex-${bp}-${value}`),
145-
`CSS should include .ion-flex-${bp}-${value} class`
108+
css.includes(`.ion-flex${infix}-${value}`),
109+
`CSS should include .ion-flex${infix}-${value} class`
146110
);
147111
}
148112
}
@@ -156,24 +120,19 @@ const FLEX_WRAP_VALUES = [
156120
'wrap-reverse'
157121
];
158122

123+
// TODO(FW-6697): remove assert for .ion-${value} classes
159124
for (const value of FLEX_WRAP_VALUES) {
160-
// TODO(FW-6697): remove assert for .ion-${value} classes
161125
assert(
162126
css.includes(`.ion-${value}`),
163127
`CSS should include .ion-${value} class`
164128
);
165-
166-
assert(
167-
css.includes(`.ion-flex-${value}`),
168-
`CSS should include .ion-flex-${value} class`
169-
);
170129
}
171130

172-
for (const bp of BREAKPOINTS) {
131+
for (const infix of INFIXES) {
173132
for (const value of FLEX_WRAP_VALUES) {
174133
assert(
175-
css.includes(`.ion-flex-${bp}-${value}`),
176-
`CSS should include .ion-flex-${bp}-${value} class`
134+
css.includes(`.ion-flex${infix}-${value}`),
135+
`CSS should include .ion-flex${infix}-${value} class`
177136
);
178137
}
179138
}
@@ -188,18 +147,11 @@ const FLEX_FILL_VALUES = [
188147
'none'
189148
];
190149

191-
for (const value of FLEX_FILL_VALUES) {
192-
assert(
193-
css.includes(`.ion-flex-${value}`),
194-
`CSS should include .ion-flex-${value} class`
195-
);
196-
}
197-
198-
for (const bp of BREAKPOINTS) {
150+
for (const infix of INFIXES) {
199151
for (const value of FLEX_FILL_VALUES) {
200152
assert(
201-
css.includes(`.ion-flex-${bp}-${value}`),
202-
`CSS should include .ion-flex-${bp}-${value} class`
153+
css.includes(`.ion-flex${infix}-${value}`),
154+
`CSS should include .ion-flex${infix}-${value} class`
203155
);
204156
}
205157
}
@@ -212,69 +164,39 @@ const FLEX_GROW_SHRINK_VALUES = [
212164
'shrink'
213165
];
214166

215-
for (const value of FLEX_GROW_SHRINK_VALUES) {
216-
assert(
217-
css.includes(`.ion-flex-${value}-0`),
218-
`CSS should include .ion-flex-${value}-0 class`
219-
);
220-
221-
assert(
222-
css.includes(`.ion-flex-${value}-1`),
223-
`CSS should include .ion-flex-${value}-1 class`
224-
);
225-
}
226-
227-
for (const bp of BREAKPOINTS) {
167+
for (const infix of INFIXES) {
228168
for (const value of FLEX_GROW_SHRINK_VALUES) {
229169
assert(
230-
css.includes(`.ion-flex-${bp}-${value}-0`),
231-
`CSS should include .ion-flex-${bp}-${value}-0 class`
170+
css.includes(`.ion-flex${infix}-${value}-0`),
171+
`CSS should include .ion-flex${infix}-${value}-0 class`
232172
);
233173

234174
assert(
235-
css.includes(`.ion-flex-${bp}-${value}-1`),
236-
`CSS should include .ion-flex-${bp}-${value}-1 class`
175+
css.includes(`.ion-flex${infix}-${value}-1`),
176+
`CSS should include .ion-flex${infix}-${value}-1 class`
237177
);
238178
}
239179
}
240180

241181
// Flex Order
242182
// ------------------------------------------------------------
243183

244-
assert(
245-
css.includes(`.ion-order-first`),
246-
`CSS should include .ion-order-first class`
247-
);
248-
249-
assert(
250-
css.includes(`.ion-order-last`),
251-
`CSS should include .ion-order-last class`
252-
);
253-
254-
for (let i = 0; i <= 12; i++) {
255-
assert(
256-
css.includes(`.ion-order-${i}`),
257-
`CSS should include .ion-order-${i} class`
258-
);
259-
}
260-
261-
for (const bp of BREAKPOINTS) {
184+
for (const infix of INFIXES) {
262185
assert(
263-
css.includes(`.ion-order-${bp}-first`),
264-
`CSS should include .ion-order-${bp}-first class`
186+
css.includes(`.ion-order${infix}-first`),
187+
`CSS should include .ion-order${infix}-first class`
265188
);
266189

267190
assert(
268-
css.includes(`.ion-order-${bp}-last`),
269-
`CSS should include .ion-order-${bp}-last class`
191+
css.includes(`.ion-order${infix}-last`),
192+
`CSS should include .ion-order${infix}-last class`
270193
);
271194

272195
for (let i = 0; i <= 12; i++) {
273196
assert(
274-
css.includes(`.ion-order-${bp}-${i}`),
275-
`CSS should include .ion-order-${bp}-${i} class`
197+
css.includes(`.ion-order${infix}-${i}`),
198+
`CSS should include .ion-order${infix}-${i} class`
276199
);
277200
}
278201
}
279202

280-
console.log("All flex-utils.css tests pass.");

0 commit comments

Comments
 (0)