From 89a073e356d5dae2ae07d5dd962b04e8beab1945 Mon Sep 17 00:00:00 2001 From: Iban Eguia Moraza Date: Sat, 3 Oct 2020 12:16:04 +0200 Subject: [PATCH] Added test information, much nicer transitions, still not 100% user friendly --- test262/index.html | 24 +++- test262/results.js | 281 +++++++++++++++++++++++++++------------------ 2 files changed, 185 insertions(+), 120 deletions(-) diff --git a/test262/index.html b/test262/index.html index 8722af123c8..160b1c66d74 100644 --- a/test262/index.html +++ b/test262/index.html @@ -27,9 +27,25 @@ color: #dfa800; } - .card { + .card:not(.test) { width: 100%; } + + #info { + margin-top: 1em; + } + + .info-link { + text-align: center; + font-size: 2em; + } + + .card.test { + width: 2em; + margin: 0.5em; + cursor: pointer; + display: inline-block; + } @@ -60,11 +76,7 @@

id="old-versions" > - +
diff --git a/test262/results.js b/test262/results.js index ceaaa5b7915..1bc8059e515 100644 --- a/test262/results.js +++ b/test262/results.js @@ -1,13 +1,13 @@ "use strict"; (function () { - let test262_info = null; + let test262Info = null; let latest = {}; let formatter = new Intl.NumberFormat("en-GB"); // Load test262 information: fetch("/test262/info.json") .then((response) => response.json()) - .then((data) => (test262_info = data)); + .then((data) => (test262Info = data)); // Load latest complete data from master: fetch("/test262/refs/heads/master/latest.json") @@ -15,7 +15,7 @@ .then((data) => { latest.master = data; - let container = $("#master-latest"); + let container = $("#master-latest .card-body"); container.append(infoLink("master")); }); @@ -23,18 +23,18 @@ fetch("/test262/refs/heads/master/results.json") .then((response) => response.json()) .then((data) => { - let info = createGeneralInfo(data); - - let container = $("#master-latest"); - container.html("

master branch results:

"); - - container.append(info); + let innerContainer = $("
") + .addClass("card-body") + .append($("

master branch results:

")) + .append(createGeneralInfo(data)); if (typeof latest.master !== "undefined") { - container.append(infoLink("master")); + innerContainer.append(infoLink("master")); } - container.show(400); + $("#master-latest") + .append($("
").addClass("card").append(innerContainer)) + .show(); // TODO: paint the graph with historical data. }); @@ -49,18 +49,18 @@ fetch(`/test262/refs/tags/${getRefTag(latestTag)[1]}/results.json`) .then((response) => response.json()) .then((data) => { - let info = createGeneralInfo(data); - - let container = $("#version-latest"); - container.html(`

Latest version (${latestTag}) results:

`); - - container.append(info); + let innerContainer = $("
") + .addClass("card-body") + .append($(`

Latest version (${latestTag}) results:

`)) + .append(createGeneralInfo(data)); if (typeof latest[latestTag] !== "undefined") { - container.append(infoLink(latestTag)); + innerContainer.append(infoLink(latestTag)); } - container.show(400); + $("#version-latest") + .append($("
").addClass("card").append(innerContainer)) + .show(); }); for (let rel of data) { @@ -77,7 +77,7 @@ latest[rel.tag_name] = data; if (rel.tag_name == latestTag) { - let container = $("#version-latest"); + let container = $("#version-latest .card-body"); container.append(infoLink(rel.tag_name)); } @@ -88,46 +88,55 @@ // Creates a link to show the information about a particular tag / branch function infoLink(tag) { - let div = $("
"); - let link = $(""); - - link.text("Show information"); - link.attr("href", "#"); - link.click(() => { - let data = latest[tag]; - showData(data); - }); - - div.append(link); - return div; + return $("
") + .addClass("info-link") + .append( + $("") // Bootstrap info-square icon:https://icons.getbootstrap.com/icons/info-square/ + .append( + ` + + + + + ` + ) + .addClass("card-link") + .attr("href", "#") + .click(() => { + let data = latest[tag]; + showData(data); + }) + ); } // Shows the full test data. function showData(data) { let infoContainer = $("#info"); - infoContainer.hide(800); - infoContainer.html(""); - - for (let suite of data.results.suites) { - addSuite(infoContainer, suite, "info"); - } - - infoContainer.show(800); + setTimeout( + function () { + infoContainer.html(""); + for (let suite of data.results.suites) { + addSuite(infoContainer, suite, "info", "test/" + suite.name); + } + infoContainer.collapse("show"); + }, + infoContainer.hasClass("show") ? 500 : 0 + ); + infoContainer.collapse("hide"); // Adds a suite representation to an element. - function addSuite(elm, suite, parentID) { - let li = $("
"); - li.addClass("card"); + function addSuite(elm, suite, parentID, namespace) { + let li = $("
").addClass("card"); let newID = parentID + suite.name; - - let header = $("
"); let headerID = newID + "header"; - header.attr("id", headerID).addClass("card-header").addClass("col-md-12"); + let header = $("
") + .attr("id", headerID) + .addClass("card-header") + .addClass("col-md-12"); // Add overal information: - let info = $(""); - info + let info = $("") .addClass("btn") .addClass("btn-light") .addClass("btn-block") @@ -135,11 +144,9 @@ .attr("type", "button") .attr("data-toggle", "collapse"); - let name = $(""); - name.addClass("name").text(suite.name); + let name = $("").addClass("name").text(suite.name); info.append(name).attr("aria-expanded", false); - let testData = $(""); let dataHTML = ` ${formatter.format( suite.passed )}`; @@ -152,87 +159,133 @@ dataHTML += ` / ${formatter.format( suite.total )}`; - testData.addClass("data-overview").html(dataHTML); - info.append(testData); + info.append($("").addClass("data-overview").html(dataHTML)); header.append(info); li.append(header); - if (typeof suite.suites !== "undefined") { - let inner = $("
") - .attr("id", newID) - .attr("data-parent", "#" + parentID) - .addClass("collapse") - .attr("aria-labelledby", headerID); + // Add sub-suites + + let inner = $("
") + .attr("id", newID) + .attr("data-parent", "#" + parentID) + .addClass("collapse") + .attr("aria-labelledby", headerID); - let innerInner = $("
") + let innerInner = $("
") + .addClass("card-body") + .addClass("accordion"); + + if (typeof suite.tests !== "undefined" && suite.tests.length !== 0) { + let grid = $("
") .addClass("card-body") - .addClass("accordion"); + .append($("

Direct tests:

")); + for (let innerTest of suite.tests) { + let name = namespace + "/" + innerTest.name + ".js"; + grid.append( + $("
") + .addClass("card") + .addClass("test") + .addClass(innerTest.passed ? "bg-success" : "bg-danger") + .addClass("embed-responsive") + .addClass("embed-responsive-1by1") + .click(() => { + window.open( + "https://github.com/tc39/test262/blob/main/" + name + ); + }) + ); + } + + innerInner.append($("
").addClass("card").append(grid)); + } + if (typeof suite.suites !== "undefined" && suite.suites.length !== 0) { for (let innerSuite of suite.suites) { - addSuite(innerInner, innerSuite, newID); - info.attr("aria-controls", newID).attr("data-target", "#" + newID); + addSuite( + innerInner, + innerSuite, + newID, + namespace + "/" + innerSuite.name + ); } - inner.append(innerInner); - li.append(inner); } + info.attr("aria-controls", newID).attr("data-target", "#" + newID); + inner.append(innerInner); + li.append(inner); + elm.append(li); } } + // Displays test information in a modal. + function displayTestModal(name) { + fetch("https://raw.githubusercontent.com/tc39/test262/main/" + name) + .then((response) => response.text()) + .then((code) => console.log(code)); + // console.log(test262Info[name]); + } + /// Creates the general information structure. function createGeneralInfo(data) { - let ul = $(""); let latest = data[data.length - 1]; - - let latestCommit = $("
  • "); - latestCommit.html( - `Latest commit: ${latest.commit}` - ); - ul.append(latestCommit); - - let totalTests = $("
  • "); - totalTests.html( - `Total tests: ${formatter.format( - latest.total - )}` - ); - ul.append(totalTests); - - let passedTests = $("
  • "); - passedTests.html( - `Passed tests: ${formatter.format( - latest.passed - )}` - ); - ul.append(passedTests); - - let ignoredTests = $("
  • "); - ignoredTests.html( - `Ignored tests: ${formatter.format( - latest.ignored - )}` - ); - ul.append(ignoredTests); - - let failedTests = $("
  • "); - failedTests.html( - `Failed tests: ${formatter.format( - latest.total - latest.passed - latest.ignored - )}` - ); - ul.append(failedTests); - - let conformance = $("
  • "); - conformance.html( - `Conformance: ${ - Math.round((10000 * latest.passed) / latest.total) / 100 - }%` - ); - ul.append(conformance); - - return ul; + return $("") + .addClass("list-group") + .addClass("list-group-flush") + .append( + $("
  • ") + .addClass("list-group-item") + .html( + `Latest commit: ${latest.commit}` + ) + ) + .append( + $("
  • ") + .addClass("list-group-item") + .html( + `Total tests: ${formatter.format( + latest.total + )}` + ) + ) + .append( + $("
  • ") + .addClass("list-group-item") + .html( + `Passed tests: ${formatter.format( + latest.passed + )}` + ) + ) + .append( + $("
  • ") + .addClass("list-group-item") + .html( + `Ignored tests: ${formatter.format( + latest.ignored + )}` + ) + ) + .append( + $("
  • ") + .addClass("list-group-item") + .html( + `Failed tests: ${formatter.format( + latest.total - latest.passed - latest.ignored + )}` + ) + ) + .append( + $("
  • ") + .addClass("list-group-item") + .html( + `Conformance: ${ + Math.round((10000 * latest.passed) / latest.total) / 100 + }%` + ) + // TODO: add progress bar + ); } function getRefTag(tag) {