Vue 1029 move update search state method to new src utils loan search utils js file

src/components/Lend/LoanSearch/LoanSearchFilter.vue

@@ -87,7 +87,7 @@ import {
 import KvAccordionItem from '@/components/Kv/KvAccordionItem';
 import { mdiClose, mdiArrowRight } from '@mdi/js';
 import LoanSearchGenderFilter from '@/components/Lend/LoanSearch/LoanSearchGenderFilter';
-import updateLoanSearchMutation from '@/graphql/mutation/updateLoanSearchState.graphql';
+import { updateSearchState } from '@/util/loanSearchUtils';
 import KvCheckbox from '~/@kiva/kv-components/vue/KvCheckbox';
 import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
 
@@ -124,7 +124,7 @@ export default {
 		},
 		async getAllCountries() {
 			// data pull only from production endpoint,
-			// not implmented with a component until design path
+			// not implemented with a component until design path
 			// with product is completed.
 			const countryFacets = await fetchCountryFacets(this.apollo);
 			this.allCountries = countryFacets.map(cf => cf.country.name);
@@ -144,30 +144,17 @@ export default {
 		// 	console.log('from updateQuery', updatedQueryFilters);
 		// 	console.log('new query ran, yes!');
 		// },
-		// TODO: Extract to plugin/util for use in each filter component
-		updateSearchState() {
-			return this.apollo.mutate({
-				mutation: updateLoanSearchMutation,
-				variables: {
-					searchParams: {
-						...this.loanQueryFilters
-					}
-				}
-			});
-		}
 	},
-	mounted() {
+	async mounted() {
 		this.getSectors();
 		this.getAllCountries();
 
 		// TODO: Remove this is just a quick hard-coded query to initialize loans
 		// Each Filter type will use the updateSearchState method to set this when filters are selected
 		this.loanQueryFilters = { countryIsoCode: ['US'], sectorId: [9] };
 		console.log('mounted query ran:', this.loanQueryFilters);
-		// this.updateSearchState();
-		this.updateSearchState().then(updateResponse => {
-			console.log(updateResponse);
-		});
+		const response = await updateSearchState(this.apollo, this.loanQueryFilters);
+		console.log('mounted query response:', response);
 	},
 	computed: {
 		// queryFilters() {

src/components/Lend/LoanSearch/LoanSearchInterface.vue

@@ -6,7 +6,15 @@
 					Filter & Sort
 				</kv-button>
 
-				<kv-lightbox :visible="isLightboxVisible" variant="lightbox" @lightbox-closed="closeLightbox">
+				<kv-lightbox
+					:visible="isLightboxVisible"
+					variant="lightbox"
+					title="Loan filter controls"
+					@lightbox-closed="closeLightbox"
+				>
+					<template #header>
+						{{ null }}
+					</template>
 					<loan-search-filter id="filter-menu" />
 				</kv-lightbox>
 			</div>
@@ -29,7 +37,7 @@
 					:key="loan.id"
 					:loan="loan"
 					loan-card-type="ListLoanCard"
-					rounded-corners="true"
+					:rounded-corners="true"
 				/>
 			</kv-grid>
 		</div>

src/util/KvAuth0.js

@@ -357,6 +357,7 @@ export const MockKvAuth0 = {
 	getKivaId: () => undefined,
 	getLastLogin: () => 0,
 	getMfaEnrollToken: () => Promise.resolve({}),
+	fakeAuthAllowed: () => false,
 	getFakeAuthCookieValue: () => undefined,
 	getFakeIdTokenPayload: () => undefined,
 	getSyncCookieValue: () => null,

src/util/loanSearchUtils.js

@@ -0,0 +1,21 @@
+// TODO: remove this disabled eslint rule once there's another function
+/* eslint-disable import/prefer-default-export */
+import updateLoanSearchMutation from '@/graphql/mutation/updateLoanSearchState.graphql';
+
+/**
+ * Updates the search state using the provided apollo client and filters
+ *
+ * @param {Object} apollo The apollo client instance
+ * @param {Object} loanQueryFilters The filters for the loan query
+ * @returns Returns Promise for the results of the mutation
+ */
+export async function updateSearchState(apollo, loanQueryFilters) {
+	return apollo.mutate({
+		mutation: updateLoanSearchMutation,
+		variables: {
+			searchParams: {
+				...loanQueryFilters
+			}
+		}
+	});
+}

test/unit/specs/util/loanSearchUtils.spec.js

@@ -0,0 +1,21 @@
+import { updateSearchState } from '@/util/loanSearchUtils';
+import updateLoanSearchMutation from '@/graphql/mutation/updateLoanSearchState.graphql';
+
+describe('loanSearchUtils.js', () => {
+	describe('updateSearchState', () => {
+		it('should call apollo with the provided filters and return results', async () => {
+			const mockResult = 1;
+			const apollo = { mutate: jest.fn(() => Promise.resolve(mockResult)) };
+			const filters = { countryIsoCode: ['US'], sectorId: [9] };
+			const params = {
+				mutation: updateLoanSearchMutation,
+				variables: { searchParams: filters }
+			};
+
+			const result = await updateSearchState(apollo, filters);
+
+			expect(apollo.mutate).toHaveBeenCalledWith(params);
+			expect(result).toBe(mockResult);
+		});
+	});
+});