220 lines
5.4 KiB
HTML
220 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<title>Nextcloud UI regression tests</title>
|
|
<style>
|
|
|
|
h2 {
|
|
margin-top: 40px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.error {
|
|
color: #aa0000;
|
|
}
|
|
.success {
|
|
color: #00aa00;
|
|
}
|
|
.success img {
|
|
display: none;
|
|
width: 100px;
|
|
}
|
|
.success pre {
|
|
display: none;
|
|
}
|
|
.test-result h3 span {
|
|
width: 40px;
|
|
}
|
|
.test-result {
|
|
padding: 20px;
|
|
}
|
|
img {
|
|
max-width: 33%;
|
|
padding: 10px;
|
|
background-color: #eee;
|
|
margin: 0;
|
|
}
|
|
.overview ul {
|
|
position: fixed;
|
|
max-width: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ul li {
|
|
list-style-type: none;
|
|
padding: 3px;
|
|
}
|
|
ul a:first-child {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
ul span {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 1px;
|
|
display: inline-block;
|
|
}
|
|
span.fa-check {
|
|
color: green;
|
|
}
|
|
span.fa-times {
|
|
color: red;
|
|
}
|
|
.navbar a {
|
|
color: #fff;
|
|
}
|
|
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
.fade-enter, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">Nextcloud UI regression test</a>
|
|
<a class="nav-link" :href="config.repoUrl">{{config.repoUrl}}</a>
|
|
<a class="nav-link" :href="config.repoUrl + '/pull/' + config.pr">#{{ config.pr }}</span></a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main role="main" class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-2 overview">
|
|
<ul>
|
|
<li v-for="suite in config.tests" v-if="result[suite]">
|
|
<a :href="'#' + suite">{{ suite }}</a>
|
|
<a v-for="test in result[suite].tests" :href="test.fullTitle | convertToAnchor" :title="test.fullTitle">
|
|
<span class="fa fa-times" v-if="Object.keys(test.err).length > 0"></span>
|
|
<span class="fa fa-check" v-else></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-10" id="container">
|
|
<div v-for="suite in config.tests" v-if="result[suite]">
|
|
<h2 :id="suite | convertToId">{{ suite }} <span>{{ result[suite].passes.length }}/{{ result[suite].tests.length }}</span></h2>
|
|
<test-result v-for="test in result[suite].tests" :key="test.fullTitle" :suite="suite" :test="test"></test-result>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="text/x-template" id="test-result-template">
|
|
<div class="test-result" :id="test.fullTitle | convertToId">
|
|
<h3 :class="{ error: Object.keys(test.err).length > 0, success: Object.keys(test.err).length == 0}"
|
|
v-on:click="hidden === undefined ? hidden = false : hidden = !hidden">
|
|
<span class="fa fa-times" v-if="Object.keys(test.err).length > 0"></span>
|
|
<span class="fa fa-check" v-else></span>
|
|
{{ test.title }}
|
|
<i v-if="test.duration">{{ test.duration }}ms</i>
|
|
</h3>
|
|
<transition name="fade">
|
|
<div v-if="(hidden === undefined && Object.keys(test.err).length > 0) || hidden === false">
|
|
<div v-if="Object.keys(test.err).length > 0 && !test.err.failedAction">
|
|
<a :href="getImagePath('.base')"><img :src="getImagePath('.base')" /></a>
|
|
<a :href="getImagePath('.diff')"><img :src="getImagePath('.diff')" /></a>
|
|
<a :href="getImagePath('.change')"><img :src="getImagePath('.change')" /></a>
|
|
</div>
|
|
<div v-else>
|
|
<a :href="getImagePath('')"><img :src="getImagePath('')" /></a>
|
|
</div>
|
|
<pre>{{ jsonData }}</pre>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
|
|
Vue.filter('convertToId', function (id) {
|
|
return id.replace(/\W/g,'_');
|
|
});
|
|
|
|
Vue.filter('convertToAnchor', function (id) {
|
|
return '#' + id.replace(/\W/g,'_');
|
|
});
|
|
|
|
Vue.component('test-result', {
|
|
template: '#test-result-template',
|
|
props: ['test', 'suite'],
|
|
data: function () {
|
|
return {
|
|
hidden: undefined
|
|
}
|
|
},
|
|
computed: {
|
|
jsonData: function() {
|
|
return JSON.stringify(this.test, null, 2)
|
|
}
|
|
},
|
|
methods: {
|
|
getImagePath: function(type) {
|
|
return this.suite + '/' + this.test.title + type + '.png';
|
|
}
|
|
}
|
|
});
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
message: 'Hello Vue!',
|
|
config: {},
|
|
result: {
|
|
login: {}
|
|
},
|
|
},
|
|
created: function() {
|
|
this.fetchConfig();
|
|
},
|
|
methods: {
|
|
fetchConfig: function() {
|
|
var request = new XMLHttpRequest();
|
|
request.open('GET', 'config.json', true);
|
|
|
|
request.onload = function() {
|
|
if (request.status >= 200 && request.status < 400) {
|
|
app.config = JSON.parse(request.responseText);
|
|
app.config.tests.forEach(function(item, i){
|
|
app.fetchResults(item);
|
|
});
|
|
}
|
|
};
|
|
|
|
request.onerror = function() {
|
|
};
|
|
|
|
request.send();
|
|
},
|
|
fetchResults: function(suite) {
|
|
var request = new XMLHttpRequest();
|
|
request.open('GET', suite + '.json', true);
|
|
|
|
request.onload = function() {
|
|
if (request.status >= 200 && request.status < 400) {
|
|
Vue.set(app.result, suite, JSON.parse(request.responseText));
|
|
}
|
|
};
|
|
|
|
request.onerror = function() {
|
|
};
|
|
|
|
request.send();
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|