Add default model view input types and validation (#1397)

src/sqltest/parts/modelComponents/componentBase.test.ts

@@ -0,0 +1,132 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { Mock, It, Times, MockBehavior } from 'typemoq';
+import { ComponentBase, ContainerBase } from 'sql/parts/modelComponents/componentBase';
+import { IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { ModelStore } from 'sql/parts/modelComponents/modelStore';
+import { ChangeDetectorRef } from '@angular/core';
+
+'use strict';
+
+class TestComponent extends ComponentBase {
+	public descriptor: IComponentDescriptor;
+
+	constructor(public modelStore: IModelStore, id: string) {
+		super(undefined);
+		this.descriptor = modelStore.createComponentDescriptor('TestComponent', id);
+		this.baseInit();
+	}
+
+	ngOnInit() { }
+	setLayout() { }
+
+	public addValidation(validation: () => boolean | Thenable<boolean>) {
+		this._validations.push(validation);
+	}
+}
+
+class TestContainer extends ContainerBase<TestComponent> {
+	public descriptor: IComponentDescriptor;
+
+	constructor(public modelStore: IModelStore, id: string) {
+		super(undefined);
+		this.descriptor = modelStore.createComponentDescriptor('TestContainer', id);
+		this._changeRef = {
+			detectChanges: () => undefined
+		} as ChangeDetectorRef;
+		this.baseInit();
+	}
+
+	ngOnInit() { }
+	setLayout() { }
+
+	public addValidation(validation: () => boolean | Thenable<boolean>) {
+		this._validations.push(validation);
+	}
+}
+
+suite('ComponentBase Validation Tests', () => {
+	let testComponent: TestComponent;
+	let testContainer: TestContainer;
+	let modelStore: IModelStore;
+
+	setup(() => {
+		modelStore = new ModelStore();
+		testComponent = new TestComponent(modelStore, 'testComponent');
+		testContainer = new TestContainer(modelStore, 'testContainer');
+	});
+
+	test('Component validation runs external validations stored in the model store', done => {
+		assert.equal(testComponent.valid, true, 'Test component validity did not default to true');
+		let validationCalls = 0;
+		modelStore.registerValidationCallback(componentId => {
+			validationCalls += 1;
+			return Promise.resolve(false);
+		});
+
+		testComponent.validate().then(valid => {
+			try {
+				assert.equal(validationCalls, 1, 'External validation was not called once');
+				assert.equal(valid, false, 'Validate call did not return correct value from the external validation');
+				assert.equal(testComponent.valid, false, 'Validate call did not update the component valid property');
+				done();
+			} catch (err) {
+				done(err);
+			}
+		}, err => done(err));
+	});
+
+	test('Component validation runs default component validations', done => {
+		assert.equal(testComponent.valid, true, 'Test component validity did not default to true');
+		let validationCalls = 0;
+		testComponent.addValidation(() => {
+			validationCalls += 1;
+			return false;
+		});
+
+		testComponent.validate().then(valid => {
+			try {
+				assert.equal(validationCalls, 1, 'Default validation was not called once');
+				assert.equal(valid, false, 'Validate call did not return correct value from the default validation');
+				assert.equal(testComponent.valid, false, 'Validate call did not update the component valid property');
+				done();
+			} catch (err) {
+				done(err);
+			}
+		}, err => done(err));
+	});
+
+	test('Container validation reflects child component validity', done => {
+		assert.equal(testContainer.valid, true, 'Test container validity did not default to true');
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		testComponent.addValidation(() => false);
+		testComponent.validate().then(() => {
+			testContainer.validate().then(valid => {
+				assert.equal(valid, false, 'Validate call did not return correct value for container child validation');
+				assert.equal(testContainer.valid, false, 'Validate call did not update the container valid property');
+				done();
+			}, err => done(err));
+		}, err => done(err));
+	});
+
+	test('Container child validity changes cause the parent container validity to change', done => {
+		testContainer.registerEventHandler(event => {
+			try {
+				if (event.eventType === ComponentEventType.validityChanged) {
+					assert.equal(testContainer.valid, false, 'Test container validity did not change to false when child validity changed');
+					assert.equal(event.args, false, 'ValidityChanged event did not contain the updated container validity');
+					done();
+				}
+			} catch (err) {
+				done(err);
+			}
+		});
+		testComponent.addValidation(() => false);
+		testContainer.addToContainer(testComponent.descriptor, undefined);
+		testComponent.validate();
+	});
+});

src/sqltest/workbench/api/extHostModelView.test.ts

@@ -19,9 +19,6 @@ suite('ExtHostModelView Validation Tests', () => {
 	let mockProxy: Mock<MainThreadModelViewShape>;
 	let modelView: sqlops.ModelView;
 	let inputBox: sqlops.InputBoxComponent;
-	let dropDownBox: sqlops.DropDownComponent;
-	let formContainer: sqlops.FormContainer;
-	let flexContainer: sqlops.FlexContainer;
 	let validText = 'valid';
 	let widgetId = 'widget_id';
 	let handle = 1;
@@ -38,7 +35,6 @@ suite('ExtHostModelView Validation Tests', () => {
 			$setLayout: (handle: number, componentId: string, layout: any) => undefined,
 			$setProperties: (handle: number, componentId: string, properties: { [key: string]: any }) => undefined,
 			$registerEvent: (handle: number, componentId: string) => undefined,
-			$notifyValidation: (handle: number, componentId: string, valid: boolean) => undefined,
 			dispose: () => undefined
 		}, MockBehavior.Loose);
 		let mainContext = <IMainContext>{
@@ -47,7 +43,6 @@ suite('ExtHostModelView Validation Tests', () => {
 		mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny())).returns(() => Promise.resolve());
 		mockProxy.setup(x => x.$registerEvent(It.isAny(), It.isAny())).returns(() => Promise.resolve());
 		mockProxy.setup(x => x.$setProperties(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
-		mockProxy.setup(x => x.$notifyValidation(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
 
 		// Register a model view of an input box and drop down box inside a form container inside a flex container
 		extHostModelView = new ExtHostModelView(mainContext);
@@ -56,11 +51,11 @@ suite('ExtHostModelView Validation Tests', () => {
 			inputBox = view.modelBuilder.inputBox()
 				.withValidation(component => component.value === validText)
 				.component();
-			dropDownBox = view.modelBuilder.dropDown().component();
-			formContainer = view.modelBuilder.formContainer()
+			let dropDownBox = view.modelBuilder.dropDown().component();
+			let formContainer = view.modelBuilder.formContainer()
 				.withItems([inputBox, dropDownBox])
 				.component();
-			flexContainer = view.modelBuilder.flexContainer()
+			let flexContainer = view.modelBuilder.flexContainer()
 				.withItems([formContainer])
 				.component();
 			await view.initializeModel(flexContainer);
@@ -70,47 +65,57 @@ suite('ExtHostModelView Validation Tests', () => {
 		extHostModelView.$registerWidget(handle, widgetId, undefined, undefined);
 	});
 
-	test('The validity of a component and its containers gets set when it is initialized', done => {
-		try {
-			assert.equal(modelView.valid, false, 'modelView was not marked as invalid');
-			assert.equal(inputBox.valid, false, 'inputBox was not marked as invalid');
-			assert.equal(formContainer.valid, false, 'formContainer was not marked as invalid');
-			assert.equal(flexContainer.valid, false, 'flexContainer was not marked as invalid');
-			assert.equal(dropDownBox.valid, true, 'dropDownBox was marked as invalid');
-			done();
-		} catch (err) {
-			done(err);
-		}
+	test('The custom validation output of a component gets set when it is initialized', done => {
+		extHostModelView.$runCustomValidations(handle, inputBox.id).then(valid => {
+			try {
+				assert.equal(valid, false, 'Empty input box did not validate as false');
+				done();
+			} catch (err) {
+				done(err);
+			}
+		}, err => done(err));
 	});
 
-	test('Containers reflect validity changes of contained components', done => {
-		try {
-			inputBox.value = validText;
-			assert.equal(modelView.valid, true, 'modelView was not marked as valid');
-			assert.equal(inputBox.valid, true, 'inputBox was not marked as valid');
-			assert.equal(formContainer.valid, true, 'formContainer was not marked as valid');
-			assert.equal(flexContainer.valid, true, 'flexContainer was not marked as valid');
-			done();
-		} catch (err) {
-			done(err);
-		}
+	test('The custom validation output of a component changes if its value changes', done => {
+		inputBox.value = validText;
+		extHostModelView.$runCustomValidations(handle, inputBox.id).then(valid => {
+			try {
+				assert.equal(valid, true, 'Valid input box did not validate as valid');
+				done();
+			} catch (err) {
+				done(err);
+			}
+		}, err => done(err));
 	});
 
-	test('PropertiesChanged events cause validation', done => {
-		try {
-			extHostModelView.$handleEvent(handle, inputBox.id, {
-				args: {
-					'value': validText
-				},
-				eventType: ComponentEventType.PropertiesChanged
-			} as IComponentEventArgs);
-			assert.equal(modelView.valid, true, 'modelView was not marked as valid');
-			assert.equal(inputBox.valid, true, 'inputBox was not marked as valid');
-			assert.equal(formContainer.valid, true, 'formContainer was not marked as valid');
-			assert.equal(flexContainer.valid, true, 'flexContainer was not marked as valid');
-			done();
-		} catch (err) {
-			done(err);
-		}
+	test('The custom validation output of a component changes after a PropertiesChanged event', done => {
+		extHostModelView.$handleEvent(handle, inputBox.id, {
+			args: {
+				'value': validText
+			},
+			eventType: ComponentEventType.PropertiesChanged
+		} as IComponentEventArgs);
+		extHostModelView.$runCustomValidations(handle, inputBox.id).then(valid => {
+			try {
+				assert.equal(valid, true, 'Valid input box did not validate as valid after PropertiesChanged event');
+				done();
+			} catch (err) {
+				done(err);
+			}
+		}, err => done(err));
+	});
+
+	test('The validity of a component is set by main thread validationChanged events', () => {
+		assert.equal(inputBox.valid, true, 'Component validity is true by default');
+		extHostModelView.$handleEvent(handle, inputBox.id, {
+			eventType: ComponentEventType.validityChanged,
+			args: false
+		});
+		assert.equal(inputBox.valid, false, 'Input box did not update validity to false based on the validityChanged event');
+		extHostModelView.$handleEvent(handle, inputBox.id, {
+			eventType: ComponentEventType.validityChanged,
+			args: true
+		});
+		assert.equal(inputBox.valid, true, 'Input box did not update validity to true based on the validityChanged event');
 	});
 });