diff --git a/src/features/settings/components/Selection.vue b/src/features/settings/components/Selection.vue index 07c5fc4..864ca9a 100644 --- a/src/features/settings/components/Selection.vue +++ b/src/features/settings/components/Selection.vue @@ -54,10 +54,9 @@ const props = defineProps({ const store = useSettingsStore(); const optionType = computed(() => props.setting.allowMultiple ? 'checkbox' : 'radio'); -const selected = ref(normalizeSelectedValue(store.get(props.path) ?? props.setting.default)); - -watch(selected, (newValue) => { - store.set(props.path, newValue); +const selected = computed({ + get: () => normalizeSelectedValue(store.get(props.path) ?? props.setting.default), + set: (value) => store.set(props.path, value) }); const labelId = useId(); diff --git a/src/features/settings/components/__tests__/Selection.test.js b/src/features/settings/components/__tests__/Selection.test.js index d29c44b..73319f4 100644 --- a/src/features/settings/components/__tests__/Selection.test.js +++ b/src/features/settings/components/__tests__/Selection.test.js @@ -90,6 +90,32 @@ describe('Selection', () => { expect(inputsChecked).toStrictEqual([false, true, false]); }); + test('reacts on store change', async () => { + const wrapper = getWrapper({ + options: exampleOptions, + piniaOptions: { + setupStores: () => { + const store = useSettingsStore(); + store.set('selection', 'o1'); + } + } + }); + const settings = useSettingsStore(); + + { + const inputs = wrapper.findAll('input'); + const inputsChecked = getChecked(inputs); + expect(inputsChecked).toStrictEqual([false, true, false]); + } + { + settings.set('selection', 'o2'); + await nextTick(); + const inputs = wrapper.findAll('input'); + const inputsChecked = getChecked(inputs); + expect(inputsChecked).toStrictEqual([false, false, true]); + } + }); + test('shows multiple values from store', () => { const wrapper = getWrapper({ options: exampleOptions,