RISCI_ATOM
/
nextcloud-server
zrcadlo https://github.com/nextcloud/server.git


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