audio-settings: set input volume from slider

- Add handler for input slider to update input gain volume.
- Refactor simulateSliderClick from output test into suite for
  reuse in input test.
- Test slider update triggers matching property update.

Bug: b:260277007
Test: browser_test --gtest_filter=*OSSettings*
Change-Id: Ifa71f987347611c8d10e123c182c3211aa7c3e24
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4082254
Reviewed-by: Michael Checo <michaelcheco@google.com>
Auto-Submit: Ashley Prasad <ashleydp@google.com>
Commit-Queue: Ashley Prasad <ashleydp@google.com>
Cr-Commit-Position: refs/heads/main@{#1084376}

chrome/browser/resources/settings/chromeos/device_page/audio.html

@@ -147,7 +147,8 @@ <h2 id="audioInputTitle">Input</h2>
                 on-click="onInputMuteClicked">
             </cr-icon-button>
             <cr-slider id ="audioInputGainVolumeSlider" min="0" max="100"
-                value="50">
+                value="[[audioSystemProperties_.inputVolumePercent]]"
+                on-cr-slider-value-changed="onInputVolumeSliderChanged">
             </cr-slider>
           </div>
         </div>

chrome/browser/resources/settings/chromeos/device_page/audio.ts

@@ -143,6 +143,22 @@ class SettingsAudioElement extends SettingsAudioElementBase {
     this.crosAudioConfig_.setActiveDevice(nextActiveDevice);
   }
 
+  /**
+   * Handles the event where the input volume slider is being changed.
+   */
+  protected onInputVolumeSliderChanged(): void {
+    // TODO(b/260277007): Remove condition when setInputVolumePercent added to
+    // mojo definition.
+    if (!this.crosAudioConfig_.setInputVolumePercent) {
+      return;
+    }
+
+    const sliderValue = this.shadowRoot!
+                            .querySelector<CrSliderElement>(
+                                '#audioInputGainVolumeSlider')!.value;
+    this.crosAudioConfig_.setInputVolumePercent(sliderValue);
+  }
+
   /**
    * Handles the event where the output volume slider is being changed.
    */

chrome/test/data/webui/settings/chromeos/device_page_tests.js

@@ -726,6 +726,26 @@ suite('SettingsDevicePage', function() {
       ],
     };
 
+    /**
+     * Simuates clicking at a given point on cr-slider element.
+     * @param {string} crSliderSelector
+     * @param {number} percent
+     * @return {Promise}
+     */
+    async function simulateSliderClicked(crSliderSelector, percent) {
+      /** @type {!CrSliderElement} */
+      const crSlider = audioPage.shadowRoot.querySelector(crSliderSelector);
+      assertTrue(isVisible(crSlider));
+      const rect = crSlider.$.container.getBoundingClientRect();
+      crSlider.dispatchEvent(new PointerEvent('pointerdown', {
+        buttons: 1,
+        pointerId: 1,
+        clientX: rect.left + ((percent / 100) * rect.width),
+      }));
+      return await flushTasks();
+    }
+
+
     setup(async function() {
       loadTimeData.overrideValues({
         enableAudioSettingsPage: true,
@@ -770,37 +790,27 @@ suite('SettingsDevicePage', function() {
     });
 
     test('simulate setting output volume slider mojo test', async function() {
-      async function simulateSliderClicked(value) {
-        const outputVolumeSlider =
-            audioPage.shadowRoot.querySelector('#outputVolumeSlider');
-        const rect = outputVolumeSlider.$.container.getBoundingClientRect();
-        outputVolumeSlider.dispatchEvent(new PointerEvent('pointerdown', {
-          buttons: 1,
-          pointerId: 1,
-          clientX: rect.left + (value * rect.width),
-        }));
-        return await flushTasks();
-      }
+      const sliderSelector = '#outputVolumeSlider';
 
       // Test clicking to min volume case.
       const minOutputVolumePercent = 0;
-      await simulateSliderClicked(minOutputVolumePercent / 100);
+      await simulateSliderClicked(sliderSelector, minOutputVolumePercent);
       assertEquals(
           minOutputVolumePercent,
           audioPage.audioSystemProperties_.outputVolumePercent,
       );
 
       // Test clicking to max volume case.
       const maxOutputVolumePercent = 100;
-      await simulateSliderClicked(maxOutputVolumePercent / 100);
+      await simulateSliderClicked(sliderSelector, maxOutputVolumePercent);
       assertEquals(
           maxOutputVolumePercent,
           audioPage.audioSystemProperties_.outputVolumePercent,
       );
 
       // Test clicking to non-boundary volume case.
       const nonBoundaryOutputVolumePercent = 50;
-      await simulateSliderClicked(50 / 100);
+      await simulateSliderClicked(sliderSelector, 50);
       assertEquals(
           nonBoundaryOutputVolumePercent,
           audioPage.audioSystemProperties_.outputVolumePercent,
@@ -972,6 +982,41 @@ suite('SettingsDevicePage', function() {
 
       assertTrue(audioPage.getIsInputMutedForTest());
     });
+
+    test('simulate setting input gain slider', async function() {
+      const sliderSelector = '#audioInputGainVolumeSlider';
+      const inputSlider = audioPage.shadowRoot.querySelector(sliderSelector);
+      assertTrue(isVisible(inputSlider));
+      assertEquals(
+          fakeCrosAudioConfig.defaultFakeAudioSystemProperties
+              .inputVolumePercent,
+          inputSlider.value);
+
+      const minimumValue = 0;
+      await simulateSliderClicked(sliderSelector, minimumValue);
+
+      assertEquals(minimumValue, inputSlider.value);
+      assertEquals(
+          fakeCrosAudioConfig.defaultFakeAudioSystemProperties
+              .inputVolumePercent,
+          inputSlider.value);
+      const maximumValue = 100;
+      await simulateSliderClicked(sliderSelector, maximumValue);
+
+      assertEquals(maximumValue, inputSlider.value);
+      assertEquals(
+          fakeCrosAudioConfig.defaultFakeAudioSystemProperties
+              .inputVolumePercent,
+          inputSlider.value);
+      const middleValue = 50;
+      await simulateSliderClicked(sliderSelector, middleValue);
+
+      assertEquals(middleValue, inputSlider.value);
+      assertEquals(
+          fakeCrosAudioConfig.defaultFakeAudioSystemProperties
+              .inputVolumePercent,
+          inputSlider.value);
+    });
   });
 
   suite(assert(TestNames.Pointers), function() {