Diagnostics: Add result entries to result list

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I8bcde93c568033282759908ec3e9c212d5ce756b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2469464
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819140}

chrome/test/data/webui/chromeos/diagnostics/diagnostics_test_utils.js

@@ -31,3 +31,13 @@ export function getPercentBarChartElement(element) {
 export function getRealtimeCpuChartElement(element) {
   return element.shadowRoot.querySelector('realtime-cpu-chart');
 }
+
+/**
+ * Helper function for getting an array of routine-result-entry
+ * element from a routine-result-list.
+ * @param {!HTMLElement} element
+ * @return {!Array<!HTMLElement>}
+ */
+export function getResultEntries(element) {
+  return element.shadowRoot.querySelectorAll('routine-result-entry');
+}

chrome/test/data/webui/chromeos/diagnostics/routine_result_list_test.js

@@ -5,8 +5,13 @@
 // TODO(jimmyxgong): Use es6 module for mojo binding (crbug/1004256).
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 import 'chrome://diagnostics/routine_result_list.js';
+
+import {RoutineName} from 'chrome://diagnostics/diagnostics_types.js';
+import {ExecutionProgress, ResultStatusItem} from 'chrome://diagnostics/routine_list_executor.js';
 import {flushTasks} from 'chrome://test/test_util.m.js';
 
+import * as diagnostics_test_utils from './diagnostics_test_utils.js';
+
 suite('RoutineResultListTest', () => {
   /** @type {?HTMLElement} */
   let routineResultListElement = null;
@@ -22,7 +27,12 @@ suite('RoutineResultListTest', () => {
     routineResultListElement = null;
   });
 
-  function initializeRoutineResultList() {
+  /**
+   * Initializes the routine-result-list and sets the list of routines.
+   * @param {!Array<!RoutineName>} routines
+   * @return {!Promise}
+   */
+  function initializeRoutineResultList(routines) {
     assertFalse(!!routineResultListElement);
 
     // Add the entry to the DOM.
@@ -30,14 +40,76 @@ suite('RoutineResultListTest', () => {
     assertTrue(!!routineResultListElement);
     document.body.appendChild(routineResultListElement);
 
+    // Initialize the routines.
+    routineResultListElement.initializeTestRun(routines);
+
     return flushTasks();
   }
 
+  /**
+   * Clear the routine-result-list.
+   * @return {!Promise}
+   */
+  function clearRoutineResultList() {
+    routineResultListElement.clearRoutines();
+    return flushTasks();
+  }
+
+  /**
+   * Returns an array of the entries in the list.
+   * @return {!Array<!RoutineResultEntry>}
+   */
+  function getEntries() {
+    return diagnostics_test_utils.getResultEntries(routineResultListElement);
+  }
+
   test('ElementRendered', () => {
-    return initializeRoutineResultList().then(() => {
+    return initializeRoutineResultList([]).then(() => {
       // Verify the element rendered.
       let div = routineResultListElement.$$('#resultListContainer');
       assertTrue(!!div);
     });
   });
+
+  test('EmptyByDefault', () => {
+    return initializeRoutineResultList([]).then(() => {
+      assertEquals(0, getEntries().length);
+    });
+  });
+
+  test('InitializedRoutines', () => {
+    /** @type {!Array<!RoutineName>} */
+    const routines = [
+      RoutineName.kCpuCache,
+      RoutineName.kFloatingPoint,
+    ];
+
+    return initializeRoutineResultList(routines).then(() => {
+      assertEquals(routines.length, getEntries().length);
+      getEntries().forEach((entry, index) => {
+        // Routines are initialized in the unstarted state.
+        let status = new ResultStatusItem(routines[index]);
+        status.progress = ExecutionProgress.kNotStarted;
+        assertDeepEquals(status, entry.item);
+      });
+    });
+  });
+
+  test('InitializeThenClearRoutines', () => {
+    /** @type {!Array<!RoutineName>} */
+    const routines = [
+      RoutineName.kCpuCache,
+      RoutineName.kFloatingPoint,
+    ];
+
+    return initializeRoutineResultList(routines)
+        .then(() => {
+          assertEquals(routines.length, getEntries().length);
+          return clearRoutineResultList();
+        })
+        .then(() => {
+          // List is empty after clearing.
+          assertEquals(0, getEntries().length);
+        });
+  });
 });

chromeos/components/diagnostics_ui/resources/routine_result_list.html

@@ -2,4 +2,9 @@
 </style>
 
 <div id="resultListContainer">
+  <dom-repeat id="resultList" items="[[results_]]">
+    <template>
+      <routine-result-entry item="[[item]]"></routine-result-entry>
+    </template>
+  </dom-repeat>
 </div>

chromeos/components/diagnostics_ui/resources/routine_result_list.js

@@ -4,8 +4,11 @@
 
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
+import './routine_result_entry.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {RoutineName} from './diagnostics_types.js';
+import {ResultStatusItem} from './routine_list_executor.js'
 
 /**
  * @fileoverview
@@ -16,7 +19,42 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
-  properties: {},
+  properties: {
+    /** @private {!Array<!ResultStatusItem>} */
+    results_: {
+      type: Array,
+      value: () => [],
+    },
+  },
+
+  /**
+   * Resets the list and creates a new list with all routines in the unstarted
+   * state. Called by the parent RoutineResultSection when the user starts
+   * a test run.
+   * @param {!Array<!RoutineName>} routines
+   */
+  initializeTestRun(routines) {
+    this.clearRoutines();
+    routines.forEach((routine) => {
+      this.addRoutine_(routine);
+    });
+  },
+
+  /**
+   * Removes all the routines from the list.
+   */
+  clearRoutines() {
+    this.splice('results_', 0, this.results_.length);
+  },
+
+  /**
+   * Add a new unstarted routine to the end of the list.
+   * @param {!RoutineName} routine
+   * @private
+   */
+  addRoutine_(routine) {
+    this.push('results_', new ResultStatusItem(routine));
+  },
 
   /** @override */
   created() {},