Diagnostics: Status badge and text for routine section

http://screen/BZqwCuid794nPCD

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

chrome/test/data/webui/chromeos/diagnostics/BUILD.gn

@@ -225,9 +225,9 @@ js_library("routine_section_test") {
     "//chromeos/components/diagnostics_ui/resources:fake_system_routine_controller",
     "//chromeos/components/diagnostics_ui/resources:mojo_interface_provider",
     "//chromeos/components/diagnostics_ui/resources:routine_list_executor",
-    "//chromeos/components/diagnostics_ui/resources:routine_list_executor",
     "//chromeos/components/diagnostics_ui/resources:routine_result_entry",
     "//chromeos/components/diagnostics_ui/resources:routine_section",
+    "//chromeos/components/diagnostics_ui/resources:text_badge",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
   ]
 }

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

@@ -5,10 +5,12 @@
 import 'chrome://diagnostics/routine_result_entry.js';
 import 'chrome://diagnostics/routine_section.js';
 
-import {RoutineName} from 'chrome://diagnostics/diagnostics_types.js';
+import {RoutineName, StandardRoutineResult} from 'chrome://diagnostics/diagnostics_types.js';
 import {FakeSystemRoutineController} from 'chrome://diagnostics/fake_system_routine_controller.js';
 import {setSystemRoutineControllerForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
 import {ExecutionProgress} 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';
 
@@ -88,6 +90,24 @@ export function routineSectionTestSuite() {
     return button;
   }
 
+  /**
+   * Returns the status badge.
+   * @return {!TextBadgeElement}
+   */
+  function getStatusBadge() {
+    return /** @type {!TextBadgeElement} */ (
+        routineSectionElement.$$('#testStatusBadge'));
+  }
+
+  /**
+   * Returns the status text.
+   * TODO(joonbug): Update this type for use with assertElementContainsText
+   * @return {?Element}
+   */
+  function getStatusTextElement() {
+    return routineSectionElement.$$('#testStatusText');
+  }
+
   /**
    * Returns whether the run tests button is disabled.
    * @return {boolean}
@@ -179,7 +199,6 @@ export function routineSectionTestSuite() {
         });
   });
 
-
   test('ClickButtonInitializesResultList', () => {
     /** @type {!Array<!RoutineName>} */
     const routines = [
@@ -242,4 +261,116 @@ export function routineSectionTestSuite() {
           assertEquals(ExecutionProgress.kCompleted, entries[1].item.progress);
         });
   });
+
+  test('ResultListStatusSuccess', () => {
+    /** @type {!Array<!RoutineName>} */
+    const routines = [
+      RoutineName.kMemory,
+    ];
+
+    routineController.setFakeStandardRoutineResult(
+        RoutineName.kMemory, StandardRoutineResult.kTestPassed);
+
+    return initializeRoutineSection(routines)
+        .then(() => {
+          // Hidden by default.
+          assertTrue(getStatusBadge().hidden);
+          assertTrue(getStatusTextElement().hidden);
+          return clickRunTestsButton();
+        })
+        .then(() => {
+          // Badge is visible with test running.
+          assertFalse(getStatusBadge().hidden);
+          assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
+          assertEquals(getStatusBadge().value, 'Test running');
+
+          // Text is visible describing which test is being run.
+          assertFalse(getStatusTextElement().hidden);
+          dx_utils.assertElementContainsText(getStatusTextElement(), 'kMemory');
+
+          // Resolve the running test.
+          return routineController.resolveRoutineForTesting();
+        })
+        .then(() => {
+          return flushTasks();
+        })
+        .then(() => {
+          // Badge is visible with success.
+          assertFalse(getStatusBadge().hidden);
+          assertEquals(getStatusBadge().badgeType, BadgeType.SUCCESS);
+          assertEquals(getStatusBadge().value, 'SUCCESS');
+
+          // Text is visible saying test succeeded.
+          assertFalse(getStatusTextElement().hidden);
+          assertEquals(
+              getStatusTextElement().textContent.trim(), 'Test succeeded');
+        });
+  });
+
+  test('ResultListStatusFail', () => {
+    /** @type {!Array<!RoutineName>} */
+    const routines = [
+      RoutineName.kFloatingPoint,
+      RoutineName.kCpuCache,
+    ];
+
+    routineController.setFakeStandardRoutineResult(
+        RoutineName.kFloatingPoint, StandardRoutineResult.kTestFailed);
+    routineController.setFakeStandardRoutineResult(
+        RoutineName.kCpuCache, StandardRoutineResult.kTestPassed);
+
+    return initializeRoutineSection(routines)
+        .then(() => {
+          // Hidden by default.
+          assertTrue(getStatusBadge().hidden);
+          assertTrue(getStatusTextElement().hidden);
+          return clickRunTestsButton();
+        })
+        .then(() => {
+          // Badge is visible with test running.
+          assertFalse(getStatusBadge().hidden);
+          assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
+          assertEquals(getStatusBadge().value, 'Test running');
+
+          // Text is visible describing which test is being run.
+          assertFalse(getStatusTextElement().hidden);
+          dx_utils.assertElementContainsText(
+              getStatusTextElement(), 'kFloatingPoint');
+
+          // Resolve the running test.
+          return routineController.resolveRoutineForTesting();
+        })
+        .then(() => {
+          return flushTasks();
+        })
+        .then(() => {
+          // Badge is still visible with "test running", even though first one
+          // failed.
+          assertFalse(getStatusBadge().hidden);
+          assertEquals(getStatusBadge().badgeType, BadgeType.DEFAULT);
+          assertEquals(getStatusBadge().value, 'Test running');
+
+          // Text is visible describing which test is being run.
+          assertFalse(getStatusTextElement().hidden);
+          dx_utils.assertElementContainsText(
+              getStatusTextElement(), 'kCpuCache');
+
+          // Resolve the running test.
+          return routineController.resolveRoutineForTesting();
+        })
+        .then(() => {
+          return flushTasks();
+        })
+        .then(() => {
+          // Badge is visible with fail.
+          assertFalse(getStatusBadge().hidden);
+          assertEquals(getStatusBadge().badgeType, BadgeType.ERROR);
+          assertEquals(getStatusBadge().value, 'FAILED');
+
+          // Text is visible saying test failed.
+          assertFalse(getStatusTextElement().hidden);
+          assertEquals(
+              getStatusTextElement().textContent.trim(), 'Test failed');
+        });
+  });
 }

chromeos/components/diagnostics_ui/resources/routine_result_entry.js

@@ -19,7 +19,7 @@ import {ExecutionProgress, ResultStatusItem} from './routine_list_executor.js';
  * @param {number} enumValue
  * @return {string}
  */
-function lookupEnumValueName(enumType, enumValue) {
+export function lookupEnumValueName(enumType, enumValue) {
   for (const [key, value] of Object.entries(enumType)) {
     if (value === enumValue) {
       return key;

chromeos/components/diagnostics_ui/resources/routine_section.html

@@ -8,8 +8,15 @@
     Run Tests
   </cr-button>
   <cr-button id="toggleReportButton" class="action-button" on-click="onToggleReportClicked_"
-      hidden="[[isReportButtonHidden_(executionStatus_)]]">
+      hidden="[[isResultAndStatusHidden_(executionStatus_)]]">
     [[getReportToggleButtonText_(isReportListHidden_)]]
   </cr-button>
+  <text-badge id="testStatusBadge" badge-type="[[getBadgeType_(executionStatus_)]]"
+      hidden="[[isResultAndStatusHidden_(executionStatus_)]]"
+      value="[[getBadgeText_(executionStatus_)]]">
+  </text-badge>
+  <span id="testStatusText" hidden$="[[isResultAndStatusHidden_(executionStatus_)]]">
+    [[getTextStatus_(executionStatus_, currentTestName_)]]
+  </span>
   <routine-result-list id="resultList" hidden="[[isReportListHidden_]]"></routine-result-list>
 </div>

chromeos/components/diagnostics_ui/resources/routine_section.js

@@ -5,13 +5,16 @@
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';
 import './routine_result_list.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} from './diagnostics_types.js';
+import {RoutineName, StandardRoutineResult} from './diagnostics_types.js';
 import {getSystemRoutineController} from './mojo_interface_provider.js';
-import {ExecutionProgress, RoutineListExecutor} from './routine_list_executor.js'
+import {ExecutionProgress, RoutineListExecutor} from './routine_list_executor.js';
+import {lookupEnumValueName} from './routine_result_entry.js';
+import {BadgeType} from './text_badge.js';
 
 /**
  * @fileoverview
@@ -29,6 +32,19 @@ Polymer({
    */
   executor_: null,
 
+  /**
+   * @type {boolean}
+   * @private
+   */
+  isRunTestsDisabled_: false,
+
+  /**
+   * Boolean whether last run had at least one failure,
+   * @type {boolean}
+   * @private
+   */
+  hasTestFailure_: false,
+
   properties: {
     /** @type {!Array<!RoutineName>} */
     routines: {
@@ -37,6 +53,7 @@ Polymer({
     },
 
     /**
+     * Overall ExecutionProgress of the routine.
      * @type {!ExecutionProgress}
      * @private
      */
@@ -45,6 +62,15 @@ Polymer({
       value: ExecutionProgress.kNotStarted,
     },
 
+    /**
+     * Name of currently running test
+     * @private
+     */
+    currentTestName_: {
+      type: String,
+      value: '',
+    },
+
     /** @private */
     isRunTestsDisabled_: {
       type: Boolean,
@@ -55,7 +81,7 @@ Polymer({
     isReportListHidden_: {
       type: Boolean,
       value: true,
-    }
+    },
   },
 
   /** @private */
@@ -67,18 +93,30 @@ Polymer({
   /** @private */
   onRunTestsClicked_() {
     this.isRunTestsDisabled_ = true;
+    this.hasTestFailure_ = false;
     const resultListElem = this.getResultListElem_();
     resultListElem.initializeTestRun(this.routines);
 
     this.executor_ = new RoutineListExecutor(getSystemRoutineController());
+    this.executionStatus_ = ExecutionProgress.kRunning;
     this.executor_
         .runRoutines(
             this.routines,
             (status) => {
-              this.executionStatus_ = status.progress;
+              // TODO(joonbug): Update this function to use localized test name
+              this.currentTestName_ =
+                  lookupEnumValueName(RoutineName, status.routine);
+
+              if (status.result &&
+                  status.result.simpleResult !==
+                      StandardRoutineResult.kTestPassed) {
+                this.hasTestFailure_ = true;
+              }
+
               resultListElem.onStatusUpdate.call(resultListElem, status);
             })
         .then(() => {
+          this.executionStatus_ = ExecutionProgress.kCompleted;
           this.isRunTestsDisabled_ = false;
         });
   },
@@ -90,7 +128,7 @@ Polymer({
   },
 
   /** @protected */
-  isReportButtonHidden_() {
+  isResultAndStatusHidden_() {
     return this.executionStatus_ === ExecutionProgress.kNotStarted;
   },
 
@@ -100,6 +138,35 @@ Polymer({
     return this.isReportListHidden_ ? 'See Report' : 'Hide Report';
   },
 
+  /** @protected */
+  getBadgeType_() {
+    if (this.executionStatus_ === ExecutionProgress.kCompleted) {
+      if (this.hasTestFailure_) {
+        return BadgeType.ERROR;
+      }
+      return BadgeType.SUCCESS;
+    }
+    return BadgeType.DEFAULT;
+  },
+
+  /** @protected */
+  getBadgeText_() {
+    // TODO(joonbug): Localize this string.
+    if (this.executionStatus_ === ExecutionProgress.kRunning) {
+      return 'Test running';
+    }
+    return this.hasTestFailure_ ? 'FAILED' : 'SUCCESS';
+  },
+
+  /** @protected */
+  getTextStatus_() {
+    // TODO(joonbug): Localize this string.
+    if (this.executionStatus_ === ExecutionProgress.kRunning) {
+      return `Running ${this.currentTestName_} test`;
+    }
+    return this.hasTestFailure_ ? 'Test failed' : 'Test succeeded';
+  },
+
   /** @override */
   created() {},
 });