fix filterable mixin and FiltersInline component

assurance-maladie-digital · Jul 23, 2024 · a4ab342 · a4ab342
1 parent 2aea040
commit a4ab342
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 6 deletions.
diff --git a/packages/synapse-bridge/src/mixins/filterable/index.ts b/packages/synapse-bridge/src/mixins/filterable/index.ts
@@ -2,11 +2,11 @@
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
 
-import { FilterItem } from './types.ts'
+import type { FilterItem } from './types.ts'
 
 import { deepCopy } from '../../helpers/deepCopy'
 
-import { ChipItem } from '../../elements/ChipList/types'
+import type { ChipItem } from '../../elements/ChipList/types'
 
 import slugify from 'slugify'
 
@@ -148,6 +148,7 @@ export const Filterable = defineComponent({
 					: undefined
 
 				filter.value = newValue
+				this.updateValue();
 
 				return
 			}
@@ -160,17 +161,20 @@ export const Filterable = defineComponent({
 
 				if (isPeriodField) {
 					filter.value = undefined
+					this.updateValue();
 
 					return
 				}
 
 				delete typedValue[chipValue]
 				filter.value = typedValue
 			}
+			this.updateValue();
 		},
 
 		resetFilter(filter: FilterItem): void {
 			filter.value = undefined
+			this.updateValue();
 		},
 
 		resetAllFilters(): void {

diff --git a/packages/synapse-bridge/src/patterns/FiltersInline/FiltersInline.vue b/packages/synapse-bridge/src/patterns/FiltersInline/FiltersInline.vue
@@ -65,12 +65,13 @@ export default defineComponent({
 					@remove="removeChip(filter, $event)"
 					@reset="resetFilter(filter)"
 				/>
-
 				<slot
 					:attrs="{
 						modelValue: filter.value,
-						'onUpdate:modelValue': (value: ChipItem) =>
-							(filter['value'] = value),
+						'onUpdate:modelValue': (value: ChipItem) => {
+							filter.value = value
+							updateValue()
+						}
 					}"
 					:name="`${formatFilterName(filter.name)}`"
 				/>

diff --git a/packages/synapse-bridge/src/patterns/FiltersInline/tests/FiltersInline.spec.ts b/packages/synapse-bridge/src/patterns/FiltersInline/tests/FiltersInline.spec.ts
@@ -1,8 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import { vuetify } from '@tests/unit/setup'
 import FiltersInline from '../'
 import { locales } from '../locales'
+import { defineComponent } from 'vue'
+import { VTextField } from 'vuetify/lib/components/index.mjs'
 
 describe('FiltersInline', () => {
 	it('renders correctly', () => {
@@ -65,6 +67,73 @@ describe('FiltersInline', () => {
 
 		expect(wrapper).toMatchSnapshot()
 	})
+
+	it ('immediately emit an update:modelValue event when a filter is added', async () => {
+		const testComponent = defineComponent({
+			components: {
+				FiltersInline,
+				VTextField,
+			},
+			template: `
+				<div>
+					<FiltersInline v-model="filters">
+						<template #name="{ attrs }">
+							<VTextField
+								v-bind="attrs"
+								label="Nom"
+							/>
+						</template>
+						<template #profession="{ attrs }">
+							<VTextField
+								v-bind="attrs"
+								label="Profession"
+							/>
+						</template>
+					</FiltersInline>
+				</div>
+			`,
+
+			data() {
+				return {
+					filters: [
+						{
+							name: 'name',
+							label: 'Nom'
+						},
+						{
+							name: 'profession',
+							label: 'Profession'
+						}
+					],
+				}
+			},
+		})
+
+		const wrapper = mount(testComponent, {
+			global: {
+				plugins: [vuetify],
+			}
+		})
+
+		await wrapper.find('button').trigger('click')
+		const FilterInlineComponent = wrapper.findComponent(FiltersInline)
+		const TextInput = wrapper.findComponent(VTextField)
+
+		await TextInput.setValue('John Doe')
+
+		expect(FilterInlineComponent.emitted('update:modelValue')?.[0]).toEqual([
+			[
+				{
+					name: 'name',
+					label: 'Nom',
+					value: 'John Doe',
+				}, {
+					name: 'profession',
+					label: 'Profession',
+				}
+			],
+		])
+	});
 })
 
 describe('FiltersInline locales', () => {