Merge pull request #12 from distante/chore/update-cypress-and-ionic

Chore/update cypress and ionic

.eslintignore

@@ -3,4 +3,5 @@ html
 scripts/
 docs/
 **/.eslintrc.js
-commitlint.config.js
+commitlint.config.js
+cypress.config.ts

.github/workflows/node.js.yml

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

cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  includeShadowDom: true,
+  projectId: '1tfaog',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.ts')(on, config);
+    },
+    baseUrl: 'http://localhost:3999/',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    experimentalRunAllSpecs: true,
+  },
+});

cypress/e2e/components/input.spec.ts

@@ -0,0 +1,55 @@
+import { ionInputCypress } from '@lib';
+import * as testHelpers from '../../../test-helpers/test-helpers.js';
+
+describe('Ion Input', () => {
+  const selectors = [
+    '.external-label ion-input',
+    '.internal-label ion-input',
+    '.internal-label ion-input',
+    '.internal-aria-label ion-input',
+  ];
+
+  selectors.forEach((selector) => {
+    describe(selector, () => {
+      beforeEach(() => {
+        cy.visit('./ion-input.html');
+      });
+
+      it('can be written on by string selector', () => {
+        cy.get(`${selector}.hydrated`)
+          .first()
+          .then(($ionInput) => {
+            const element = $ionInput[0];
+            const wantedText = testHelpers.convertToTestString(
+              element.innerText
+            );
+
+            ionInputCypress.write(selector, wantedText).then(() => {
+              const inputElement = element.querySelector('input')?.value;
+
+              expect(inputElement).to.eq(wantedText);
+            });
+          });
+      });
+
+      it('can be cleared', () => {
+        cy.get(`${selector}.hydrated`)
+          .first()
+          .then(($ionInput) => {
+            const element = $ionInput[0];
+
+            ionInputCypress
+              .write(selector, 'i am not clear here :)')
+              .then(() => {
+                return ionInputCypress.clear(selector);
+              })
+              .then(() => {
+                const inputElement = element.querySelector('input')?.value;
+
+                expect(inputElement).to.eq('');
+              });
+          });
+      });
+    });
+  });
+});

cypress/integration/components/range.spec.ts → cypress/e2e/components/range.spec.ts

@@ -26,7 +26,7 @@ const selectorAndValues: Array<{
 
 describe('using valid valid ranges', () => {
   beforeEach(() => {
-    cy.visit('./');
+    cy.visit('./ion-range.html');
   });
 
   selectorAndValues.forEach((selectorAndValue) => {
@@ -125,7 +125,7 @@ describe('using it to values beyond their supported max/min does not hangs', ()
   ];
 
   beforeEach(() => {
-    cy.visit('./');
+    cy.visit('./ion-range.html');
   });
 
   outOfRangeValues.forEach((selectorAndValue) => {

cypress/integration/components/select.spec.ts → cypress/e2e/components/select.spec.ts

@@ -2,7 +2,7 @@ import { ionSelectCypress } from '@lib';
 
 describe('IonSelect', () => {
   beforeEach(() => {
-    cy.visit('./');
+    cy.visit('./ion-select.html');
   });
 
   const byInterfaceSelectors = [
@@ -44,21 +44,39 @@ describe('IonSelect', () => {
   const byTextWithSelectors: Array<{ elementSelector: string; text: string }> =
     [
       {
-        elementSelector: 'ion-select[interface=alert]',
-        text: 'ion-select ion-alert',
+        elementSelector:
+          'ion-select#ion-select-ion-alert-external-label[interface=alert]',
+        text: 'ion-select ion-alert external-label',
       },
       {
-        elementSelector: 'ion-select[interface=action-sheet]',
-        text: 'ion-select ion-action-sheet',
+        elementSelector:
+          'ion-select#ion-select-ion-action-sheet-external-label[interface=action-sheet]',
+        text: 'ion-select ion-action-sheet external-label',
       },
       {
-        elementSelector: 'ion-select[interface=popover]',
-        text: 'ion-select ion-popover',
+        elementSelector:
+          'ion-select#ion-select-ion-popover-external-label[interface=popover]',
+        text: 'ion-select ion-popover external-label',
+      },
+      {
+        elementSelector:
+          'ion-select#ion-select-ion-alert-internal-label[interface=alert]',
+        text: 'ion-select ion-alert internal-label',
+      },
+      {
+        elementSelector:
+          'ion-select#ion-select-ion-action-sheet-internal-label[interface=action-sheet]',
+        text: 'ion-select ion-action-sheet internal-label',
+      },
+      {
+        elementSelector:
+          'ion-select#ion-select-ion-popover-internal-label[interface=popover]',
+        text: 'ion-select ion-popover internal-label',
       },
     ];
 
   byTextWithSelectors.forEach((textAndSelector) => {
-    describe(`find ${textAndSelector.elementSelector} using text`, () => {
+    describe(`find ${textAndSelector.text} using text`, () => {
       it(`can be found with "${textAndSelector.text}"`, () => {
         cy.get(textAndSelector.elementSelector)
           .should('have.length', 1) // check that just one is tested

cypress/support/index.ts → cypress/support/e2e.ts

@@ -1,20 +1,20 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

html/assets/ion-range.mjs

@@ -0,0 +1,36 @@
+import { defineCustomElements } from '/node_modules/@ionic/core/dist/esm/loader.js';
+import { convertToTestString } from '/test-helpers/test-helpers.js';
+
+defineCustomElements(window).then(() => {
+  /* Ionic is loaded! */
+
+  // ------ ION RANGE ----- //
+  const ranges = document.querySelectorAll('ion-range');
+  const rangesIntervals = new Array(ranges.length);
+  document.querySelectorAll('ion-range').forEach((ionRange, i) => {
+    ionRange.addEventListener('ionChange', (event) => {
+      // console.log('ionRange ionChange event', event);
+      clearInterval(rangesIntervals[i]);
+      const targetIonRange = event.target;
+
+      rangesIntervals[i] = setInterval(() => {
+        const slot =
+          targetIonRange.shadowRoot.querySelector('slot[name="end"]');
+        if (!slot) {
+          return;
+        }
+
+        clearInterval(rangesIntervals[i]);
+        rangesIntervals[i] = undefined;
+
+        let eventValue = event.detail.value;
+
+        if (typeof eventValue === 'object') {
+          eventValue = `${eventValue.lower}/${eventValue.upper}`;
+        }
+
+        slot.assignedNodes()[0].innerText = eventValue;
+      }, 100);
+    });
+  });
+});

html/assets/ion-select.mjs

@@ -0,0 +1,5 @@
+import { defineCustomElements } from '/node_modules/@ionic/core/dist/esm/loader.js';
+
+defineCustomElements(window).then(() => {
+  /* Ionic is loaded! */
+});

html/assets/scripts.mjs

@@ -7,39 +7,4 @@ defineCustomElements(window).then(() => {
   document.querySelector('ion-button').addEventListener('click', (event) => {
     event.target.innerText = convertToTestString(event.target.innerText);
   });
-
-  document.querySelector('.ion-range-dual ion-range').value = {
-    lower: -50,
-    upper: 50,
-  };
-
-  // ------ ION RANGE ----- //
-  const ranges = document.querySelectorAll('ion-range');
-  const rangesIntervals = new Array(ranges.length);
-  document.querySelectorAll('ion-range').forEach((ionRange, i) => {
-    ionRange.addEventListener('ionChange', (event) => {
-      console.log('ionRange ionChange event', event);
-      clearInterval(rangesIntervals[i]);
-      const targetIonRange = event.target;
-
-      rangesIntervals[i] = setInterval(() => {
-        const slot =
-          targetIonRange.shadowRoot.querySelector('slot[name="end"]');
-        if (!slot) {
-          return;
-        }
-
-        clearInterval(rangesIntervals[i]);
-        rangesIntervals[i] = undefined;
-
-        let eventValue = event.detail.value;
-
-        if (typeof eventValue === 'object') {
-          eventValue = `${eventValue.lower}/${eventValue.upper}`;
-        }
-
-        slot.assignedNodes()[0].innerText = eventValue;
-      }, 100);
-    });
-  });
 });

html/assets/style.css

@@ -13,3 +13,8 @@ main {
   max-width: 500px;
   width: 80%;
 }
+
+h1,
+h2 {
+  color: white;
+}