Skip to content

Commit c6ae0d4

Browse files
brandyscarneybrandyscarney
committed
test(angular): add tests for input-otp in lazy tests
1 parent e8be93a commit c6ae0d4

File tree

5 files changed

+140
-2
lines changed

5 files changed

+140
-2
lines changed

‎packages/angular/test/base/e2e/src/lazy/form.spec.ts‎

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ describe('Form', () => {
77
it('should update Ionic form classes when calling form methods programmatically', async () => {
88
cy.get('#input-touched').click();
99
cy.get('#touched-input-test').should('have.class', 'ion-touched');
10+
cy.get('#input-otp-touched').click();
11+
cy.get('#touched-input-otp-number-test').should('have.class', 'ion-touched');
1012
});
1113

1214
describe('markAllAsTouched', () => {
@@ -32,6 +34,9 @@ describe('Form', () => {
3234
input2: 'Default Value',
3335
inputMin: 1,
3436
inputMax: 1,
37+
inputOtp: null,
38+
inputOtpText: '',
39+
inputOtp2: 1234,
3540
checkbox: false,
3641
radio: null
3742
});
@@ -41,6 +46,15 @@ describe('Form', () => {
4146
cy.get('ion-input.required').type('Some value');
4247
cy.get('ion-input.required input').blur();
4348

49+
// Test number OTP input
50+
cy.get('#touched-input-otp-number-test input').first().type('5678');
51+
cy.get('#touched-input-otp-number-test input').last().focus().blur();
52+
53+
54+
// Test text OTP input
55+
cy.get('#touched-input-otp-text-test input').first().type('ABCD');
56+
cy.get('#touched-input-otp-text-test input').last().focus().blur();
57+
4458
testStatus('INVALID');
4559

4660
cy.get('ion-select').click();
@@ -60,6 +74,9 @@ describe('Form', () => {
6074
input2: 'Default Value',
6175
inputMin: 1,
6276
inputMax: 1,
77+
inputOtp: 5678,
78+
inputOtpText: 'ABCD',
79+
inputOtp2: 1234,
6380
checkbox: false,
6481
radio: null
6582
});
@@ -75,6 +92,9 @@ describe('Form', () => {
7592
input2: 'Default Value',
7693
inputMin: 1,
7794
inputMax: 1,
95+
inputOtp: null,
96+
inputOtpText: '',
97+
inputOtp2: 1234,
7898
checkbox: false,
7999
radio: null
80100
});
@@ -90,6 +110,9 @@ describe('Form', () => {
90110
input2: 'Default Value',
91111
inputMin: 1,
92112
inputMax: 1,
113+
inputOtp: null,
114+
inputOtpText: '',
115+
inputOtp2: 1234,
93116
checkbox: true,
94117
radio: null
95118
});
@@ -105,8 +128,36 @@ describe('Form', () => {
105128
input2: 'Default Value',
106129
inputMin: 1,
107130
inputMax: 1,
131+
inputOtp: null,
132+
inputOtpText: '',
133+
inputOtp2: 1234,
134+
checkbox: false,
135+
radio: 'nes',
136+
});
137+
});
138+
139+
it('ion-input-otp should change', () => {
140+
// Test number OTP input
141+
cy.get('#touched-input-otp-number-test input').first().type('5678');
142+
cy.get('#touched-input-otp-number-test input').last().focus().blur();
143+
144+
// Test text OTP input
145+
cy.get('#touched-input-otp-text-test input').first().type('ABCD');
146+
cy.get('#touched-input-otp-text-test input').last().focus().blur();
147+
148+
testData({
149+
datetime: '2010-08-20',
150+
select: null,
151+
toggle: false,
152+
input: '',
153+
input2: 'Default Value',
154+
inputMin: 1,
155+
inputMax: 1,
156+
inputOtp: 5678,
157+
inputOtpText: 'ABCD',
158+
inputOtp2: 1234,
108159
checkbox: false,
109-
radio: 'nes'
160+
radio: null
110161
});
111162
});
112163

@@ -115,6 +166,38 @@ describe('Form', () => {
115166
cy.get('#submit-button').click();
116167
cy.get('#submit').should('have.text', 'true');
117168
});
169+
170+
it('ion-input-otp should validate both number and text types', () => {
171+
// Test number OTP validation
172+
cy.get('#touched-input-otp-number-test').should('have.class', 'ng-invalid');
173+
cy.get('#touched-input-otp-number-test input').first().type('5678');
174+
cy.get('#touched-input-otp-number-test input').last().focus().blur();
175+
cy.get('#touched-input-otp-number-test').should('have.class', 'ng-valid');
176+
177+
// Test text OTP validation
178+
cy.get('#touched-input-otp-text-test').should('have.class', 'ng-invalid');
179+
cy.get('#touched-input-otp-text-test input').first().type('ABCD');
180+
cy.get('#touched-input-otp-text-test input').last().focus().blur();
181+
cy.get('#touched-input-otp-text-test').should('have.class', 'ng-valid');
182+
});
183+
184+
// Add test for partial OTP input validation
185+
it('ion-input-otp should remain invalid when partially filled', () => {
186+
// Test number OTP with only first digit
187+
cy.get('#touched-input-otp-number-test').should('have.class', 'ng-invalid');
188+
cy.get('#touched-input-otp-number-test input').first().type('5');
189+
cy.get('#touched-input-otp-number-test input').eq(1).focus().blur();
190+
cy.get('#touched-input-otp-number-test').should('have.class', 'ng-invalid');
191+
192+
// Test text OTP with only first character
193+
cy.get('#touched-input-otp-text-test').should('have.class', 'ng-invalid');
194+
cy.get('#touched-input-otp-text-test input').first().type('A');
195+
cy.get('#touched-input-otp-text-test input').eq(1).focus().blur();
196+
cy.get('#touched-input-otp-text-test').should('have.class', 'ng-invalid');
197+
198+
// Verify form status is still invalid
199+
testStatus('INVALID');
200+
});
118201
});
119202

120203
describe('blur', () => {
@@ -128,6 +211,9 @@ describe('Form', () => {
128211
input2: 'Default Value',
129212
inputMin: 1,
130213
inputMax: 1,
214+
inputOtp: null,
215+
inputOtpText: '',
216+
inputOtp2: 1234,
131217
checkbox: false,
132218
radio: null
133219
});
@@ -140,6 +226,9 @@ describe('Form', () => {
140226
input2: 'Default Value',
141227
inputMin: 1,
142228
inputMax: 1,
229+
inputOtp: null,
230+
inputOtpText: '',
231+
inputOtp2: 1234,
143232
checkbox: true,
144233
radio: null
145234
});

‎packages/angular/test/base/src/app/lazy/form/form.component.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,20 @@
4444
<ion-input label="Input" formControlName="input2"></ion-input>
4545
</ion-item>
4646

47+
<ion-item>
48+
<ion-input-otp id="touched-input-otp-number-test" formControlName="inputOtp" class="required">Input OTP (required)</ion-input-otp>
49+
</ion-item>
50+
51+
<ion-item>
52+
<ion-input-otp id="touched-input-otp-text-test" type="text" formControlName="inputOtpText" class="required">Input OTP Text (required)</ion-input-otp>
53+
</ion-item>
54+
55+
<ion-button id="input-otp-touched" (click)="setOtpTouched()">Set Input OTP Touched</ion-button>
56+
57+
<ion-item>
58+
<ion-input-otp formControlName="inputOtp2">Input OTP</ion-input-otp>
59+
</ion-item>
60+
4761
<ion-item>
4862
<ion-checkbox formControlName="checkbox"> Checkbox </ion-checkbox>
4963
</ion-item>

‎packages/angular/test/base/src/app/lazy/form/form.component.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import { Component } from '@angular/core';
2-
import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
2+
import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, AbstractControl, ValidationErrors } from '@angular/forms';
33

4+
function otpRequiredLength(length: number) {
5+
return (control: AbstractControl): ValidationErrors | null => {
6+
const value = control.value;
7+
if (!value || value.toString().length !== length) {
8+
return { otpLength: true };
9+
}
10+
return null;
11+
};
12+
}
413
@Component({
514
selector: 'app-form',
615
templateUrl: './form.component.html',
@@ -19,6 +28,9 @@ export class FormComponent {
1928
toggle: [false],
2029
input: ['', Validators.required],
2130
input2: ['Default Value'],
31+
inputOtp: [null, [Validators.required, otpRequiredLength(4)]],
32+
inputOtpText: ['', [Validators.required, otpRequiredLength(4)]],
33+
inputOtp2: [1234],
2234
inputMin: [1, Validators.min(1)],
2335
inputMax: [1, Validators.max(1)],
2436
checkbox: [false],
@@ -35,6 +47,13 @@ export class FormComponent {
3547
}
3648
}
3749

50+
setOtpTouched() {
51+
const formControl = this.profileForm.get('inputOtp');
52+
if (formControl) {
53+
formControl.markAsTouched();
54+
}
55+
}
56+
3857
onSubmit() {
3958
this.submitted = 'true';
4059
}
@@ -46,6 +65,9 @@ export class FormComponent {
4665
toggle: true,
4766
input: 'Some value',
4867
input2: 'Another values',
68+
inputOtp: 5678,
69+
inputOtpText: 'ABCD',
70+
inputOtp2: 1234,
4971
checkbox: true,
5072
radio: 'nes'
5173
});

‎packages/angular/test/base/src/app/lazy/inputs/inputs.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,16 @@
7171
<ion-note slot="end">{{input}}</ion-note>
7272
</ion-item>
7373

74+
<ion-item>
75+
<ion-input-otp [(ngModel)]="inputOtp">Input OTP</ion-input-otp>
76+
<ion-note slot="end">{{inputOtp}}</ion-note>
77+
</ion-item>
78+
79+
<ion-item color="dark">
80+
<ion-input-otp [(ngModel)]="inputOtp">Input OTP Mirror</ion-input-otp>
81+
<ion-note slot="end">{{inputOtp}}</ion-note>
82+
</ion-item>
83+
7484
<ion-item>
7585
<ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox">
7686
Checkbox

‎packages/angular/test/base/src/app/lazy/inputs/inputs.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export class InputsComponent {
99

1010
datetime? = '1994-03-15';
1111
input? = 'some text';
12+
inputOtp? = '1234';
1213
checkbox = true;
1314
radio? = 'nes';
1415
toggle = true;
@@ -20,6 +21,7 @@ export class InputsComponent {
2021
console.log('set values');
2122
this.datetime = '1994-03-15';
2223
this.input = 'some text';
24+
this.inputOtp = '1234';
2325
this.checkbox = true;
2426
this.radio = 'nes';
2527
this.toggle = true;
@@ -31,6 +33,7 @@ export class InputsComponent {
3133
console.log('reset values');
3234
this.datetime = undefined;
3335
this.input = undefined;
36+
this.inputOtp = undefined;
3437
this.checkbox = false;
3538
this.radio = undefined;
3639
this.toggle = false;

0 commit comments

Comments
 (0)