Commit 06708f13 authored by Gavin Williams's avatar Gavin Williams Committed by Chromium LUCI CQ

scanning: Set selected option when dropdown options change

This changes fixes a bug where the wrong option in the dropdown is
selected when the selected scanner is changed. This happens when the new
scanner has different available options than the previously selected
scanner.

Bug: 1166808
Change-Id: I2f81f39358ad6c104e1dc360d429cc14cbe94055
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2633087Reviewed-by: default avatarJesse Schettler <jschettler@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844279}
parent 32d446c0
...@@ -9,7 +9,7 @@ import {getColorModeString} from 'chrome://scanning/scanning_app_util.js'; ...@@ -9,7 +9,7 @@ import {getColorModeString} from 'chrome://scanning/scanning_app_util.js';
import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js'; import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
import {assertOrderedAlphabetically} from './scanning_app_test_utils.js'; import {assertOrderedAlphabetically, changeSelect} from './scanning_app_test_utils.js';
const ColorMode = { const ColorMode = {
BLACK_AND_WHITE: chromeos.scanning.mojom.ColorMode.kBlackAndWhite, BLACK_AND_WHITE: chromeos.scanning.mojom.ColorMode.kBlackAndWhite,
...@@ -81,4 +81,31 @@ export function colorModeSelectTest() { ...@@ -81,4 +81,31 @@ export function colorModeSelectTest() {
ColorMode.BLACK_AND_WHITE.toString(), ColorMode.BLACK_AND_WHITE.toString(),
colorModeSelect.selectedColorMode); colorModeSelect.selectedColorMode);
}); });
// Verify the correct default option is selected when a scanner is selected
// and the options change.
test('selectDefaultWhenOptionsChange', () => {
const select =
/** @type {!HTMLSelectElement} */ (colorModeSelect.$$('select'));
colorModeSelect.colorModes =
[ColorMode.GRAYSCALE, ColorMode.BLACK_AND_WHITE, ColorMode.COLOR];
flush();
return changeSelect(select, /* value */ null, /* selectedIndex */ 0)
.then(() => {
assertEquals(
ColorMode.BLACK_AND_WHITE.toString(),
colorModeSelect.selectedColorMode);
assertEquals(
ColorMode.BLACK_AND_WHITE.toString(),
select.options[select.selectedIndex].value);
colorModeSelect.colorModes = [ColorMode.GRAYSCALE, ColorMode.COLOR];
flush();
assertEquals(
ColorMode.COLOR.toString(), colorModeSelect.selectedColorMode);
assertEquals(
ColorMode.COLOR.toString(),
select.options[select.selectedIndex].value);
});
});
} }
...@@ -89,4 +89,28 @@ export function pageSizeSelectTest() { ...@@ -89,4 +89,28 @@ export function pageSizeSelectTest() {
// default when Letter is not an available option. // default when Letter is not an available option.
assertEquals(PageSize.A4.toString(), pageSizeSelect.selectedPageSize); assertEquals(PageSize.A4.toString(), pageSizeSelect.selectedPageSize);
}); });
// Verify the correct default option is selected when a scanner is selected
// and the options change.
test('selectDefaultWhenOptionsChange', () => {
const select =
/** @type {!HTMLSelectElement} */ (pageSizeSelect.$$('select'));
pageSizeSelect.pageSizes = [PageSize.Letter, PageSize.Max, PageSize.A4];
flush();
return changeSelect(select, /* value */ null, /* selectedIndex */ 0)
.then(() => {
assertEquals(PageSize.A4.toString(), pageSizeSelect.selectedPageSize);
assertEquals(
PageSize.A4.toString(),
select.options[select.selectedIndex].value);
pageSizeSelect.pageSizes = [PageSize.Letter, PageSize.Max];
flush();
assertEquals(
PageSize.Letter.toString(), pageSizeSelect.selectedPageSize);
assertEquals(
PageSize.Letter.toString(),
select.options[select.selectedIndex].value);
});
});
} }
...@@ -81,4 +81,23 @@ export function resolutionSelectTest() { ...@@ -81,4 +81,23 @@ export function resolutionSelectTest() {
// default when 300 is not an available option. // default when 300 is not an available option.
assertEquals('1200', resolutionSelect.selectedResolution); assertEquals('1200', resolutionSelect.selectedResolution);
}); });
// Verify the correct default option is selected when a scanner is selected
// and the options change.
test('selectDefaultWhenOptionsChange', () => {
const select =
/** @type {!HTMLSelectElement} */ (resolutionSelect.$$('select'));
resolutionSelect.resolutions = [600, 300, 150];
flush();
return changeSelect(select, /* value */ null, /* selectedIndex */ 0)
.then(() => {
assertEquals('600', resolutionSelect.selectedResolution);
assertEquals('600', select.options[select.selectedIndex].value);
resolutionSelect.resolutions = [300, 150];
flush();
assertEquals('300', resolutionSelect.selectedResolution);
assertEquals('300', select.options[select.selectedIndex].value);
});
});
} }
...@@ -64,10 +64,12 @@ function strToMojoString16(str) { ...@@ -64,10 +64,12 @@ function strToMojoString16(str) {
export function changeSelect(select, value, selectedIndex) { export function changeSelect(select, value, selectedIndex) {
if (value) { if (value) {
select.value = value; select.value = value;
} } else if (selectedIndex !== null) {
if (selectedIndex) {
select.selectedIndex = selectedIndex; select.selectedIndex = selectedIndex;
} else {
return Promise.reject();
} }
select.dispatchEvent(new CustomEvent('change')); select.dispatchEvent(new CustomEvent('change'));
return flushTasks(); return flushTasks();
} }
...@@ -53,21 +53,19 @@ Polymer({ ...@@ -53,21 +53,19 @@ Polymer({
}, },
/** /**
* Use the default option if it exists. If not, use the first color mode in * Get the index of the default option if it exists. If not, use the index of
* the color modes array. * the first color mode in the color modes array.
* @return {string} * @return {number}
* @private * @private
*/ */
getDefaultSelectedColorMode_() { getDefaultSelectedColorModeIndex_() {
assert(this.colorModes.length > 0); assert(this.colorModes.length > 0);
const defaultColorModeIndex = this.colorModes.findIndex((colorMode) => { const defaultColorModeIndex = this.colorModes.findIndex((colorMode) => {
return this.isDefaultColorMode_(colorMode); return this.isDefaultColorMode_(colorMode);
}); });
return defaultColorModeIndex === -1 ? return defaultColorModeIndex === -1 ? 0 : defaultColorModeIndex;
this.colorModes[0].toString() :
this.colorModes[defaultColorModeIndex].toString();
}, },
/** /**
...@@ -83,7 +81,10 @@ Polymer({ ...@@ -83,7 +81,10 @@ Polymer({
} }
if (this.colorModes.length > 0) { if (this.colorModes.length > 0) {
this.selectedColorMode = this.getDefaultSelectedColorMode_(); const selectedColorModeIndex = this.getDefaultSelectedColorModeIndex_();
this.selectedColorMode =
this.colorModes[selectedColorModeIndex].toString();
this.$.colorModeSelect.selectedIndex = selectedColorModeIndex;
} }
}, },
......
...@@ -52,20 +52,17 @@ Polymer({ ...@@ -52,20 +52,17 @@ Polymer({
}, },
/** /**
* Letter should be the default option if it exists. If not, use the first * Get the index of the default option if it exists. If not, use the index of
* page size in the page sizes array. * the first page size in the page sizes array.
* @return {string} * @return {number}
* @private * @private
*/ */
getDefaultSelectedPageSize_() { getDefaultSelectedPageSizeIndex_() {
let defaultPageSizeIndex = this.pageSizes.findIndex((pageSize) => { let defaultPageSizeIndex = this.pageSizes.findIndex((pageSize) => {
return this.isDefaultPageSize_(pageSize); return this.isDefaultPageSize_(pageSize);
}); });
if (defaultPageSizeIndex === -1) {
defaultPageSizeIndex = 0;
}
return this.pageSizes[defaultPageSizeIndex].toString(); return defaultPageSizeIndex === -1 ? 0 : defaultPageSizeIndex;
}, },
/** /**
...@@ -90,7 +87,9 @@ Polymer({ ...@@ -90,7 +87,9 @@ Polymer({
} }
if (this.pageSizes.length > 0) { if (this.pageSizes.length > 0) {
this.selectedPageSize = this.getDefaultSelectedPageSize_(); const selectedPageSizeIndex = this.getDefaultSelectedPageSizeIndex_();
this.selectedPageSize = this.pageSizes[selectedPageSizeIndex].toString();
this.$.pageSizeSelect.selectedIndex = selectedPageSizeIndex;
} }
}, },
......
...@@ -53,19 +53,17 @@ Polymer({ ...@@ -53,19 +53,17 @@ Polymer({
}, },
/** /**
* 300 dpi should be the default option if it exists. If not, use the first * Get the index of the default option if it exists. If not, use the index of
* resolution in the resolutions array. * the first resolution in the resolutions array.
* @return {string} * @return {number}
* @private * @private
*/ */
getDefaultSelectedResolution_() { getDefaultSelectedResolutionIndex_() {
const defaultResolutionIndex = this.resolutions.findIndex((resolution) => { const defaultResolutionIndex = this.resolutions.findIndex((resolution) => {
return this.isDefaultResolution_(resolution); return this.isDefaultResolution_(resolution);
}); });
return defaultResolutionIndex === -1 ? return defaultResolutionIndex === -1 ? 0 : defaultResolutionIndex;
this.resolutions[0].toString() :
this.resolutions[defaultResolutionIndex].toString();
}, },
/** /**
...@@ -82,7 +80,10 @@ Polymer({ ...@@ -82,7 +80,10 @@ Polymer({
} }
if (this.resolutions.length > 0) { if (this.resolutions.length > 0) {
this.selectedResolution = this.getDefaultSelectedResolution_(); const selectedResolutionIndex = this.getDefaultSelectedResolutionIndex_();
this.selectedResolution =
this.resolutions[selectedResolutionIndex].toString();
this.$.resolutionSelect.selectedIndex = selectedResolutionIndex;
} }
}, },
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment