Add tests for declarative table component (#8499)

src/sql/workbench/test/electron-browser/api/extHostModelView.test.ts

@@ -9,7 +9,7 @@ import * as azdata from 'azdata';
 import { ExtHostModelView } from 'sql/workbench/api/common/extHostModelView';
 import { MainThreadModelViewShape } from 'sql/workbench/api/common/sqlExtHost.protocol';
 import { IMainContext } from 'vs/workbench/api/common/extHost.protocol';
-import { IComponentShape, IItemConfig, ComponentEventType, IComponentEventArgs, ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
+import { IComponentShape, IItemConfig, ComponentEventType, IComponentEventArgs, ModelComponentTypes, DeclarativeDataType } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { TitledFormItemLayout } from 'sql/workbench/browser/modelComponents/formContainer.component';
 import { assign } from 'vs/base/common/objects';
 
@@ -28,9 +28,10 @@ suite('ExtHostModelView Validation Tests', () => {
 	let validText = 'valid';
 	let widgetId = 'widget_id';
 	let handle = 1;
-	// let viewInitialized: Deferred<void>;
+	let mainContext: IMainContext;
 
-	setup(done => {
+	// Common setup for all extHostModelView tests
+	setup(() => {
 		// Set up the MainThreadModelViewShape proxy
 		mockProxy = Mock.ofInstance(<MainThreadModelViewShape>{
 			$registerProvider: (id: string) => undefined,
@@ -44,15 +45,19 @@ suite('ExtHostModelView Validation Tests', () => {
 			dispose: () => undefined,
 			$validate: (handle: number, componentId: string) => undefined
 		}, MockBehavior.Loose);
-		let mainContext = <IMainContext>{
+		mainContext = <IMainContext>{
 			getProxy: proxyType => mockProxy.object
 		};
 		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());
 
-		// Register a model view of an input box and drop down box inside a form container inside a flex container
 		extHostModelView = new ExtHostModelView(mainContext, undefined);
+	});
+
+	// Set of general tests using a couple of common components
+	suite('Basic', () => {
+		setup(done => {
 			extHostModelView.$registerProvider(widgetId, async view => {
 				modelView = view;
 				inputBox = view.modelBuilder.inputBox()
@@ -220,12 +225,10 @@ suite('ExtHostModelView Validation Tests', () => {
 		});
 
 		test('Inserting and removing components from a container should work correctly', () => {
-		// Set up the mock proxy to save the component that gets initialized so that it can be verified
 			mockProxy.setup(x => x.$initializeModel(It.isAny(), It.isAny()));
 			mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
 			mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
 			mockProxy.setup(x => x.$removeFromContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
-
 			// Set up the form with a top level component and a group
 			let listBox = modelView.modelBuilder.listBox().component();
 			let inputBox = modelView.modelBuilder.inputBox().component();
@@ -376,3 +379,110 @@ suite('ExtHostModelView Validation Tests', () => {
 			assert.equal(itemConfigs[1].toIItemConfig().componentShape.type, ModelComponentTypes.ListBox, `Unexpected ModelComponentType. Expected ListBox but got ${ModelComponentTypes[itemConfigs[1].toIItemConfig().componentShape.type]}`);
 		});
 	});
+
+	suite('Declarative table', () => {
+		setup(done => {
+			mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), undefined)).returns(() => Promise.resolve());
+			mockProxy.setup(x => x.$addToContainer(It.isAny(), It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+			mockProxy.setup(x => x.$removeFromContainer(It.isAny(), It.isAny(), It.isAny())).returns(() => Promise.resolve());
+
+			extHostModelView = new ExtHostModelView(mainContext, undefined);
+			extHostModelView.$registerProvider(widgetId, async view => {
+				modelView = view;
+				done();
+			}, undefined);
+
+			extHostModelView.$registerWidget(handle, widgetId, undefined, undefined);
+		});
+
+		test('initialized with no data has correct properties', async () => {
+			const declarativeTable = createDeclarativeTable(modelView, DeclarativeDataType.string, undefined);
+
+			await modelView.initializeModel(declarativeTable);
+
+			mockProxy.verify(x => x.$initializeModel(It.isAny(), It.is(rootComponent => {
+				return rootComponent.id === declarativeTable.id &&
+					rootComponent.properties &&
+					rootComponent.properties.data &&
+					rootComponent.properties.data.length === 0;
+			})), Times.once());
+		});
+
+		test('initialized with string data has correct properties', async () => {
+			const testData = 'myData';
+			const declarativeTable = createDeclarativeTable(modelView, DeclarativeDataType.component, [testData]);
+
+			await modelView.initializeModel(declarativeTable);
+
+			mockProxy.verify(x => x.$initializeModel(It.isAny(), It.is(rootComponent => {
+				return rootComponent.id === declarativeTable.id &&
+					rootComponent.properties &&
+					rootComponent.properties.data &&
+					rootComponent.properties.data[0][0] === testData;
+			})), Times.once());
+		});
+
+		test('initialized with component data converts to id', async () => {
+			const button = modelView.modelBuilder.button().component();
+			const declarativeTable = createDeclarativeTable(modelView, DeclarativeDataType.component, [button]);
+
+			await modelView.initializeModel(declarativeTable);
+
+			// Components are expected to be converted into their ID before being sent across the proxy
+			mockProxy.verify(x => x.$initializeModel(It.isAny(), It.is(rootComponent => {
+				return rootComponent.id === declarativeTable.id &&
+					rootComponent.properties &&
+					rootComponent.properties.data &&
+					rootComponent.properties.data[0][0] === button.id;
+			})), Times.once());
+		});
+
+		test('when added to container with component data converts to id', async () => {
+			const button = modelView.modelBuilder.button().component();
+
+			const declarativeTable = createDeclarativeTable(modelView, DeclarativeDataType.component, [button]);
+
+			const container = modelView.modelBuilder.divContainer().component();
+			container.addItem(declarativeTable);
+
+			await modelView.initializeModel(declarativeTable);
+
+			// Components are expected to be converted into their ID before being sent across the proxy
+			mockProxy.verify(x => x.$initializeModel(It.isAny(), It.is(rootComponent => {
+				return rootComponent.id === declarativeTable.id &&
+					rootComponent.properties &&
+					rootComponent.properties.data &&
+					rootComponent.properties.data[0][0] === button.id;
+			})), Times.once());
+			mockProxy.verify(x => x.$addToContainer(It.isAny(), It.isAny(), It.is(item => {
+				return item.componentShape.id === declarativeTable.id &&
+					item.componentShape.properties &&
+					item.componentShape.properties.data &&
+					item.componentShape.properties.data[0][0] === button.id;
+			}), undefined), Times.once());
+		});
+	});
+});
+
+/**
+ * Helper function that creates a simple declarative table. Supports just a single column
+ * of data.
+ * @param modelView The ModelView used to create the component
+ * @param data The rows of data
+ */
+function createDeclarativeTable(modelView: azdata.ModelView, dataType: DeclarativeDataType, data?: any[]): azdata.DeclarativeTableComponent {
+	return modelView.modelBuilder.declarativeTable()
+		.withProperties(
+			{
+				columns: [
+					{
+						displayName: 'TestColumn',
+						valueType: dataType,
+						isReadOnly: true,
+						width: 25
+					}
+				],
+				data: data ? [data] : []
+			}
+		).component();
+}