github.com/web-platform-tests/wpt.fyi@v0.0.0-20240530210107-70cf978996f1/webapp/components/test-run.js (about) 1 /** 2 * Copyright 2018 The WPT Dashboard Project. All rights reserved. 3 * Use of this source code is governed by a BSD-style license that can be 4 * found in the LICENSE file. 5 */ 6 7 /* 8 `<test-run>` is a stateless component for displaying the details of a TestRun. 9 10 The schema for the testRun property is as follows: 11 { 12 "browser_name": "", 13 "browser_version": "", 14 "os_name": "", 15 "os_version": "", 16 "revision": "", // the first 10 characters of the SHA 17 "created_at": "", // the date the TestRun was uploaded 18 } 19 20 See models.go for more details. 21 */ 22 import '../node_modules/@polymer/paper-tooltip/paper-tooltip.js'; 23 import '../node_modules/@polymer/polymer/lib/elements/dom-if.js'; 24 import { html, PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js'; 25 import './display-logo.js'; 26 import { ProductInfo } from './product-info.js'; 27 import { WPTFlags } from './wpt-flags.js'; 28 29 class TestRun extends WPTFlags(ProductInfo(PolymerElement)) { 30 static get template() { 31 return html` 32 <style> 33 a { 34 text-decoration: none; 35 color: #0d5de6; 36 font-family: monospace; 37 } 38 a:hover { 39 cursor: pointer; 40 color: #226ff3; 41 } 42 .revision { 43 font-size: 14px; 44 } 45 .github { 46 display: flex; 47 align-items: center; 48 justify-content: center; 49 } 50 .github img { 51 margin-right: 8px; 52 width: 16px; 53 height: 16px; 54 } 55 </style> 56 57 <div> 58 <display-logo product="[[testRun]]" 59 show-source="[[showSource]]" 60 show-platform="[[showPlatform]]" 61 overlap="[[overlap]]" 62 small="[[small]]"> 63 </display-logo> 64 65 <template is="dom-if" if="[[!small]]"> 66 <div>{{displayName(testRun.browser_name)}} {{shortVersion(testRun.browser_name, testRun.browser_version)}}</div> 67 <template is="dom-if" if="{{ !isDiff(testRun.browser_name) }}"> 68 <div>{{displayName(testRun.os_name)}} {{testRun.os_version}}</div> 69 <template is="dom-if" if="[[githubCommitLinks]]"> 70 <a class="github" href="https://github.com/web-platform-tests/wpt/commit/[[testRun.revision]]"> 71 <img src="/static/github.svg" alt="GitHub logo"> 72 [[sevenCharSHA(testRun.revision)]] 73 </a> 74 </template> 75 <template is="dom-if" if="[[!githubCommitLinks]]"> 76 <div class="revision">@<a href="?sha={{testRun.revision}}">{{testRun.revision}}</a></div> 77 </template> 78 <div>{{dateFormat(testRun.time_start)}}</div> 79 </template> 80 </template> 81 82 <paper-tooltip offset="0"> 83 <template is="dom-if" if="[[ !isDiff(testRun.browser_name) ]]"> 84 [[displayName(testRun.browser_name)]] [[testRun.browser_version]]<br> 85 Platform: [[displayName(testRun.os_name)]] [[displaySource(testRun)]]<br> 86 Labels: [[displayLabels(testRun.labels)]]<br> 87 Started [[timeFormat(testRun.time_start)]] [[timeTaken(testRun)]]<br> 88 [[moreTooltip(testRun)]] 89 </template> 90 <template is="dom-if" if="[[ isDiff(testRun.browser_name) ]]"> 91 diff numbers are for:<br> 92 [newly passing] / [newly failing] / [total count delta] 93 </template> 94 </paper-tooltip> 95 </div> 96 `; 97 } 98 99 static get is() { 100 return 'test-run'; 101 } 102 103 static get properties() { 104 return { 105 testRun: { 106 type: Object, 107 }, 108 small: { 109 type: Boolean, 110 value: false, 111 }, 112 showSource: { 113 type: Boolean, 114 value: false 115 }, 116 showPlatform: { 117 type: Boolean, 118 value: false 119 }, 120 // Whether to overlap the platform/browser/source icons a little. 121 overlap: Boolean, 122 }; 123 } 124 125 dateFormat(isoDate) { 126 return new Date(isoDate).toLocaleDateString('en-US', { 127 month: 'short', 128 day: 'numeric', 129 year: 'numeric', 130 }); 131 } 132 133 timeFormat(isoDate) { 134 const date = new Date(isoDate).toLocaleDateString('en-US', { 135 month: 'short', 136 day: 'numeric', 137 }); 138 const time = new Date(isoDate).toLocaleTimeString('en-US', { 139 hour: 'numeric', 140 minute: 'numeric', 141 }); 142 return `${date} at ${time}`; 143 } 144 145 timeTaken(testRun) { 146 // NOTE: We don't always have a real start/end time. 147 const hour = 1000*60*60; 148 const elapsed = new Date(testRun.time_end) - new Date(testRun.time_start); 149 const oneDP = (elapsed / hour).toFixed(1); 150 return oneDP < 0.1 ? '' : `(took ${oneDP}h)`; 151 } 152 153 isDiff(browserName) { 154 return browserName.toLowerCase() === 'diff'; 155 } 156 157 moreTooltip(testRun) { 158 const labels = testRun && testRun.labels || []; 159 if (testRun.browser_name.startsWith('chrome') && labels.includes('experimental')) { 160 return 'With --enable-experimental-web-platform-features'; 161 } 162 if (testRun.browser_name.startsWith('firefox')) { 163 return 'Using prefs in /testing/profiles/; some experimental features enabled'; 164 } 165 return ''; 166 } 167 168 sevenCharSHA(sha) { 169 return sha && sha.substr(0, 7); 170 } 171 172 displaySource(testRun) { 173 const source = this.sourceName(testRun); 174 return source && `(run on ${source})`; 175 } 176 } 177 178 window.customElements.define(TestRun.is, TestRun); 179 180 export { TestRun };