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,8 @@ function extractPageInfo(req: express.Request): PageInfo {
   };
 }
 
+app.use(express.static('static/css'));
+
 app.get(['/', '/builds'], async (req, res) => {
   const {json} = req.query;
 
@@ -96,7 +98,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,
+        })
+      );
     }
   } catch (error) {
     handleError(error, res);
@@ -113,10 +120,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,
+        })
+      );
     }
   } 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
@@ -4,16 +4,17 @@
   <title>{{title}}</title>
 </head>
 <body>
+  <h1>{{title}}</h1>
   <ul>
     {{#builds}}
       <li>
-        <a href="/test-results/build/{{buildNumber}}">Build {{buildNumber}}</a>
+        <a href="/test-results/build/{{buildNumber}}">Build {{buildNumber}}</a>, started at {{startedAt}}
       </li>
     {{/builds}}
     {{^builds}}
-      <h2>
+      <li>
         There are no builds.
-      </h2>
+      </li>
     {{/builds}}
   </ul>
 </body>

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,32 @@
 <!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"/>
+  </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">
+            <input type="checkbox" id="collapsible-{{testCase.id}}-{{build.buildNumber}}">
+            <label for="collapsible-{{testCase.id}}-{{build.buildNumber}}"><a href="/test-results/history/{{testCase.id}}">{{testCase.name}}</a>&nbsp;had status {{status}}</label>
+            <div class="collapsible-{{testCase.id}}-{{build.buildNumber}}-area">
+              <p>Job num is {{job.jobNumber}}</p>
+              <p>Build num is <a href="/test-results/build/{{job.build.buildNumber}}">{{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" */