From: Evan You Date: Thu, 2 Jul 2020 13:49:35 +0000 (-0400) Subject: fix(router-view): preserve keep-alive route guard this context (#344) X-Git-Tag: v4.0.0-beta.1~12 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=994c073fd90add30bf16b5268332277f8b082a74;p=thirdparty%2Fvuejs%2Frouter.git fix(router-view): preserve keep-alive route guard this context (#344) * refactor: refactor router-view + fix keep-alive route guard this context * test: add skipped unit test for keep alive * refactor(e2e): omit props in v-slot * test(e2e): add guard tests keep alive * test(e2e): fix keep alive test * refactor(router-view): render slot content if empty Co-authored-by: Eduardo San Martin Morote --- diff --git a/__tests__/RouterView.spec.ts b/__tests__/RouterView.spec.ts index cce62e4e..80a66f49 100644 --- a/__tests__/RouterView.spec.ts +++ b/__tests__/RouterView.spec.ts @@ -292,4 +292,35 @@ describe('RouterView', () => { const { wrapper } = await factory(routes.withFnProps) expect(wrapper.html()).toBe(`
id:2;other:page
`) }) + + describe('KeepAlive', () => { + async function factory( + initialRoute: RouteLocationNormalizedLoose, + propsData: any = {} + ) { + const route = createMockedRoute(initialRoute) + const wrapper = await mount(RouterView, { + propsData, + provide: route.provides, + components: { RouterView }, + slots: { + default: ` + + + + `, + }, + }) + + return { route, wrapper } + } + + // TODO: maybe migrating to VTU 2 to handle this properly + it.skip('works', async () => { + const { route, wrapper } = await factory(routes.root) + expect(wrapper.html()).toMatchInlineSnapshot(`"
Home
"`) + await route.set(routes.foo) + expect(wrapper.html()).toMatchInlineSnapshot(`"
Foo
"`) + }) + }) }) diff --git a/e2e/keep-alive/index.html b/e2e/keep-alive/index.html new file mode 100644 index 00000000..66d76cf0 --- /dev/null +++ b/e2e/keep-alive/index.html @@ -0,0 +1,17 @@ + + + + + + + Vue Router e2e tests - Keep Alive + + + + + << Back to Homepage +
+ +
+ + diff --git a/e2e/keep-alive/index.ts b/e2e/keep-alive/index.ts new file mode 100644 index 00000000..12d2cab2 --- /dev/null +++ b/e2e/keep-alive/index.ts @@ -0,0 +1,92 @@ +import { createRouter, createWebHistory, useRouter } from '../../src' +import { RouteComponent } from '../../src/types' +import { createApp, ref } from 'vue' + +const Home: RouteComponent = { + template: ` +
+

Home

+

Counter: {{ n }}

+ +
+ `, + setup() { + return { + n: ref(0), + } + }, +} + +const Foo: RouteComponent = { template: '
foo
' } + +const WithGuards: RouteComponent = { + template: `
+

Update Count {{ updateCount }}

+

Leave Count {{ leaveCount }}

+ + +
`, + + beforeRouteUpdate(to, from, next) { + this.updateCount++ + next() + }, + beforeRouteLeave(to, from, next) { + this.leaveCount++ + next() + }, + + setup() { + const updateCount = ref(0) + const leaveCount = ref(0) + const router = useRouter() + + function reset() { + updateCount.value = 0 + leaveCount.value = 0 + } + + function changeQuery() { + router.push({ query: { q: Date.now() } }) + } + return { + reset, + changeQuery, + updateCount, + leaveCount, + } + }, +} + +const webHistory = createWebHistory('/' + __dirname) +const router = createRouter({ + history: webHistory, + routes: [ + { path: '/', component: Home }, + { path: '/with-guards', component: WithGuards }, + { + path: '/foo', + component: Foo, + }, + ], +}) +const app = createApp({ + template: ` +
+

KeepAlive

+
    +
  • /
    • +
  • /foo
    • +
  • /with-guards
    • +
+ + + + + +
+ `, +}) +app.use(router) + +app.mount('#app') diff --git a/e2e/scroll-behavior/index.ts b/e2e/scroll-behavior/index.ts index aa809d07..f976cd00 100644 --- a/e2e/scroll-behavior/index.ts +++ b/e2e/scroll-behavior/index.ts @@ -106,14 +106,14 @@ const app = createApp({ - + - + diff --git a/e2e/specs/keep-alive.js b/e2e/specs/keep-alive.js new file mode 100644 index 00000000..a9e1c4e6 --- /dev/null +++ b/e2e/specs/keep-alive.js @@ -0,0 +1,38 @@ +const bsStatus = require('../browserstack-send-status') + +module.exports = { + ...bsStatus(), + + '@tags': [], + + /** @type {import('nightwatch').NightwatchTest} */ + KeepAlive: function (browser) { + browser + .url('http://localhost:8080/keep-alive/') + .waitForElementPresent('#app > *', 1000) + + .assert.containsText('#counter', '0') + .click('#increment') + .assert.containsText('#counter', '1') + + .click('li:nth-child(2) a') + .assert.containsText('.view', 'foo') + .click('li:nth-child(1) a') + .assert.containsText('#counter', '1') + + .click('li:nth-child(3) a') + .assert.containsText('#update-count', '0') + .click('#change-query') + .assert.containsText('#update-count', '1') + .back() + .assert.containsText('#update-count', '2') + .assert.containsText('#leave-count', '0') + .back() + .assert.containsText('#counter', '1') + .forward() + .assert.containsText('#update-count', '2') + .assert.containsText('#leave-count', '1') + + .end() + }, +} diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts index 8745d507..15356724 100644 --- a/e2e/transitions/index.ts +++ b/e2e/transitions/index.ts @@ -47,9 +47,9 @@ const Parent: RouteComponent = {

Parent

{{ transitionName }} - + - +
@@ -96,9 +96,9 @@ const app = createApp({
  • /parent/foo
  • /parent/bar
    • - + - + diff --git a/package.json b/package.json index 7adeea64..3a525788 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "test": "yarn run test:types && yarn run test:unit && yarn run build && yarn run build:dts && yarn run test:e2e", "test:e2e": "yarn run test:e2e:headless && yarn run test:e2e:native", "test:e2e:headless": "node e2e/runner.js -e chrome-headless --skiptags no-headless", - "test:e2e:native": "node e2e/runner.js -e chrome --tags no-headless", + "test:e2e:native": "node e2e/runner.js -e chrome --tag no-headless", "test:e2e:ci": "node e2e/runner.js -e firefox --retries 2" }, "gitHooks": { @@ -59,7 +59,7 @@ } ], "peerDependencies": { - "vue": "^3.0.0-beta.17" + "vue": "^3.0.0-beta.18" }, "devDependencies": { "@microsoft/api-documenter": "^7.8.19", @@ -73,8 +73,8 @@ "@types/jsdom": "^16.2.3", "@types/webpack": "^4.41.18", "@types/webpack-env": "^1.15.2", - "@vue/compiler-sfc": "3.0.0-beta.17", - "@vue/server-renderer": "^3.0.0-beta.17", + "@vue/compiler-sfc": "3.0.0-beta.18", + "@vue/server-renderer": "^3.0.0-beta.18", "axios": "^0.19.2", "browserstack-local": "^1.4.5", "chalk": "^4.1.0", @@ -103,7 +103,7 @@ "ts-node": "^8.10.2", "tsd": "^0.11.0", "typescript": "^3.9.5", - "vue": "^3.0.0-beta.17", + "vue": "^3.0.0-beta.18", "vue-loader": "^16.0.0-beta.4", "webpack": "^4.43.0", "webpack-bundle-analyzer": "^3.8.0", diff --git a/playground/App.vue b/playground/App.vue index aca3f94a..62aec5f3 100644 --- a/playground/App.vue +++ b/playground/App.vue @@ -159,15 +159,17 @@