From 713ea8adaa389686cc499f1530ea27c6075dcb16 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Tue, 6 Aug 2019 17:28:29 +0200 Subject: [PATCH] fix(router): fix partial gesture (#18977) fixes #18462 --- .../directives/navigation/stack-controller.ts | 22 ++++----- .../test-app/e2e/src/navigation.e2e-spec.ts | 48 +++++++++++++++++++ 2 files changed, 59 insertions(+), 11 deletions(-) diff --git a/angular/src/directives/navigation/stack-controller.ts b/angular/src/directives/navigation/stack-controller.ts index cbf4f89fbf..f47bd84a2a 100644 --- a/angular/src/directives/navigation/stack-controller.ts +++ b/angular/src/directives/navigation/stack-controller.ts @@ -108,6 +108,14 @@ export class StackController { // Wait until previous transitions finish return this.zone.runOutsideAngular(() => { return this.wait(() => { + // disconnect leaving page from change detection to + // reduce jank during the page transition + if (leavingView) { + leavingView.ref.changeDetectorRef.detach(); + } + // In case the enteringView is the same as the leavingPage we need to reattach() + enteringView.ref.changeDetectorRef.reattach(); + return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false) .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location)) .then(() => ({ @@ -161,7 +169,7 @@ export class StackController { enteringView, // entering view leavingView, // leaving view 'back', - true, + this.canGoBack(2), true ); }); @@ -173,6 +181,8 @@ export class StackController { if (shouldComplete) { this.skipTransition = true; this.pop(1); + } else if (this.activeView) { + cleanup(this.activeView, this.views, this.views, this.location); } } @@ -216,16 +226,6 @@ export class StackController { if (leavingView === enteringView) { return Promise.resolve(false); } - - // disconnect leaving page from change detection to - // reduce jank during the page transition - if (leavingView) { - leavingView.ref.changeDetectorRef.detach(); - } - // In case the enteringView is the same as the leavingPage we need to reattach() - if (enteringView) { - enteringView.ref.changeDetectorRef.reattach(); - } const enteringEl = enteringView ? enteringView.element : undefined; const leavingEl = leavingView ? leavingView.element : undefined; const containerEl = this.containerEl; diff --git a/angular/test/test-app/e2e/src/navigation.e2e-spec.ts b/angular/test/test-app/e2e/src/navigation.e2e-spec.ts index cad54e5dd7..9d09bf75d4 100644 --- a/angular/test/test-app/e2e/src/navigation.e2e-spec.ts +++ b/angular/test/test-app/e2e/src/navigation.e2e-spec.ts @@ -7,6 +7,40 @@ describe('navigation', () => { return handleErrorMessages(); }); + it ('should swipe and abort', async () => { + await browser.get('/router-link?ionic:mode=ios'); + await waitTime(500); + await element(by.css('#routerLink')).click(); + await waitTime(500); + await swipeLeft(5); + await waitTime(500); + + const pageHidden = element(by.css('app-router-link')); + expect(await pageHidden.getAttribute('aria-hidden')).toEqual('true'); + expect(await pageHidden.getAttribute('class')).toEqual('ion-page ion-page-hidden'); + + const pageVisible = element(by.css('app-router-link-page')); + expect(await pageVisible.getAttribute('aria-hidden')).toEqual(null); + expect(await pageVisible.getAttribute('class')).toEqual('ion-page can-go-back'); + }); + + it ('should swipe and go back', async () => { + await browser.get('/router-link?ionic:mode=ios'); + await waitTime(500); + await element(by.css('#routerLink')).click(); + await waitTime(500); + await testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']); + + await swipeLeft(300); + + await waitTime(1000); + await testStack('ion-router-outlet', ['app-router-link']); + + const page = element(by.css('app-router-link')); + expect(await page.getAttribute('aria-hidden')).toEqual(null); + expect(await page.getAttribute('class')).toEqual('ion-page'); + }) + it('should navigate correctly', async () => { await browser.get('/navigation/page1'); await waitTime(2000); @@ -22,3 +56,17 @@ describe('navigation', () => { }); }); + +function swipeLeft(end: number) { + return browser.driver.touchActions() + .tapAndHold({x: 5, y: 1}) + .move({x: 6, y: 1}) + .move({x: 7, y: 1}) + .move({x: 8, y: 1}) + .move({x: 30, y: 1}) + .move({x: 300, y: 1}) + .move({x: end, y: 1}) + .move({x: end, y: 1}) + .release({x: end, y: 1}) + .perform(); +} \ No newline at end of file