Skip to content

Commit 6b17afc

Browse files
brandyscarneybrandyscarney
committed
test(react): add inputs test to test input-otp and other inputs
1 parent 1ffbc0d commit 6b17afc

File tree

6 files changed

+331
-0
lines changed

6 files changed

+331
-0
lines changed

‎packages/react/test/base/cypress.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineConfig } from 'cypress';
22

33
export default defineConfig({
4+
includeShadowDom: true,
45
video: false,
56
screenshotOnRunFailure: false,
67
defaultCommandTimeout: 10000,

‎packages/react/test/base/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import '@ionic/react/css/display.css';
2222
/* Theme variables */
2323
import './theme/variables.css';
2424
import Icons from './pages/Icons';
25+
import Inputs from './pages/Inputs';
2526
import Main from './pages/Main';
2627
import Tabs from './pages/Tabs';
2728
import TabsBasic from './pages/TabsBasic';
@@ -63,6 +64,7 @@ const App: React.FC = () => (
6364
<Route path="/tabs" component={Tabs} />
6465
<Route path="/tabs-basic" component={TabsBasic} />
6566
<Route path="/icons" component={Icons} />
67+
<Route path="/inputs" component={Inputs} />
6668
</IonRouterOutlet>
6769
</IonReactRouter>
6870
</IonApp>

‎packages/react/test/base/src/pages/Inputs.tsx‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
import React, { useState } from 'react';
2+
3+
import type {
4+
IonDatetimeCustomEvent,
5+
DatetimeChangeEventDetail,
6+
IonTextareaCustomEvent,
7+
TextareaInputEventDetail,
8+
IonSelectCustomEvent,
9+
SelectChangeEventDetail,
10+
IonRadioGroupCustomEvent,
11+
RadioGroupChangeEventDetail,
12+
IonCheckboxCustomEvent,
13+
CheckboxChangeEventDetail,
14+
IonToggleCustomEvent,
15+
ToggleChangeEventDetail,
16+
IonRangeCustomEvent,
17+
RangeChangeEventDetail,
18+
IonSegmentCustomEvent,
19+
SegmentChangeEventDetail,
20+
IonInputCustomEvent,
21+
InputInputEventDetail,
22+
IonSearchbarCustomEvent,
23+
SearchbarInputEventDetail,
24+
IonInputOtpCustomEvent,
25+
InputOtpInputEventDetail,
26+
} from '@ionic/core';
27+
import {
28+
IonBackButton,
29+
IonButton,
30+
IonButtons,
31+
IonCheckbox,
32+
IonContent,
33+
IonDatetime,
34+
IonHeader,
35+
IonInput,
36+
IonInputOtp,
37+
IonItem,
38+
IonLabel,
39+
IonPage,
40+
IonRadio,
41+
IonRadioGroup,
42+
IonRange,
43+
IonSearchbar,
44+
IonSegment,
45+
IonSegmentButton,
46+
IonSelect,
47+
IonSelectOption,
48+
IonTextarea,
49+
IonTitle,
50+
IonToggle,
51+
IonToolbar
52+
} from '@ionic/react';
53+
54+
interface InputsProps {}
55+
56+
const Inputs: React.FC<InputsProps> = () => {
57+
const [checkbox, setCheckbox] = useState(false);
58+
const [toggle, setToggle] = useState(false);
59+
const [input, setInput] = useState('');
60+
const [inputOtp, setInputOtp] = useState('');
61+
const [range, setRange] = useState({ lower: 30, upper: 70 });
62+
const [textarea, setTextarea] = useState('');
63+
const [searchbar, setSearchbar] = useState('');
64+
const [datetime, setDatetime] = useState('');
65+
const [radio, setRadio] = useState('red');
66+
const [segment, setSegment] = useState('dogs');
67+
const [select, setSelect] = useState('apples');
68+
69+
const reset = () => {
70+
setCheckbox(false);
71+
setToggle(false);
72+
setInput('');
73+
setInputOtp('');
74+
setRange({ lower: 30, upper: 70 });
75+
setTextarea('');
76+
setSearchbar('');
77+
setDatetime('');
78+
setRadio('red');
79+
setSegment('dogs');
80+
setSelect('apples');
81+
};
82+
83+
const set = () => {
84+
setCheckbox(true);
85+
setToggle(true);
86+
setInput('Hello World');
87+
setInputOtp('1234');
88+
setRange({ lower: 10, upper: 90 });
89+
setTextarea('Lorem Ipsum');
90+
setSearchbar('Search Query');
91+
setDatetime('2019-01-31');
92+
setRadio('blue');
93+
setSegment('cats');
94+
setSelect('bananas');
95+
};
96+
97+
return (
98+
<IonPage data-pageid="inputs">
99+
<IonHeader translucent={true}>
100+
<IonToolbar>
101+
<IonButtons>
102+
<IonBackButton></IonBackButton>
103+
</IonButtons>
104+
<IonTitle>Inputs</IonTitle>
105+
</IonToolbar>
106+
<IonToolbar>
107+
<IonSegment
108+
value={segment}
109+
onIonChange={(e: IonSegmentCustomEvent<SegmentChangeEventDetail>) => {
110+
if (typeof e.detail.value === 'string') setSegment(e.detail.value);
111+
}}
112+
>
113+
<IonSegmentButton value="dogs">
114+
<IonLabel>Dogs</IonLabel>
115+
</IonSegmentButton>
116+
<IonSegmentButton value="cats">
117+
<IonLabel>Cats</IonLabel>
118+
</IonSegmentButton>
119+
</IonSegment>
120+
</IonToolbar>
121+
<IonToolbar>
122+
<IonSearchbar
123+
value={searchbar}
124+
onIonInput={(e: IonSearchbarCustomEvent<SearchbarInputEventDetail>) => setSearchbar(e.detail.value!)}
125+
></IonSearchbar>
126+
</IonToolbar>
127+
</IonHeader>
128+
129+
<IonContent fullscreen={true}>
130+
<IonHeader collapse="condense">
131+
<IonToolbar>
132+
<IonTitle size="large">Inputs</IonTitle>
133+
</IonToolbar>
134+
</IonHeader>
135+
136+
<IonItem>
137+
<IonCheckbox
138+
checked={checkbox}
139+
onIonChange={(e: IonCheckboxCustomEvent<CheckboxChangeEventDetail>) => setCheckbox(e.detail.checked)}
140+
>
141+
Checkbox
142+
</IonCheckbox>
143+
</IonItem>
144+
145+
<IonItem>
146+
<IonToggle
147+
checked={toggle}
148+
onIonChange={(e: IonToggleCustomEvent<ToggleChangeEventDetail>) => setToggle(e.detail.checked)}
149+
>
150+
Toggle
151+
</IonToggle>
152+
</IonItem>
153+
154+
<IonItem>
155+
<IonInput
156+
value={input}
157+
onIonInput={(e: IonInputCustomEvent<InputInputEventDetail>) => setInput(e.detail.value!)}
158+
label="Input"
159+
></IonInput>
160+
</IonItem>
161+
162+
<IonItem>
163+
<IonInputOtp
164+
value={inputOtp}
165+
onIonInput={(e: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => setInputOtp(e.detail.value ?? '')}
166+
></IonInputOtp>
167+
</IonItem>
168+
169+
<IonItem>
170+
<IonRange
171+
label="Range"
172+
dualKnobs={true}
173+
min={0}
174+
max={100}
175+
value={range}
176+
onIonChange={(e: IonRangeCustomEvent<RangeChangeEventDetail>) => setRange(e.detail.value as { lower: number; upper: number })}
177+
></IonRange>
178+
</IonItem>
179+
180+
<IonItem>
181+
<IonTextarea
182+
value={textarea}
183+
onIonInput={(e: IonTextareaCustomEvent<TextareaInputEventDetail>) => setTextarea(e.detail.value!)}
184+
label="Textarea"
185+
></IonTextarea>
186+
</IonItem>
187+
188+
<IonItem>
189+
<IonLabel>Datetime</IonLabel>
190+
<IonDatetime
191+
value={datetime}
192+
onIonChange={(e: IonDatetimeCustomEvent<DatetimeChangeEventDetail>) => {
193+
const value = e.detail.value;
194+
if (typeof value === 'string') {
195+
setDatetime(value);
196+
}
197+
}}
198+
></IonDatetime>
199+
</IonItem>
200+
201+
<IonRadioGroup
202+
value={radio}
203+
onIonChange={(e: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => setRadio(e.detail.value)}
204+
>
205+
<IonItem>
206+
<IonRadio value="red">Red</IonRadio>
207+
</IonItem>
208+
<IonItem>
209+
<IonRadio value="green">Green</IonRadio>
210+
</IonItem>
211+
<IonItem>
212+
<IonRadio value="blue">Blue</IonRadio>
213+
</IonItem>
214+
</IonRadioGroup>
215+
216+
<IonItem>
217+
<IonSelect
218+
value={select}
219+
onIonChange={(e: IonSelectCustomEvent<SelectChangeEventDetail<any>>) => setSelect(e.detail.value)}
220+
label="Select"
221+
>
222+
<IonSelectOption value="apples">Apples</IonSelectOption>
223+
<IonSelectOption value="bananas">Bananas</IonSelectOption>
224+
</IonSelect>
225+
</IonItem>
226+
227+
<div className="ion-padding">
228+
Checkbox: {checkbox.toString()}<br />
229+
Toggle: {toggle.toString()}<br />
230+
Input: <span id="input-ref">{input}</span><br />
231+
Input OTP: <span id="input-otp-ref">{inputOtp}</span><br />
232+
Range: {JSON.stringify(range)}<br />
233+
Textarea: <span id="textarea-ref">{textarea}</span><br />
234+
Searchbar: <span id="searchbar-ref">{searchbar}</span><br />
235+
Datetime: {datetime}<br />
236+
Radio Group: {radio}<br />
237+
Segment: {segment}<br />
238+
Select: {select}<br />
239+
240+
<br />
241+
242+
<IonButton expand="block" onClick={reset} id="reset">Reset Values</IonButton>
243+
<IonButton expand="block" onClick={set} id="set">Set Values</IonButton>
244+
</div>
245+
</IonContent>
246+
</IonPage>
247+
);
248+
};
249+
250+
export default Inputs;

‎packages/react/test/base/src/pages/Main.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@ const Main: React.FC<MainProps> = () => {
4343
<IonItem routerLink="/icons">
4444
<IonLabel>Icons</IonLabel>
4545
</IonItem>
46+
<IonItem routerLink="/inputs">
47+
<IonLabel>Inputs</IonLabel>
48+
</IonItem>
4649
</IonList>
4750
</IonContent>
4851
</IonPage>

‎packages/react/test/base/tests/e2e/specs/icons/icons.cy.ts‎ renamed to ‎packages/react/test/base/tests/e2e/specs/components/icons.cy.ts‎

File renamed without changes.

‎packages/react/test/base/tests/e2e/specs/components/inputs.cy.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
describe('Inputs', () => {
2+
beforeEach(() => {
3+
cy.visit('/inputs')
4+
})
5+
6+
it('should have default value', () => {
7+
cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
8+
cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
9+
cy.get('ion-input').should('have.prop', 'value').and('eq', '');
10+
cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
11+
cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
12+
cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
13+
cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
14+
cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
15+
cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
16+
cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
17+
cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
18+
});
19+
20+
it('should set/reset values', () => {
21+
cy.get('ion-button#set').click();
22+
23+
cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', true);
24+
cy.get('ion-toggle').should('have.prop', 'checked').and('eq', true);
25+
cy.get('ion-input').should('have.prop', 'value').and('eq', 'Hello World');
26+
cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '1234');
27+
cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 10, upper: 90 });
28+
cy.get('ion-textarea').should('have.prop', 'value').and('eq', 'Lorem Ipsum');
29+
cy.get('ion-searchbar').should('have.prop', 'value').and('eq', 'Search Query');
30+
cy.get('ion-datetime').should('have.prop', 'value').and('eq', '2019-01-31');
31+
cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'blue');
32+
cy.get('ion-segment').should('have.prop', 'value').and('eq', 'cats');
33+
cy.get('ion-select').should('have.prop', 'value').and('eq', 'bananas');
34+
35+
cy.get('ion-button#reset').click();
36+
37+
cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
38+
cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
39+
cy.get('ion-input').should('have.prop', 'value').and('eq', '');
40+
cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
41+
cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
42+
cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
43+
cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
44+
cy.get('ion-datetime').should('have.prop', 'value').and('eq', '');
45+
cy.get('ion-radio-group').should('have.prop', 'value').and('eq', 'red');
46+
cy.get('ion-segment').should('have.prop', 'value').and('eq', 'dogs');
47+
cy.get('ion-select').should('have.prop', 'value').and('eq', 'apples');
48+
});
49+
50+
describe('updating text input refs', () => {
51+
it('typing into input should update ref', () => {
52+
cy.get('ion-input input').type('Hello Input', { scrollBehavior: false });
53+
54+
cy.get('#input-ref').should('have.text', 'Hello Input');
55+
});
56+
57+
it('typing into input-otp should update ref', () => {
58+
cy.get('ion-input-otp input').eq(0).type('1234', { scrollBehavior: false });
59+
60+
cy.get('#input-otp-ref').should('have.text', '1234');
61+
});
62+
63+
it('typing into searchbar should update ref', () => {
64+
cy.get('ion-searchbar input').type('Hello Searchbar', { scrollBehavior: false });
65+
66+
cy.get('#searchbar-ref').should('have.text', 'Hello Searchbar');
67+
});
68+
69+
it('typing into textarea should update ref', () => {
70+
cy.get('ion-textarea textarea').type('Hello Textarea', { scrollBehavior: false });
71+
72+
cy.get('#textarea-ref').should('have.text', 'Hello Textarea');
73+
});
74+
});
75+
})

0 commit comments

Comments
 (0)