Skip to content

Commit a8d5165

Browse files
brandyscarneybrandyscarney
committed
test(radio-group): add e2e test for supporting text
1 parent 0827a4c commit a8d5165

File tree

2 files changed

+421
-0
lines changed

2 files changed

+421
-0
lines changed

‎core/src/components/radio-group/test/supporting-text/index.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Radio Group - Supporting Text</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+
<style>
16+
.grid {
17+
display: grid;
18+
grid-template-columns: repeat(3, minmax(200px, 1fr));
19+
grid-row-gap: 20px;
20+
grid-column-gap: 20px;
21+
}
22+
h2 {
23+
font-size: 12px;
24+
font-weight: normal;
25+
26+
color: #6f7378;
27+
28+
margin-top: 10px;
29+
}
30+
ion-radio {
31+
width: 100%;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
<ion-app>
38+
<ion-header>
39+
<ion-toolbar>
40+
<ion-title>Radio Group - Supporting Text</ion-title>
41+
</ion-toolbar>
42+
</ion-header>
43+
44+
<ion-content id="content" class="ion-padding">
45+
<div class="grid">
46+
<div class="grid-item">
47+
<h2>No Supporting Text</h2>
48+
<ion-radio-group value="1">
49+
<ion-radio value="1">Label</ion-radio>
50+
<ion-radio value="2">Label</ion-radio>
51+
<ion-radio value="3">Label</ion-radio>
52+
<ion-radio value="4">Label</ion-radio>
53+
<ion-radio value="5">Label</ion-radio>
54+
</ion-radio-group>
55+
</div>
56+
57+
<div class="grid-item">
58+
<h2>Helper Text</h2>
59+
<ion-radio-group value="1" helper-text="Helper text" error-text="Error text">
60+
<ion-radio value="1">Label</ion-radio>
61+
<ion-radio value="2">Label</ion-radio>
62+
<ion-radio value="3">Label</ion-radio>
63+
<ion-radio value="4">Label</ion-radio>
64+
<ion-radio value="5">Label</ion-radio>
65+
</ion-radio-group>
66+
</div>
67+
68+
<div class="grid-item">
69+
<h2>Error Text</h2>
70+
<ion-radio-group
71+
value="1"
72+
helper-text="Helper text"
73+
error-text="Error text"
74+
class="ion-invalid ion-touched"
75+
>
76+
<ion-radio value="1">Label</ion-radio>
77+
<ion-radio value="2">Label</ion-radio>
78+
<ion-radio value="3">Label</ion-radio>
79+
<ion-radio value="4">Label</ion-radio>
80+
<ion-radio value="5">Label</ion-radio>
81+
</ion-radio-group>
82+
</div>
83+
84+
<div class="grid-item">
85+
<ion-list>
86+
<ion-list-header>List</ion-list-header>
87+
<ion-radio-group value="1">
88+
<ion-item>
89+
<ion-radio value="1">Label</ion-radio>
90+
</ion-item>
91+
<ion-item>
92+
<ion-radio value="2">Label</ion-radio>
93+
</ion-item>
94+
<ion-item>
95+
<ion-radio value="3">Label</ion-radio>
96+
</ion-item>
97+
<ion-item>
98+
<ion-radio value="4">Label</ion-radio>
99+
</ion-item>
100+
<ion-item>
101+
<ion-radio value="5">Label</ion-radio>
102+
</ion-item>
103+
</ion-radio-group>
104+
</ion-list>
105+
</div>
106+
107+
<div class="grid-item">
108+
<ion-list>
109+
<ion-list-header>Supporting Text: List</ion-list-header>
110+
<ion-radio-group value="1" helper-text="Helper text" error-text="Error text">
111+
<ion-item>
112+
<ion-radio value="1">Label</ion-radio>
113+
</ion-item>
114+
<ion-item>
115+
<ion-radio value="2">Label</ion-radio>
116+
</ion-item>
117+
<ion-item>
118+
<ion-radio value="3">Label</ion-radio>
119+
</ion-item>
120+
<ion-item>
121+
<ion-radio value="4">Label</ion-radio>
122+
</ion-item>
123+
<ion-item>
124+
<ion-radio value="5">Label</ion-radio>
125+
</ion-item>
126+
</ion-radio-group>
127+
</ion-list>
128+
</div>
129+
130+
<div class="grid-item">
131+
<ion-list>
132+
<ion-list-header>Error Text: List</ion-list-header>
133+
<ion-radio-group
134+
value="1"
135+
helper-text="Helper text"
136+
error-text="Error text"
137+
class="ion-invalid ion-touched"
138+
>
139+
<ion-item>
140+
<ion-radio value="1">Label</ion-radio>
141+
</ion-item>
142+
<ion-item>
143+
<ion-radio value="2">Label</ion-radio>
144+
</ion-item>
145+
<ion-item>
146+
<ion-radio value="3">Label</ion-radio>
147+
</ion-item>
148+
<ion-item>
149+
<ion-radio value="4">Label</ion-radio>
150+
</ion-item>
151+
<ion-item>
152+
<ion-radio value="5">Label</ion-radio>
153+
</ion-item>
154+
</ion-radio-group>
155+
</ion-list>
156+
</div>
157+
</div>
158+
159+
<button onclick="toggleValid()" class="expand">Toggle error</button>
160+
161+
<script>
162+
const radioGroups = document.querySelectorAll('ion-radio-group[helper-text]');
163+
164+
function toggleValid() {
165+
radioGroups.forEach((radioGroup) => {
166+
radioGroup.classList.toggle('ion-invalid');
167+
radioGroup.classList.toggle('ion-touched');
168+
});
169+
}
170+
</script>
171+
</ion-content>
172+
</ion-app>
173+
</body>
174+
</html>

0 commit comments

Comments
 (0)