Diagnostics: Use text badges for test results

http://screen/7XAbyfjQY2eXkcm

Bug: 1125150
Test: browser_tests --gtest_Filter=DiagnosticsApp*
Change-Id: I64c89a4feacfc74d718b6ed32de60f252aace750
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2538200
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828503}

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

@@ -6,6 +6,7 @@ import 'chrome://diagnostics/routine_result_entry.js';
 
 import {RoutineName, RoutineResult, StandardRoutineResult} from 'chrome://diagnostics/diagnostics_types.js';
 import {ExecutionProgress, ResultStatusItem} from 'chrome://diagnostics/routine_list_executor.js';
+import {BadgeType} from 'chrome://diagnostics/text_badge.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';
@@ -93,13 +94,14 @@ export function routineResultEntryTestSuite() {
   }
 
   /**
-   * Returns the status element text content.
-   * @return {string}
+   * Returns the status badge content.
+   * @return {!TextBadgeElement}
    */
-  function getStatusText() {
-    const status = routineResultEntryElement.$$('#status');
-    assertTrue(!!status);
-    return status.textContent.trim();
+  function getStatusBadge() {
+    const badge = /** @type{!TextBadgeElement} */ (
+        routineResultEntryElement.$$('#status'));
+    assertTrue(!!badge);
+    return badge;
   }
 
   test('ElementRendered', () => {
@@ -118,7 +120,8 @@ export function routineResultEntryTestSuite() {
       assertEquals(getNameText(), 'kCpuStress');
 
       // Status should be empty if the test is not started.
-      assertEquals(getStatusText(), '');
+      // TODO(joonbug): Utilize isVisible util function.
+      assertTrue(getStatusBadge().hidden);
     });
   });
 
@@ -130,7 +133,8 @@ export function routineResultEntryTestSuite() {
       assertEquals(getNameText(), 'kCpuStress');
 
       // Status should be running.
-      assertEquals(getStatusText(), 'kRunning');
+      assertEquals(getStatusBadge().value, 'RUNNING');
+      assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
     });
   });
 
@@ -143,7 +147,8 @@ export function routineResultEntryTestSuite() {
       assertEquals(getNameText(), 'kCpuStress');
 
       // Status should show the passed result.
-      assertEquals(getStatusText(), 'kTestPassed');
+      assertEquals(getStatusBadge().value, 'SUCCESS');
+      assertEquals(getStatusBadge().badgeType, BadgeType.SUCCESS);
     });
   });
 
@@ -156,7 +161,8 @@ export function routineResultEntryTestSuite() {
       assertEquals(getNameText(), 'kCpuStress');
 
       // Status should show the passed result.
-      assertEquals(getStatusText(), 'kTestFailed');
+      assertEquals(getStatusBadge().value, 'FAILED');
+      assertEquals(getStatusBadge().badgeType, BadgeType.ERROR);
     });
   });
 }

chromeos/components/diagnostics_ui/resources/routine_result_entry.html

@@ -9,5 +9,8 @@
 <div class="entryRow">
   <!-- TODO(zentaro): Create mapping to localized strings. -->
   <div id="routine">[[routineName_]]</div>
-  <div id="status">[[status_]]</div>
+  <text-badge id="status" badge-type="[[getBadgeType_(item.progress, item.result)]]"
+  		value="[[getBadgeText_(item.progress, item.result)]]"
+  		hidden="[[!isTestStarted_(item.progress)]]">
+  </text-badge>
 </div>

chromeos/components/diagnostics_ui/resources/routine_result_entry.js

@@ -4,11 +4,13 @@
 
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
+import './text_badge.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {RoutineName, RoutineResult, StandardRoutineResult} from './diagnostics_types.js';
 import {ExecutionProgress, ResultStatusItem} from './routine_list_executor.js';
+import {BadgeType} from './text_badge.js';
 
 /**
  * Resolves an enum value to the string name. This is used temporarily to
@@ -51,12 +53,6 @@ Polymer({
       type: String,
       computed: 'getRoutineName_(item.routine)',
     },
-
-    /** @private */
-    status_: {
-      type: String,
-      computed: 'getRoutineStatus_(item.progress, item.result)',
-    },
   },
 
   /**
@@ -71,24 +67,44 @@ Polymer({
   },
 
   /**
-   * Get the status for the routine. This is a combination of progress and
-   * result.
-   * TODO(zentaro): Replace with a mapping to localized string when they are
-   * finalized.
-   * @param {!ExecutionProgress} progress
-   * @param {!RoutineResult} result
-   * @return {string}
+   * @protected
+   */
+  getBadgeText_() {
+    // TODO(joonbug): Localize this string.
+    if (this.item.progress === ExecutionProgress.kRunning) {
+      return 'RUNNING';
+    }
+
+    if (this.item.result &&
+        this.item.result.simpleResult === StandardRoutineResult.kTestPassed) {
+      return 'SUCCESS';
+    }
+
+    return 'FAILED';
+  },
+
+  /**
+   * @protected
    */
-  getRoutineStatus_(progress, result) {
-    if (progress === ExecutionProgress.kNotStarted) {
-      return '';
+  getBadgeType_() {
+    // TODO(joonbug): Localize this string.
+    if (this.item.progress === ExecutionProgress.kRunning) {
+      return BadgeType.DEFAULT;
     }
 
-    if (progress === ExecutionProgress.kRunning) {
-      return lookupEnumValueName(ExecutionProgress, ExecutionProgress.kRunning);
+    if (this.item.result &&
+        this.item.result.simpleResult === StandardRoutineResult.kTestPassed) {
+      return BadgeType.SUCCESS;
     }
+    return BadgeType.ERROR;
+  },
 
-    return lookupEnumValueName(StandardRoutineResult, result.simpleResult);
+  /**
+   * @protected
+   * @return {boolean}
+   */
+  isTestStarted_() {
+    return this.item.progress !== ExecutionProgress.kNotStarted;
   },
 
   /** @override */