feat(vue): add snapshot tests for rs-vue components

.eslintignore

@@ -11,3 +11,4 @@ vue-playground
 packages/vue
 .expo/
 packages/reactivecore/coverage/
+__snapshots__

packages/vue/.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/coverage
 
 # local env files
 .env.local

packages/vue/babel.config.js

@@ -0,0 +1 @@
+module.exports = { presets: ['@babel/preset-env', '@vue/babel-preset-jsx'] };

packages/vue/jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+	// preset: '@vue/cli-plugin-unit-jest',
+	// transform: {
+	// 	'^.+\\.(js|jsx)$': 'babel-jest',
+	// },
+	verbose: true,
+	collectCoverage: false,
+	testURL: 'http://localhost/',
+	testEnvironment: 'jest-environment-jsdom-fifteen',
+	// snapshotSerializers: ['./serialize.js'],
+	// snapshotSerializers: ['dfs'],
+	// snapshotSerializers: [
+	// 	'@emotion/jest/serializer' /* if needed other snapshotSerializers should go here */,
+	// ],
+	snapshotSerializers: ['jest-serializer-vue', '@emotion/jest/serializer'],
+	testMatch: ['**/*.test.[jt]s?(x)'],
+};

packages/vue/package.json

@@ -24,6 +24,7 @@
 		"start": "nps",
 		"pretest": "nps build",
 		"test": "nps test",
+		"clear-jest-cache": "jest --clearCache",
 		"precommit": "lint-staged",
 		"prepare": "npm start validate",
 		"version-upgrade": "nps upgrade-vue -c ../../package-scripts.js",
@@ -61,11 +62,16 @@
 		"@babel/plugin-syntax-jsx": "^7.2.0",
 		"@babel/preset-env": "^7.5.5",
 		"@babel/preset-stage-2": "^7.0.0",
+		"@emotion/jest": "^11.9.0",
 		"@vue/babel-preset-jsx": "^1.1.0",
+		"@vue/cli-plugin-unit-jest": "^4.5.15",
+		"@vue/test-utils": "^1.3.0",
+		"eslint": "^4.12.0",
 		"eslint-config-airbnb-base": "^13.1.0",
 		"eslint-config-prettier": "^3.1.0",
 		"eslint-plugin-vue": "^4.7.1",
-		"eslint": "^4.12.0",
+		"jest-serializer-vue": "^2.0.2",
+		"jest-vue-emotion": "^1.0.0",
 		"nps": "^5.9.3",
 		"nps-utils": "^1.7.0",
 		"rollup": "^1.20.3",

packages/vue/src/components/basic/ComponentWrapper.jsx

@@ -11,6 +11,7 @@ const {
 	setQueryListener,
 	setComponentProps,
 	updateComponentProps,
+	mockDataForTesting,
 } = Actions;
 
 const { pushToAndClause, checkPropChange, checkSomePropChange } = helper;
@@ -48,6 +49,13 @@ const ComponentWrapper = (
 		this.componentProps = parsedProps;
 		this.componentId = this.componentProps.componentId;
 		this.react = this.componentProps.react;
+
+		if (this.componentProps.mockData) {
+			this.mockDataForTesting(
+				this.componentProps.componentId,
+				this.componentProps.mockData,
+			);
+		}
 	},
 	beforeMount() {
 		let components = [];
@@ -93,7 +101,7 @@ const ComponentWrapper = (
 		}
 	},
 	mounted() {
-		if (this.internalComponent) {
+		if (this.internalComponent && this.componentProps.mode !== 'test') {
 			// Watch component after rendering the component to avoid the un-necessary calls
 			this.setReact(this.componentProps);
 		}
@@ -163,6 +171,7 @@ const mapDispatchToProps = {
 	watchComponent,
 	setComponentProps,
 	updateComponentProps,
+	mockDataForTesting,
 };
 export default (component, options = {}) =>
 	connect(mapStateToProps, mapDispatchToProps)(ComponentWrapper(component, options));

packages/vue/src/components/list/MultiDropdownList.jsx

@@ -80,6 +80,7 @@ const MultiDropdownList = {
 		nestedField: types.string,
 		index: VueTypes.string,
 		searchPlaceholder: VueTypes.string.def('Type here to search...'),
+		isOpen: VueTypes.bool.def(false),
 	},
 	created() {
 		if (!this.enableAppbase && this.$props.index) {
@@ -88,8 +89,8 @@ const MultiDropdownList = {
 			);
 		}
 		const props = this.$props;
-		this.modifiedOptions =
-			this.options && this.options[props.dataField]
+		this.modifiedOptions
+			= this.options && this.options[props.dataField]
 				? this.options[props.dataField].buckets
 				: [];
 		// Set custom and default queries in store
@@ -247,14 +248,15 @@ const MultiDropdownList = {
 					searchPlaceholder={this.$props.searchPlaceholder}
 					transformData={this.$props.transformData}
 					footer={
-						showLoadMore &&
-						!isLastBucket && (
+						showLoadMore
+						&& !isLastBucket && (
 							<div css={loadMoreContainer}>
 								<Button onClick={this.handleLoadMore}>{loadMoreLabel}</Button>
 							</div>
 						)
 					}
 					customLabelRenderer={renderLabelCalc}
+					open={this.$props.isOpen}
 				/>
 			</Container>
 		);
@@ -370,7 +372,6 @@ const MultiDropdownList = {
 				const customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
 				this.setQueryOptions(props.componentId, customQueryOptions, false);
 			}
-
 			this.updateQuery({
 				componentId: props.componentId,
 				query,
@@ -386,9 +387,9 @@ const MultiDropdownList = {
 			const queryOptions = getQueryOptions(props);
 			return props.showLoadMore
 				? getCompositeAggsQuery({
-						query: queryOptions,
-						props,
-						after,
+					query: queryOptions,
+					props,
+					after,
 				  })
 				: getAggsQuery(queryOptions, props);
 		},
@@ -531,9 +532,9 @@ MultiDropdownList.generateQueryOptions = (props, after) => {
 	const queryOptions = getQueryOptions(props);
 	return props.showLoadMore
 		? getCompositeAggsQuery({
-				query: queryOptions,
-				props,
-				after,
+			query: queryOptions,
+			props,
+			after,
 		  })
 		: getAggsQuery(queryOptions, props);
 };
@@ -547,9 +548,9 @@ const mapStateToProps = (state, props) => ({
 	rawData: state.rawData[props.componentId],
 	isLoading: state.isLoading[props.componentId],
 	selectedValue:
-		(state.selectedValues[props.componentId] &&
-			state.selectedValues[props.componentId].value) ||
-		null,
+		(state.selectedValues[props.componentId]
+			&& state.selectedValues[props.componentId].value)
+		|| null,
 	themePreset: state.config.themePreset,
 	error: state.error[props.componentId],
 	componentProps: state.props[props.componentId],
@@ -563,7 +564,7 @@ const mapDispatchtoProps = {
 	setDefaultQuery,
 };
 
-const ListConnected = ComponentWrapper(
+export const ListConnected = ComponentWrapper(
 	connect(mapStateToProps, mapDispatchtoProps)(MultiDropdownList),
 	{
 		componentType: componentTypes.multiDropdownList,