CrOS Settings: Convert os bluetooth change device name dialog browser

test to TS gtest_filter="*OsBluetoothPageOsBluetoothChangeDeviceNameDialog*" Bug: b/270728282 Test: browser_tests -- Change-Id: I000ea40aaee7a3e7896d08f04bafbd2e84eb4ec6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4785467 Reviewed-by: Wes Okuhara <wesokuhara@google.com> Commit-Queue: Ruma Kesh <rkesh@google.com> Cr-Commit-Position: refs/heads/main@{#1185408}
chromium · Aug 18, 2023 · 00abe0d · 00abe0d
1 parent 5061c20
commit 00abe0d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 46 deletions.
diff --git a/chrome/browser/resources/ash/settings/lazy_load.ts b/chrome/browser/resources/ash/settings/lazy_load.ts
@@ -86,6 +86,7 @@ import './os_apps_page/app_management_page/pin_to_shelf_item.js';
 import './os_apps_page/app_management_page/plugin_vm_page/plugin_vm_detail_view.js';
 import './os_apps_page/app_management_page/pwa_detail_view.js';
 import './os_apps_page/app_management_page/sub_apps_item.js';
+import './os_bluetooth_page/os_bluetooth_change_device_name_dialog.js';
 import './os_files_page/google_drive_subpage.js';
 import './os_files_page/google_drive_confirmation_dialog.js';
 import './os_files_page/google_drive_subpage.js';
@@ -196,6 +197,7 @@ export {AppManagementPwaDetailViewElement} from './os_apps_page/app_management_p
 export {AppManagementResizeLockItemElement} from './os_apps_page/app_management_page/resize_lock_item.js';
 export {AppManagementSubAppsItemElement} from './os_apps_page/app_management_page/sub_apps_item.js';
 export {AppNotificationsSubpage} from './os_apps_page/app_notifications_page/app_notifications_subpage.js';
+export {SettingsBluetoothChangeDeviceNameDialogElement} from './os_bluetooth_page/os_bluetooth_change_device_name_dialog.js';
 export {SettingsGoogleDriveSubpageElement} from './os_files_page/google_drive_subpage.js';
 export {SettingsOfficePageElement} from './os_files_page/office_page.js';
 export {OneDriveConnectionState, SettingsOneDriveSubpageElement} from './os_files_page/one_drive_subpage.js';

diff --git a/...rowser/resources/ash/settings/os_bluetooth_page/os_bluetooth_change_device_name_dialog.ts b/...rowser/resources/ash/settings/os_bluetooth_page/os_bluetooth_change_device_name_dialog.ts
@@ -22,14 +22,14 @@ import {getTemplate} from './os_bluetooth_change_device_name_dialog.html.js';
 
 const MAX_INPUT_LENGTH: number = 32;
 
-interface SettingsBluetoothChangeDeviceNameDialogElement {
+export interface SettingsBluetoothChangeDeviceNameDialogElement {
   $: {dialog: CrDialogElement};
 }
 
 const SettingsBluetoothChangeDeviceNameDialogElementBase =
     I18nMixin(PolymerElement);
 
-class SettingsBluetoothChangeDeviceNameDialogElement extends
+export class SettingsBluetoothChangeDeviceNameDialogElement extends
     SettingsBluetoothChangeDeviceNameDialogElementBase {
   static get is() {
     return 'os-settings-bluetooth-change-device-name-dialog' as const;

diff --git a/chrome/browser/resources/ash/settings/os_settings.ts b/chrome/browser/resources/ash/settings/os_settings.ts
@@ -62,7 +62,6 @@ import './os_bluetooth_page/os_bluetooth_saved_devices_subpage.js';
 import './os_bluetooth_page/os_remove_saved_device_dialog.js';
 import './os_bluetooth_page/os_bluetooth_forget_device_dialog.js';
 import './os_bluetooth_page/os_bluetooth_true_wireless_images.js';
-import './os_bluetooth_page/os_bluetooth_change_device_name_dialog.js';
 import './os_bluetooth_page/os_bluetooth_pairing_dialog.js';
 import './os_bluetooth_page/os_bluetooth_page.js';
 import './os_bluetooth_page/os_bluetooth_summary.js';

diff --git a/chrome/test/data/webui/settings/chromeos/BUILD.gn b/chrome/test/data/webui/settings/chromeos/BUILD.gn
@@ -204,7 +204,7 @@ build_webui_tests("build") {
     "os_apps_page/app_notifications_page/app_notifications_subpage_test.ts",
     "os_apps_page/app_notifications_page/fake_app_notification_handler.ts",
 
-    "os_bluetooth_page/os_bluetooth_change_device_name_dialog_tests.js",
+    "os_bluetooth_page/os_bluetooth_change_device_name_dialog_test.ts",
     "os_bluetooth_page/os_bluetooth_device_detail_subpage_tests.js",
     "os_bluetooth_page/os_bluetooth_devices_subpage_tests.js",
     "os_bluetooth_page/os_bluetooth_page_tests.js",

diff --git a/...etooth_change_device_name_dialog_tests.js → ...uetooth_change_device_name_dialog_test.ts b/...etooth_change_device_name_dialog_tests.js → ...uetooth_change_device_name_dialog_test.ts
@@ -2,24 +2,24 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://os-settings/os_settings.js';
-import 'chrome://os-settings/strings.m.js';
+import 'chrome://os-settings/lazy_load.js';
 
+import {SettingsBluetoothChangeDeviceNameDialogElement} from 'chrome://os-settings/lazy_load.js';
+import {CrInputElement} from 'chrome://os-settings/os_settings.js';
 import {getDeviceName} from 'chrome://resources/ash/common/bluetooth/bluetooth_utils.js';
 import {setBluetoothConfigForTesting} from 'chrome://resources/ash/common/bluetooth/cros_bluetooth_config.js';
 import {DeviceConnectionState} from 'chrome://resources/mojo/chromeos/ash/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {createDefaultBluetoothDevice, FakeBluetoothConfig} from 'chrome://webui-test/cr_components/chromeos/bluetooth/fake_bluetooth_config.js';
+import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
 
-suite('OsBluetoothChangeDeviceNameDialogTest', function() {
-  /** @type {!SettingsBluetoothChangeDeviceNameDialogElement|undefined} */
-  let bluetoothDeviceChangeNameDialog;
+suite('<os-settings-bluetooth-change-device-name-dialog>', () => {
+  let bluetoothDeviceChangeNameDialog:
+      SettingsBluetoothChangeDeviceNameDialogElement;
+  let bluetoothConfig: FakeBluetoothConfig;
 
-  /** @type {!FakeBluetoothConfig} */
-  let bluetoothConfig;
-
-  setup(function() {
+  setup(() => {
     bluetoothConfig = new FakeBluetoothConfig();
     setBluetoothConfigForTesting(bluetoothConfig);
     bluetoothDeviceChangeNameDialog = document.createElement(
@@ -28,50 +28,50 @@ suite('OsBluetoothChangeDeviceNameDialogTest', function() {
     flush();
   });
 
-  function flushAsync() {
-    flush();
-    return new Promise((resolve) => setTimeout(resolve));
-  }
+  teardown(() => {
+    bluetoothDeviceChangeNameDialog.remove();
+  });
 
   /**
-   * @param {string} value The value of the input
-   * @param {boolean} invalid If the input is invalid or not
-   * @param {string} valueLength The length of value in string
+   * @param value The value of the input
+   * @param invalid If the input is invalid or not
+   * @param valueLength The length of value in string
    *     format, with 2 digits
    */
-  function assertInput(value, invalid, valueLength) {
-    const input = bluetoothDeviceChangeNameDialog.shadowRoot.querySelector(
-        '#changeNameInput');
+  function assertInput(
+      value: string, invalid: boolean, valueLength: string): void {
+    const input = bluetoothDeviceChangeNameDialog.shadowRoot!
+                      .querySelector<CrInputElement>('#changeNameInput');
     const inputCount =
-        bluetoothDeviceChangeNameDialog.shadowRoot.querySelector('#inputCount');
+        bluetoothDeviceChangeNameDialog.shadowRoot!.querySelector(
+            '#inputCount');
     assertTrue(!!input);
     assertTrue(!!inputCount);
 
-    assertEquals(input.value, value);
-    assertEquals(input.invalid, invalid);
+    assertEquals(value, input.value);
+    assertEquals(invalid, input.invalid);
     const characterCountText = bluetoothDeviceChangeNameDialog.i18n(
         'bluetoothChangeNameDialogInputCharCount', valueLength, 32);
-    assertEquals(inputCount.textContent.trim(), characterCountText);
+    assertEquals(characterCountText, inputCount.textContent?.trim());
     assertEquals(
-        input.ariaDescription,
         bluetoothDeviceChangeNameDialog.i18n(
-            'bluetoothChangeNameDialogInputA11yLabel', 32));
+            'bluetoothChangeNameDialogInputA11yLabel', 32),
+        input.ariaDescription);
   }
 
-  test('Input is sanitized', async function() {
+  test('Input is sanitized', async () => {
     const device1 = createDefaultBluetoothDevice(
         /*id=*/ '12//345&6789',
         /*publicName=*/ 'BeatsX',
         /*connectionState=*/
         DeviceConnectionState.kConnected,
         /*opt_nickname=*/ 'device1');
 
-    bluetoothDeviceChangeNameDialog.device = {...device1};
-    await flushAsync();
+    bluetoothDeviceChangeNameDialog.set('device', {...device1});
+    await flushTasks();
 
-    await flushAsync();
-    const input = bluetoothDeviceChangeNameDialog.shadowRoot.querySelector(
-        '#changeNameInput');
+    const input = bluetoothDeviceChangeNameDialog.shadowRoot!
+                      .querySelector<CrInputElement>('#changeNameInput');
     assertTrue(!!input);
     assertEquals('device1', input.value);
 
@@ -108,37 +108,42 @@ suite('OsBluetoothChangeDeviceNameDialogTest', function() {
         /*valueLength=*/ '31');
   });
 
-  test('Device name is changed', async function() {
+  test('Device name is changed', async () => {
     const id = '12//345&6789';
     const nickname = 'Nickname';
-    const getDoneBtn = () =>
-        bluetoothDeviceChangeNameDialog.shadowRoot.querySelector('#done');
+    const getDoneBtn = () => {
+      const doneButton = bluetoothDeviceChangeNameDialog.shadowRoot!
+                             .querySelector<HTMLButtonElement>('#done');
+      assertTrue(!!doneButton);
+      return doneButton;
+    };
+
     const device = createDefaultBluetoothDevice(
         id,
         /*publicName=*/ 'BeatsX',
         /*connectionState=*/
         DeviceConnectionState.kConnected,
         /*opt_nickname=*/ 'device1');
 
-    bluetoothDeviceChangeNameDialog.device = {...device};
+    bluetoothDeviceChangeNameDialog.set('device', {...device});
     bluetoothConfig.appendToPairedDeviceList([device]);
-    await flushAsync();
+    await flushTasks();
 
-    const input = bluetoothDeviceChangeNameDialog.shadowRoot.querySelector(
-        '#changeNameInput');
+    const input = bluetoothDeviceChangeNameDialog.shadowRoot!
+                      .querySelector<CrInputElement>('#changeNameInput');
     assertTrue(!!input);
     assertEquals('device1', input.value);
     assertTrue(getDoneBtn().disabled);
 
     input.value = nickname;
-    await flushAsync();
+    await flushTasks();
     assertFalse(getDoneBtn().disabled);
 
     getDoneBtn().click();
-    await flushAsync();
+    await flushTasks();
 
     const newName = getDeviceName(bluetoothConfig.getPairedDeviceById(id));
 
-    assertEquals(newName, nickname);
+    assertEquals(nickname, newName);
   });
 });
diff --git a/chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js b/chrome/test/data/webui/settings/chromeos/os_settings_browsertest.js
@@ -603,7 +603,7 @@ TEST_F('OSSettingsCrostiniExtraContainerPageTest', 'AllJsTests', () => {
  ['OsBluetoothPage', 'os_bluetooth_page/os_bluetooth_page_tests.js'],
  [
    'OsBluetoothPageOsBluetoothChangeDeviceNameDialog',
-   'os_bluetooth_page/os_bluetooth_change_device_name_dialog_tests.js',
+   'os_bluetooth_page/os_bluetooth_change_device_name_dialog_test.js',
  ],
  [
    'OsBluetoothPageOsBluetoothDeviceDetailSubpage',