chore(button/selectors): force button click and use HTMLStencilElemen…

.github/workflows/node.js.yml

@@ -16,7 +16,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [16.x]
+        node-version: [16.13]
 
     steps:
       - uses: actions/checkout@v2
@@ -54,7 +54,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [16.x]
+        node-version: [16.13]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

src/components/button.ts

@@ -3,17 +3,19 @@ import { CypressIonicComponentClass, SupportedSelectors } from '@interfaces';
 import { IonButton } from '@ionic/core/components/ion-button';
 
 class IonButtonCypress
-  implements CypressIonicComponentClass<IonButtonCypress, IonButton>
+  implements CypressIonicComponentClass<IonButtonCypress, HTMLIonButtonElement>
 {
   public click(selector: SupportedSelectors) {
-    return getFromSupportedSelector<IonButton>(selector).then(($ionButton) => {
-      return cy
-        .wrap($ionButton)
-        .shadow()
-        .find('button')
-        .click()
-        .then(() => $ionButton);
-    });
+    return getFromSupportedSelector<HTMLIonButtonElement>(selector).then(
+      ($ionButton) => {
+        return cy
+          .wrap($ionButton)
+          .shadow()
+          .find('button')
+          .click({ force: true })
+          .then(() => $ionButton);
+      }
+    );
   }
 
   // @ts-expect-error This is a special case

src/components/input.ts

@@ -1,28 +1,31 @@
 import { CypressIonicComponentClass, SupportedSelectors } from '@interfaces';
-import { IonInput } from '@ionic/core/components/ion-input';
 import { getFromSupportedSelector } from '@helpers';
 
 class IonInputCypress
-  implements CypressIonicComponentClass<IonInputCypress, IonInput>
+  implements CypressIonicComponentClass<IonInputCypress, HTMLInputElement>
 {
   public write(selector: SupportedSelectors, text: string) {
-    return getFromSupportedSelector<IonInput>(selector).then(($ionInput) => {
-      return cy
-        .wrap($ionInput)
-        .find('input')
-        .type(text)
-        .then(() => $ionInput);
-    });
+    return getFromSupportedSelector<HTMLInputElement>(selector).then(
+      ($ionInput) => {
+        return cy
+          .wrap($ionInput)
+          .find('input')
+          .type(text)
+          .then(() => $ionInput);
+      }
+    );
   }
 
   public clear(selector: SupportedSelectors) {
-    return getFromSupportedSelector<IonInput>(selector).then(($ionInput) => {
-      return cy
-        .wrap($ionInput)
-        .find('input')
-        .clear()
-        .then(() => $ionInput);
-    });
+    return getFromSupportedSelector<HTMLInputElement>(selector).then(
+      ($ionInput) => {
+        return cy
+          .wrap($ionInput)
+          .find('input')
+          .clear()
+          .then(() => $ionInput);
+      }
+    );
   }
 }
 

src/components/range.ts

@@ -11,7 +11,7 @@ import {
 } from '@interfaces';
 import { getFromSupportedSelector } from '@helpers';
 
-type GenericIonRange<T> = IonRange & {
+type GenericIonRange<T> = HTMLIonRangeElement & {
   value: T;
 };
 
@@ -32,7 +32,7 @@ export interface IonRangeCypressMoveToValueOptions<T = RangeValue> {
 }
 
 class IonRangeCypress
-  implements CypressIonicComponentClass<IonRangeCypress, IonRange>
+  implements CypressIonicComponentClass<IonRangeCypress, HTMLIonRangeElement>
 {
   /**
    * Sets the value or the {@link IonRange} programmatically and triggers
@@ -42,8 +42,8 @@ class IonRangeCypress
   public setValue(
     ionCssSelector: SupportedSelectors,
     value: RangeValue
-  ): CypressIonicReturn<IonRange> {
-    return getFromSupportedSelector<IonRange>(ionCssSelector).then(
+  ): CypressIonicReturn<HTMLIonRangeElement> {
+    return getFromSupportedSelector<HTMLIonRangeElement>(ionCssSelector).then(
       ($ionRange) => {
         const ionRange = $ionRange[0];
 
@@ -74,9 +74,9 @@ class IonRangeCypress
   public moveToValue(
     ionCssSelector: SupportedSelectors,
     options: IonRangeCypressMoveToValueOptions
-  ): CypressIonicReturn<IonRange> {
+  ): CypressIonicReturn<HTMLIonRangeElement> {
     return getFromSupportedSelector(ionCssSelector).then(($ionRange) => {
-      const ionRange = $ionRange[0] as IonRange;
+      const ionRange = $ionRange[0] as HTMLIonRangeElement;
 
       options.targetValue = this.normalizeRangeValue(
         options.targetValue,
@@ -104,11 +104,11 @@ class IonRangeCypress
     knobSelector,
     options,
   }: {
-    ionRange: IonRange;
+    ionRange: HTMLIonRangeElement;
     currentValue: number;
     knobSelector: RangeKnobSelector;
     options: IonRangeCypressMoveToValueOptions<number>;
-  }): CypressIonicReturn<IonRange> {
+  }): CypressIonicReturn<HTMLIonRangeElement> {
     if (currentValue === options.targetValue) {
       return cy.wrap(ionRange);
     }
@@ -163,7 +163,7 @@ class IonRangeCypress
   private moveToObjectValue(
     ionRange: GenericIonRange<IonRangeObjectValue>,
     options: IonRangeCypressMoveToValueOptions<IonRangeObjectValue>
-  ): Cypress.Chainable<JQuery<IonRange>> {
+  ): Cypress.Chainable<JQuery<HTMLIonRangeElement>> {
     // Move upper
     return this.moveToNumberValue({
       ionRange,
@@ -252,7 +252,7 @@ class IonRangeCypress
   /** If the wanted value is big, just set it to the max allowed */
   private normalizeRangeValue(
     value: RangeValue,
-    ionRange: IonRange
+    ionRange: HTMLIonRangeElement
   ): RangeValue {
     if (typeof value === 'number') {
       return this.normalizeNumberValue(value, ionRange);
@@ -264,7 +264,10 @@ class IonRangeCypress
     return value;
   }
 
-  private normalizeNumberValue(value: number, ionRange: IonRange): number {
+  private normalizeNumberValue(
+    value: number,
+    ionRange: HTMLIonRangeElement
+  ): number {
     if (value < ionRange.min) {
       cy.log(
         `${value} is below the accepted min, setting it to ${ionRange.min}`

src/components/select/action-sheet-select.ts

@@ -1,5 +1,4 @@
 import { CypressIonicReturn } from '@interfaces';
-import { IonSelect } from '@ionic/core/components/ion-select';
 
 import { IonSelectFunctions } from './ion-select-functions.abstract';
 
@@ -9,9 +8,9 @@ export class ActionSheetSelect extends IonSelectFunctions {
   }
 
   selectByOptionText(
-    $ionSelect: JQuery<IonSelect>,
+    $ionSelect: JQuery<HTMLIonSelectElement>,
     optionText: string
-  ): CypressIonicReturn<IonSelect> {
+  ): CypressIonicReturn<HTMLIonSelectElement> {
     return this.getOptionButtonsContainer($ionSelect)
       .findByText(optionText)
       .parent()
@@ -20,9 +19,9 @@ export class ActionSheetSelect extends IonSelectFunctions {
   }
 
   selectByOptionIndex(
-    $ionSelect: JQuery<IonSelect>,
+    $ionSelect: JQuery<HTMLIonSelectElement>,
     optionIndex: number
-  ): CypressIonicReturn<IonSelect> {
+  ): CypressIonicReturn<HTMLIonSelectElement> {
     return this.clickOnWantedOption($ionSelect, optionIndex);
   }
 }

src/components/select/alert-select.ts

@@ -1,38 +1,39 @@
-import { IonSelect } from '@ionic/core/components/ion-select';
-
 import { IonSelectFunctions } from './ion-select-functions.abstract';
 
 export class AlertSelect extends IonSelectFunctions {
   constructor() {
     super('ion-alert.hydrated [role="radiogroup"]', 'button');
   }
 
-  selectByOptionIndex($ionSelect: JQuery<IonSelect>, optionIndex: number) {
+  selectByOptionIndex(
+    $ionSelect: JQuery<HTMLIonSelectElement>,
+    optionIndex: number
+  ) {
     return this.clickOnWantedOption($ionSelect, optionIndex)
       .then(() => this.clickOkOnAlert())
       .then(() => $ionSelect);
   }
 
   selectByOptionText(
-    $ionSelect: JQuery<IonSelect>,
+    $ionSelect: JQuery<HTMLIonSelectElement>,
     optionText: string
-  ): Cypress.Chainable<JQuery<IonSelect>> {
+  ): Cypress.Chainable<JQuery<HTMLIonSelectElement>> {
     return this.getOptionButtonsContainer($ionSelect)
       .findByText(optionText)
       .click()
       .then(() => this.clickOkOnAlert())
       .then(() => $ionSelect);
   }
 
-  private clickOkOnAlert(): Cypress.Chainable<void> {
+  private clickOkOnAlert(): Cypress.Chainable<undefined> {
     return cy
       .get('ion-alert.hydrated .alert-button-group button')
       .then((actionButtons) => {
         const okayButton = actionButtons[actionButtons.length - 1];
         return cy.wrap(okayButton).click();
       })
       .then(() => {
-        return cy.wrap(void 0);
+        return cy.wrap(undefined);
       });
   }
 }

src/components/select/ion-select-functions.abstract.ts

@@ -1,5 +1,4 @@
 import { CypressIonicReturn } from '@interfaces';
-import { IonSelect } from '@ionic/core/components/ion-select';
 
 /** @internal */
 export abstract class IonSelectFunctions {
@@ -9,17 +8,17 @@ export abstract class IonSelectFunctions {
   ) {}
 
   abstract selectByOptionIndex(
-    $ionSelect: JQuery<IonSelect>,
+    $ionSelect: JQuery<HTMLIonSelectElement>,
     optionIndex: number
-  ): CypressIonicReturn<IonSelect>;
+  ): CypressIonicReturn<HTMLIonSelectElement>;
 
   abstract selectByOptionText(
-    $ionSelect: JQuery<IonSelect>,
+    $ionSelect: JQuery<HTMLIonSelectElement>,
     optionText: string
-  ): CypressIonicReturn<IonSelect>;
+  ): CypressIonicReturn<HTMLIonSelectElement>;
 
   protected getOptionButtonsContainer(
-    $ionSelect: JQuery<IonSelect>
+    $ionSelect: JQuery<HTMLIonSelectElement>
   ): Cypress.Chainable<JQuery<HTMLElement>> {
     return cy
       .wrap($ionSelect[0])
@@ -30,9 +29,9 @@ export abstract class IonSelectFunctions {
   }
 
   protected clickOnWantedOption(
-    $ionSelect: JQuery<IonSelect>,
+    $ionSelect: JQuery<HTMLIonSelectElement>,
     optionIndex: number
-  ): Cypress.Chainable<JQuery<IonSelect>> {
+  ): Cypress.Chainable<JQuery<HTMLIonSelectElement>> {
     return this.getOptionButtonsContainer($ionSelect)
       .children(this.optionItemCSSSelector)
       .then((optionButtons) => {

src/components/select/ion-select-functions.interface.ts

@@ -1,15 +1,14 @@
 import { CypressIonicReturn, SupportedSelectors } from '@interfaces';
-import { IonSelect } from '@ionic/core/components/ion-select';
 
 /** @internal */
 export interface IIonSelectFunctions {
   selectByOptionIndex(
     selector: SupportedSelectors,
     optionIndex: number
-  ): CypressIonicReturn<IonSelect>;
+  ): CypressIonicReturn<HTMLIonSelectElement>;
 
   selectByOptionText(
     selector: SupportedSelectors,
     optionText: string
-  ): CypressIonicReturn<IonSelect>;
+  ): CypressIonicReturn<HTMLIonSelectElement>;
 }

src/components/select/popover-select.ts

@@ -1,5 +1,4 @@
 import { CypressIonicReturn, SupportedSelectors } from '@interfaces';
-import { IonSelect } from '@ionic/core/components/ion-select';
 import { getFromSupportedSelector } from '@helpers';
 import { IonSelectFunctions } from './ion-select-functions.abstract';
 
@@ -14,22 +13,26 @@ export class PopoverSelect extends IonSelectFunctions {
   public selectByOptionText(
     selector: SupportedSelectors,
     optionText: string
-  ): CypressIonicReturn<IonSelect> {
-    return getFromSupportedSelector<IonSelect>(selector).then(($ionSelect) => {
-      return this.getOptionButtonsContainer($ionSelect)
-        .findByText(optionText)
-        .parent()
-        .click()
-        .then(() => $ionSelect);
-    });
+  ): CypressIonicReturn<HTMLIonSelectElement> {
+    return getFromSupportedSelector<HTMLIonSelectElement>(selector).then(
+      ($ionSelect) => {
+        return this.getOptionButtonsContainer($ionSelect)
+          .findByText(optionText)
+          .parent()
+          .click()
+          .then(() => $ionSelect);
+      }
+    );
   }
 
   selectByOptionIndex(
     selector: SupportedSelectors,
     optionIndex: number
-  ): CypressIonicReturn<IonSelect> {
-    return getFromSupportedSelector<IonSelect>(selector).then(($ionSelect) => {
-      return this.clickOnWantedOption($ionSelect, optionIndex);
-    });
+  ): CypressIonicReturn<HTMLIonSelectElement> {
+    return getFromSupportedSelector<HTMLIonSelectElement>(selector).then(
+      ($ionSelect) => {
+        return this.clickOnWantedOption($ionSelect, optionIndex);
+      }
+    );
   }
 }