diff --git a/core/src/components/refresher/test/basic/e2e.ts b/core/src/components/refresher/test/basic/e2e.ts
index 7cdd55965e..4cf0613dbb 100644
--- a/core/src/components/refresher/test/basic/e2e.ts
+++ b/core/src/components/refresher/test/basic/e2e.ts
@@ -1,10 +1,57 @@
+import type { E2EPage } from '@stencil/core/testing';
import { newE2EPage } from '@stencil/core/testing';
-test('refresher: basic', async () => {
- const page = await newE2EPage({
- url: '/src/components/refresher/test/basic?ionic:_testing=true'
+import { pullToRefresh } from '../test.utils';
+
+describe('refresher: basic', () => {
+
+ let page: E2EPage;
+
+ beforeEach(async () => {
+ page = await newE2EPage({
+ url: '/src/components/refresher/test/basic?ionic:_testing=true'
+ });
+ });
+
+ it('should match existing visual screenshots', async () => {
+ const compare = await page.compareScreenshot();
+ 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);
+ });
+
});
- const compare = await page.compareScreenshot();
- expect(compare).toMatchScreenshot();
});
diff --git a/core/src/components/refresher/test/basic/index.html b/core/src/components/refresher/test/basic/index.html
index 4c24eb85fd..0773c38b8c 100644
--- a/core/src/components/refresher/test/basic/index.html
+++ b/core/src/components/refresher/test/basic/index.html
@@ -4,12 +4,14 @@
Refresher - Basic
-
+
-
+
+
@@ -21,11 +23,8 @@
-
+
@@ -40,16 +39,19 @@
for (var i = 0; i < 30; i++) {
items.push(i + 1);
}
+
const list = document.getElementById('list');
const refresher = document.getElementById('refresher');
+
refresher.addEventListener('ionRefresh', async function () {
- console.log('Loading data...');
const data = await getAsyncData();
items = items.concat(data);
refresher.complete();
render();
- console.log('Done');
+ // Custom event consumed by e2e tests
+ document.dispatchEvent(new CustomEvent('ionRefreshComplete'));
});
+
function render() {
let html = '';
for (let item of items) {
@@ -57,6 +59,7 @@
}
list.innerHTML = html;
}
+
function getAsyncData() {
// async return mock data
return new Promise(resolve => {
@@ -69,7 +72,9 @@
}, 500);
});
}
+
render();
+
diff --git a/core/src/components/refresher/test/test.utils.ts b/core/src/components/refresher/test/test.utils.ts
new file mode 100644
index 0000000000..c71ea7f6a6
--- /dev/null
+++ b/core/src/components/refresher/test/test.utils.ts
@@ -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 };