Scanning: Add customSort to select behavior

 - Provides "customSort" function to scanning select elements that use
   the select behavior. "customSort" should cover all custom sorting needs by
   allowing callers to provide their own comparison function and an
   optional conversion function that can be used to sort on any field.

Bug: 1059779
Test: browser_tests --gtest_filter=ScanningAppBrowserTest.All
Change-Id: I8bed8c9b2c70f066ac219fcd2c10f17063c9489d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2518237
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825084}

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

@@ -55,7 +55,7 @@ ScanningAppBrowserTest.prototype = {
 const debug_suites_list = [
   'ColorModeSelect', 'FileTypeSelect', 'PageSizeSelect', 'ResolutionSelect',
   'ScanApp', 'ScannerSelect', 'ScanPreviewSelect', 'ScanToSelect',
-  'SourceSelect'
+  'SelectBehavior', 'SourceSelect'
 ];
 
 TEST_F('ScanningAppBrowserTest', 'All', function() {

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

 // Copyright 2020 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {alphabeticalCompare} from 'chrome://scanning/scanning_app_util.js';
 import {flushTasks} from '../../test_util.m.js';
 
+/**
+ * @param {!Array} arr
+ * @param {!function(T): U} conversionFn
+ * @template T
+ * @template U
+ */
+export function assertOrderedAlphabetically(arr, conversionFn = (val) => val) {
+  for (let i = 0; i < arr.length - 1; i++) {
+    // |alphabeticalCompare| will return -1 if the first argument is less than
+    // the second and 0 if the two arguments are equal.
+    assert(
+        alphabeticalCompare(conversionFn(arr[i]), conversionFn(arr[i + 1])) <=
+        0);
+  }
+}
+
 /**
  * @param {!mojoBase.mojom.UnguessableToken} id
  * @param {string} displayName

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

@@ -18,6 +18,7 @@ import {scanPreviewTest} from './scan_preview_test.js';
 import {scanToSelectTest} from './scan_to_select_test.js';
 import {scannerSelectTest} from './scanner_select_test.js';
 import {scanningAppTest} from './scanning_app_test.js';
+import {selectBehaviorTest} from './select_behavior_test.js';
 import {sourceSelectTest} from './source_select_test.js';
 
 window.test_suites_list = [];
@@ -35,4 +36,5 @@ runSuite('ScanApp', scanningAppTest);
 runSuite('ScannerSelect', scannerSelectTest);
 runSuite('ScanPreviewSelect', scanPreviewTest);
 runSuite('ScanToSelect', scanToSelectTest);
+runSuite('SelectBehavior', selectBehaviorTest);
 runSuite('SourceSelect', sourceSelectTest);

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {flush, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {alphabeticalCompare} from 'chrome://scanning/scanning_app_util.js';
+import {SelectBehavior} from 'chrome://scanning/select_behavior.js';
+
+import * as utils from './scanning_app_test_utils.js';
+
+export function selectBehaviorTest() {
+  /** @type {?TestSelectElement} */
+  let testSelect = null;
+
+  suiteSetup(function() {
+    Polymer({
+      is: 'test-select',
+
+      _template: html`
+      <select></select>
+    `,
+
+      behaviors: [SelectBehavior],
+
+    });
+  });
+
+  setup(() => {
+    testSelect = document.createElement('test-select');
+    document.body.innerHTML = '';
+    document.body.appendChild(testSelect);
+  });
+
+  teardown(() => {
+    if (testSelect) {
+      testSelect.remove();
+    }
+    testSelect = null;
+  });
+
+  test('SortWithConversionFunctionProvided', () => {
+    testSelect.arr = [{value: 'C'}, {value: 'A'}, {value: 'B'}];
+    const conversionFn = (item) => item.value;
+    flush();
+    testSelect.customSort(testSelect.arr, alphabeticalCompare, conversionFn);
+    flush();
+    utils.assertOrderedAlphabetically(testSelect.arr, conversionFn);
+  });
+
+  test('SortWithNoConversionFunction', () => {
+    testSelect.arr = ['C', 'D', 'F', 'B', 'A'];
+    flush();
+    testSelect.customSort(testSelect.arr, alphabeticalCompare);
+    flush();
+    utils.assertOrderedAlphabetically(testSelect.arr);
+  });
+
+  test('SortWithDuplicateValues', () => {
+    testSelect.arr = ['C', 'C', 'B', 'B', 'A'];
+    flush();
+    testSelect.customSort(testSelect.arr, alphabeticalCompare);
+    flush();
+    utils.assertOrderedAlphabetically(testSelect.arr);
+  });
+}

chromeos/components/scanning/resources/scanning_app_util.js

@@ -139,3 +139,14 @@ export function pageSizeFromString(pageSizeString) {
 export function tokenToString(token) {
   return `${token.high.toString()}#${token.low.toString()}`;
 }
+
+/**
+ * A comparison function used for determining sort order based on the current
+ * locale's collation order.
+ * @param {string} first
+ * @param {string} second
+ * @return {number} The result of the comparison.
+ */
+export function alphabeticalCompare(first, second) {
+  return first.toLocaleLowerCase().localeCompare(second.toLocaleLowerCase());
+}

chromeos/components/scanning/resources/select_behavior.js

@@ -57,4 +57,14 @@ export const SelectBehavior = {
   computeDisabled_(numOptions, settingsDisabled) {
     return numOptions < REQUIRED_NUM_OPTIONS || settingsDisabled;
   },
+
+  /**
+   * @param {!Array} arr
+   * @param {!function(string, string): number} compareFn
+   * @param {!function(T): string} conversionFn
+   * @template T
+   */
+  customSort(arr, compareFn, conversionFn = (val) => val) {
+    return arr.sort((a, b) => compareFn(conversionFn(a), conversionFn(b)));
+  },
 };