From 98bd0e23b89eb025aef375dba0fac18c7b434b5e Mon Sep 17 00:00:00 2001 From: hyesung oh Date: Sun, 12 Nov 2023 18:47:14 +0900 Subject: [PATCH] feat: scroll-restore at all page (#149) * feat: scroll-restore at all page * test: update e2e test * test: update e2e test with wait alias * test: wait for 2sec * test: change get to find * test: cypress version update and logic changed * test: append reload * test: wait twice * test: delete wait * test: disable test --- .../e2e/root/scroll-restoration.spec.ts | 28 +++--- apps/blog/package.json | 2 +- apps/blog/src/hooks/useScrollRestoration.ts | 6 +- apps/blog/src/pages/_app.page.tsx | 3 + .../src/pages/category/[category].page.tsx | 2 - apps/blog/src/pages/index.page.tsx | 2 - apps/resume/package.json | 2 +- yarn.lock | 89 +++++++++++-------- 8 files changed, 75 insertions(+), 59 deletions(-) diff --git a/apps/blog/cypress/e2e/root/scroll-restoration.spec.ts b/apps/blog/cypress/e2e/root/scroll-restoration.spec.ts index e6dbf2b5..ebaf3903 100644 --- a/apps/blog/cypress/e2e/root/scroll-restoration.spec.ts +++ b/apps/blog/cypress/e2e/root/scroll-restoration.spec.ts @@ -1,16 +1,18 @@ -describe('root - store restoration', { testIsolation: false }, () => { - it('should restore scroll position when reload', () => { - const SCROLL_Y_POSITION = 30; +// NOTE: https://github.com/cypress-io/cypress/issues/14857 - cy.visit('/'); - cy.wait(1000); - cy.window().then($window => { - $window.scrollTo(0, SCROLL_Y_POSITION); - }); +// describe('root - store restoration', { testIsolation: false }, () => { +// it('should restore scroll position when go back', () => { +// const SCROLL_Y_POSITION = 30; - cy.reload(); - cy.wait(2000); +// cy.visit('/'); +// cy.window().then($window => { +// $window.scrollTo(0, SCROLL_Y_POSITION); +// }); - cy.window().its('scrollY').should('not.eq', 0); - }); -}); +// cy.get('main').find('a').first().click(); + +// cy.go('back', { timeout: 10000 }); + +// cy.window().its('scrollY').should('not.eq', 0); +// }); +// }); diff --git a/apps/blog/package.json b/apps/blog/package.json index 283c8ee6..a7a55f63 100644 --- a/apps/blog/package.json +++ b/apps/blog/package.json @@ -39,7 +39,7 @@ }, "devDependencies": { "config": "*", - "cypress": "^12.8.1", + "cypress": "^13.5.0", "tsconfig": "*" } } \ No newline at end of file diff --git a/apps/blog/src/hooks/useScrollRestoration.ts b/apps/blog/src/hooks/useScrollRestoration.ts index afc06bc2..83ff8e5b 100644 --- a/apps/blog/src/hooks/useScrollRestoration.ts +++ b/apps/blog/src/hooks/useScrollRestoration.ts @@ -21,18 +21,16 @@ function useScrollRestoration() { useEffect(() => { if ('scrollRestoration' in window.history) { window.history.scrollRestoration = 'manual'; - restoreScrollPos(router.asPath); - const onBeforeUnload = event => { + const onBeforeUnload = () => { saveScrollPos(router.asPath); - delete event['returnValue']; }; const onRouteChangeStart = () => { saveScrollPos(router.asPath); }; - const onRouteChangeComplete = url => { + const onRouteChangeComplete = (url: string) => { if (shouldScrollRestore) { shouldScrollRestore = false; restoreScrollPos(url); diff --git a/apps/blog/src/pages/_app.page.tsx b/apps/blog/src/pages/_app.page.tsx index 886f6b44..083cf223 100644 --- a/apps/blog/src/pages/_app.page.tsx +++ b/apps/blog/src/pages/_app.page.tsx @@ -6,6 +6,7 @@ import { NextUIProvider } from '@nextui-org/react'; import { darkTheme, lightTheme } from 'core'; import { KBarProvider, useRegisterActions } from 'kbar'; +import useScrollRestoration from '../hooks/useScrollRestoration'; import generateKbarAction from '../libs/kbarActions'; const KbarComponent = dynamic(() => import('core/components/Kbar'), { @@ -16,6 +17,8 @@ export default function BlogApp({ Component, pageProps }: AppProps) { const router = useRouter(); const kbarActions = generateKbarAction(router); + useScrollRestoration(); + return ( ({ offset: 12, fullElements: allPosts }); diff --git a/apps/blog/src/pages/index.page.tsx b/apps/blog/src/pages/index.page.tsx index 12903bcd..cad65597 100644 --- a/apps/blog/src/pages/index.page.tsx +++ b/apps/blog/src/pages/index.page.tsx @@ -5,7 +5,6 @@ import { MainHeader } from '../components/Header'; import PostCard from '../components/PostCard'; import SEO from '../components/SEO'; import useInfiniteScroll from '../hooks/useInfiniteScroll'; -import useScrollRestoration from '../hooks/useScrollRestoration'; import { getAllPosts } from '../libs/api'; interface Props { @@ -14,7 +13,6 @@ interface Props { function Blog({ allPosts }: Props) { const { theme } = useTheme(); - useScrollRestoration(); const { setTarget, diff --git a/apps/resume/package.json b/apps/resume/package.json index fe56d3a1..7363db62 100644 --- a/apps/resume/package.json +++ b/apps/resume/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "config": "*", - "cypress": "^12.8.1", + "cypress": "^13.5.0", "tsconfig": "*" } } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 65b11d3a..f2496a23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -728,10 +728,10 @@ dependencies: "@jridgewell/trace-mapping" "0.3.9" -"@cypress/request@^2.88.10": - version "2.88.10" - resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce" - integrity sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg== +"@cypress/request@^3.0.0": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960" + integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ== dependencies: aws-sign2 "~0.7.0" aws4 "^1.8.0" @@ -746,9 +746,9 @@ json-stringify-safe "~5.0.1" mime-types "~2.1.19" performance-now "^2.1.0" - qs "~6.5.2" + qs "6.10.4" safe-buffer "^5.1.2" - tough-cookie "~2.5.0" + tough-cookie "^4.1.3" tunnel-agent "^0.6.0" uuid "^8.3.2" @@ -2583,11 +2583,6 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.42.tgz#d7e8f22700efc94d125103075c074396b5f41f9b" integrity sha512-Q5BPGyGKcvQgAMbsr7qEGN/kIPN6zZecYYABeTDBizOsau+2NMdSVTar9UQw21A2+JyA2KRNDYaYrPB0Rpk2oQ== -"@types/node@^14.14.31": - version "14.18.21" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.21.tgz#0155ee46f6be28b2ff0342ca1a9b9fd4468bef41" - integrity sha512-x5W9s+8P4XteaxT/jKF0PSb7XEvo5VmqEWgsMlyeY4ZlLK8I6aH6g5TPPyDlLAep+GYf4kefb7HFyc7PAO3m+Q== - "@types/node@^18.15.11": version "18.15.11" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f" @@ -2598,6 +2593,13 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014" integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw== +"@types/node@^18.17.5": + version "18.18.9" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.9.tgz#5527ea1832db3bba8eb8023ce8497b7d3f299592" + integrity sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ== + dependencies: + undici-types "~5.26.4" + "@types/normalize-package-data@^2.4.0": version "2.4.1" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" @@ -3788,10 +3790,10 @@ commander@^10.0.0: resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.0.tgz#71797971162cd3cf65f0b9d24eb28f8d303acdf1" integrity sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA== -commander@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae" - integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg== +commander@^6.2.1: + version "6.2.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" + integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== common-tags@^1.8.0: version "1.8.2" @@ -3950,14 +3952,14 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2" integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA== -cypress@^12.8.1: - version "12.8.1" - resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.8.1.tgz#0c6e67f34554d553138697aaf349b637d80004eb" - integrity sha512-lIFbKdaSYAOarNLHNFa2aPZu6YSF+8UY4VRXMxJrFUnk6RvfG0AWsZ7/qle/aIz30TNUD4aOihz2ZgS4vuQVSA== +cypress@^13.5.0: + version "13.5.0" + resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.5.0.tgz#8c149074186130972f08b2cdce6ded41f014bacd" + integrity sha512-oh6U7h9w8wwHfzNDJQ6wVcAeXu31DlIYlNOBvfd6U4CcB8oe4akawQmH+QJVOMZlM42eBoCne015+svVqdwdRQ== dependencies: - "@cypress/request" "^2.88.10" + "@cypress/request" "^3.0.0" "@cypress/xvfb" "^1.2.4" - "@types/node" "^14.14.31" + "@types/node" "^18.17.5" "@types/sinonjs__fake-timers" "8.1.1" "@types/sizzle" "^2.3.2" arch "^2.2.0" @@ -3969,7 +3971,7 @@ cypress@^12.8.1: check-more-types "^2.24.0" cli-cursor "^3.1.0" cli-table3 "~0.6.1" - commander "^5.1.0" + commander "^6.2.1" common-tags "^1.8.0" dayjs "^1.10.4" debug "^4.3.4" @@ -3987,12 +3989,13 @@ cypress@^12.8.1: listr2 "^3.8.3" lodash "^4.17.21" log-symbols "^4.0.0" - minimist "^1.2.6" + minimist "^1.2.8" ospath "^1.2.2" pretty-bytes "^5.6.0" + process "^0.11.10" proxy-from-env "1.0.0" request-progress "^3.0.0" - semver "^7.3.2" + semver "^7.5.3" supports-color "^8.1.1" tmp "~0.2.1" untildify "^4.0.0" @@ -7685,7 +7688,7 @@ minimist-options@4.1.0: is-plain-obj "^1.1.0" kind-of "^6.0.3" -minimist@^1.1.1: +minimist@^1.1.1, minimist@^1.2.8: version "1.2.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c" integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA== @@ -8298,6 +8301,11 @@ pretty-format@^28.1.3: ansi-styles "^5.0.0" react-is "^18.0.0" +process@^0.11.10: + version "0.11.10" + resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" + integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A== + prompts@^2.0.1: version "2.4.2" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069" @@ -8330,7 +8338,7 @@ proxy-from-env@1.0.0: resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee" integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A== -psl@^1.1.28, psl@^1.1.33: +psl@^1.1.33: version "1.8.0" resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24" integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ== @@ -8358,10 +8366,12 @@ q@^1.5.1: resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw== -qs@~6.5.2: - version "6.5.3" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad" - integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA== +qs@6.10.4: + version "6.10.4" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7" + integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g== + dependencies: + side-channel "^1.0.4" querystringify@^2.1.1: version "2.2.0" @@ -8833,7 +8843,7 @@ semver@7.3.8: dependencies: lru-cache "^6.0.0" -semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: +semver@7.x, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3: version "7.5.4" resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== @@ -9465,13 +9475,15 @@ tough-cookie@^4.0.0: universalify "^0.2.0" url-parse "^1.5.3" -tough-cookie@~2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2" - integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g== +tough-cookie@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf" + integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw== dependencies: - psl "^1.1.28" + psl "^1.1.33" punycode "^2.1.1" + universalify "^0.2.0" + url-parse "^1.5.3" tr46@^3.0.0: version "3.0.0" @@ -9736,6 +9748,11 @@ unbox-primitive@^1.0.2: has-symbols "^1.0.3" which-boxed-primitive "^1.0.2" +undici-types@~5.26.4: + version "5.26.5" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" + integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== + unified@^10.0.0, unified@^10.1.2: version "10.1.2" resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"