first commit

test/integration/route-load-cancel-css/pages/index.js

@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+
+export default () => {
+  const router = useRouter()
+  useEffect(() => {
+    router.events.on('routeChangeError', (err) => {
+      if (err.cancelled) {
+        window.routeCancelled = 'yes'
+      }
+    })
+
+    // Intentionally is not cleaned up
+  }, [router.events])
+  return (
+    <>
+      <Link href="/page1" id="link-1">
+        Page 1
+      </Link>{' '}
+      <Link href="/page2" id="link-2">
+        Page 2
+      </Link>
+    </>
+  )
+}

test/integration/route-load-cancel-css/pages/page1.js

@@ -0,0 +1,16 @@
+import styles from './page1.module.css'
+
+function Page1(props) {
+  return (
+    <p id="page-text" className={styles.abc}>
+      1
+    </p>
+  )
+}
+
+export async function getServerSideProps() {
+  await new Promise((resolve) => setTimeout(resolve, 5000))
+  return { props: {} }
+}
+
+export default Page1

test/integration/route-load-cancel-css/pages/page1.module.css

@@ -0,0 +1,3 @@
+.abc {
+  color: blue;
+}

test/integration/route-load-cancel-css/pages/page2.js

@@ -0,0 +1,5 @@
+function Page2() {
+  return <p id="page-text">2</p>
+}
+
+export default Page2

test/integration/route-load-cancel-css/test/index.test.ts

@@ -0,0 +1,57 @@
+/* eslint-env jest */
+
+import {
+  nextServer,
+  runNextCommand,
+  startApp,
+  stopApp,
+  waitFor,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+let app
+let appPort
+let server
+const appDir = join(__dirname, '../')
+
+function runTests() {
+  it('should cancel slow page loads on re-navigation', async () => {
+    const browser = await webdriver(appPort, '/')
+
+    await browser.elementByCss('#link-1').click()
+    await waitFor(3000)
+    expect(await browser.hasElementByCssSelector('#page-text')).toBeFalsy()
+
+    await browser.elementByCss('#link-2').click()
+    await waitFor(3000)
+
+    const text2 = await browser.elementByCss('#page-text').text()
+    expect(text2).toMatch(/2/)
+    expect(await browser.eval('window.routeCancelled')).toBe('yes')
+  })
+}
+
+describe('route cancel via CSS', () => {
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      beforeAll(async () => {
+        await runNextCommand(['build', appDir])
+
+        app = nextServer({
+          dir: appDir,
+          dev: false,
+          quiet: true,
+        })
+
+        server = await startApp(app)
+        appPort = server.address().port
+      })
+
+      afterAll(() => stopApp(server))
+
+      runTests()
+    }
+  )
+})