diff --git a/web/src/components/common/FieldValuesPanel.spec.ts b/web/src/components/common/FieldValuesPanel.spec.ts index 724c87ac82..04f7b1532c 100644 --- a/web/src/components/common/FieldValuesPanel.spec.ts +++ b/web/src/components/common/FieldValuesPanel.spec.ts @@ -311,34 +311,47 @@ describe("FieldValuesPanel.vue", () => { expect((wrapper.vm as any).selectedValues).toEqual([]); }); - it("emits 'add-multiple-search-terms' with include when Include mode button clicked", async () => { - wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) }); - // Set filterMode to 'exclude' while selectedValues is empty so no premature emit - (wrapper.vm as any).filterMode = "exclude"; - await nextTick(); - (wrapper.vm as any).selectedValues = ["value-1", "value-2"]; - await nextTick(); - const includeBtn = wrapper.find( - '[data-test="field-values-panel-include-mode-btn"]' - ); - await includeBtn.trigger("click"); - const emitted = wrapper.emitted("add-multiple-search-terms"); - expect(emitted).toBeTruthy(); - expect(emitted![0]).toEqual(["status", ["value-1", "value-2"], "include"]); - }); + // Mode-switch emissions are debounced (300 ms) so fake timers are required + // to flush the debounce before asserting the emitted event. + describe("mode switch emits (debounced)", () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + afterEach(() => { + vi.useRealTimers(); + }); - it("emits 'add-multiple-search-terms' with exclude when Exclude mode button clicked", async () => { - wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) }); - // filterMode defaults to 'include'; set selectedValues then click exclude - (wrapper.vm as any).selectedValues = ["value-1"]; - await nextTick(); - const excludeBtn = wrapper.find( - '[data-test="field-values-panel-exclude-mode-btn"]' - ); - await excludeBtn.trigger("click"); - const emitted = wrapper.emitted("add-multiple-search-terms"); - expect(emitted).toBeTruthy(); - expect(emitted![0]).toEqual(["status", ["value-1"], "exclude"]); + it("emits 'add-multiple-search-terms' with include when Include mode button clicked", async () => { + wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) }); + // Set filterMode to 'exclude' while selectedValues is empty so no premature emit + (wrapper.vm as any).filterMode = "exclude"; + await nextTick(); + (wrapper.vm as any).selectedValues = ["value-1", "value-2"]; + await nextTick(); + const includeBtn = wrapper.find( + '[data-test="field-values-panel-include-mode-btn"]' + ); + await includeBtn.trigger("click"); + vi.runAllTimers(); + const emitted = wrapper.emitted("add-multiple-search-terms"); + expect(emitted).toBeTruthy(); + expect(emitted![0]).toEqual(["status", ["value-1", "value-2"], "include"]); + }); + + it("emits 'add-multiple-search-terms' with exclude when Exclude mode button clicked", async () => { + wrapper = createWrapper({ showMultiSelect: true, fieldValues: buildFieldValues(3) }); + // filterMode defaults to 'include'; set selectedValues then click exclude + (wrapper.vm as any).selectedValues = ["value-1"]; + await nextTick(); + const excludeBtn = wrapper.find( + '[data-test="field-values-panel-exclude-mode-btn"]' + ); + await excludeBtn.trigger("click"); + vi.runAllTimers(); + const emitted = wrapper.emitted("add-multiple-search-terms"); + expect(emitted).toBeTruthy(); + expect(emitted![0]).toEqual(["status", ["value-1"], "exclude"]); + }); }); it("does NOT clear selectedValues after applying multi-select include", async () => { diff --git a/web/src/components/common/FieldValuesPanel.vue b/web/src/components/common/FieldValuesPanel.vue index 6e38ff0c8c..717417b06a 100644 --- a/web/src/components/common/FieldValuesPanel.vue +++ b/web/src/components/common/FieldValuesPanel.vue @@ -207,7 +207,7 @@ along with this program. If not, see .