Diagnostics: Use "mobile data" for cellular label

- Adds string for cellular label and adds SHA.
- Tests cellular network-card display with correct title.

Strings Diagnostics app link: http://go/cros-diagnostics-strings
Screenshot: http://shortn/_IzynXp52M2

  --gtest_filter=DiagnosticsApp*'

Bug: 1197335
Test: testing/xvfb.py out/Default/browser_tests
Change-Id: I34c7c2ebb2e3996702917a794ddeea7631295ff7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3219569
Auto-Submit: Ashley Prasad <ashleydp@google.com>
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/main@{#931056}

ash/webui/diagnostics_ui/diagnostics_ui.cc

@@ -82,7 +82,7 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
       {"boardAndVersionInfo", IDS_DIAGNOSTICS_DEVICE_INFO_TEXT},
       {"captivePortalFailedText", IDS_DIAGNOSTICS_CAPTIVE_PORTAL_FAILED_TEXT},
       {"captivePortalRoutineText", IDS_NETWORK_DIAGNOSTICS_CAPTIVE_PORTAL},
-      {"cellularLabel", IDS_NETWORK_TYPE_CELLULAR},
+      {"cellularLabel", IDS_DIAGNOSTICS_NETWORK_TYPE_CELLULAR},
       {"chargeTestResultText", IDS_CHARGE_TEST_RESULT},
       {"connectivityText", IDS_DIAGNOSTICS_CONNECTIVITY},
       {"cpuBannerMessage", IDS_DIAGNOSTICS_CPU_BANNER_MESSAGE},

ash/webui/diagnostics_ui/resources/fake_data.js

@@ -574,6 +574,34 @@ export let fakeCellularNetwork = {
   },
 };
 
+/** @type {!Network} */
+export let fakeCellularWithIpConfigNetwork = {
+  state: NetworkState.kConnected,
+  type: NetworkType.kCellular,
+  typeProperties: {
+    cellular: {
+      networkTechnology: 'LTE',
+      roaming: true,
+      roamingState: RoamingState.kRoaming,
+      signalStrength: 55,
+      iccid: '83948080007483825411',
+      eid: '82099038007008862600508229159883',
+      simLocked: true,
+      lockType: LockType.kSimPin,
+      simAbsent: false,
+    },
+  },
+  observerGuid: 'cellularWithIpConfigGuid',
+  name: 'cellularName',
+  macAddress: '85:C5:A6:30:3F:31',
+  ipConfig: {
+    ipAddress: '192.168.86.197',
+    gateway: '192.168.86.1',
+    nameServers: ['192.168.86.1'],
+    routingPrefix: 24,
+  },
+};
+
 /** @type {!Network} */
 export let fakeCellularDisabledNetwork = {
   state: NetworkState.kDisabled,

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

@@ -4,7 +4,7 @@
 
 import 'chrome://diagnostics/network_card.js';
 
-import {fakeCellularNetwork, fakeConnectingEthernetNetwork, fakeDisconnectedEthernetNetwork, fakeDisconnectedWifiNetwork, fakeEthernetNetwork, fakeNetworkGuidInfoList, fakePortalWifiNetwork, fakeWifiNetwork, fakeWifiNetworkDisabled, fakeWifiNetworkInvalidNameServers, fakeWifiNetworkNoIpAddress} from 'chrome://diagnostics/fake_data.js';
+import {fakeCellularNetwork, fakeCellularWithIpConfigNetwork, fakeConnectingEthernetNetwork, fakeDisconnectedEthernetNetwork, fakeDisconnectedWifiNetwork, fakeEthernetNetwork, fakeNetworkGuidInfoList, fakePortalWifiNetwork, fakeWifiNetwork, fakeWifiNetworkDisabled, fakeWifiNetworkInvalidNameServers, fakeWifiNetworkNoIpAddress} 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 {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
@@ -58,6 +58,8 @@ export function networkCardTestSuite() {
         'wifiGuidInvalidNameServers', [fakeWifiNetworkInvalidNameServers]);
     provider.setFakeNetworkState(
         'wifiGuidNoIpAddress', [fakeWifiNetworkNoIpAddress]);
+    provider.setFakeNetworkState(
+        'cellularWithIpConfigGuid', [fakeCellularWithIpConfigNetwork]);
     // Add the network info to the DOM.
     networkCardElement = /** @type {!NetworkCardElement} */ (
         document.createElement('network-card'));
@@ -111,6 +113,14 @@ export function networkCardTestSuite() {
     return /** @type {!Element} */ (networkCardElement.$$('#icon'));
   }
 
+  /** @return {!Element} */
+  function getCellularInfoElement() {
+    const networkInfoElement = getNetworkInfoElement();
+    assertTrue(!!networkInfoElement);
+
+    return dx_utils.getCellularInfoElement(networkInfoElement);
+  }
+
   /** @return {!Element} */
   function getEthernetInfoElement() {
     const networkInfoElement = getNetworkInfoElement();
@@ -310,4 +320,15 @@ export function networkCardTestSuite() {
           assertTrue(getTimerId() === -1);
         });
   });
+
+  test('CardTitleCellularConnectedInitializedCorrectly', () => {
+    return initializeNetworkCard('cellularWithIpConfigGuid').then(() => {
+      dx_utils.assertElementContainsText(
+          networkCardElement.$$('#cardTitle'), 'Mobile data');
+      assertTrue(isVisible(getNetworkIcon()));
+      assertFalse(isVisible(getTroubleConnectingElement()));
+      assertTrue(isVisible(getCellularInfoElement()));
+      assertTrue(isVisible(getIpConfigDrawerElement()));
+    });
+  });
 }

chromeos/chromeos_strings.grd

@@ -994,6 +994,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_DIAGNOSTICS_RECONNECT_LINK_TEXT" desc="The text contains a link to the settings page to allow users to reconnect their network.">
         Visit Settings to reconnect
       </message>
+      <message name="IDS_DIAGNOSTICS_NETWORK_TYPE_CELLULAR" desc="Label used to describe Cellular networks.">
+        Mobile data
+      </message>
 
       <message name="IDS_DIAGNOSTICS_SETTINGS_LINK_TEXT" desc="The text contains a link to the settings page, allowing a user to set up a new connection.">
         To set up a new connection, go to <ph name="BEGIN_LINK">&lt;a target="_blank" href="$1"&gt;</ph>Settings<ph name="END_LINK">&lt;/a&gt;</ph>.

chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_NETWORK_TYPE_CELLULAR.png.sha1

@@ -0,0 +1 @@
+501a47ca4d4e393ed8f0cdf52267fd5d559aa398