@statistikzh/leu 0.26.0 → 0.27.0

package/src/components/select/stories/select.stories.ts

@@ -33,6 +33,7 @@ function Template({
   clearable = false,
   filterable = false,
   multiple = false,
+  required = false,
   before,
   after,
 }) {
@@ -40,8 +41,10 @@ function Template({
     <div style="margin-top: 50vh"></div>
     <leu-select
       class="dropdown"
+      name="select"
       label=${ifDefined(label)}
       .value=${ifDefined(value)}
+      ?required=${required}
       ?clearable=${clearable}
       ?disabled=${disabled}
       ?filterable=${filterable}
@@ -104,6 +107,13 @@ Clearable.args = {
   clearable: true,
 }
 
+export const Required = Template.bind({})
+Required.args = {
+  label: "Gemeinde",
+  options: OPTIONS_EXAMPLES,
+  required: true,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
   label: "Gemeinde",

package/src/components/select/test/select.test.ts

@@ -3,30 +3,45 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { fixture, expect, elementUpdated } from "@open-wc/testing"
 import { sendKeys } from "@web/test-runner-commands"
 
+import type { LeuSelect } from "../Select.js"
 import "../leu-select.js"
 import "../../menu/leu-menu-item.js"
 import { MUNICIPALITIES } from "./fixtures.js"
 
-async function defaultFixture(args = {}) {
-  return fixture(
+async function defaultFixture(
+  args: {
+    options?: ReadonlyArray<string>
+    label?: string
+    value?: ReadonlyArray<string>
+    clearable?: boolean
+    disabled?: boolean
+    filterable?: boolean
+    multiple?: boolean
+  } = {},
+) {
+  const el = await fixture<LeuSelect>(
     html`<leu-select
       label=${ifDefined(args.label)}
-      .value=${args.value ?? []}
-      ?clearable=${args.clearable}
-      ?disabled=${args.disabled}
-      ?filterable=${args.filterable}
-      ?multiple=${args.multiple}
+      value=${ifDefined(args.value?.join(","))}
+      ?clearable=${args.clearable ?? false}
+      ?disabled=${args.disabled ?? false}
+      ?filterable=${args.filterable ?? false}
+      ?multiple=${args.multiple ?? false}
     >
-      ${args.options.map((o) => html`<leu-menu-item>${o}</leu-menu-item>`)}
+      ${(args.options ?? []).map(
+        (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+      )}
     </leu-select> `,
   )
+
+  return el
 }
 
 describe("LeuSelect", () => {
   it("is a defined element", async () => {
     const el = customElements.get("leu-select")
 
-    await expect(el).not.to.be.undefined
+    expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
@@ -42,9 +57,11 @@ describe("LeuSelect", () => {
     const el = await defaultFixture({
       options: MUNICIPALITIES,
       label: "Gemeinde",
-      open: true,
     })
 
+    el.click()
+    await elementUpdated(el)
+
     await expect(el).shadowDom.to.be.accessible()
   })
 
@@ -65,7 +82,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
 
     expect(toggleButton).to.have.trimmed.text("Gemeinde")
   })
@@ -86,7 +104,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const popup = el.shadowRoot.querySelector("leu-popup")
@@ -184,7 +203,8 @@ describe("LeuSelect", () => {
       filterable: true,
     })
 
-    const filterInput = el.shadowRoot.querySelector(".select-search")
+    const filterInput =
+      el.shadowRoot.querySelector<HTMLInputElement>(".select-search")
 
     expect(filterInput).to.exist
   })
@@ -196,10 +216,12 @@ describe("LeuSelect", () => {
       filterable: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
-    const filterInput = el.shadowRoot.querySelector(".select-search")
+    const filterInput =
+      el.shadowRoot.querySelector<HTMLInputElement>(".select-search")
     filterInput.focus()
 
     await sendKeys({ type: "am albis" })
@@ -218,16 +240,18 @@ describe("LeuSelect", () => {
       filterable: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
-    const filterInput = el.shadowRoot.querySelector(".select-search")
+    const filterInput =
+      el.shadowRoot.querySelector<HTMLInputElement>(".select-search")
     filterInput.focus()
 
     await sendKeys({ type: "am albis" })
 
     const clearFilterButton =
-      filterInput.shadowRoot.querySelector(".clear-button")
+      filterInput.shadowRoot.querySelector<HTMLButtonElement>(".clear-button")
     clearFilterButton.click()
     await elementUpdated(el)
 
@@ -246,10 +270,12 @@ describe("LeuSelect", () => {
       filterable: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
-    const filterInput = el.shadowRoot.querySelector(".select-search")
+    const filterInput =
+      el.shadowRoot.querySelector<HTMLInputElement>(".select-search")
     filterInput.focus()
 
     await sendKeys({ type: "am albissss" })
@@ -268,7 +294,8 @@ describe("LeuSelect", () => {
       filterable: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const emptyMessage = el.shadowRoot.querySelector(".filter-message-empty")
@@ -283,10 +310,12 @@ describe("LeuSelect", () => {
       filterable: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
-    const filterInput = el.shadowRoot.querySelector(".select-search")
+    const filterInput =
+      el.shadowRoot.querySelector<HTMLInputElement>(".select-search")
     filterInput.focus()
 
     await sendKeys({ type: "am albis" })
@@ -335,7 +364,8 @@ describe("LeuSelect", () => {
       multiple: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const applyButton = el.shadowRoot.querySelector(".apply-button")
@@ -351,7 +381,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
@@ -368,7 +399,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
       value: ["Maur"],
     })
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
@@ -386,7 +418,8 @@ describe("LeuSelect", () => {
       value: ["Maur"],
       clearable: true,
     })
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
@@ -404,7 +437,8 @@ describe("LeuSelect", () => {
       multiple: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
@@ -421,7 +455,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
@@ -440,7 +475,8 @@ describe("LeuSelect", () => {
       multiple: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
@@ -459,12 +495,14 @@ describe("LeuSelect", () => {
       filterable: true,
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     await elementUpdated(el)
 
-    const filterInput = el.shadowRoot.querySelector(".select-search")
+    const filterInput =
+      el.shadowRoot.querySelector<HTMLInputElement>(".select-search")
     expect(filterInput).to.equal(el.shadowRoot.activeElement)
   })
 
@@ -474,7 +512,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     await elementUpdated(el)
@@ -490,7 +529,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     await sendKeys({ press: "Escape" })
@@ -521,7 +561,8 @@ describe("LeuSelect", () => {
       label: "Gemeinde",
     })
 
-    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    const toggleButton =
+      el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
     toggleButton.click()
 
     document.body.click()
@@ -529,4 +570,368 @@ describe("LeuSelect", () => {
     const popup = el.shadowRoot.querySelector("leu-popup")
     expect(popup.active).to.not.be.true
   })
+
+  describe("Form association", () => {
+    it("submits the selected value in a form", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde">
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+      el.value = ["Maur"]
+      await elementUpdated(el)
+
+      const formData = new FormData(form)
+      expect(formData.get("city")).to.equal("Maur")
+    })
+
+    it("submits multiple selected values as separate form entries", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde" ?multiple=${true}>
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+      el.value = ["Maur", "Zollikon"]
+      await elementUpdated(el)
+
+      const formData = new FormData(form)
+      expect(formData.getAll("city")).to.deep.equal(["Maur", "Zollikon"])
+    })
+
+    it("submits null when no value is selected", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde">
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const formData = new FormData(form)
+      expect(formData.get("city")).to.be.null
+    })
+
+    it("uses the defaultValue as initial form value", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" value="Maur" label="Gemeinde">
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+      await elementUpdated(el)
+
+      expect(el.defaultValue).to.deep.equal(["Maur"])
+      expect(el.value).to.deep.equal(["Maur"])
+
+      const formData = new FormData(form)
+      expect(formData.get("city")).to.equal("Maur")
+    })
+
+    it("resets to the defaultValue when the form is reset", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" value="Maur" label="Gemeinde">
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+      el.value = ["Zollikon"]
+      await elementUpdated(el)
+
+      expect(el.value).to.deep.equal(["Zollikon"])
+
+      form.reset()
+      await elementUpdated(el)
+
+      expect(el.value).to.deep.equal(["Maur"])
+    })
+
+    it("resets to an empty value when no defaultValue is set", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde">
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+      el.value = ["Maur"]
+      await elementUpdated(el)
+
+      form.reset()
+      await elementUpdated(el)
+
+      expect(el.value).to.deep.equal([])
+    })
+
+    it("updates the form data when the defaultValue changes before any interaction", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" value="Maur" label="Gemeinde">
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+
+      let formData = new FormData(form)
+      expect(formData.get("city")).to.equal("Maur")
+
+      el.defaultValue = ["Zollikon"]
+      await elementUpdated(el)
+
+      formData = new FormData(form)
+      expect(formData.get("city")).to.equal("Zollikon")
+    })
+
+    it("does not override the value when defaultValue changes after interaction", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde">
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+      // Simulate user interaction
+      const toggleButton =
+        el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
+      toggleButton.click()
+      const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
+        (item) => item.textContent === "Maur",
+      )
+      menuItem.click()
+      await elementUpdated(el)
+
+      expect(el.value).to.deep.equal(["Maur"])
+
+      el.defaultValue = ["Zollikon"]
+      await elementUpdated(el)
+
+      // User interaction has occurred, defaultValue change should NOT override value
+      expect(el.value).to.deep.equal(["Maur"])
+    })
+
+    it("is disabled by the form when the fieldset is disabled", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <fieldset disabled>
+            <leu-select name="city" label="Gemeinde">
+              ${MUNICIPALITIES.map(
+                (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+              )}
+            </leu-select>
+          </fieldset>
+        </form>
+      `)
+
+      const el = form.querySelector("leu-select")
+      await elementUpdated(el)
+
+      expect(el.disabled).to.be.true
+    })
+  })
+
+  describe("Validity", () => {
+    it("is valid by default", async () => {
+      const el = await defaultFixture({
+        options: MUNICIPALITIES,
+        label: "Gemeinde",
+      })
+      expect(el.checkValidity()).to.be.true
+      expect(el.validity.valid).to.be.true
+    })
+
+    it("is always valid when not required", async () => {
+      const el = await defaultFixture({
+        options: MUNICIPALITIES,
+        label: "Gemeinde",
+      })
+      expect(el.checkValidity()).to.be.true
+
+      el.value = []
+      await elementUpdated(el)
+      expect(el.checkValidity()).to.be.true
+    })
+
+    it("is invalid when required and no value is selected", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde" ?required=${true}>
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector<LeuSelect>("leu-select")
+      await elementUpdated(el)
+
+      expect(el.checkValidity()).to.be.false
+      expect(el.validity.valueMissing).to.be.true
+    })
+
+    it("is valid when required and a value is selected", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde" ?required=${true}>
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector<LeuSelect>("leu-select")
+      el.value = ["Maur"]
+      await elementUpdated(el)
+
+      expect(el.checkValidity()).to.be.true
+      expect(el.validity.valid).to.be.true
+    })
+
+    it("becomes invalid when required is set after a value exists and is then cleared", async () => {
+      const el = await defaultFixture({
+        options: MUNICIPALITIES,
+        label: "Gemeinde",
+        value: ["Maur"],
+      })
+
+      el.required = true
+      await elementUpdated(el)
+      expect(el.checkValidity()).to.be.true
+
+      el.value = []
+      await elementUpdated(el)
+      expect(el.checkValidity()).to.be.false
+      expect(el.validity.valueMissing).to.be.true
+    })
+
+    it("becomes valid when a value is selected after being required and empty", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde" ?required=${true}>
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector<LeuSelect>("leu-select")
+      await elementUpdated(el)
+      expect(el.checkValidity()).to.be.false
+
+      const toggleButton =
+        el.shadowRoot.querySelector<HTMLButtonElement>(".select-toggle")
+      toggleButton.click()
+      const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
+        (item) => item.textContent === "Maur",
+      )
+      menuItem.click()
+      await elementUpdated(el)
+
+      expect(el.checkValidity()).to.be.true
+    })
+
+    it("sets a validation message when required and empty", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde" ?required=${true}>
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector<LeuSelect>("leu-select")
+      await elementUpdated(el)
+
+      expect(el.validationMessage).to.be.a("string").and.not.be.empty
+    })
+
+    it("has no validation message when valid", async () => {
+      const el = await defaultFixture({
+        options: MUNICIPALITIES,
+        label: "Gemeinde",
+        value: ["Maur"],
+      })
+      expect(el.validationMessage).to.equal("")
+    })
+
+    it("willValidate is true when not disabled", async () => {
+      const el = await defaultFixture({
+        options: MUNICIPALITIES,
+        label: "Gemeinde",
+      })
+      expect(el.willValidate).to.be.true
+    })
+
+    it("willValidate is false when disabled", async () => {
+      const el = await defaultFixture({
+        options: MUNICIPALITIES,
+        label: "Gemeinde",
+        disabled: true,
+      })
+      expect(el.willValidate).to.be.false
+    })
+
+    it("resets validity on form reset", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-select name="city" label="Gemeinde" ?required=${true}>
+            ${MUNICIPALITIES.map(
+              (o) => html`<leu-menu-item>${o}</leu-menu-item>`,
+            )}
+          </leu-select>
+        </form>
+      `)
+
+      const el = form.querySelector<LeuSelect>("leu-select")
+      el.value = ["Maur"]
+      await elementUpdated(el)
+      expect(el.checkValidity()).to.be.true
+
+      form.reset()
+      await elementUpdated(el)
+
+      // After reset value is empty again, so required makes it invalid
+      expect(el.checkValidity()).to.be.false
+      expect(el.validity.valueMissing).to.be.true
+    })
+  })
 })