Skip to content

Commit fd95f19

Browse files
posvaposva
committed
test(e2e): add more instances test
1 parent 27131fe commit fd95f19

File tree

4 files changed

+141
-9
lines changed

4 files changed

+141
-9
lines changed

‎e2e/guards-instances/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@
77
<title>Vue Router e2e tests - instances in guards</title>
88
<!-- TODO: replace with local imports for promises and anything else needed -->
99
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
10+
<style>
11+
.fade-enter-active,
12+
.fade-leave-active {
13+
transition: opacity 2s ease;
14+
}
15+
.fade-enter-from,
16+
.fade-leave-active {
17+
opacity: 0;
18+
}
19+
</style>
1020
</head>
1121
<body>
1222
<a href="/">&lt;&lt; Back to Homepage</a>

‎e2e/guards-instances/index.ts

+50-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
11
import { createRouter, createWebHistory } from '../../src'
22
import { createApp, ref, reactive, defineComponent } from 'vue'
33

4+
// override existing style on dev with shorter times
5+
if (!__CI__) {
6+
const transitionDuration = '0.5s'
7+
const styleEl = document.createElement('style')
8+
styleEl.innerHTML = `
9+
.fade-enter-active,
10+
.fade-leave-active {
11+
transition: opacity ${transitionDuration} ease;
12+
}
13+
.child-view {
14+
position: absolute;
15+
transition: all ${transitionDuration} cubic-bezier(0.55, 0, 0.1, 1);
16+
}
17+
`
18+
document.head.append(styleEl)
19+
}
20+
421
const Home = defineComponent({
522
template: `
623
<div>
@@ -20,6 +37,9 @@ const state = reactive({
2037
const Foo = defineComponent({
2138
template: '<div>foo {{ enterCallback }}</div>',
2239
data: () => ({ key: 'Foo', enterCallback: 0 }),
40+
mounted() {
41+
console.log('mounted Foo')
42+
},
2343
beforeRouteEnter(to, from, next) {
2444
state.enter++
2545
logs.value.push(`enter ${from.path} - ${to.path}`)
@@ -55,17 +75,22 @@ const router = createRouter({
5575
},
5676
],
5777
})
78+
5879
const app = createApp({
5980
template: `
6081
<div id="app">
6182
<h1>Instances</h1>
62-
<button id="test-keep-alive" @click="testCase = 'keepalive'">Use Keep Alive</button>
83+
<p>Using {{ testCase || 'default' }}</p>
6384
<button id="test-normal" @click="testCase = ''">Use Normal</button>
85+
<button id="test-keepalive" @click="testCase = 'keepalive'">Use Keep Alive</button>
86+
<button id="test-transition" @click="testCase = 'transition'">Use Transition</button>
87+
<button id="test-keyed" @click="testCase = 'keyed'">Use keyed</button>
88+
<button id="test-keepalivekeyed" @click="testCase = 'keepalivekeyed'">Use Keep Alive Keyed</button>
6489
<pre>
65-
route: {{ $route.fullPath }}
66-
enters: {{ state.enter }}
67-
updates: {{ state.update }}
68-
leaves: {{ state.leave }}
90+
route: {{ $route.fullPath }}
91+
enters: {{ state.enter }}
92+
updates: {{ state.update }}
93+
leaves: {{ state.leave }}
6994
</pre>
7095
<pre id="logs">{{ logs.join('\\n') }}</pre>
7196
<button id="resetLogs" @click="logs = []">Reset Logs</button>
@@ -74,7 +99,8 @@ const app = createApp({
7499
<li><router-link to="/foo">/foo</router-link></li>
75100
<li><router-link to="/f/1">/f/1</router-link></li>
76101
<li><router-link to="/f/2">/f/2</router-link></li>
77-
<li><router-link to="/f/2?foo">/f/2?foo</router-link></li>
102+
<li><router-link to="/f/2?bar=foo">/f/2?bar=foo</router-link></li>
103+
<li><router-link to="/f/2?foo=key">/f/2?foo=key</router-link></li>
78104
</ul>
79105
80106
<template v-if="testCase === 'keepalive'">
@@ -84,6 +110,23 @@ const app = createApp({
84110
</keep-alive>
85111
</router-view>
86112
</template>
113+
<template v-else-if="testCase === 'transition'">
114+
<router-view v-slot="{ Component }" >
115+
<transition name="fade" mode="">
116+
<component :is="Component" class="view" />
117+
</transition>
118+
</router-view>
119+
</template>
120+
<template v-else-if="testCase === 'keyed'">
121+
<router-view :key="$route.query.foo" class="view" />
122+
</template>
123+
<template v-else-if="testCase === 'keepalivekeyed'">
124+
<router-view v-slot="{ Component }" >
125+
<keep-alive>
126+
<component :is="Component" :key="$route.query.foo" class="view" />
127+
</keep-alive>
128+
</router-view>
129+
</template>
87130
<template v-else>
88131
<router-view class="view" />
89132
</template>
@@ -96,6 +139,7 @@ const app = createApp({
96139
return { state, logs, testCase }
97140
},
98141
})
142+
99143
app.use(router)
100144

101145
app.mount('#app')

‎e2e/specs/guards-instances.js

+80-3
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,16 @@ module.exports = {
3838
.waitForElementPresent('#app > *', 1000)
3939

4040
.click('#test-normal')
41-
testCase(browser).end()
41+
42+
testCase(browser)
43+
44+
browser
45+
.click('li:nth-child(1) a')
46+
// the enters are reset when leaving a reused component
47+
.click('li:nth-child(2) a')
48+
.assert.containsText('.view', 'foo 1')
49+
50+
browser.end()
4251
},
4352

4453
/** @type {import('nightwatch').NightwatchTest} */
@@ -47,7 +56,75 @@ module.exports = {
4756
.url('http://localhost:8080/guards-instances/')
4857
.waitForElementPresent('#app > *', 1000)
4958

50-
.click('#test-keep-alive')
51-
testCase(browser).end()
59+
.click('#test-keepalive')
60+
61+
testCase(browser)
62+
63+
browser
64+
.click('li:nth-child(1) a')
65+
// keep alive keeps the correct instance
66+
.click('li:nth-child(2) a')
67+
.assert.containsText('.view', 'foo 4')
68+
69+
browser.end()
70+
},
71+
72+
// /** @type {import('nightwatch').NightwatchTest} */
73+
// 'guards instances transition': function (browser) {
74+
// browser
75+
// .url('http://localhost:8080/guards-instances/')
76+
// .waitForElementPresent('#app > *', 1000)
77+
78+
// .click('#test-transition')
79+
80+
// testCase(browser)
81+
82+
// browser.end()
83+
// },
84+
85+
/** @type {import('nightwatch').NightwatchTest} */
86+
'guards instances keyed': function (browser) {
87+
browser
88+
.url('http://localhost:8080/guards-instances/')
89+
.waitForElementPresent('#app > *', 1000)
90+
91+
.click('#test-keyed')
92+
93+
testCase(browser)
94+
95+
browser
96+
.click('li:nth-child(5) a')
97+
// the query is used as a key resetting the enter count
98+
.click('li:nth-child(6) a')
99+
.assert.containsText('.view', 'foo 0')
100+
101+
browser.end()
102+
},
103+
104+
/** @type {import('nightwatch').NightwatchTest} */
105+
'guards instances keepalive keyed': function (browser) {
106+
browser
107+
.url('http://localhost:8080/guards-instances/')
108+
.waitForElementPresent('#app > *', 1000)
109+
110+
.click('#test-keepalivekeyed')
111+
112+
testCase(browser)
113+
114+
browser
115+
.click('li:nth-child(5) a')
116+
// the query is used as a key resetting the enter count
117+
.click('li:nth-child(6) a')
118+
.assert.containsText('.view', 'foo 0')
119+
// going back to /foo
120+
.click('li:nth-child(2) a')
121+
.assert.containsText('.view', 'foo 5')
122+
.click('li:nth-child(1) a')
123+
.click('li:nth-child(6) a')
124+
.assert.containsText('.view', 'foo 1')
125+
.click('li:nth-child(5) a')
126+
.assert.containsText('.view', 'foo 5')
127+
128+
browser.end()
52129
},
53130
}

‎src/RouterView.ts

+1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export const RouterViewImpl = defineComponent({
5757
// the instance on the record
5858
watch(matchedRouteRef, (to, from) => {
5959
const currentName = props.name
60+
// to can be null if there isn't a matched route, e.g. not found
6061
if (to && !to.instances[currentName]) {
6162
to.instances[currentName] = viewRef.value
6263
// trigger enter callbacks when different routes only

0 commit comments

Comments
 (0)