scanning: Add test select change event function

Create a function for simulating changing a select element in tests.

Bug: 1059779
Change-Id: Ia67242113682c12860a2b59bbf370ad0ebbcc21c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2522120
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#824974}

chrome/test/data/webui/chromeos/scanning/file_type_select_test.js

@@ -8,6 +8,8 @@ import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 
+import {changeSelect} from './scanning_app_test_utils.js';
+
 const FileType = {
   JPG: chromeos.scanning.mojom.FileType.kJpg,
   PDF: chromeos.scanning.mojom.FileType.kPdf,
@@ -33,7 +35,8 @@ export function fileTypeSelectTest() {
   test('initializeFileTypeSelect', () => {
     // The dropdown should be initialized as enabled with three options. The
     // default option should be PNG.
-    const select = fileTypeSelect.$$('select');
+    const select =
+        /** @type {!HTMLSelectElement} */ (fileTypeSelect.$$('select'));
     assertTrue(!!select);
     assertFalse(select.disabled);
     assertEquals(3, select.length);
@@ -43,10 +46,11 @@ export function fileTypeSelectTest() {
     assertEquals(FileType.PNG.toString(), select.value);
 
     // Selecting a different option should update the selected value.
-    select.value = FileType.JPG.toString();
-    select.dispatchEvent(new CustomEvent('change'));
-    flush();
-
-    assertEquals(FileType.JPG.toString(), fileTypeSelect.selectedFileType);
+    return changeSelect(
+               select, FileType.JPG.toString(), /* selectedIndex */ null)
+        .then(() => {
+          assertEquals(
+              FileType.JPG.toString(), fileTypeSelect.selectedFileType);
+        });
   });
 }

chrome/test/data/webui/chromeos/scanning/page_size_select_test.js

@@ -9,6 +9,8 @@ import {getPageSizeString} from 'chrome://scanning/scanning_app_util.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 
+import {changeSelect} from './scanning_app_test_utils.js';
+
 const PageSize = {
   A4: chromeos.scanning.mojom.PageSize.kIsoA4,
   Letter: chromeos.scanning.mojom.PageSize.kNaLetter,
@@ -33,7 +35,8 @@ export function pageSizeSelectTest() {
 
   test('initializePageSizeSelect', () => {
     // Before options are added, the dropdown should be disabled and empty.
-    const select = pageSizeSelect.$$('select');
+    const select =
+        /** @type {!HTMLSelectElement} */ (pageSizeSelect.$$('select'));
     assertTrue(!!select);
     assertTrue(select.disabled);
     assertEquals(0, select.length);
@@ -55,11 +58,12 @@ export function pageSizeSelectTest() {
     assertEquals(firstPageSize.toString(), select.value);
 
     // Selecting a different option should update the selected value.
-    select.value = secondPageSize.toString();
-    select.dispatchEvent(new CustomEvent('change'));
-    flush();
-
-    assertEquals(secondPageSize.toString(), pageSizeSelect.selectedPageSize);
+    return changeSelect(
+               select, secondPageSize.toString(), /* selectedIndex */ null)
+        .then(() => {
+          assertEquals(
+              secondPageSize.toString(), pageSizeSelect.selectedPageSize);
+        });
   });
 
   test('pageSizeSelectDisabled', () => {

chrome/test/data/webui/chromeos/scanning/resolution_select_test.js

@@ -8,6 +8,8 @@ import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 
+import {changeSelect} from './scanning_app_test_utils.js';
+
 export function resolutionSelectTest() {
   /** @type {?ResolutionSelectElement} */
   let resolutionSelect = null;
@@ -26,7 +28,8 @@ export function resolutionSelectTest() {
 
   test('initializeResolutionSelect', () => {
     // Before options are added, the dropdown should be disabled and empty.
-    const select = resolutionSelect.$$('select');
+    const select =
+        /** @type {!HTMLSelectElement} */ (resolutionSelect.$$('select'));
     assertTrue(!!select);
     assertTrue(select.disabled);
     assertEquals(0, select.length);
@@ -49,13 +52,13 @@ export function resolutionSelectTest() {
     assertEquals(firstResolution.toString(), select.value);
 
     // Selecting a different option should update the selected value.
-    select.value = secondResolution;
-    select.dispatchEvent(new CustomEvent('change'));
-    flush();
-
+    return changeSelect(
+               select, secondResolution.toString(), /* selectedIndex */ null)
+        .then(() => {
           assertEquals(
               secondResolution.toString(), resolutionSelect.selectedResolution);
         });
+  });
 
   test('resolutionSelectDisabled', () => {
     const select = resolutionSelect.$$('select');

chrome/test/data/webui/chromeos/scanning/scan_to_select_test.js

@@ -7,8 +7,8 @@ import 'chrome://scanning/scan_to_select.js';
 import {ScanningBrowserProxyImpl} from 'chrome://scanning/scanning_browser_proxy.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
 
+import {changeSelect} from './scanning_app_test_utils.js';
 import {TestScanningBrowserProxy} from './test_scanning_browser_proxy.js';
 
 export function scanToSelectTest() {
@@ -58,10 +58,9 @@ export function scanToSelectTest() {
     // Simulate clicking the 'Select folder' option.
     scanningBrowserProxy.setSelectedPath(
         {baseName: myDownloads, filePath: myDownloadsPath});
-    const select = scanToSelect.$$('select');
-    select.selectedIndex = 1;
-    select.dispatchEvent(new CustomEvent('change'));
-    return flushTasks()
+    const select =
+        /** @type {!HTMLSelectElement} */ (scanToSelect.$$('select'));
+    return changeSelect(select, /* value */ null, /* selectedIndex */ 1)
         .then(() => {
           assertEquals(myDownloadsPath, scanToSelect.selectedFilePath);
           assertEquals(
@@ -71,9 +70,7 @@ export function scanToSelectTest() {
 
           scanningBrowserProxy.setSelectedPath(
               {baseName: googleDrive, filePath: googleDrivePath});
-          select.selectedIndex = 1;
-          select.dispatchEvent(new CustomEvent('change'));
-          return flushTasks();
+          return changeSelect(select, /* value */ null, /* selectedIndex */ 1);
         })
         .then(() => {
           assertEquals(googleDrivePath, scanToSelect.selectedFilePath);
@@ -93,10 +90,9 @@ export function scanToSelectTest() {
     // Simulate clicking the 'Select folder' option.
     scanningBrowserProxy.setSelectedPath(
         {baseName: myDownloads, filePath: myDownloadsPath});
-    const select = scanToSelect.$$('select');
-    select.selectedIndex = 1;
-    select.dispatchEvent(new CustomEvent('change'));
-    return flushTasks()
+    const select =
+        /** @type {!HTMLSelectElement} */ (scanToSelect.$$('select'));
+    return changeSelect(select, /* value */ null, /* selectedIndex */ 1)
         .then(() => {
           assertEquals(myDownloadsPath, scanToSelect.selectedFilePath);
           assertEquals(
@@ -106,9 +102,7 @@ export function scanToSelectTest() {
 
           // Simulate canceling the select dialog
           scanningBrowserProxy.setSelectedPath({baseName: '', filePath: ''});
-          select.selectedIndex = 1;
-          select.dispatchEvent(new CustomEvent('change'));
-          return flushTasks();
+          return changeSelect(select, /* value */ null, /* selectedIndex */ 1);
         })
         .then(() => {
           assertEquals(myDownloadsPath, scanToSelect.selectedFilePath);

chrome/test/data/webui/chromeos/scanning/scanning_app_test.js

@@ -12,7 +12,7 @@ import {tokenToString} from 'chrome://scanning/scanning_app_util.js';
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';
 
-import {createScanner, createScannerSource} from './scanning_app_test_utils.js';
+import {changeSelect, createScanner, createScannerSource} from './scanning_app_test_utils.js';
 
 const ColorMode = {
   BLACK_AND_WHITE: chromeos.scanning.mojom.ColorMode.kBlackAndWhite,
@@ -248,8 +248,34 @@ export function scanningAppTest() {
     capabilities.set(firstScannerId, firstCapabilities);
     capabilities.set(secondScannerId, secondCapabilities);
 
+    /** @type {!HTMLSelectElement} */
+    let scannerSelect;
+    /** @type {!HTMLSelectElement} */
+    let sourceSelect;
+    /** @type {!HTMLSelectElement} */
+    let fileTypeSelect;
+    /** @type {!HTMLSelectElement} */
+    let colorModeSelect;
+    /** @type {!HTMLSelectElement} */
+    let pageSizeSelect;
+    /** @type {!HTMLSelectElement} */
+    let resolutionSelect;
+    /** @type {!CrButtonElement} */
+    let scanButton;
+    /** @type {!Element} */
+    let statusText;
+
     return initializeScanningApp(expectedScanners, capabilities)
         .then(() => {
+          scannerSelect = scanningApp.$$('#scannerSelect').$$('select');
+          sourceSelect = scanningApp.$$('#sourceSelect').$$('select');
+          fileTypeSelect = scanningApp.$$('#fileTypeSelect').$$('select');
+          colorModeSelect = scanningApp.$$('#colorModeSelect').$$('select');
+          pageSizeSelect = scanningApp.$$('#pageSizeSelect').$$('select');
+          resolutionSelect = scanningApp.$$('#resolutionSelect').$$('select');
+          scanButton =
+              /** @type {!CrButtonElement} */ (scanningApp.$$('#scanButton'));
+          statusText = /** @type {!Element} */ (scanningApp.$$('#statusText'));
           return fakeScanService_.whenCalled('getScannerCapabilities');
         })
         .then(() => {
@@ -270,29 +296,15 @@ export function scanningAppTest() {
 
           // Before the scan button is clicked, the settings and scan button
           // should be enabled, and there should be no scan status.
-          const scannerSelect = scanningApp.$$('#scannerSelect').$$('select');
           assertFalse(scannerSelect.disabled);
-          const sourceSelect = scanningApp.$$('#sourceSelect').$$('select');
           assertFalse(sourceSelect.disabled);
-          const fileTypeSelect = scanningApp.$$('#fileTypeSelect').$$('select');
           assertFalse(fileTypeSelect.disabled);
-          const colorModeSelect =
-              scanningApp.$$('#colorModeSelect').$$('select');
           assertFalse(colorModeSelect.disabled);
-          const pageSizeSelect = scanningApp.$$('#pageSizeSelect').$$('select');
           assertFalse(pageSizeSelect.disabled);
-          const resolutionSelect =
-              scanningApp.$$('#resolutionSelect').$$('select');
           assertFalse(resolutionSelect.disabled);
-          const scanButton = scanningApp.$$('#scanButton');
           assertFalse(scanButton.disabled);
-          const statusText = scanningApp.$$('#statusText');
           assertEquals('', statusText.textContent.trim());
 
-          // PNG is currently the only supported file type.
-          fileTypeSelect.value = FileType.PNG.toString();
-          fileTypeSelect.dispatchEvent(new CustomEvent('change'));
-          flush();
           scanButton.click();
 
           // After the scan button is clicked, the settings and scan button
@@ -312,17 +324,16 @@ export function scanningAppTest() {
           // After scanning is complete, the settings and scan button should be
           // enabled, and the scan status should indicate that scanning is
           // complete.
-          assertFalse(scanningApp.$$('#scannerSelect').$$('select').disabled);
-          assertFalse(scanningApp.$$('#sourceSelect').$$('select').disabled);
-          assertFalse(scanningApp.$$('#fileTypeSelect').$$('select').disabled);
-          assertFalse(scanningApp.$$('#colorModeSelect').$$('select').disabled);
-          assertFalse(scanningApp.$$('#pageSizeSelect').$$('select').disabled);
-          assertFalse(
-              scanningApp.$$('#resolutionSelect').$$('select').disabled);
-          assertFalse(scanningApp.$$('#scanButton').disabled);
+          assertFalse(scannerSelect.disabled);
+          assertFalse(sourceSelect.disabled);
+          assertFalse(fileTypeSelect.disabled);
+          assertFalse(colorModeSelect.disabled);
+          assertFalse(pageSizeSelect.disabled);
+          assertFalse(resolutionSelect.disabled);
+          assertFalse(scanButton.disabled);
           assertEquals(
               'Scan complete! File(s) saved to /home/chronos/user/MyFiles.',
-              scanningApp.$$('#statusText').textContent.trim());
+              statusText.textContent.trim());
         });
   });
 

chrome/test/data/webui/chromeos/scanning/scanning_app_test_utils.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {flushTasks} from '../../test_util.m.js';
+
 /**
  * @param {!mojoBase.mojom.UnguessableToken} id
  * @param {string} displayName
@@ -27,7 +29,7 @@ export function createScannerSource(type, name, pageSizes) {
  * @param {string} str
  * @return {!mojoBase.mojom.String16}
  */
-export function strToMojoString16(str) {
+function strToMojoString16(str) {
   let arr = [];
   for (var i = 0; i < str.length; i++) {
     arr[i] = str.charCodeAt(i);
@@ -35,3 +37,20 @@ export function strToMojoString16(str) {
 
   return {data: arr};
 }
+
+/**
+ * @param {!HTMLSelectElement} select
+ * @param {?string} value
+ * @param {?number} selectedIndex
+ * @return {!Promise}
+ */
+export function changeSelect(select, value, selectedIndex) {
+  if (value) {
+    select.value = value;
+  }
+  if (selectedIndex) {
+    select.selectedIndex = selectedIndex;
+  }
+  select.dispatchEvent(new CustomEvent('change'));
+  return flushTasks();
+}