index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  7. <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  8. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. <title>Nextcloud UI regression tests</title>
  10. <style>
  11. h2 {
  12. margin-top: 40px;
  13. margin-bottom: 20px;
  14. }
  15. .error {
  16. color: #aa0000;
  17. }
  18. .success {
  19. color: #00aa00;
  20. }
  21. .success img {
  22. display: none;
  23. width: 100px;
  24. }
  25. .success pre {
  26. display: none;
  27. }
  28. .test-result h3 span {
  29. width: 40px;
  30. }
  31. .test-result {
  32. padding: 20px;
  33. }
  34. img {
  35. max-width: 33%;
  36. padding: 10px;
  37. background-color: #eee;
  38. margin: 0;
  39. }
  40. .overview ul {
  41. position: fixed;
  42. max-width: inherit;
  43. margin: 0;
  44. padding: 0;
  45. }
  46. ul li {
  47. list-style-type: none;
  48. padding: 3px;
  49. }
  50. ul a:first-child {
  51. width: 100%;
  52. display: inline-block;
  53. }
  54. ul span {
  55. width: 16px;
  56. height: 16px;
  57. margin: 1px;
  58. display: inline-block;
  59. }
  60. span.fa-check {
  61. color: green;
  62. }
  63. span.fa-times {
  64. color: red;
  65. }
  66. .navbar a {
  67. color: #fff;
  68. }
  69. .fade-enter-active, .fade-leave-active {
  70. transition: opacity .5s;
  71. }
  72. .fade-enter, .fade-leave-to {
  73. opacity: 0;
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <div id="app">
  79. <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
  80. <div class="container">
  81. <a class="navbar-brand" href="#">Nextcloud UI regression test</a>
  82. <a class="nav-link" :href="config.repoUrl">{{config.repoUrl}}</a>
  83. <a class="nav-link" :href="config.repoUrl + '/pull/' + config.pr">#{{ config.pr }}</span></a>
  84. </div>
  85. </nav>
  86. <main role="main" class="container-fluid">
  87. <div class="row">
  88. <div class="col-md-2 overview">
  89. <ul>
  90. <li v-for="suite in config.tests" v-if="result[suite]">
  91. <a :href="'#' + suite">{{ suite }}</a>
  92. <a v-for="test in result[suite].tests" :href="test.fullTitle | convertToAnchor" :title="test.fullTitle">
  93. <span class="fa fa-times" v-if="Object.keys(test.err).length > 0"></span>
  94. <span class="fa fa-check" v-else></span>
  95. </a>
  96. </li>
  97. </ul>
  98. </div>
  99. <div class="col-md-10" id="container">
  100. <div v-for="suite in config.tests" v-if="result[suite]">
  101. <h2 :id="suite | convertToId">{{ suite }} <span>{{ result[suite].passes.length }}/{{ result[suite].tests.length }}</span></h2>
  102. <test-result v-for="test in result[suite].tests" :key="test.fullTitle" :suite="suite" :test="test"></test-result>
  103. </div>
  104. </div>
  105. </div>
  106. </main>
  107. </div>
  108. <script type="text/x-template" id="test-result-template">
  109. <div class="test-result" :id="test.fullTitle | convertToId">
  110. <h3 :class="{ error: Object.keys(test.err).length > 0, success: Object.keys(test.err).length == 0}"
  111. v-on:click="hidden === undefined ? hidden = false : hidden = !hidden">
  112. <span class="fa fa-times" v-if="Object.keys(test.err).length > 0"></span>
  113. <span class="fa fa-check" v-else></span>
  114. {{ test.title }}
  115. <i v-if="test.duration">{{ test.duration }}ms</i>
  116. </h3>
  117. <transition name="fade">
  118. <div v-if="(hidden === undefined && Object.keys(test.err).length > 0) || hidden === false">
  119. <div v-if="Object.keys(test.err).length > 0 && !test.err.failedAction">
  120. <a :href="getImagePath('.base')"><img :src="getImagePath('.base')" /></a>
  121. <a :href="getImagePath('.diff')"><img :src="getImagePath('.diff')" /></a>
  122. <a :href="getImagePath('.change')"><img :src="getImagePath('.change')" /></a>
  123. </div>
  124. <div v-else>
  125. <a :href="getImagePath('')"><img :src="getImagePath('')" /></a>
  126. </div>
  127. <pre>{{ jsonData }}</pre>
  128. </div>
  129. </transition>
  130. </div>
  131. </script>
  132. <script>
  133. Vue.filter('convertToId', function (id) {
  134. return id.replace(/\W/g,'_');
  135. });
  136. Vue.filter('convertToAnchor', function (id) {
  137. return '#' + id.replace(/\W/g,'_');
  138. });
  139. Vue.component('test-result', {
  140. template: '#test-result-template',
  141. props: ['test', 'suite'],
  142. data: function () {
  143. return {
  144. hidden: undefined
  145. }
  146. },
  147. computed: {
  148. jsonData: function() {
  149. return JSON.stringify(this.test, null, 2)
  150. }
  151. },
  152. methods: {
  153. getImagePath: function(type) {
  154. return this.suite + '/' + this.test.title + type + '.png';
  155. }
  156. }
  157. });
  158. var app = new Vue({
  159. el: '#app',
  160. data: {
  161. message: 'Hello Vue!',
  162. config: {},
  163. result: {
  164. login: {}
  165. },
  166. },
  167. created: function() {
  168. this.fetchConfig();
  169. },
  170. methods: {
  171. fetchConfig: function() {
  172. var request = new XMLHttpRequest();
  173. request.open('GET', 'config.json', true);
  174. request.onload = function() {
  175. if (request.status >= 200 && request.status < 400) {
  176. app.config = JSON.parse(request.responseText);
  177. app.config.tests.forEach(function(item, i){
  178. app.fetchResults(item);
  179. });
  180. }
  181. };
  182. request.onerror = function() {
  183. };
  184. request.send();
  185. },
  186. fetchResults: function(suite) {
  187. var request = new XMLHttpRequest();
  188. request.open('GET', suite + '.json', true);
  189. request.onload = function() {
  190. if (request.status >= 200 && request.status < 400) {
  191. Vue.set(app.result, suite, JSON.parse(request.responseText));
  192. }
  193. };
  194. request.onerror = function() {
  195. };
  196. request.send();
  197. }
  198. }
  199. });
  200. </script>
  201. </body>
  202. </html>