add tests for '2-way bind selected' and '1-way bind value'

Author: janosh

tests/unit/Test2WayBind.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import MultiSelect, { type Option } from '$lib'
+  import { createEventDispatcher } from 'svelte'
+
+  export let selected: Option[] = []
+  export let options: Option[] = [1, 2, 3]
+  export let value: Option | Option[] | null = null
+  export let maxSelect: number | null = null
+
+  const dispatch = createEventDispatcher()
+
+  $: dispatch(`options-changed`, options)
+  $: dispatch(`selected-changed`, selected)
+  $: dispatch(`value-changed`, value)
+</script>
+
+<MultiSelect bind:options bind:selected bind:value {maxSelect} />

tests/unit/multiselect.test.ts

@@ -1,5 +1,6 @@
-import MultiSelect, { type MultiSelectEvents } from '$lib'
+import MultiSelect, { type MultiSelectEvents, type Option } from '$lib'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
+import Test2WayBind from './Test2WayBind.svelte'
 
 beforeEach(() => {
   document.body.innerHTML = ``
@@ -536,4 +537,56 @@ describe(`MultiSelect`, () => {
       expect(input.value).toBe(expected)
     }
   )
+
+  test(`2-way bind selected`, async () => {
+    let selected: Option[]
+    const binder = new Test2WayBind({
+      target: document.body,
+    })
+    binder.$on(`selected-changed`, (e: CustomEvent) => {
+      selected = e.detail
+    })
+
+    // test internal changes bind outwards
+    for (const _ of [1, 2]) {
+      const li = doc_query(`ul.options li`)
+      li.dispatchEvent(new MouseEvent(`mouseup`))
+      await sleep()
+    }
+
+    expect(selected).toEqual([1, 2])
+
+    // test external changes bind inwards
+    selected = [3]
+    binder.$set({ selected })
+    await sleep()
+    expect(doc_query(`ul.selected`).textContent?.trim()).toBe(`3`)
+  })
+
+  test.each([
+    [null, [1, 2]],
+    [1, 2],
+    [2, [1, 2]],
+  ])(
+    `1-way bind value when maxSelect=%s, expected value=%s`,
+    async (maxSelect, expected) => {
+      const binder = new Test2WayBind({
+        target: document.body,
+        props: { maxSelect },
+      })
+      let value: Option[]
+      binder.$on(`value-changed`, (e: CustomEvent) => {
+        value = e.detail
+      })
+
+      // test internal changes bind outwards
+      for (const _ of [1, 2]) {
+        const li = doc_query(`ul.options li`)
+        li.dispatchEvent(new MouseEvent(`mouseup`))
+        await sleep()
+      }
+
+      expect(value).toEqual(expected)
+    }
+  )
 })