diff options
Diffstat (limited to 'tests/ui-regression/out/index.html')
| -rw-r--r-- | tests/ui-regression/out/index.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/tests/ui-regression/out/index.html b/tests/ui-regression/out/index.html new file mode 100644 index 00000000000..a94dae13445 --- /dev/null +++ b/tests/ui-regression/out/index.html @@ -0,0 +1,219 @@ +<!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> |