Add the ValueTypeDropdown value to the state

+ Added valueRelation enum type into the store
+ Added actions, mutations, setters and getters for valueTypeRelation
+ Modifed existing unit tests for mutations and actions by adding valueTypeRelation to the test

Bug: T267736

Author: bereket-WMDE

src/components/QueryBuilder.vue

@@ -16,7 +16,7 @@
 					:error="fieldErrors.property"
 				/>
 				<ValueTypeDropDown
-					@input="onInput"
+					v-model="selectedPropertyValueRelation"
 				/>
 				<TextInput
 					class="querybuilder__rule__value"
@@ -51,6 +51,7 @@ import ValueTypeDropDown from '@/components/ValueTypeDropDown.vue';
 import QueryResult from '@/components/QueryResult.vue';
 import SearchResult from '@/data-access/SearchResult';
 import Property from '@/data-model/Property';
+import PropertyValueRelation from '@/data-model/PropertyValueRelation';
 import Error from '@/data-model/Error';
 import buildQuery from '@/sparql/buildQuery';
 import Validator from '@/form/Validator';
@@ -65,17 +66,14 @@ export default Vue.extend( {
 				property: null as null | Error,
 				value: null as null | Error,
 			},
-			selectedOption: '',
 		};
 	},
 	methods: {
-		onInput( value: string ): void {
-			this.selectedOption = value;
-		},
 		validate(): void {
 			const formValues = {
 				property: this.selectedProperty,
 				value: this.textInputValue,
+				relation: this.selectedPropertyValueRelation,
 			};
 			const validator = new Validator( formValues );
 			const validationResult = validator.validate();
@@ -103,6 +101,14 @@ export default Vue.extend( {
 				this.$store.dispatch( 'updateProperty', selectedProperty );
 			},
 		},
+		selectedPropertyValueRelation: {
+			get(): PropertyValueRelation {
+				return this.$store.getters.propertyValueRelation;
+			},
+			set( selectedPropertyValueRelation: string ): void {
+				this.$store.dispatch( 'updatePropertyValueRelation', selectedPropertyValueRelation );
+			},
+		},
 		textInputValue: {
 			get(): string { return this.$store.getters.value; },
 			set( value: string ): void { this.$store.dispatch( 'updateValue', value ); },

src/components/ValueTypeDropDown.vue

@@ -1,30 +1,29 @@
 <template>
-	<select class="querybuilder__dropdown">
+	<select
+		class="querybuilder__dropdown"
+		v-model="selected"
+	>
 		<option
 			class="querybuilder__dropdown-option"
 			v-for="(optionItem, index) in optionItems"
-			:value="optionItem.value"
+			:value="optionItem"
 			:key="index"
-			@click="$emit( 'input', optionItem.value )"
 		>
-			{{ optionItem.value }}
+			{{ optionItem }}
 		</option>
 	</select>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import PropertyValueRelation from '@/data-model/PropertyValueRelation';
 
 export default Vue.extend( {
 	name: 'ValueTypeDropDown',
 	data() {
 		return {
-			selected: null,
-			optionItems: [
-				{ value: 'matching' },
-				{ value: 'regardless of value' },
-				{ value: 'without' },
-			],
+			selected: '',
+			optionItems: PropertyValueRelation,
 		};
 	},
 	props: {
@@ -33,6 +32,14 @@ export default Vue.extend( {
 			default: null,
 		},
 	},
+	watch: {
+		selected(): void {
+			this.$emit( 'input', this.selected );
+		},
+		value( selectedOption: PropertyValueRelation ): void {
+			this.selected = selectedOption;
+		},
+	},
 } );
 </script>
 <style scoped lang="scss">

src/store/RootState.ts

@@ -14,7 +14,7 @@ export interface ConditionRow {
 	valueData: {
 		value: string;
 	};
-	propertyValueRelation: {
+	propertyValueRelationData: {
 		value: PropertyValueRelation;
 	};
 }

src/store/actions.ts

@@ -18,6 +18,9 @@ export default ( searchEntityRepository: SearchEntityRepository ) => ( {
 	updateProperty( context: ActionContext<RootState, RootState>, property: Property ): void {
 		context.commit( 'setProperty', property );
 	},
+	updatePropertyValueRelation( context: ActionContext<RootState, RootState>, propertyValueRelation: string ): void {
+		context.commit( 'setPropertyValueRelation', propertyValueRelation );
+	},
 	setErrors( context: ActionContext<RootState, RootState>, errors: Error[] ): void {
 		context.commit( 'setErrors', errors );
 	},

src/store/getters.ts

@@ -10,7 +10,7 @@ export default {
 			condition: {
 				propertyId: rootState.conditionRow.propertyData.id,
 				value: rootState.conditionRow.valueData.value,
-				propertyValueRelation: rootState.conditionRow.propertyValueRelation.value,
+				propertyValueRelation: rootState.conditionRow.propertyValueRelationData.value,
 			},
 		};
 	},
@@ -24,7 +24,7 @@ export default {
 		return rootState.conditionRow.valueData.value;
 	},
 	propertyValueRelation( rootState: RootState ): PropertyValueRelation {
-		return rootState.conditionRow.propertyValueRelation.value;
+		return rootState.conditionRow.propertyValueRelationData.value;
 	},
 	getErrors( rootState: RootState ): Error[] {
 		return rootState.errors;

src/store/index.ts

@@ -22,7 +22,7 @@ export function createStore( services: QueryBuilderServices ): Store<RootState>
 				valueData: {
 					value: '',
 				},
-				propertyValueRelation: {
+				propertyValueRelationData: {
 					value: PropertyValueRelation.Matching,
 				},
 			},

src/store/mutations.ts

@@ -1,5 +1,6 @@
 import RootState from './RootState';
 import Property from '@/data-model/Property';
+import PropertyValueRelation from '@/data-model/PropertyValueRelation';
 import Error from '@/data-model/Error';
 
 export default {
@@ -9,6 +10,9 @@ export default {
 	setProperty( state: RootState, property: Property ): void {
 		state.conditionRow.propertyData = property;
 	},
+	setPropertyValueRelation( state: RootState, propertyValueRelation: PropertyValueRelation ): void {
+		state.conditionRow.propertyValueRelationData.value = propertyValueRelation;
+	},
 	setErrors( state: RootState, errors: Error[] ): void {
 		state.errors = errors;
 	},

tests/unit/components/ValueTypeDropDown.spec.ts

@@ -1,25 +1,20 @@
 import Vue from 'vue';
 import ValueTypeDropDown from '@/components/ValueTypeDropDown.vue';
+import PropertyValueRelation from '@/data-model/PropertyValueRelation';
 import { shallowMount } from '@vue/test-utils';
 
 describe( 'ValueTypeDropDown.vue', () => {
 	it( 'emits an `input` event containing the selected option item upon selection', async () => {
-		const optionItems = [
-			{ value: 'matching' },
-			{ value: 'regardless of value' },
-		];
+		const optionItems = PropertyValueRelation;
+		const wrapper = shallowMount( ValueTypeDropDown );
 
-		const wrapper = shallowMount( ValueTypeDropDown, { propsData: {
-			value: null,
-		} } );
-
-		wrapper.setData( { optionItems } );
+		wrapper.setData( {
+			selected: optionItems.Matching,
+			optionItems: optionItems,
+		} );
 
 		await Vue.nextTick();
 
-		const selectedItem = 1;
-		wrapper.findAll( '.querybuilder__dropdown-option' ).at( selectedItem ).element.click();
-
-		expect( wrapper.emitted( 'input' )![ 0 ] ).toEqual( [ optionItems[ selectedItem ].value ] );
+		expect( wrapper.emitted( 'input' )![ 0 ][ 0 ] ).toEqual( optionItems.Matching );
 	} );
 } );

tests/unit/store/getters.spec.ts

@@ -10,7 +10,7 @@ describe( 'getters', () => {
 				conditionRow: {
 					valueData: { value: 'foo' },
 					propertyData: { id: 'P123', label: 'abc' },
-					propertyValueRelation: { value: PropertyValueRelation.Matching },
+					propertyValueRelationData: { value: PropertyValueRelation.Matching },
 				},
 				errors: [],
 			};

tests/unit/store/mutations.spec.ts

@@ -10,7 +10,7 @@ describe( 'mutations', () => {
 			conditionRow: {
 				valueData: { value: 'foo' },
 				propertyData: { id: 'P123', label: 'abc' },
-				propertyValueRelation: { value: PropertyValueRelation.Matching },
+				propertyValueRelationData: { value: PropertyValueRelation.Matching },
 			},
 			errors: [],
 		};
@@ -26,7 +26,7 @@ describe( 'mutations', () => {
 			conditionRow: {
 				valueData: { value: 'foo' },
 				propertyData: { id: 'P123', label: 'abc' },
-				propertyValueRelation: { value: PropertyValueRelation.Matching },
+				propertyValueRelationData: { value: PropertyValueRelation.Matching },
 			},
 			errors: [],
 		};