ampproject · Rafer45 · Aug 10, 2020 · Aug 5, 2020 · Aug 5, 2020 · Aug 5, 2020
diff --git a/test-case-reporting/app.ts b/test-case-reporting/app.ts
@@ -67,6 +67,24 @@ function extractPageInfo(req: express.Request): PageInfo {
   };
 }
 
+// We need the testRun index in mustache to give each collapsable
+// its own id.
+function enumerateTestRun(
+  testRun: TestRun,
+  index: number
+): {testRun: TestRun; index: number} {
+  return {testRun, index};
+}
+
+function lowerCaseStatus({status, ...rest}: TestRun): any {
+  return {
+    status: status.toLowerCase(),
+    ...rest,
+  };
+}
+
+app.use(express.static('static/css'));
+
 app.get(['/', '/builds'], async (req, res) => {
   const {json} = req.query;
 
@@ -96,7 +114,12 @@ app.get('/test-results/build/:buildNumber', async (req, res) => {
     if (json) {
       res.json({testRuns});
     } else {
-      res.send(render('test-run-list', {testRuns}));
+      res.send(
+        render('test-run-list', {
+          title: `Test Runs for Build #${buildNumber}`,
+          testRuns: testRuns.map(lowerCaseStatus).map(enumerateTestRun),
+        })
+      );
     }
   } catch (error) {
     handleError(error, res);
@@ -113,10 +136,17 @@ app.get('/test-results/history/:testCaseId', async (req, res) => {
       extractPageInfo(req)
     );
 
+    const testCaseName = testRuns ? testRuns[0].testCase.name : '';
+
     if (json) {
       res.json({testRuns});
     } else {
-      res.send(render('test-run-list', {testRuns}));
+      res.send(
+        render('test-run-list', {
+          title: `Test Runs for test case "${testCaseName}"`,
+          testRuns: testRuns.map(lowerCaseStatus).map(enumerateTestRun),
+        })
+      );
     }
   } catch (error) {
     handleError(error, res);

diff --git a/test-case-reporting/src/test_result_record.ts b/test-case-reporting/src/test_result_record.ts
@@ -38,6 +38,7 @@ type QueryFunction = (q: QueryBuilder) => QueryBuilder;
  */
 function getTestRunFromRow({
   build_number,
+  build_started_at,
   commit_sha,
   job_number,
   test_suite_type,
@@ -50,6 +51,7 @@ function getTestRunFromRow({
   const build: Build = {
     buildNumber: build_number,
     commitSha: commit_sha,
+    startedAt: new Date(build_started_at),
   };
 
   const job: Job = {
@@ -286,9 +288,10 @@ export class TestResultRecord {
       .offset(offset);
 
     /* eslint-disable @typescript-eslint/camelcase */
-    return dbBuilds.map(({commit_sha, build_number}) => ({
+    return dbBuilds.map(({commit_sha, build_number, started_at}) => ({
       commitSha: commit_sha,
       buildNumber: build_number,
+      startedAt: new Date(started_at),
     }));
     /* eslint-enable @typescript-eslint/camelcase */
   }

diff --git a/test-case-reporting/static/build-list.html b/test-case-reporting/static/build-list.html
@@ -1,20 +1,25 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
   <title>{{title}}</title>
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <!-- Surface style taken from https://github.com/niutech/amp-surface -->
+  <link rel="stylesheet" type="text/css" href="/surface.min.css"/>
 </head>
 <body>
-  <ul>
-    {{#builds}}
-      <li>
-        <a href="/test-results/build/{{buildNumber}}">Build {{buildNumber}}</a>
-      </li>
-    {{/builds}}
-    {{^builds}}
-      <h2>
-        There are no builds.
-      </h2>
-    {{/builds}}
-  </ul>
+  <div class="g--10 m--1">
+    <div class="g--8 g-s--12 center">
+      <h1>{{title}}</h1>
+      {{#builds}}
+        <div class="tile">
+          <a href="/test-results/build/{{buildNumber}}">Build {{buildNumber}}</a>, started at {{startedAt}}
+        </div>
+      {{/builds}}
+      {{^builds}}
+          There are no builds.
+      {{/builds}}
+    </div>
+  </div>
 </body>
 </html>
diff --git a/test-case-reporting/static/css/custom.css b/test-case-reporting/static/css/custom.css
@@ -0,0 +1,27 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.status-badge {
+  width: 60px;
+  padding: 2.5px;
+  display: inline-block;
+  font-family: sans-serif;
+  font-variant: small-caps;
+  color: white;
+}
+.status-pass { background: #e0ffe1; }
+.status-fail { background: #ffd0cc; }
+.status-skip { background: #d8d7d7; }
+.status-error { background: #e2d19f; }
diff --git a/test-case-reporting/static/css/surface.min.css b/test-case-reporting/static/css/surface.min.css
diff --git a/test-case-reporting/static/test-run-list.html b/test-case-reporting/static/test-run-list.html
@@ -1,23 +1,33 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <title>Test runs</title>
-</head>
-<body>
-  <ul>
-    {{#testRuns}}
-      <li>Test case is <a href="/test-results/history/{{testCase.id}}">{{testCase.name}}</a></li>
-      <ul>
-        <li>Job num is {{job.jobNumber}}</li>
-        <li>Build num is <a href="/test-results/build/{{job.build.buildNumber}}">{{job.build.buildNumber}}</a></li>
-        <li>Status is {{status}}</li>
-      </ul>
-    {{/testRuns}}
-    {{^testRuns}}
-      <h2>
-        There are no test runs.
-      </h2>
-    {{/testRuns}}
-  </ul>
-</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>{{title}}</title>
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <!-- Surface style taken from https://github.com/niutech/amp-surface -->
+    <link rel="stylesheet" type="text/css" href="/surface.min.css"/>
+    <link rel="stylesheet" type="text/css" href="/custom.css"/>
+  </head>
+  <body>
+    <div class="g--10 m--1">
+      <div class="g--8 g-s--12 center">
+        <h1>{{title}}</h1>
+        {{#testRuns}}
+          <div class="collapsible-wrap card no-pad status-{{testRun.status}}">
+            <input type="checkbox" id="collapsible-{{index}}">
+            <label for="collapsible-{{index}}"><a href="/test-results/history/{{testRun.testCase.id}}">{{testRun.testCase.name}}</a>&nbsp;had status {{testRun.status}}</label>
+            <div class="collapsible-{{index}}-area">
+              <p>Job num is {{testRun.job.jobNumber}}</p>
+              <p>Build num is <a href="/test-results/build/{{testRun.job.build.buildNumber}}">{{testRun.job.build.buildNumber}}</a></p>
+            </div>
+          </div>
+        {{/testRuns}}
+        {{^testRuns}}
+          <h2>
+            There are no test runs.
+          </h2>
+        {{/testRuns}}
+      </div>
+    </div>
+  </body>
 </html>
diff --git a/test-case-reporting/types/test-case-reporting.d.ts b/test-case-reporting/types/test-case-reporting.d.ts
@@ -29,6 +29,7 @@ declare module 'test-case-reporting' {
     // Despite being a *Number, buildNumber is of type string for parity with
     // jobNumber
     buildNumber: string;
+    startedAt: Date;
   }
 
   /** A job within a Travis build. */
@@ -110,7 +111,9 @@ declare module 'test-case-reporting' {
       duration_ms: number;
     }
 
-    export interface BigJoin extends Build, Job, TestCase, TestRun {}
+    export interface BigJoin extends Build, Job, TestCase, TestRun {
+      build_started_at: number;
+    }
   }
   /* eslint @typescript-eslint/camelcase: "error" */