Skip to content

Commit 286dbf8

Browse files
thetaPCthetaPC
committed
refactor(badge): add constants
1 parent 4de56c3 commit 286dbf8

6 files changed

Lines changed: 74 additions & 121 deletions

File tree

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
import { expect } from '@playwright/test';
22
import { configs, test } from '@utils/test/playwright';
33

4-
import { ION_BADGE_SIZES } from '../../../badge/badge.interfaces';
4+
import { ION_BADGE_SIZES, ION_BADGE_VERTICAL_POSITIONS } from '../../../badge/badge.interfaces';
55

66
configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
77
test.describe(title('avatar: badge'), () => {
88
['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge'].forEach((avatarSize) => {
99
test(`${avatarSize} - should not have visual regressions with badges`, async ({ page }) => {
10-
const positions = ['top', 'bottom'];
1110
const contents = ['', '1', '999+', '<ion-icon icon="star"></ion-icon>'];
1211

13-
const avatars = positions
14-
.flatMap((position) =>
15-
ION_BADGE_SIZES.flatMap((badgeSize) =>
16-
contents.map(
17-
(html) => `
12+
const avatars = ION_BADGE_VERTICAL_POSITIONS.flatMap((position) =>
13+
ION_BADGE_SIZES.flatMap((badgeSize) =>
14+
contents.map(
15+
(html) => `
1816
<ion-avatar size="${avatarSize}">
1917
<img src="/src/components/avatar/test/avatar.svg" />
2018
<ion-badge hue="bold" color="danger" shape="round" size="${badgeSize}" vertical="${position}">${html}</ion-badge>
2119
</ion-avatar>
2220
`
23-
)
2421
)
2522
)
26-
.join('\n');
23+
).join('\n');
2724

2825
await page.setContent(
2926
`

‎core/src/components/badge/badge.interfaces.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,11 @@ export type IonBadgeConfig = {
8888
shape?: IonBadgeShape;
8989
};
9090

91-
export type IonBadgeHue = 'bold' | 'subtle';
92-
export type IonBadgeShape = 'crisp' | 'soft' | 'round' | 'rectangular';
91+
export const ION_BADGE_HUES = ['bold', 'subtle'] as const;
92+
export type IonBadgeHue = (typeof ION_BADGE_HUES)[number];
93+
export const ION_BADGE_SHAPES = ['crisp', 'soft', 'round', 'rectangular'] as const;
94+
export type IonBadgeShape = (typeof ION_BADGE_SHAPES)[number];
9395
export const ION_BADGE_SIZES = ['small', 'medium', 'large'] as const;
9496
export type IonBadgeSize = (typeof ION_BADGE_SIZES)[number];
95-
export type IonBadgeVerticalPosition = 'top' | 'bottom';
97+
export const ION_BADGE_VERTICAL_POSITIONS = ['top', 'bottom'] as const;
98+
export type IonBadgeVerticalPosition = (typeof ION_BADGE_VERTICAL_POSITIONS)[number];

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

Lines changed: 41 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,65 @@
11
import { expect } from '@playwright/test';
22
import { configs, test } from '@utils/test/playwright';
33

4+
import { ION_BADGE_HUES } from '../../../badge/badge.interfaces';
5+
46
/**
57
* This behavior does not vary across modes/directions.
68
*
79
* `ios` is the same as `md`.
810
*/
911
configs({ directions: ['ltr'], modes: ['md', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
1012
test.describe(title('badge: hue'), () => {
11-
test('should render subtle badges', async ({ page }) => {
12-
await page.setContent(
13-
`
14-
<div id="container">
15-
<ion-badge hue="subtle">99</ion-badge>
16-
<ion-badge hue="subtle" color="primary">99</ion-badge>
17-
<ion-badge hue="subtle" color="secondary">99</ion-badge>
18-
<ion-badge hue="subtle" color="tertiary">99</ion-badge>
19-
<ion-badge hue="subtle" color="success">99</ion-badge>
20-
<ion-badge hue="subtle" color="warning">99</ion-badge>
21-
<ion-badge hue="subtle" color="danger">99</ion-badge>
22-
<ion-badge hue="subtle" color="light">99</ion-badge>
23-
<ion-badge hue="subtle" color="medium">99</ion-badge>
24-
<ion-badge hue="subtle" color="dark">99</ion-badge>
25-
26-
<br>
27-
28-
<ion-badge hue="subtle"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
29-
<ion-badge hue="subtle" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
30-
<ion-badge hue="subtle" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
31-
<ion-badge hue="subtle" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
32-
<ion-badge hue="subtle" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
33-
<ion-badge hue="subtle" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
34-
<ion-badge hue="subtle" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
35-
<ion-badge hue="subtle" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
36-
<ion-badge hue="subtle" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
37-
<ion-badge hue="subtle" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
38-
39-
<br>
40-
41-
<ion-badge hue="subtle"></ion-badge>
42-
<ion-badge hue="subtle" color="primary"></ion-badge>
43-
<ion-badge hue="subtle" color="secondary"></ion-badge>
44-
<ion-badge hue="subtle" color="tertiary"></ion-badge>
45-
<ion-badge hue="subtle" color="success"></ion-badge>
46-
<ion-badge hue="subtle" color="warning"></ion-badge>
47-
<ion-badge hue="subtle" color="danger"></ion-badge>
48-
<ion-badge hue="subtle" color="light"></ion-badge>
49-
<ion-badge hue="subtle" color="medium"></ion-badge>
50-
<ion-badge hue="subtle" color="dark"></ion-badge>
51-
</div>
52-
`,
53-
config
54-
);
55-
56-
const container = page.locator('#container');
57-
58-
await expect(container).toHaveScreenshot(screenshot('badge-hue-subtle'));
59-
});
60-
61-
test('should render bold badges', async ({ page }) => {
62-
await page.setContent(
63-
`
13+
ION_BADGE_HUES.forEach((hue) => {
14+
test(`should render ${hue} badges`, async ({ page }) => {
15+
await page.setContent(
16+
`
6417
<div id="container">
65-
<ion-badge hue="bold">99</ion-badge>
66-
<ion-badge hue="bold" color="primary">99</ion-badge>
67-
<ion-badge hue="bold" color="secondary">99</ion-badge>
68-
<ion-badge hue="bold" color="tertiary">99</ion-badge>
69-
<ion-badge hue="bold" color="success">99</ion-badge>
70-
<ion-badge hue="bold" color="warning">99</ion-badge>
71-
<ion-badge hue="bold" color="danger">99</ion-badge>
72-
<ion-badge hue="bold" color="light">99</ion-badge>
73-
<ion-badge hue="bold" color="medium">99</ion-badge>
74-
<ion-badge hue="bold" color="dark">99</ion-badge>
18+
<ion-badge hue="${hue}">99</ion-badge>
19+
<ion-badge hue="${hue}" color="primary">99</ion-badge>
20+
<ion-badge hue="${hue}" color="secondary">99</ion-badge>
21+
<ion-badge hue="${hue}" color="tertiary">99</ion-badge>
22+
<ion-badge hue="${hue}" color="success">99</ion-badge>
23+
<ion-badge hue="${hue}" color="warning">99</ion-badge>
24+
<ion-badge hue="${hue}" color="danger">99</ion-badge>
25+
<ion-badge hue="${hue}" color="light">99</ion-badge>
26+
<ion-badge hue="${hue}" color="medium">99</ion-badge>
27+
<ion-badge hue="${hue}" color="dark">99</ion-badge>
7528
7629
<br>
7730
78-
<ion-badge hue="bold"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
79-
<ion-badge hue="bold" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
80-
<ion-badge hue="bold" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
81-
<ion-badge hue="bold" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
82-
<ion-badge hue="bold" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
83-
<ion-badge hue="bold" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
84-
<ion-badge hue="bold" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
85-
<ion-badge hue="bold" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
86-
<ion-badge hue="bold" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
87-
<ion-badge hue="bold" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
31+
<ion-badge hue="${hue}"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
32+
<ion-badge hue="${hue}" color="primary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
33+
<ion-badge hue="${hue}" color="secondary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
34+
<ion-badge hue="${hue}" color="tertiary"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
35+
<ion-badge hue="${hue}" color="success"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
36+
<ion-badge hue="${hue}" color="warning"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
37+
<ion-badge hue="${hue}" color="danger"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
38+
<ion-badge hue="${hue}" color="light"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
39+
<ion-badge hue="${hue}" color="medium"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
40+
<ion-badge hue="${hue}" color="dark"><ion-icon name="logo-ionic"></ion-icon></ion-badge>
8841
8942
<br>
9043
91-
<ion-badge hue="bold"></ion-badge>
92-
<ion-badge hue="bold" color="primary"></ion-badge>
93-
<ion-badge hue="bold" color="secondary"></ion-badge>
94-
<ion-badge hue="bold" color="tertiary"></ion-badge>
95-
<ion-badge hue="bold" color="success"></ion-badge>
96-
<ion-badge hue="bold" color="warning"></ion-badge>
97-
<ion-badge hue="bold" color="danger"></ion-badge>
98-
<ion-badge hue="bold" color="light"></ion-badge>
99-
<ion-badge hue="bold" color="medium"></ion-badge>
100-
<ion-badge hue="bold" color="dark"></ion-badge>
44+
<ion-badge hue="${hue}"></ion-badge>
45+
<ion-badge hue="${hue}" color="primary"></ion-badge>
46+
<ion-badge hue="${hue}" color="secondary"></ion-badge>
47+
<ion-badge hue="${hue}" color="tertiary"></ion-badge>
48+
<ion-badge hue="${hue}" color="success"></ion-badge>
49+
<ion-badge hue="${hue}" color="warning"></ion-badge>
50+
<ion-badge hue="${hue}" color="danger"></ion-badge>
51+
<ion-badge hue="${hue}" color="light"></ion-badge>
52+
<ion-badge hue="${hue}" color="medium"></ion-badge>
53+
<ion-badge hue="${hue}" color="dark"></ion-badge>
10154
</div>
10255
`,
103-
config
104-
);
56+
config
57+
);
10558

106-
const container = page.locator('#container');
59+
const container = page.locator('#container');
10760

108-
await expect(container).toHaveScreenshot(screenshot('badge-hue-bold'));
61+
await expect(container).toHaveScreenshot(screenshot(`badge-hue-${hue}`));
62+
});
10963
});
11064
});
11165
});

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { expect } from '@playwright/test';
22
import { configs, test } from '@utils/test/playwright';
33

4+
import { ION_BADGE_SHAPES } from '../../../badge/badge.interfaces';
5+
46
/**
57
* This behavior does not vary across directions.
68
*/
79
configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
810
test.describe(title('badge: shape'), () => {
9-
['crisp', 'soft', 'round', 'rectangular'].forEach((shape) => {
11+
ION_BADGE_SHAPES.forEach((shape) => {
1012
test(`should render ${shape} badges`, async ({ page }) => {
1113
// `large` size has been applied to all badges for better visibility
1214
await page.setContent(

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { expect } from '@playwright/test';
22
import { configs, test } from '@utils/test/playwright';
33

4+
import { ION_BADGE_SIZES } from '../../../badge/badge.interfaces';
5+
46
/**
57
* This behavior does not vary across directions.
68
*/
79
configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
810
test.describe(title('badge: size'), () => {
9-
['small', 'medium', 'large'].forEach((size) => {
11+
ION_BADGE_SIZES.forEach((size) => {
1012
test(`should render ${size} badges`, async ({ page }) => {
1113
await page.setContent(
1214
`

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

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,37 @@
11
import { expect } from '@playwright/test';
22
import { configs, test } from '@utils/test/playwright';
33

4-
import { ION_BADGE_SIZES } from '../../../badge/badge.interfaces';
4+
import { ION_BADGE_SIZES, ION_BADGE_VERTICAL_POSITIONS } from '../../../badge/badge.interfaces';
55

66
configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => {
77
test.describe(title('button: badge'), () => {
88
['small', 'medium', 'large'].forEach((buttonSize) => {
99
test(`${buttonSize} - should not have visual regressions with badges`, async ({ page }) => {
10-
const positions = ['top', 'bottom'];
1110
const contents = ['', '1', '999+', '<ion-icon icon="star"></ion-icon>'];
1211

13-
const iconButtons = positions
14-
.flatMap((position) =>
15-
contents.map(
16-
(html) =>
17-
`<div class="row">${ION_BADGE_SIZES.map(
18-
(badgeSize) => `<ion-button size="${buttonSize}" shape="round">
12+
const iconButtons = ION_BADGE_VERTICAL_POSITIONS.flatMap((position) =>
13+
contents.map(
14+
(html) =>
15+
`<div class="row">${ION_BADGE_SIZES.map(
16+
(badgeSize) => `<ion-button size="${buttonSize}" shape="round">
1917
<ion-icon slot="icon-only" name="add"></ion-icon>
2018
<ion-badge hue="bold" shape="round" color="danger" size="${badgeSize}" vertical="${position}">${html}</ion-badge>
2119
</ion-button>`
22-
).join('\n')}</div>`
23-
)
20+
).join('\n')}</div>`
2421
)
25-
.join('\n');
22+
).join('\n');
2623

27-
const textButtons = positions
28-
.flatMap((position) =>
29-
contents.map(
30-
(html) =>
31-
`<div class="row">${ION_BADGE_SIZES.map(
32-
(badgeSize) => `<ion-button size="${buttonSize}" shape="round">
24+
const textButtons = ION_BADGE_VERTICAL_POSITIONS.flatMap((position) =>
25+
contents.map(
26+
(html) =>
27+
`<div class="row">${ION_BADGE_SIZES.map(
28+
(badgeSize) => `<ion-button size="${buttonSize}" shape="round">
3329
Button
3430
<ion-badge hue="bold" shape="round" color="danger" size="${badgeSize}" vertical="${position}">${html}</ion-badge>
3531
</ion-button>`
36-
).join('\n')}</div>`
37-
)
32+
).join('\n')}</div>`
3833
)
39-
.join('\n');
34+
).join('\n');
4035

4136
await page.setContent(
4237
`

0 commit comments

Comments
 (0)