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

test(ripple-effect): migrate to generators (#27391)

Browse Source 
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Ripple effect tests are using legacy syntax

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Ripple effect tests are using modern syntax

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Liam DeBeasi
2023-05-04 12:36:31 -04:00
committed by GitHub
parent 14e000db76
commit 333adf0b55
2 changed files with 83 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,86 +0,0 @@
import { expect } from '@playwright/test';
import type { E2EPage } from '@utils/test/playwright';
import { test } from '@utils/test/playwright';
test.describe('ripple-effect: basic', () => {
test.beforeEach(async ({ skip }) => {
skip.rtl();
skip.mode('ios');
});
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');
await isIdleCallbackComplete(page);
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');
await expect(el).toHaveClass(/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: E2EPage, selector: string) => {
await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false');
await isIdleCallbackComplete(page);
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();
}
await page.waitForSelector('.ion-activated');
await expect(el).toHaveClass(/ion-activated/);
};
/**
* This function is used to wait for the idle callback to be called.
* It mirrors the custom implementation in app.tsx for either
* using requestIdleCallback on supported browsers or a setTimeout
* of 32ms (~2 frames) on unsupported browsers (Safari).
*/
const isIdleCallbackComplete = async (page: E2EPage) => {
await page.waitForFunction(
() => {
return new Promise((resolve) => {
if ('requestIdleCallback' in window) {
window.requestIdleCallback(resolve);
} else {
setTimeout(resolve, 32);
}
});
},
{ timeout: 5000 }
);
};

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

@ -0,0 +1,83 @@
import { expect } from '@playwright/test';
import type { E2EPage, E2EPageOptions } from '@utils/test/playwright';
import { configs, test } from '@utils/test/playwright';
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('ripple-effect: basic'), () => {
test('should add .ion-activated when pressed', async ({ page }) => {
await verifyRippleEffect(page, config, '#small-btn');
await verifyRippleEffect(page, config, '#large-btn');
await verifyRippleEffect(page, config, '#large-btn-outline');
await verifyRippleEffect(page, config, '#large-btn-clear');
await verifyRippleEffect(page, config, '.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', config);
await isIdleCallbackComplete(page);
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');
await expect(el).toHaveClass(/ion-activated/);
});
test('should add .ion-activated when the button is pressed', async ({ page }) => {
await verifyRippleEffect(page, config, '#ripple-with-button ion-button');
});
});
});
});
const verifyRippleEffect = async (page: E2EPage, config: E2EPageOptions, selector: string) => {
await page.goto('/src/components/ripple-effect/test/basic?ionic:_testing=false', config);
await isIdleCallbackComplete(page);
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();
}
await page.waitForSelector('.ion-activated');
await expect(el).toHaveClass(/ion-activated/);
};
/**
* This function is used to wait for the idle callback to be called.
* It mirrors the custom implementation in app.tsx for either
* using requestIdleCallback on supported browsers or a setTimeout
* of 32ms (~2 frames) on unsupported browsers (Safari).
*/
const isIdleCallbackComplete = async (page: E2EPage) => {
await page.waitForFunction(
() => {
return new Promise((resolve) => {
if ('requestIdleCallback' in window) {
window.requestIdleCallback(resolve);
} else {
setTimeout(resolve, 32);
}
});
},
{ timeout: 5000 }
);
};