Diagnostics: Wire up NetworkListObserver in network-list

- Implements NetworkListObserver.onNetworkListChanged in network list
- Displays active guid in the connectivity card
- Adds tests to network list that ensure that the active guid is present
in the connectivity card
- Adds FakeNetworkHealthProvider to the mojo_interface_provider
- Updates mojo test to include NetworkHealthProvider

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I349ffeb6d384f08d4d5b900f8de2659bf47e962f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2844821
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Michael Checo <michaelcheco@google.com>
Cr-Commit-Position: refs/heads/master@{#878000}

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

@@ -186,6 +186,7 @@ js_library("mojo_interface_provider_test") {
   deps = [
     "../..:chai_assert",
     "//chromeos/components/diagnostics_ui/resources:diagnostics_types",
+    "//chromeos/components/diagnostics_ui/resources:fake_network_health_provider",
     "//chromeos/components/diagnostics_ui/resources:fake_system_routine_controller",
     "//chromeos/components/diagnostics_ui/resources:mojo_interface_provider",
   ]
@@ -195,6 +196,10 @@ js_library("network_list_test") {
   deps = [
     "../..:chai_assert",
     "../..:test_util.m",
+    "//chromeos/components/diagnostics_ui/resources:diagnostics_types",
+    "//chromeos/components/diagnostics_ui/resources:fake_data",
+    "//chromeos/components/diagnostics_ui/resources:fake_network_health_provider",
+    "//chromeos/components/diagnostics_ui/resources:mojo_interface_provider",
     "//chromeos/components/diagnostics_ui/resources:network_list",
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]

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

@@ -3,9 +3,10 @@
 // found in the LICENSE file.
 
 import {SystemDataProviderInterface} from 'chrome://diagnostics/diagnostics_types.js';
+import {FakeNetworkHealthProvider} from 'chrome://diagnostics/fake_network_health_provider.js';
 import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_provider.js';
 import {FakeSystemRoutineController} from 'chrome://diagnostics/fake_system_routine_controller.js';
-import {getSystemDataProvider, getSystemRoutineController, setSystemDataProviderForTesting, setSystemRoutineControllerForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
+import {getNetworkHealthProvider, getSystemDataProvider, getSystemRoutineController, setNetworkHealthProviderForTesting, setSystemDataProviderForTesting, setSystemRoutineControllerForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
 
 import {assertEquals} from '../../chai_assert.js';
 
@@ -21,4 +22,10 @@ export function fakeMojoProviderTestSuite() {
     setSystemRoutineControllerForTesting(fake_controller);
     assertEquals(fake_controller, getSystemRoutineController());
   });
+
+  test('SettingGettingTestNetworkHealthProvider', () => {
+    let fake_provider = new FakeNetworkHealthProvider();
+    setNetworkHealthProviderForTesting(fake_provider);
+    assertEquals(fake_provider, getNetworkHealthProvider());
+  });
 }

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

@@ -4,6 +4,11 @@
 
 import 'chrome://diagnostics/network_list.js';
 
+import {NetworkGuidInfo} from 'chrome://diagnostics/diagnostics_types.js';
+import {fakeNetworkGuidInfoList} from 'chrome://diagnostics/fake_data.js';
+import {FakeNetworkHealthProvider} from 'chrome://diagnostics/fake_network_health_provider.js';
+import {setNetworkHealthProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
+
 import {assertFalse, assertTrue} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';
 
@@ -13,6 +18,14 @@ export function networkListTestSuite() {
   /** @type {?NetworkListElement} */
   let networkListElement = null;
 
+  /** @type {?FakeNetworkHealthProvider} */
+  let provider = null;
+
+  suiteSetup(() => {
+    provider = new FakeNetworkHealthProvider();
+    setNetworkHealthProviderForTesting(provider);
+  });
+
   setup(() => {
     document.body.innerHTML = '';
   });
@@ -20,10 +33,15 @@ export function networkListTestSuite() {
   teardown(() => {
     networkListElement.remove();
     networkListElement = null;
+    provider.reset();
   });
 
-  function initializeNetworkList() {
+  /**
+   * @param {!Array<!NetworkGuidInfo>} fakeNetworkGuidInfoList
+   */
+  function initializeNetworkList(fakeNetworkGuidInfoList) {
     assertFalse(!!networkListElement);
+    provider.setFakeNetworkGuidInfo(fakeNetworkGuidInfoList);
 
     // Add the network list to the DOM.
     networkListElement = /** @type {!NetworkListElement} */ (
@@ -46,8 +64,34 @@ export function networkListTestSuite() {
     return connectivityCard;
   }
 
-  test('ConnectivityCardInitialized', () => {
-    return initializeNetworkList().then(
-        () => assertTrue(!!getConnectivityCard()));
+  /**
+   * Causes the network list observer to fire.
+   */
+  function triggerNetworkListObserver() {
+    provider.triggerNetworkListObserver();
+    return flushTasks();
+  }
+
+  test('ActiveGuidPresent', () => {
+    // The network-list element sets up a NetworkListObserver as part
+    // of its initialization. Registering this observer causes it to
+    // fire once.
+    return initializeNetworkList(fakeNetworkGuidInfoList).then(() => {
+      dx_utils.assertElementContainsText(
+          getConnectivityCard().$$('#activeGuid'),
+          /**  @type {string} */ (fakeNetworkGuidInfoList[0].activeGuid));
+    });
+  });
+
+  test('ActiveGuidUpdates', () => {
+    return initializeNetworkList(fakeNetworkGuidInfoList)
+        .then(() => triggerNetworkListObserver())
+        .then(() => {
+          // Triggering the NetworkListObserver provides
+          // the second observation: fakeNetworkGuidInfoList[1].
+          dx_utils.assertElementContainsText(
+              getConnectivityCard().$$('#activeGuid'),
+              /** @type {string} */ (fakeNetworkGuidInfoList[1].activeGuid));
+        });
   });
 }

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -174,6 +174,7 @@ js_library("mojo_utils") {
 js_library("network_list") {
   deps = [
     ":connectivity_card",
+    ":diagnostics_types",
     ":mojo_interface_provider",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]

chromeos/components/diagnostics_ui/resources/connectivity_card.html

@@ -1,9 +1,10 @@
 <style include="diagnostics-shared diagnostics-fonts">
 </style>
 
-<diagnostics-card hide-data-points="true">
+<diagnostics-card>
     <!-- TODO(michaelcheco): Add localized strings. -->
   <div id="cardTitle" slot="title">Connectivity</div>
+  <div id="activeGuid" slot="body">[[activeGuid]]</div>
   <routine-section slot="routines" routines="[[routines_]]"
   is-test-running="{{isTestRunning}}"
   run-tests-button-text="Run Network test"

chromeos/components/diagnostics_ui/resources/connectivity_card.js

@@ -46,6 +46,12 @@ Polymer({
         chromeos.diagnostics.mojom.RoutineType.kSignalStrength,
       ],
     },
+
+    /** @type {string} */
+    activeGuid: {
+      type: String,
+      value: '',
+    },
   },
 
   /** @protected */

chromeos/components/diagnostics_ui/resources/mojo_interface_provider.js

@@ -10,8 +10,9 @@ import './system_routine_controller.mojom-lite.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 
-import {PowerRoutineResult, RoutineType, StandardRoutineResult, SystemDataProviderInterface, SystemInfo, SystemRoutineControllerInterface} from './diagnostics_types.js';
-import {fakeBatteryChargeStatus, fakeBatteryHealth, fakeBatteryInfo, fakeCpuUsage, fakeMemoryUsage, fakePowerRoutineResults, fakeRoutineResults, fakeSystemInfo} from './fake_data.js';
+import {NetworkHealthProviderInterface, PowerRoutineResult, RoutineType, StandardRoutineResult, SystemDataProviderInterface, SystemInfo, SystemRoutineControllerInterface} from './diagnostics_types.js';
+import {fakeAllNetworksAvailable, fakeBatteryChargeStatus, fakeBatteryHealth, fakeBatteryInfo, fakeCpuUsage, fakeMemoryUsage, fakePowerRoutineResults, fakeRoutineResults, fakeSystemInfo} from './fake_data.js';
+import {FakeNetworkHealthProvider} from './fake_network_health_provider.js';
 import {FakeSystemDataProvider} from './fake_system_data_provider.js';
 import {FakeSystemRoutineController} from './fake_system_routine_controller.js';
 
@@ -31,6 +32,11 @@ let systemDataProvider = null;
  */
 let systemRoutineController = null;
 
+/**
+ * @type {?NetworkHealthProviderInterface}
+ */
+let networkHealthProvider = null;
+
 /**
  * @param {!SystemDataProviderInterface} testProvider
  */
@@ -70,3 +76,31 @@ export function getSystemRoutineController() {
   assert(!!systemRoutineController);
   return systemRoutineController;
 }
+
+/**
+ * @param {!NetworkHealthProviderInterface} testProvider
+ */
+export function setNetworkHealthProviderForTesting(testProvider) {
+  networkHealthProvider = testProvider;
+}
+
+function setupFakeNetworkHealthProvider_() {
+  const provider = new FakeNetworkHealthProvider();
+  // The fake provides a stable state with all networks connected.
+  provider.setFakeNetworkGuidInfo([fakeAllNetworksAvailable]);
+
+  setNetworkHealthProviderForTesting(provider);
+}
+
+/**
+ * @return {!NetworkHealthProviderInterface}
+ */
+export function getNetworkHealthProvider() {
+  if (!networkHealthProvider) {
+    // TODO(michaelcheco): Instantiate a real mojo interface here.
+    setupFakeNetworkHealthProvider_();
+  }
+
+  assert(!!networkHealthProvider);
+  return networkHealthProvider;
+}

chromeos/components/diagnostics_ui/resources/network_list.html

@@ -5,7 +5,7 @@
 </style>
 
 <div id="networkListContainer">
-  <connectivity-card id="connectivityCard"
+  <connectivity-card id="connectivityCard" active-guid="[[activeGuid_]]"
     is-test-running="{{isTestRunning}}">
   </connectivity-card>
 </div>

chromeos/components/diagnostics_ui/resources/network_list.js

@@ -8,6 +8,9 @@ import './diagnostics_shared_css.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {NetworkGuidInfo, NetworkHealthProviderInterface} from './diagnostics_types.js'
+import {getNetworkHealthProvider} from './mojo_interface_provider.js';
+
 /**
  * @fileoverview
  * 'network-list' is responsible for displaying Ethernet, Cellular,
@@ -18,6 +21,11 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  /**
+   * @private {?NetworkHealthProviderInterface}
+   */
+  networkHealthProvider_: null,
+
   properties: {
     /** @type {boolean} */
     isTestRunning: {
@@ -25,5 +33,42 @@ Polymer({
       value: false,
       notify: true,
     },
+
+    /** @private {Array<?string>} */
+    otherNetworkGuids_: {
+      type: Array,
+      value: () => [],
+    },
+
+    /** @private {string} */
+    activeGuid_: {
+      type: String,
+      value: '',
+    },
+  },
+
+  /** @override */
+  created() {
+    this.networkHealthProvider_ = getNetworkHealthProvider();
+    this.observeNetworkList_();
+  },
+
+  /** @private */
+  observeNetworkList_() {
+    // Calling observeNetworkList will trigger onNetworkListChanged.
+    this.networkHealthProvider_.observeNetworkList(this);
+  },
+
+  /**
+   * Implements NetworkListObserver.onNetworkListChanged
+   * @param {!NetworkGuidInfo} networkGuidInfo
+   */
+  onNetworkListChanged(networkGuidInfo) {
+    // The connectivity-card is responsible for displaying the active network
+    // so we need to filter out the activeGuid to avoid displaying a
+    // a network-info card for it.
+    this.otherNetworkGuids_ = networkGuidInfo.networkGuids.filter(
+        guid => guid !== networkGuidInfo.activeGuid);
+    this.activeGuid_ = networkGuidInfo.activeGuid || '';
   },
 });