javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ripple-effect): ripple displays on click or touch (#25102)

Browse Source 
Resolves #25094
This commit is contained in:
Sean Perkins
2022-04-12 17:03:49 -04:00
committed by GitHub
parent a61c004fb0
commit 2a313e9117
5 changed files with 86 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/ripple-effect/test/basic/index.html
View File

@ -46,18 +46,18 @@
<ion-content class="ion-padding" no-bounce>
<p>
<ion-button size="small">Small</ion-button>
<ion-button id="small-btn" size="small">Small</ion-button>
</p>
<p>
<ion-button size="large">Large</ion-button>
<ion-button id="large-btn" size="large">Large</ion-button>
</p>
<p>
<ion-button size="large" fill="outline">Large</ion-button>
<ion-button id="large-btn-outline" size="large" fill="outline">Large</ion-button>
</p>
<p>
<ion-button size="large" fill="clear">Large</ion-button>
<ion-button id="large-btn-clear" size="large" fill="clear">Large</ion-button>
</p>
<div class="my-block ion-activatable">
<div class="my-block ion-activatable" id="ripple-with-button">
<ion-ripple-effect></ion-ripple-effect>
This is just a div + effect behind
<ion-button onclick="buttonClicked()">Nested button</ion-button>

63
core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts Normal file
View File

@ -0,0 +1,63 @@
import { expect } from '@playwright/test';
import type { IonicPage } from '@utils/test/playwright';
import { test } from '@utils/test/playwright';
test.describe('ripple-effect: basic', () => {
test('should add .ion-activated when pressed', async ({ page }) => {
await verifyRippleEffect(page, '#small-btn');
await verifyRippleEffect(page, '#large-btn');
await verifyRippleEffect(page, '#large-btn-outline');
await verifyRippleEffect(page, '#large-btn-clear');
await verifyRippleEffect(page, '.block');
});
test.describe('ripple effect with nested ion-button', () => {
test('should add .ion-activated when the block is pressed', async ({ page }) => {
await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`);
const el = page.locator('#ripple-with-button');
await el.scrollIntoViewIfNeeded();
const boundingBox = await el.boundingBox();
if (boundingBox) {
await page.mouse.move(boundingBox.x + 5, boundingBox.y + 5);
await page.mouse.down();
}
// Waits for the ripple effect to be added
await page.waitForSelector('.ion-activated');
const elHandle = await el.elementHandle();
const classes = await elHandle?.evaluate((el) => el.classList.value);
expect(classes).toMatch('ion-activated');
});
test('should add .ion-activated when the button is pressed', async ({ page }) => {
await verifyRippleEffect(page, '#ripple-with-button ion-button');
});
});
});
const verifyRippleEffect = async (page: IonicPage, selector: string) => {
await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`);
const el = page.locator(selector);
await el.scrollIntoViewIfNeeded();
const boundingBox = await el.boundingBox();
if (boundingBox) {
await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
await page.mouse.down();
}
// Waits for the ripple effect to be added
await page.waitForSelector(`${selector}.ion-activated`);
const elHandle = await el.elementHandle();
const classes = await elHandle?.evaluate((el) => el.classList.value);
expect(classes).toMatch('ion-activated');
};