f48a4f71a7
* test(e2e): add e2e test for commits example * test(e2e): add waitForResponse to enhance the test * test(e2e): use mocks for commits test
83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<script src="../../dist/vue.global.js"></script>
|
|
<script src="../mocks/commits.js"></script>
|
|
|
|
<div id="demo">
|
|
<h1>Latest Vue.js Commits</h1>
|
|
<template v-for="branch in branches">
|
|
<input type="radio"
|
|
:id="branch"
|
|
:value="branch"
|
|
name="branch"
|
|
v-model="currentBranch">
|
|
<label :for="branch">{{ branch }}</label>
|
|
</template>
|
|
<p>vuejs/vue@{{ currentBranch }}</p>
|
|
<ul>
|
|
<li v-for="{ html_url, sha, author, commit } in commits">
|
|
<a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
|
|
- <span class="message">{{ truncate(commit.message) }}</span><br>
|
|
by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
|
|
at <span class="date">{{ formatDate(commit.author.date) }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref, watch } = Vue
|
|
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
|
|
|
|
const truncate = v => {
|
|
const newline = v.indexOf('\n')
|
|
return newline > 0 ? v.slice(0, newline) : v
|
|
}
|
|
|
|
const formatDate = v => v.replace(/T|Z/g, ' ')
|
|
|
|
const App = {
|
|
setup() {
|
|
const currentBranch = ref('master')
|
|
const commits = ref(null)
|
|
|
|
watch([currentBranch, commits], () => {
|
|
if (window.location.hash === '#test') {
|
|
// use mocks in e2e to avoid dependency on network / authentication
|
|
setTimeout(() => {
|
|
commits.value = window.MOCKS[currentBranch.value]
|
|
}, 0)
|
|
} else {
|
|
fetch(`${API_URL}${currentBranch.value}`)
|
|
.then(res => res.json())
|
|
.then(data => { commits.value = data })
|
|
}
|
|
})
|
|
|
|
return {
|
|
branches: ['master', 'sync'],
|
|
currentBranch,
|
|
commits,
|
|
truncate,
|
|
formatDate
|
|
}
|
|
}
|
|
}
|
|
|
|
createApp().mount(App, '#demo')
|
|
</script>
|
|
|
|
<style>
|
|
#demo {
|
|
font-family: 'Helvetica', Arial, sans-serif;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: #f66;
|
|
}
|
|
li {
|
|
line-height: 1.5em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.author, .date {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|