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

test(ripple-effect): enable ripple effect test (#26928)

Browse Source
This commit is contained in:
Sean Perkins
2023-03-10 15:00:05 -05:00
committed by GitHub
parent 27a5356fa2
commit 389595de3b
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
View File

@ -2,8 +2,12 @@ import { expect } from '@playwright/test';
import type { E2EPage } from '@utils/test/playwright'; import type { E2EPage } from '@utils/test/playwright';
import { test } from '@utils/test/playwright'; import { test } from '@utils/test/playwright';
// TODO FW-3081 test.describe('ripple-effect: basic', () => {
test.describe.skip('ripple-effect: basic', () => { test.beforeEach(async ({ skip }) => {
skip.rtl();
skip.mode('ios');
});
test('should add .ion-activated when pressed', async ({ page }) => { test('should add .ion-activated when pressed', async ({ page }) => {
await verifyRippleEffect(page, '#small-btn'); await verifyRippleEffect(page, '#small-btn');
await verifyRippleEffect(page, '#large-btn'); await verifyRippleEffect(page, '#large-btn');
@ -14,7 +18,7 @@ test.describe.skip('ripple-effect: basic', () => {
test.describe('ripple effect with nested ion-button', () => { test.describe('ripple effect with nested ion-button', () => {
test('should add .ion-activated when the block is pressed', async ({ page }) => { 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`); await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
const el = page.locator('#ripple-with-button'); const el = page.locator('#ripple-with-button');
@ -30,9 +34,7 @@ test.describe.skip('ripple-effect: basic', () => {
// Waits for the ripple effect to be added // Waits for the ripple effect to be added
await page.waitForSelector('.ion-activated'); await page.waitForSelector('.ion-activated');
const elHandle = await el.elementHandle(); await expect(el).toHaveClass(/ion-activated/);
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 }) => { test('should add .ion-activated when the button is pressed', async ({ page }) => {
@ -42,7 +44,7 @@ test.describe.skip('ripple-effect: basic', () => {
}); });
const verifyRippleEffect = async (page: E2EPage, selector: string) => { const verifyRippleEffect = async (page: E2EPage, selector: string) => {
await page.goto(`/src/components/ripple-effect/test/basic?ionic:_testing=false&ionic:mode=md`); await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
const el = page.locator(selector); const el = page.locator(selector);
@ -55,10 +57,7 @@ const verifyRippleEffect = async (page: E2EPage, selector: string) => {
await page.mouse.down(); await page.mouse.down();
} }
// Waits for the ripple effect to be added await page.waitForSelector('.ion-activated');
await page.waitForSelector(`${selector}.ion-activated`);
const elHandle = await el.elementHandle(); await expect(el).toHaveClass(/ion-activated/);
const classes = await elHandle?.evaluate((el) => el.classList.value);
expect(classes).toMatch(/ion-activated/);
}; };