From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 27 May 2020 13:39:56 +0000 (+0200)
Subject: test(e2e): add smooth scrolling for demo
X-Git-Tag: v4.0.0-alpha.13~31
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cde90301070416dd34cc462c9a7b8e4394972b8f;p=thirdparty%2Fvuejs%2Frouter.git

test(e2e): add smooth scrolling for demo
---

diff --git a/e2e/scroll-behavior/index.ts b/e2e/scroll-behavior/index.ts
index 280c701e..7d16aced 100644
--- a/e2e/scroll-behavior/index.ts
+++ b/e2e/scroll-behavior/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, ScrollBehavior } from '../../src'
 import { RouteComponent } from '../../src/types'
-import { createApp } from 'vue'
+import { createApp, ref } from 'vue'
 import { scrollWaiter } from './scrollWaiter'
 
 const Home: RouteComponent = { template: '<div class="home">home</div>' }
@@ -28,19 +28,23 @@ const scrollBehavior: ScrollBehavior = async function (
 ) {
   await scrollWaiter.promise
 
+  const behavior: ScrollOptions['behavior'] = smoothScroll.value
+    ? 'smooth'
+    : 'auto'
+
   if (savedPosition) {
     // savedPosition is only available for popstate navigations.
-    return savedPosition
+    return { ...savedPosition, behavior }
   } else {
     let position: ReturnType<ScrollBehavior>
 
     // scroll to anchor by returning the selector
     if (to.hash) {
-      position = { selector: decodeURI(to.hash) }
+      position = { selector: decodeURI(to.hash), offset: { behavior } }
 
       // specify offset of the element
       if (to.hash === '#anchor2') {
-        position.offset = { top: 100 }
+        position.offset = { top: 100, behavior }
       }
 
       if (document.querySelector(position.selector)) {
@@ -56,7 +60,7 @@ const scrollBehavior: ScrollBehavior = async function (
     if (to.matched.some(m => m.meta.scrollToTop)) {
       // coords will be used if no selector is provided,
       // or if the selector didn't match any element.
-      return { left: 0, top: 0 }
+      return { left: 0, top: 0, behavior }
     }
 
     return false
@@ -76,9 +80,12 @@ const router = createRouter({
 
 scrollWaiter.add()
 
+const smoothScroll = ref(false)
+
 const app = createApp({
   setup() {
     return {
+      smoothScroll,
       hashWithNumber: { path: '/bar', hash: '#\\31 number' },
       flushWaiter: scrollWaiter.flush,
       setupWaiter: scrollWaiter.add,
@@ -101,6 +108,9 @@ const app = createApp({
         <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
         <li><router-link :to="hashWithNumber">/bar#1number</router-link></li>
       </ul>
+      <label>
+      <input type="checkbox" v-model="smoothScroll"> Use smooth scroll
+      </label>
       <router-view class="view" v-slot="{ Component, props }">
         <transition
           name="fade"