From 4f362ed59c9fbe978bc8cfa19df8a8e851365625 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Wed, 20 Sep 2023 14:46:28 -0700
Subject: [PATCH] Fix empty `event.detail.options` payload on `removeAll`
 (#266)

* set selected = [] AFTER dispatching removeAll/change event

* test for expected event.detail.option(s) payload on CustomEvent dispatch
---
 src/lib/MultiSelect.svelte     |  4 +--
 tests/unit/MultiSelect.test.ts | 49 ++++++++++++++++++++++------------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
index 6b6a09b..7e01568 100644
--- a/src/lib/MultiSelect.svelte
+++ b/src/lib/MultiSelect.svelte
@@ -348,10 +348,10 @@
   }
 
   function remove_all() {
-    selected = []
-    searchText = ``
     dispatch(`removeAll`, { options: selected })
     dispatch(`change`, { options: selected, type: `removeAll` })
+    selected = []
+    searchText = ``
   }
 
   $: is_selected = (label: string | number) => selected.map(get_label).includes(label)
diff --git a/tests/unit/MultiSelect.test.ts b/tests/unit/MultiSelect.test.ts
index a2202ae..cf20519 100644
--- a/tests/unit/MultiSelect.test.ts
+++ b/tests/unit/MultiSelect.test.ts
@@ -1051,26 +1051,41 @@ test(`first matching option becomes active automatically on entering searchText`
 })
 
 test.each([
-  [`add`, `ul.options li`, mouseup],
-  [`change`, `ul.options li`, mouseup],
-  [`remove`, `ul.selected button.remove`, mouseup],
-  [`change`, `ul.selected button.remove`, mouseup],
-  [`removeAll`, `button.remove-all`, mouseup],
-  [`change`, `button.remove-all`, mouseup],
-])(`bubbles <input> node DOM events`, async (event_name, selector, trigger) => {
-  const select = new MultiSelect({
-    target: document.body,
-    props: { options: [1, 2, 3], selected: [1, 2] },
-  })
+  [`add`, `ul.options li`],
+  [`change`, `ul.options li`],
+  [`remove`, `ul.selected button.remove`],
+  [`change`, `ul.selected button.remove`],
+  [`removeAll`, `button.remove-all`],
+  [`change`, `button.remove-all`],
+])(
+  `fires %s event with expected payload when clicking %s`,
+  async (event_name, selector, trigger = mouseup) => {
+    const select = new MultiSelect({
+      target: document.body,
+      props: { options: [1, 2, 3], selected: [1, 2] },
+    })
 
-  const spy = vi.fn()
-  select.$on(event_name as keyof MultiSelectEvents, spy)
+    const is_event = (name: string, event: CustomEvent) =>
+      name === event_name ||
+      (event_name === `change` && event.detail.type === name)
+
+    const spy = vi.fn((event) => {
+      if (is_event(`removeAll`, event)) {
+        expect(event.detail.options).toEqual([1, 2])
+      } else if (is_event(`remove`, event)) {
+        expect(event.detail.option).toEqual(1)
+      } else if (is_event(`add`, event)) {
+        expect(event.detail.option).toEqual(3)
+      }
+    })
+    select.$on(event_name as keyof MultiSelectEvents, spy)
 
-  doc_query(selector).dispatchEvent(trigger)
-  await tick()
+    doc_query(selector).dispatchEvent(trigger)
+    await tick()
 
-  expect(spy, `event type '${event_name}'`).toHaveBeenCalledTimes(1)
-})
+    expect(spy, `event type '${event_name}'`).toHaveBeenCalledTimes(1)
+  },
+)
 
 describe.each([
   [true, (opt: Option) => opt],