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

test(refresher): pull to refresh test (#24903)

Browse Source
This commit is contained in:
Sean Perkins
2022-03-10 14:17:48 -05:00
committed by GitHub
parent 8e8783190f
commit c666deca4d
3 changed files with 89 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
core/src/components/refresher/test/basic/e2e.ts
View File

@ -1,10 +1,57 @@
import type { E2EPage } from '@stencil/core/testing';
import { newE2EPage } from '@stencil/core/testing'; import { newE2EPage } from '@stencil/core/testing';
test('refresher: basic', async () => { import { pullToRefresh } from '../test.utils';
const page = await newE2EPage({
describe('refresher: basic', () => {
let page: E2EPage;
beforeEach(async () => {
page = await newE2EPage({
url: '/src/components/refresher/test/basic?ionic:_testing=true' url: '/src/components/refresher/test/basic?ionic:_testing=true'
}); });
});
it('should match existing visual screenshots', async () => {
const compare = await page.compareScreenshot(); const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot(); expect(compare).toMatchScreenshot();
});
describe('legacy refresher', () => {
it('should load more items when performing a pull-to-refresh', async () => {
const initialItems = await page.findAll('ion-item');
expect(initialItems.length).toBe(30);
await pullToRefresh(page);
const items = await page.findAll('ion-item');
expect(items.length).toBe(60);
});
});
describe('native refresher', () => {
it('should load more items when performing a pull-to-refresh', async () => {
const refresherContent = await page.$('ion-refresher-content');
refresherContent.evaluate((el: any) => {
// Resets the pullingIcon to enable the native refresher
el.pullingIcon = undefined;
});
await page.waitForChanges();
const initialItems = await page.findAll('ion-item');
expect(initialItems.length).toBe(30);
await pullToRefresh(page);
const items = await page.findAll('ion-item');
expect(items.length).toBe(60);
});
});
}); });

23
core/src/components/refresher/test/basic/index.html
View File

@ -4,12 +4,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Refresher - Basic</title> <title>Refresher - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet"> <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet"> <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script> <script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body> <body>
<ion-app> <ion-app>
@ -21,11 +23,8 @@
<ion-content> <ion-content>
<ion-refresher id="refresher" slot="fixed"> <ion-refresher id="refresher" slot="fixed">
<ion-refresher-content <ion-refresher-content pulling-icon="arrow-down-outline" pulling-text="Pull to refresh..."
pulling-icon="arrow-down-outline" refreshing-text="Refreshing..." refreshing-spinner="circles">
pulling-text="Pull to refresh..."
refreshing-text="Refreshing..."
refreshing-spinner="circles">
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
@ -40,16 +39,19 @@
for (var i = 0; i < 30; i++) { for (var i = 0; i < 30; i++) {
items.push(i + 1); items.push(i + 1);
} }
const list = document.getElementById('list'); const list = document.getElementById('list');
const refresher = document.getElementById('refresher'); const refresher = document.getElementById('refresher');
refresher.addEventListener('ionRefresh', async function () { refresher.addEventListener('ionRefresh', async function () {
console.log('Loading data...');
const data = await getAsyncData(); const data = await getAsyncData();
items = items.concat(data); items = items.concat(data);
refresher.complete(); refresher.complete();
render(); render();
console.log('Done'); // Custom event consumed by e2e tests
document.dispatchEvent(new CustomEvent('ionRefreshComplete'));
}); });
function render() { function render() {
let html = ''; let html = '';
for (let item of items) { for (let item of items) {
@ -57,6 +59,7 @@
} }
list.innerHTML = html; list.innerHTML = html;
} }
function getAsyncData() { function getAsyncData() {
// async return mock data // async return mock data
return new Promise(resolve => { return new Promise(resolve => {
@ -69,7 +72,9 @@
}, 500); }, 500);
}); });
} }
render(); render();
</script> </script>
</body> </body>

23
core/src/components/refresher/test/test.utils.ts Normal file
View File

@ -0,0 +1,23 @@
import type { E2EPage } from '@stencil/core/testing';
import { dragElementBy } from '@utils/test';
/**
* Emulates a pull-to-refresh drag gesture (pulls down and releases).
*
* You will need to manually dispatch an event called `ionRefreshComplete`
* in your `complete()` handler for the refresh event. Otherwise the `waitForEvent`
* will complete when the timeout completes (5000ms).
*
* @param page The E2E Page object.
* @param selector The element selector to center the drag gesture on. Defaults to `body`.
*/
const pullToRefresh = async (page: E2EPage, selector = 'body') => {
const target = await page.$(selector);
await dragElementBy(target, page, 0, 200);
const ev = await page.spyOnEvent('ionRefreshComplete', 'document');
await ev.next();
}
export { pullToRefresh };