Skip to content

Commit b8320d8

Browse files
brandyscarneybrandyscarney
committed
test(button): wrap the button text with a class for now
1 parent a63c246 commit b8320d8

File tree

2 files changed

+143
-12
lines changed

2 files changed

+143
-12
lines changed

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

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { configs, test } from '@utils/test/playwright';
44
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
55
test.describe(title('button: wrap'), () => {
66
test('should render button with long text', async ({ page }) => {
7+
// TODO(FW-4599): remove ion-text-wrap class
78
await page.setContent(
89
`
9-
<ion-button>This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
10+
<ion-button class="ion-text-wrap">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
1011
`,
1112
config
1213
);
@@ -17,9 +18,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
1718
});
1819

1920
test('should render small button with long text', async ({ page }) => {
21+
// TODO(FW-4599): remove ion-text-wrap class
2022
await page.setContent(
2123
`
22-
<ion-button size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
24+
<ion-button class="ion-text-wrap" size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
2325
`,
2426
config
2527
);
@@ -30,9 +32,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
3032
});
3133

3234
test('should render large button with long text', async ({ page }) => {
35+
// TODO(FW-4599): remove ion-text-wrap class
3336
await page.setContent(
3437
`
35-
<ion-button size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
38+
<ion-button class="ion-text-wrap" size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
3639
`,
3740
config
3841
);
@@ -43,9 +46,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
4346
});
4447

4548
test('should render button with long text and icons', async ({ page }) => {
49+
// TODO(FW-4599): remove ion-text-wrap class
4650
await page.setContent(
4751
`
48-
<ion-button>
52+
<ion-button class="ion-text-wrap">
4953
<ion-icon slot="start" name="heart"></ion-icon>
5054
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
5155
<ion-icon slot="end" name="star"></ion-icon>
@@ -60,9 +64,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
6064
});
6165

6266
test('should render block button with long text', async ({ page }) => {
67+
// TODO(FW-4599): remove ion-text-wrap class
6368
await page.setContent(
6469
`
65-
<ion-button expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
70+
<ion-button class="ion-text-wrap" expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
6671
`,
6772
config
6873
);
@@ -73,9 +78,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
7378
});
7479

7580
test('should render block button with long text and icons', async ({ page }) => {
81+
// TODO(FW-4599): remove ion-text-wrap class
7682
await page.setContent(
7783
`
78-
<ion-button expand="block">
84+
<ion-button class="ion-text-wrap" expand="block">
7985
<ion-icon slot="start" name="heart"></ion-icon>
8086
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
8187
<ion-icon slot="end" name="star"></ion-icon>
@@ -90,9 +96,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
9096
});
9197

9298
test('should render full button with long text', async ({ page }) => {
99+
// TODO(FW-4599): remove ion-text-wrap class
93100
await page.setContent(
94101
`
95-
<ion-button expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
102+
<ion-button class="ion-text-wrap" expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
96103
`,
97104
config
98105
);
@@ -103,9 +110,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
103110
});
104111

105112
test('should render full button with long text and icons', async ({ page }) => {
113+
// TODO(FW-4599): remove ion-text-wrap class
106114
await page.setContent(
107115
`
108-
<ion-button expand="full">
116+
<ion-button class="ion-text-wrap" expand="full">
109117
<ion-icon slot="start" name="heart"></ion-icon>
110118
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
111119
<ion-icon slot="end" name="star"></ion-icon>
@@ -120,10 +128,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
120128
});
121129

122130
test('should render an item button with long text', async ({ page }) => {
131+
// TODO(FW-4599): remove ion-text-wrap class
123132
await page.setContent(
124133
`
125134
<ion-item>
126-
<ion-button slot="end">
135+
<ion-button class="ion-text-wrap" slot="end">
127136
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
128137
</ion-button>
129138
</ion-item>
@@ -137,10 +146,11 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
137146
});
138147

139148
test('should render an item button with long text and icons', async ({ page }) => {
149+
// TODO(FW-4599): remove ion-text-wrap class
140150
await page.setContent(
141151
`
142152
<ion-item>
143-
<ion-button slot="end">
153+
<ion-button class="ion-text-wrap" slot="end">
144154
<ion-icon slot="start" name="heart"></ion-icon>
145155
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
146156
<ion-icon slot="end" name="star"></ion-icon>
@@ -156,11 +166,12 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
156166
});
157167

158168
test('should render a list header button with long text', async ({ page }) => {
169+
// TODO(FW-4599): remove ion-text-wrap class
159170
await page.setContent(
160171
`
161172
<ion-list-header>
162173
<ion-label>List Header</ion-label>
163-
<ion-button>
174+
<ion-button class="ion-text-wrap">
164175
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
165176
</ion-button>
166177
</ion-list-header>
@@ -174,11 +185,12 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
174185
});
175186

176187
test('should render a toolbar button with long text', async ({ page }) => {
188+
// TODO(FW-4599): remove ion-text-wrap class
177189
await page.setContent(
178190
`
179191
<ion-toolbar>
180192
<ion-buttons slot="end">
181-
<ion-button>
193+
<ion-button class="ion-text-wrap">
182194
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
183195
</ion-button>
184196
</ion-buttons>

‎core/src/components/button/test/wrap/index.html

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Button - Wrap</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+
16+
<style>
17+
h2 {
18+
font-size: 12px;
19+
font-weight: normal;
20+
21+
color: #6f7378;
22+
23+
margin-top: 10px;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<ion-app>
30+
<ion-content class="ion-padding" no-bounce>
31+
<h2>Item</h2>
32+
<ion-item>
33+
<ion-button slot="end">
34+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
35+
</ion-button>
36+
</ion-item>
37+
<ion-item>
38+
<ion-button size="default" slot="end">
39+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
40+
</ion-button>
41+
</ion-item>
42+
<ion-item>
43+
<ion-button size="large" slot="end">
44+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
45+
</ion-button>
46+
</ion-item>
47+
48+
<h2>Toolbar</h2>
49+
<ion-toolbar>
50+
<ion-buttons slot="end">
51+
<ion-button>
52+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
53+
</ion-button>
54+
</ion-buttons>
55+
</ion-toolbar>
56+
57+
<h2>Default</h2>
58+
<ion-button>Button</ion-button>
59+
<ion-button
60+
>This is the button that never ends it just goes on and on and on and on and on and on and on and on my
61+
friends</ion-button
62+
>
63+
<ion-button>
64+
<ion-icon slot="start" name="heart"></ion-icon>
65+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
66+
<ion-icon slot="end" name="star"></ion-icon>
67+
</ion-button>
68+
69+
<h2>Small</h2>
70+
<ion-button size="small">Button</ion-button>
71+
<ion-button size="small">
72+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my
73+
friends
74+
</ion-button>
75+
<ion-button size="small">
76+
<ion-icon slot="start" name="heart"></ion-icon>
77+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
78+
<ion-icon slot="end" name="star"></ion-icon>
79+
</ion-button>
80+
81+
<h2>Large</h2>
82+
<ion-button size="large">Button</ion-button>
83+
<ion-button size="large">
84+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my
85+
friends
86+
</ion-button>
87+
<ion-button size="large">
88+
<ion-icon slot="start" name="heart"></ion-icon>
89+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
90+
<ion-icon slot="end" name="star"></ion-icon>
91+
</ion-button>
92+
93+
<h2>Block</h2>
94+
<ion-button expand="block">Button</ion-button>
95+
<ion-button expand="block"
96+
>This is the button that never ends it just goes on and on and on and on and on and on and on and on my
97+
friends</ion-button
98+
>
99+
<ion-button expand="block">
100+
<ion-icon slot="start" name="heart"></ion-icon>
101+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
102+
<ion-icon slot="end" name="star"></ion-icon>
103+
</ion-button>
104+
105+
<h2>Full</h2>
106+
<ion-button expand="full">Button</ion-button>
107+
<ion-button expand="full"
108+
>This is the button that never ends it just goes on and on and on and on and on and on and on and on my
109+
friends</ion-button
110+
>
111+
<ion-button expand="full">
112+
<ion-icon slot="start" name="heart"></ion-icon>
113+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
114+
<ion-icon slot="end" name="star"></ion-icon>
115+
</ion-button>
116+
</ion-content>
117+
</ion-app>
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)