From 7487c7e95b725944b7b989d7bc3d122578a1cbf2 Mon Sep 17 00:00:00 2001 From: Saninn Salas Diaz <5490201+distante@users.noreply.github.com> Date: Sat, 18 Apr 2026 14:04:57 +0200 Subject: [PATCH 1/2] feat: add IonTabButtonCypress helper for ion-tab-button Exposes a click() method that pierces the shadow DOM to interact with the inner element, following the same pattern as existing component helpers. --- cypress/e2e/components/tab-button.spec.ts | 28 +++++++++++++++ html/assets/ion-tab-button.mjs | 11 ++++++ html/index.html | 3 ++ html/ion-tab-button.html | 43 +++++++++++++++++++++++ src/components/index.ts | 1 + src/components/tab-button.ts | 22 ++++++++++++ 6 files changed, 108 insertions(+) create mode 100644 cypress/e2e/components/tab-button.spec.ts create mode 100644 html/assets/ion-tab-button.mjs create mode 100644 html/ion-tab-button.html create mode 100644 src/components/tab-button.ts diff --git a/cypress/e2e/components/tab-button.spec.ts b/cypress/e2e/components/tab-button.spec.ts new file mode 100644 index 0000000..6298233 --- /dev/null +++ b/cypress/e2e/components/tab-button.spec.ts @@ -0,0 +1,28 @@ +import { ionTabButtonCypress } from '@lib'; + +describe('Ion Tab Button', () => { + beforeEach(() => { + cy.visit('./ion-tab-button.html'); + }); + + it('should be clicked by CSS selector and fire ionTabButtonClick', () => { + ionTabButtonCypress.click('ion-tab-button.tab-settings'); + + cy.get('#tab-click-status').should('have.text', 'clicked:settings'); + }); + + it('should be clicked by jQuery element and fire ionTabButtonClick', () => { + cy.get('ion-tab-button.tab-profile').then(($tabButton) => { + ionTabButtonCypress.click($tabButton); + + cy.get('#tab-click-status').should('have.text', 'clicked:profile'); + }); + }); + + it('clicking one tab button does not trigger another tab', () => { + ionTabButtonCypress.click('ion-tab-button.tab-home'); + + cy.get('#tab-click-status').should('have.text', 'clicked:home'); + cy.get('#tab-click-status').should('not.have.text', 'clicked:settings'); + }); +}); diff --git a/html/assets/ion-tab-button.mjs b/html/assets/ion-tab-button.mjs new file mode 100644 index 0000000..2c0bd5c --- /dev/null +++ b/html/assets/ion-tab-button.mjs @@ -0,0 +1,11 @@ +import { defineCustomElements } from '/node_modules/@ionic/core/dist/esm/loader.js'; + +defineCustomElements(window).then(() => { + const statusEl = document.getElementById('tab-click-status'); + + document + .querySelector('ion-tab-bar') + .addEventListener('ionTabButtonClick', (event) => { + statusEl.textContent = `clicked:${event.detail.tab}`; + }); +}); diff --git a/html/index.html b/html/index.html index 09df2a9..8232520 100644 --- a/html/index.html +++ b/html/index.html @@ -52,6 +52,9 @@

Get from supported selectors

To Ion Input Page To Ion Range Page To Ion Select Page + To Ion Tab Button Page diff --git a/html/ion-tab-button.html b/html/ion-tab-button.html new file mode 100644 index 0000000..aaa0197 --- /dev/null +++ b/html/ion-tab-button.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + Cypress Ionic Tester + + +
+

Ion Tab Button

+ +

+ + + + Home + + + Settings + + + Profile + + + + Back To Main +
+ + diff --git a/src/components/index.ts b/src/components/index.ts index df514fd..873e5a6 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,3 +2,4 @@ export * from './button'; export * from './input'; export * from './range'; export * from './select'; +export * from './tab-button'; diff --git a/src/components/tab-button.ts b/src/components/tab-button.ts new file mode 100644 index 0000000..70b31c0 --- /dev/null +++ b/src/components/tab-button.ts @@ -0,0 +1,22 @@ +import { getFromSupportedSelector } from '@helpers'; +import { CypressIonicComponentClass, SupportedSelectors } from '@interfaces'; + +class IonTabButtonCypress implements CypressIonicComponentClass< + IonTabButtonCypress, + HTMLIonTabButtonElement +> { + public click(selector: SupportedSelectors) { + return getFromSupportedSelector(selector).then( + ($ionTabButton) => { + return cy + .wrap($ionTabButton) + .shadow() + .find('a.button-native') + .click({ force: true }) + .then(() => $ionTabButton); + }, + ); + } +} + +export const ionTabButtonCypress = new IonTabButtonCypress(); From 913fd9da45dca591fd9f0a08bce2847cfc270371 Mon Sep 17 00:00:00 2001 From: Saninn Salas Diaz <5490201+distante@users.noreply.github.com> Date: Sat, 18 Apr 2026 14:17:44 +0200 Subject: [PATCH 2/2] feat: run current and old ionic version in parallel --- .claude/settings.json | 1 + .github/workflows/node.js.yml | 21 +++++++++++++-------- 2 files changed, 14 insertions(+), 8 deletions(-) create mode 100644 .claude/settings.json diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..69a88e3 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1 @@ +{} diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index cc2f816..8c7c0d2 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -53,27 +53,32 @@ jobs: strategy: matrix: - os: [ubuntu-latest] node-version: [22.18] - # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + ionic-version: ['^8.8.0', '^7.0.0'] steps: - name: Checkout uses: actions/checkout@v2 - - name: Run Test on Node.js ${{ matrix.node-version }} + - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }} - - run: | - npm ci + - name: Install dependencies + run: npm ci + + - name: Install Ionic ${{ matrix.ionic-version }} + run: npm install @ionic/core@${{ matrix.ionic-version }} --no-save + + - name: Run tests + run: | npx cypress info - npm run ci + npm run full-test - - name: Save screenshots folder + - name: Save screenshots on failure uses: actions/upload-artifact@v4 if: failure() with: - name: cypress-screenshots + name: cypress-screenshots-ionic-${{ matrix.ionic-version }} path: cypress/screenshots