nextcloud/tests/ui-regression/out/index.html

220 lines
5.4 KiB
HTML
Raw Normal View History

<!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>