diff --git a/client/src/components/ActivityBar/ActivitySettings.test.js b/client/src/components/ActivityBar/ActivitySettings.test.js index fc4bfe543383..e5555451ec85 100644 --- a/client/src/components/ActivityBar/ActivitySettings.test.js +++ b/client/src/components/ActivityBar/ActivitySettings.test.js @@ -29,10 +29,7 @@ function testActivity(id, newOptions = {}) { } async function testSearch(wrapper, query, result) { - const searchField = wrapper.find("input"); - searchField.element.value = query; - searchField.trigger("change"); - await wrapper.vm.$nextTick(); + await wrapper.setProps({ query }); const filtered = wrapper.findAll(activityItemSelector); expect(filtered.length).toBe(result); } @@ -48,6 +45,9 @@ describe("ActivitySettings", () => { wrapper = mount(mountTarget, { localVue, pinia, + props: { + query: "", + }, stubs: { icon: { template: "
" }, }, diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue index 16c596e531f4..835691d3c0b3 100644 --- a/client/src/components/ActivityBar/ActivitySettings.vue +++ b/client/src/components/ActivityBar/ActivitySettings.vue @@ -4,12 +4,10 @@ import { faSquare } from "@fortawesome/free-regular-svg-icons"; import { faCheckSquare, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { storeToRefs } from "pinia"; -import { computed, type ComputedRef, type Ref, ref } from "vue"; +import { computed, type ComputedRef } from "vue"; import { type Activity, useActivityStore } from "@/stores/activityStore"; -import DelayedInput from "@/components/Common/DelayedInput.vue"; - library.add({ faCheckSquare, faSquare, @@ -17,13 +15,16 @@ library.add({ faThumbtack, }); +const props = defineProps<{ + query: string; +}>(); + const activityStore = useActivityStore(); const { activities } = storeToRefs(activityStore); -const query: Ref = ref(""); const filteredActivities = computed(() => { - if (query.value.length > 0) { - const queryLower = query.value.toLowerCase(); + if (props.query?.length > 0) { + const queryLower = props.query.toLowerCase(); const results = activities.value.filter((a: Activity) => { const attributeValues = [a.title, a.description]; for (const value of attributeValues) { @@ -52,16 +53,11 @@ function onClick(activity: Activity) { function onRemove(activity: Activity) { activityStore.remove(activity.id); } - -function onQuery(newQuery: string) { - query.value = newQuery; -}