Adding on change event in editable dropdowns when value is changes through code. (#14952)

* Adding onChange events in editable dropdowns for values changed through code.

* moved event generation from angular wrapper to core component

* Moving event firing to value setter

* converting back updateSelection to private method

* Removing extra check

* Fixing broken tests by mocking used stuff

* Fixing onTextChange event

* Adding some tests

* Adding necessary tests

* small test name edit

* Fix an assert message

src/sql/base/test/parts/editableDropdown/browser/dropdown.test.ts

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as assert from 'assert';
+import { Dropdown, IDropdownOptions } from 'sql/base/parts/editableDropdown/browser/dropdown';
+
+const options: IDropdownOptions = {
+	values: [
+		'foo1',
+		'foo2',
+		'foobar3',
+		'foobar4'
+	]
+};
+
+suite('Editable dropdown tests', () => {
+	let container: HTMLElement;
+	setup(() => {
+		container = document.createElement('div');
+		container.style.position = 'absolute';
+		container.style.width = `${200}px`;
+		container.style.height = `${200}px`;
+	});
+
+	test('default value for editable dropdown is empty', () => {
+		const dropdown = new Dropdown(container, undefined, options);
+		assert(dropdown.value === '');
+	});
+
+	test('changing value through code fires onValueChange event', () => {
+		const dropdown = new Dropdown(container, undefined, options);
+		let count = 0;
+		dropdown.onValueChange((e) => {
+			count++;
+		});
+		dropdown.value = options.values[0];
+
+		assert(count === 1, 'onValueChange event was not fired');
+		dropdown.value = options.values[0];
+		assert(count === 1, 'onValueChange event should not be fired for setting the same value again');
+		dropdown.value = options.values[1];
+		assert(count === 2, 'onValueChange event was not fired for setting a new value of the dropdown');
+	});
+
+	test('changing value through input text fires onValue Change event', () => {
+		const dropdown = new Dropdown(container, undefined, options);
+		let count = 0;
+		dropdown.onValueChange((e) => {
+			count++;
+		});
+
+		dropdown.fireOnTextChange = true;
+		dropdown.setDropdownVisibility(true);
+		dropdown.input.value = options.values[0];
+		assert(count === 1, 'onValueChange event was not fired for an option from the dropdown list');
+		dropdown.input.value = 'foo';
+		assert(count === 2, 'onValueChange event was not fired for a value not in dropdown list');
+		assert(dropdown.selectList.length === 4, 'list does not have all the values that are matching the input box text');
+		assert(dropdown.value = 'foo');
+		dropdown.input.value = 'foobar';
+		assert(count === 3, 'onValueChange event was not fired for a value not in dropdown list');
+		assert(dropdown.selectList.length === 2, 'list does not have all the values that are matching the input box text');
+		assert(dropdown.value = 'foobar');
+
+		dropdown.fireOnTextChange = false;
+		dropdown.input.value = options.values[0];
+		assert(count === 3, 'onValueChange event was fired with input box value change even after setting the fireOnTextChange to false');
+	});
+});