Skip to content

Commit 333f5ba

Browse files
brandyscarneybrandyscarney
committed
test(badge): add hue test
1 parent a4b5358 commit 333f5ba

9 files changed

+151
-81
lines changed

‎core/src/components/badge/test/basic/index.html‎

Lines changed: 1 addition & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -30,112 +30,72 @@
3030
<ion-item>
3131
<ion-label>Default Badge</ion-label>
3232
<ion-badge slot="end">00</ion-badge>
33-
<ion-badge slot="end" hue="subtle">00</ion-badge>
3433
<ion-badge slot="end">
3534
<ion-icon name="logo-ionic"></ion-icon>
3635
</ion-badge>
37-
<ion-badge slot="end" hue="subtle">
38-
<ion-icon name="logo-ionic"></ion-icon>
39-
</ion-badge>
4036
</ion-item>
4137
<ion-item>
4238
<ion-label>Primary Badge</ion-label>
4339
<ion-badge slot="end" color="primary">11</ion-badge>
44-
<ion-badge slot="end" hue="subtle" color="primary">11</ion-badge>
4540
<ion-badge slot="end" color="primary">
4641
<ion-icon name="logo-ionic"></ion-icon>
4742
</ion-badge>
48-
<ion-badge slot="end" hue="subtle" color="primary">
49-
<ion-icon name="logo-ionic"></ion-icon>
50-
</ion-badge>
5143
</ion-item>
5244
<ion-item>
5345
<ion-label>Secondary Badge</ion-label>
5446
<ion-badge slot="end" color="secondary">22</ion-badge>
55-
<ion-badge slot="end" hue="subtle" color="secondary">22</ion-badge>
5647
<ion-badge slot="end" color="secondary">
5748
<ion-icon name="logo-ionic"></ion-icon>
5849
</ion-badge>
59-
<ion-badge slot="end" hue="subtle" color="secondary">
60-
<ion-icon name="logo-ionic"></ion-icon>
61-
</ion-badge>
6250
</ion-item>
6351
<ion-item>
6452
<ion-label>Tertiary Badge</ion-label>
6553
<ion-badge slot="end" color="tertiary">33</ion-badge>
66-
<ion-badge slot="end" hue="subtle" color="tertiary">33</ion-badge>
6754
<ion-badge slot="end" color="tertiary">
6855
<ion-icon name="logo-ionic"></ion-icon>
6956
</ion-badge>
70-
<ion-badge slot="end" hue="subtle" color="tertiary">
71-
<ion-icon name="logo-ionic"></ion-icon>
72-
</ion-badge>
7357
</ion-item>
7458
<ion-item>
7559
<ion-label>Success Badge</ion-label>
7660
<ion-badge slot="end" color="success">44</ion-badge>
77-
<ion-badge slot="end" hue="subtle" color="success">44</ion-badge>
7861
<ion-badge slot="end" color="success">
7962
<ion-icon name="logo-ionic"></ion-icon>
8063
</ion-badge>
81-
<ion-badge slot="end" hue="subtle" color="success">
82-
<ion-icon name="logo-ionic"></ion-icon>
83-
</ion-badge>
8464
</ion-item>
8565
<ion-item>
8666
<ion-label>Warning Badge</ion-label>
8767
<ion-badge slot="end" color="warning">55</ion-badge>
88-
<ion-badge slot="end" hue="subtle" color="warning">55</ion-badge>
8968
<ion-badge slot="end" color="warning">
9069
<ion-icon name="logo-ionic"></ion-icon>
9170
</ion-badge>
92-
<ion-badge slot="end" hue="subtle" color="warning">
93-
<ion-icon name="logo-ionic"></ion-icon>
94-
</ion-badge>
9571
</ion-item>
9672
<ion-item>
9773
<ion-label>Danger Badge</ion-label>
9874
<ion-badge slot="end" color="danger">66</ion-badge>
99-
<ion-badge slot="end" hue="subtle" color="danger">66</ion-badge>
10075
<ion-badge slot="end" color="danger">
10176
<ion-icon name="logo-ionic"></ion-icon>
10277
</ion-badge>
103-
<ion-badge slot="end" hue="subtle" color="danger">
104-
<ion-icon name="logo-ionic"></ion-icon>
105-
</ion-badge>
10678
</ion-item>
10779
<ion-item>
10880
<ion-label>Light Badge</ion-label>
10981
<ion-badge slot="end" color="light">77</ion-badge>
110-
<ion-badge slot="end" hue="subtle" color="light">77</ion-badge>
11182
<ion-badge slot="end" color="light">
11283
<ion-icon name="logo-ionic"></ion-icon>
11384
</ion-badge>
114-
<ion-badge slot="end" hue="subtle" color="light">
115-
<ion-icon name="logo-ionic"></ion-icon>
116-
</ion-badge>
11785
</ion-item>
11886
<ion-item>
11987
<ion-label>Medium Badge</ion-label>
12088
<ion-badge slot="end" color="medium">88</ion-badge>
121-
<ion-badge slot="end" hue="subtle" color="medium">88</ion-badge>
12289
<ion-badge slot="end" color="medium">
12390
<ion-icon name="logo-ionic"></ion-icon>
12491
</ion-badge>
125-
<ion-badge slot="end" hue="subtle" color="medium">
126-
<ion-icon name="logo-ionic"></ion-icon>
127-
</ion-badge>
12892
</ion-item>
12993
<ion-item>
13094
<ion-label>Dark Badge</ion-label>
13195
<ion-badge slot="end" color="dark">99</ion-badge>
132-
<ion-badge slot="end" hue="subtle" color="dark">99</ion-badge>
13396
<ion-badge slot="end" color="dark">
13497
<ion-icon name="logo-ionic"></ion-icon>
13598
</ion-badge>
136-
<ion-badge slot="end" hue="subtle" color="dark">
137-
<ion-icon name="logo-ionic"></ion-icon>
138-
</ion-badge>
13999
</ion-item>
140100
<ion-item onclick="toggleColor()">
141101
<ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
@@ -150,112 +110,72 @@
150110
<ion-item>
151111
<ion-label>Default Badge</ion-label>
152112
<ion-badge slot="start">00</ion-badge>
153-
<ion-badge slot="start" hue="subtle">00</ion-badge>
154-
<ion-badge slot="start">
155-
<ion-icon name="logo-ionic"></ion-icon>
156-
</ion-badge>
157-
<ion-badge hue="subtle" slot="start">
113+
<ion-badge slot="start" color="primary">
158114
<ion-icon name="logo-ionic"></ion-icon>
159115
</ion-badge>
160116
</ion-item>
161117
<ion-item>
162118
<ion-label>Primary Badge</ion-label>
163119
<ion-badge slot="start" color="primary">11</ion-badge>
164-
<ion-badge slot="start" hue="subtle" color="primary">11</ion-badge>
165120
<ion-badge slot="start" color="primary">
166121
<ion-icon name="logo-ionic"></ion-icon>
167122
</ion-badge>
168-
<ion-badge slot="start" hue="subtle" color="primary">
169-
<ion-icon name="logo-ionic"></ion-icon>
170-
</ion-badge>
171123
</ion-item>
172124
<ion-item>
173125
<ion-label>Secondary Badge</ion-label>
174126
<ion-badge slot="start" color="secondary">22</ion-badge>
175-
<ion-badge slot="start" hue="subtle" color="secondary">22</ion-badge>
176127
<ion-badge slot="start" color="secondary">
177128
<ion-icon name="logo-ionic"></ion-icon>
178129
</ion-badge>
179-
<ion-badge slot="start" hue="subtle" color="secondary">
180-
<ion-icon name="logo-ionic"></ion-icon>
181-
</ion-badge>
182130
</ion-item>
183131
<ion-item>
184132
<ion-label>Tertiary Badge</ion-label>
185133
<ion-badge slot="start" color="tertiary">33</ion-badge>
186-
<ion-badge slot="start" hue="subtle" color="tertiary">33</ion-badge>
187134
<ion-badge slot="start" color="tertiary">
188135
<ion-icon name="logo-ionic"></ion-icon>
189136
</ion-badge>
190-
<ion-badge slot="start" hue="subtle" color="tertiary">
191-
<ion-icon name="logo-ionic"></ion-icon>
192-
</ion-badge>
193137
</ion-item>
194138
<ion-item>
195139
<ion-label>Success Badge</ion-label>
196140
<ion-badge slot="start" color="success">44</ion-badge>
197-
<ion-badge slot="start" hue="subtle" color="success">44</ion-badge>
198141
<ion-badge slot="start" color="success">
199142
<ion-icon name="logo-ionic"></ion-icon>
200143
</ion-badge>
201-
<ion-badge slot="start" hue="subtle" color="success">
202-
<ion-icon name="logo-ionic"></ion-icon>
203-
</ion-badge>
204144
</ion-item>
205145
<ion-item>
206146
<ion-label>Warning Badge</ion-label>
207147
<ion-badge slot="start" color="warning">55</ion-badge>
208-
<ion-badge slot="start" hue="subtle" color="warning">55</ion-badge>
209148
<ion-badge slot="start" color="warning">
210149
<ion-icon name="logo-ionic"></ion-icon>
211150
</ion-badge>
212-
<ion-badge slot="start" hue="subtle" color="warning">
213-
<ion-icon name="logo-ionic"></ion-icon>
214-
</ion-badge>
215151
</ion-item>
216152
<ion-item>
217153
<ion-label>Danger Badge</ion-label>
218154
<ion-badge slot="start" color="danger">66</ion-badge>
219-
<ion-badge slot="start" hue="subtle" color="danger">66</ion-badge>
220155
<ion-badge slot="start" color="danger">
221156
<ion-icon name="logo-ionic"></ion-icon>
222157
</ion-badge>
223-
<ion-badge slot="start" hue="subtle" color="danger">
224-
<ion-icon name="logo-ionic"></ion-icon>
225-
</ion-badge>
226158
</ion-item>
227159
<ion-item>
228160
<ion-label>Light Badge</ion-label>
229161
<ion-badge slot="start" color="light">77</ion-badge>
230-
<ion-badge slot="start" hue="subtle" color="light">77</ion-badge>
231162
<ion-badge slot="start" color="light">
232163
<ion-icon name="logo-ionic"></ion-icon>
233164
</ion-badge>
234-
<ion-badge slot="start" hue="subtle" color="light">
235-
<ion-icon name="logo-ionic"></ion-icon>
236-
</ion-badge>
237165
</ion-item>
238166
<ion-item>
239167
<ion-label>Medium Badge</ion-label>
240168
<ion-badge slot="start" color="medium">88</ion-badge>
241-
<ion-badge slot="start" hue="subtle" color="medium">88</ion-badge>
242169
<ion-badge slot="start" color="medium">
243170
<ion-icon name="logo-ionic"></ion-icon>
244171
</ion-badge>
245-
<ion-badge slot="start" hue="subtle" color="medium">
246-
<ion-icon name="logo-ionic"></ion-icon>
247-
</ion-badge>
248172
</ion-item>
249173
<ion-item>
250174
<ion-label>Dark Badge</ion-label>
251175
<ion-badge slot="start" color="dark">99</ion-badge>
252-
<ion-badge slot="start" hue="subtle" color="dark">99</ion-badge>
253176
<ion-badge slot="start" color="dark">
254177
<ion-icon name="logo-ionic"></ion-icon>
255178
</ion-badge>
256-
<ion-badge slot="start" hue="subtle" color="dark">
257-
<ion-icon name="logo-ionic"></ion-icon>
258-
</ion-badge>
259179
</ion-item>
260180
</ion-list>
261181
</ion-content>

‎core/src/components/badge/test/hue/badge.e2e.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
5+
test.describe(title('badge: hue'), () => {
6+
test('should render bold badges', async ({ page }) => {
7+
await page.setContent(
8+
`
9+
<div id="container">
10+
<ion-badge color="primary">99</ion-badge>
11+
<ion-badge color="secondary">99</ion-badge>
12+
<ion-badge color="tertiary">99</ion-badge>
13+
<ion-badge color="success">99</ion-badge>
14+
<ion-badge color="warning">99</ion-badge>
15+
<ion-badge color="danger">99</ion-badge>
16+
<ion-badge color="light">99</ion-badge>
17+
<ion-badge color="medium">99</ion-badge>
18+
<ion-badge color="dark">99</ion-badge>
19+
20+
<br>
21+
22+
<ion-badge color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
23+
<ion-badge color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
24+
<ion-badge color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
25+
<ion-badge color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
26+
<ion-badge color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
27+
<ion-badge color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
28+
<ion-badge color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
29+
<ion-badge color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
30+
<ion-badge color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
31+
</div>
32+
`,
33+
config
34+
);
35+
36+
const container = page.locator('#container');
37+
38+
await expect(container).toHaveScreenshot(screenshot(`badge-hue-bold`));
39+
});
40+
41+
test('should render subtle badges', async ({ page }) => {
42+
await page.setContent(
43+
`
44+
<div id="container">
45+
<ion-badge hue="subtle" color="primary">99</ion-badge>
46+
<ion-badge hue="subtle" color="secondary">99</ion-badge>
47+
<ion-badge hue="subtle" color="tertiary">99</ion-badge>
48+
<ion-badge hue="subtle" color="success">99</ion-badge>
49+
<ion-badge hue="subtle" color="warning">99</ion-badge>
50+
<ion-badge hue="subtle" color="danger">99</ion-badge>
51+
<ion-badge hue="subtle" color="light">99</ion-badge>
52+
<ion-badge hue="subtle" color="medium">99</ion-badge>
53+
<ion-badge hue="subtle" color="dark">99</ion-badge>
54+
55+
<br>
56+
57+
<ion-badge hue="subtle" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
58+
<ion-badge hue="subtle" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
59+
<ion-badge hue="subtle" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
60+
<ion-badge hue="subtle" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
61+
<ion-badge hue="subtle" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
62+
<ion-badge hue="subtle" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
63+
<ion-badge hue="subtle" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
64+
<ion-badge hue="subtle" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
65+
<ion-badge hue="subtle" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
66+
</div>
67+
`,
68+
config
69+
);
70+
71+
const container = page.locator('#container');
72+
73+
await expect(container).toHaveScreenshot(screenshot(`badge-hue-subtle`));
74+
});
75+
});
76+
});

‎core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

18.7 KB
Loading

‎core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

20.6 KB
Loading

‎core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png‎

20.4 KB
Loading

‎core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

13.4 KB
Loading

‎core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

16.6 KB
Loading

‎core/src/components/badge/test/hue/badge.e2e.ts-snapshots/badge-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png‎

16.3 KB
Loading

‎core/src/components/badge/test/hue/index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Badge - Hue</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Badge - Hue</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content id="content">
26+
<h2>Badge Hue: Bold</h2>
27+
<ion-badge color="primary">99</ion-badge>
28+
<ion-badge color="secondary">99</ion-badge>
29+
<ion-badge color="tertiary">99</ion-badge>
30+
<ion-badge color="success">99</ion-badge>
31+
<ion-badge color="warning">99</ion-badge>
32+
<ion-badge color="danger">99</ion-badge>
33+
<ion-badge color="light">99</ion-badge>
34+
<ion-badge color="medium">99</ion-badge>
35+
<ion-badge color="dark">99</ion-badge>
36+
37+
<br />
38+
39+
<ion-badge color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
40+
<ion-badge color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
41+
<ion-badge color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
42+
<ion-badge color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
43+
<ion-badge color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
44+
<ion-badge color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
45+
<ion-badge color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
46+
<ion-badge color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
47+
<ion-badge color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
48+
49+
<h2>Badge Hue: Subtle</h2>
50+
<ion-badge hue="subtle" color="primary">99</ion-badge>
51+
<ion-badge hue="subtle" color="secondary">99</ion-badge>
52+
<ion-badge hue="subtle" color="tertiary">99</ion-badge>
53+
<ion-badge hue="subtle" color="success">99</ion-badge>
54+
<ion-badge hue="subtle" color="warning">99</ion-badge>
55+
<ion-badge hue="subtle" color="danger">99</ion-badge>
56+
<ion-badge hue="subtle" color="light">99</ion-badge>
57+
<ion-badge hue="subtle" color="medium">99</ion-badge>
58+
<ion-badge hue="subtle" color="dark">99</ion-badge>
59+
60+
<br />
61+
62+
<ion-badge hue="subtle" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
63+
<ion-badge hue="subtle" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
64+
<ion-badge hue="subtle" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
65+
<ion-badge hue="subtle" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
66+
<ion-badge hue="subtle" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
67+
<ion-badge hue="subtle" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
68+
<ion-badge hue="subtle" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
69+
<ion-badge hue="subtle" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
70+
<ion-badge hue="subtle" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
71+
</ion-content>
72+
</ion-app>
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)