test(vue): add tests for input-otp

Author: brandyscarney

packages/vue/test/base/src/views/Inputs.vue

@@ -41,6 +41,10 @@
         <ion-input v-model="input" label="Input"></ion-input>
       </ion-item>
 
+      <ion-item>
+        <ion-input-otp :value="inputOtp" @ion-input="e => inputOtp = e.detail.value"></ion-input-otp>
+      </ion-item>
+
       <ion-item>
         <ion-range label="Range" :dual-knobs="true" :min="0" :max="100" slot="end" v-model="range"></ion-range>
       </ion-item>
@@ -77,6 +81,7 @@
         Checkbox: {{ checkbox }}<br>
         Toggle: {{ toggle }}<br>
         Input: <span id="input-ref">{{ input }}</span><br>
+        Input OTP: <span id="input-otp-ref">{{ inputOtp }}</span><br>
         Range: {{ range }}<br>
         Textarea: <span id="textarea-ref">{{ textarea }}</span><br>
         Searchbar: <span id="searchbar-ref">{{ searchbar }}</span><br>
@@ -104,6 +109,7 @@ import {
   IonDatetime,
   IonHeader,
   IonInput,
+  IonInputOtp,
   IonItem,
   IonLabel,
   IonPage,
@@ -132,6 +138,7 @@ export default defineComponent({
     IonDatetime,
     IonHeader,
     IonInput,
+    IonInputOtp,
     IonItem,
     IonLabel,
     IonPage,
@@ -152,6 +159,7 @@ export default defineComponent({
     const checkbox = ref(false);
     const toggle = ref(false);
     const input = ref('');
+    const inputOtp = ref('');
     const range = ref({
       lower: 30,
       upper: 70
@@ -167,6 +175,7 @@ export default defineComponent({
       checkbox.value = false;
       toggle.value = false;
       input.value = '';
+      inputOtp.value = '';
       range.value = {
         lower: 30,
         upper: 70
@@ -183,6 +192,7 @@ export default defineComponent({
       checkbox.value = true;
       toggle.value = true;
       input.value = 'Hello World';
+      inputOtp.value = '1234';
       range.value = {
         lower: 10,
         upper: 90
@@ -199,6 +209,7 @@ export default defineComponent({
       checkbox,
       toggle,
       input,
+      inputOtp,
       range,
       textarea,
       searchbar,

packages/vue/test/base/tests/e2e/specs/inputs.cy.js

@@ -6,6 +6,7 @@ describe('Inputs', () => {
     cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
     cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
     cy.get('ion-input').should('have.prop', 'value').and('eq', '');
+    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
     cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
     cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
     cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
@@ -21,6 +22,7 @@ describe('Inputs', () => {
     cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', true);
     cy.get('ion-toggle').should('have.prop', 'checked').and('eq', true);
     cy.get('ion-input').should('have.prop', 'value').and('eq', 'Hello World');
+    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '1234');
     cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 10, upper: 90 });
     cy.get('ion-textarea').should('have.prop', 'value').and('eq', 'Lorem Ipsum');
     cy.get('ion-searchbar').should('have.prop', 'value').and('eq', 'Search Query');
@@ -34,6 +36,7 @@ describe('Inputs', () => {
     cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);
     cy.get('ion-toggle').should('have.prop', 'checked').and('eq', false);
     cy.get('ion-input').should('have.prop', 'value').and('eq', '');
+    cy.get('ion-input-otp').should('have.prop', 'value').and('eq', '');
     cy.get('ion-range').should('have.prop', 'value').and('deep.eq', { lower: 30, upper: 70 });
     cy.get('ion-textarea').should('have.prop', 'value').and('eq', '');
     cy.get('ion-searchbar').should('have.prop', 'value').and('eq', '');
@@ -49,6 +52,11 @@ describe('Inputs', () => {
 
       cy.get('#input-ref').should('have.text', 'Hello Input');
     });
+    it('typing into input-otp should update ref', () => {
+      cy.get('ion-input-otp input').eq(0).type('1234', { scrollBehavior: false });
+
+      cy.get('#input-otp-ref').should('have.text', '1234');
+    });
     it('typing into searchbar should update ref', () => {
       cy.get('ion-searchbar input').type('Hello Searchbar', { scrollBehavior: false });