@statistikzh/leu 0.2.0 → 0.4.0

package/src/components/select/stories/select.stories.js

@@ -2,10 +2,17 @@ import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-select.js"
+import { MUNICIPALITIES } from "../test/fixtures.js"
 
 export default {
-  title: "select",
+  title: "Select",
   component: "leu-select",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 const OPTIONS_EXAMPLES = [
@@ -14,168 +21,6 @@ const OPTIONS_EXAMPLES = [
   "Option 3",
   "Sehr lange Option um zu schauen was passiert, wenn es zu lang wird.",
 ]
-const OPTIONS_MUNICIPALITIES = [
-  "Aeugst am Albis",
-  "Affoltern am Albis",
-  "Bonstetten",
-  "Hausen am Albis",
-  "Hedingen",
-  "Kappel am Albis",
-  "Knonau",
-  "Maschwanden",
-  "Mettmenstetten",
-  "Obfelden",
-  "Ottenbach",
-  "Rifferswil",
-  "Stallikon",
-  "Wettswil am Albis",
-  "Benken (ZH)",
-  "Berg am Irchel",
-  "Buch am Irchel",
-  "Dachsen",
-  "Dorf",
-  "Feuerthalen",
-  "Flaach",
-  "Flurlingen",
-  "Henggart",
-  "Kleinandelfingen",
-  "Laufen-Uhwiesen",
-  "Marthalen",
-  "Ossingen",
-  "Rheinau",
-  "Thalheim an der Thur",
-  "Trüllikon",
-  "Truttikon",
-  "Volken",
-  "Bachenbülach",
-  "Bassersdorf",
-  "Bülach",
-  "Dietlikon",
-  "Eglisau",
-  "Embrach",
-  "Freienstein-Teufen",
-  "Glattfelden",
-  "Hochfelden",
-  "Höri",
-  "Hüntwangen",
-  "Kloten",
-  "Lufingen",
-  "Nürensdorf",
-  "Oberembrach",
-  "Opfikon",
-  "Rafz",
-  "Rorbas",
-  "Wallisellen",
-  "Wasterkingen",
-  "Wil (ZH)",
-  "Winkel",
-  "Bachs",
-  "Boppelsen",
-  "Buchs (ZH)",
-  "Dällikon",
-  "Dänikon",
-  "Dielsdorf",
-  "Hüttikon",
-  "Neerach",
-  "Niederglatt",
-  "Niederhasli",
-  "Niederweningen",
-  "Oberglatt",
-  "Oberweningen",
-  "Otelfingen",
-  "Regensberg",
-  "Regensdorf",
-  "Rümlang",
-  "Schleinikon",
-  "Schöfflisdorf",
-  "Stadel",
-  "Steinmaur",
-  "Weiach",
-  "Bäretswil",
-  "Bubikon",
-  "Dürnten",
-  "Fischenthal",
-  "Gossau (ZH)",
-  "Grüningen",
-  "Hinwil",
-  "Rüti (ZH)",
-  "Seegräben",
-  "Wald (ZH)",
-  "Wetzikon (ZH)",
-  "Adliswil",
-  "Kilchberg (ZH)",
-  "Langnau am Albis",
-  "Oberrieden",
-  "Richterswil",
-  "Rüschlikon",
-  "Thalwil",
-  "Erlenbach (ZH)",
-  "Herrliberg",
-  "Hombrechtikon",
-  "Küsnacht (ZH)",
-  "Männedorf",
-  "Meilen",
-  "Oetwil am See",
-  "Stäfa",
-  "Uetikon am See",
-  "Zumikon",
-  "Zollikon",
-  "Fehraltorf",
-  "Hittnau",
-  "Lindau",
-  "Pfäffikon",
-  "Russikon",
-  "Weisslingen",
-  "Wila",
-  "Wildberg",
-  "Dübendorf",
-  "Egg",
-  "Fällanden",
-  "Greifensee",
-  "Maur",
-  "Mönchaltorf",
-  "Schwerzenbach",
-  "Uster",
-  "Volketswil",
-  "Wangen-Brüttisellen",
-  "Altikon",
-  "Brütten",
-  "Dägerlen",
-  "Dättlikon",
-  "Dinhard",
-  "Ellikon an der Thur",
-  "Elsau",
-  "Hagenbuch",
-  "Hettlingen",
-  "Neftenbach",
-  "Pfungen",
-  "Rickenbach (ZH)",
-  "Schlatt (ZH)",
-  "Seuzach",
-  "Turbenthal",
-  "Winterthur",
-  "Zell (ZH)",
-  "Aesch (ZH)",
-  "Birmensdorf (ZH)",
-  "Dietikon",
-  "Geroldswil",
-  "Oberengstringen",
-  "Oetwil an der Limmat",
-  "Schlieren",
-  "Uitikon",
-  "Unterengstringen",
-  "Urdorf",
-  "Weiningen (ZH)",
-  "Zürich",
-  "Andelfingen",
-  "Stammheim",
-  "Wädenswil",
-  "Elgg",
-  "Horgen",
-  "Illnau-Effretikon",
-  "Bauma",
-  "Wiesendangen",
-]
 
 function Template({
   label,
@@ -189,6 +34,7 @@ function Template({
   after,
 }) {
   return html`
+    <div style="margin-top: 50vh"></div>
     <leu-select
       class="dropdown"
       .options=${options}
@@ -202,6 +48,7 @@ function Template({
       ${before ? html`<div slot="before">${before}</div>` : ""}
       ${after ? html`<div slot="after">${after}</div>` : ""}
     </leu-select>
+    <div style="margin-top: 50vh"></div>
   `
 }
 
@@ -263,7 +110,7 @@ DisabledFilled.args = {
 export const Filterable = Template.bind({})
 Filterable.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: true,
@@ -273,7 +120,7 @@ Filterable.args = {
 export const BeforeAfterSlot = TemplateSlots.bind({})
 BeforeAfterSlot.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: false,
@@ -283,7 +130,7 @@ BeforeAfterSlot.args = {
 export const Multiple = Template.bind({})
 Multiple.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: true,
@@ -293,8 +140,8 @@ Multiple.args = {
 export const MultipleFilled = Template.bind({})
 MultipleFilled.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
-  value: OPTIONS_MUNICIPALITIES.slice(0, 2),
+  options: MUNICIPALITIES,
+  value: MUNICIPALITIES.slice(0, 2),
   clearable: true,
   disabled: false,
   filterable: true,

package/src/components/select/test/fixtures.js

@@ -0,0 +1,162 @@
+export const MUNICIPALITIES = [
+  "Aeugst am Albis",
+  "Affoltern am Albis",
+  "Bonstetten",
+  "Hausen am Albis",
+  "Hedingen",
+  "Kappel am Albis",
+  "Knonau",
+  "Maschwanden",
+  "Mettmenstetten",
+  "Obfelden",
+  "Ottenbach",
+  "Rifferswil",
+  "Stallikon",
+  "Wettswil am Albis",
+  "Benken (ZH)",
+  "Berg am Irchel",
+  "Buch am Irchel",
+  "Dachsen",
+  "Dorf",
+  "Feuerthalen",
+  "Flaach",
+  "Flurlingen",
+  "Henggart",
+  "Kleinandelfingen",
+  "Laufen-Uhwiesen",
+  "Marthalen",
+  "Ossingen",
+  "Rheinau",
+  "Thalheim an der Thur",
+  "Trüllikon",
+  "Truttikon",
+  "Volken",
+  "Bachenbülach",
+  "Bassersdorf",
+  "Bülach",
+  "Dietlikon",
+  "Eglisau",
+  "Embrach",
+  "Freienstein-Teufen",
+  "Glattfelden",
+  "Hochfelden",
+  "Höri",
+  "Hüntwangen",
+  "Kloten",
+  "Lufingen",
+  "Nürensdorf",
+  "Oberembrach",
+  "Opfikon",
+  "Rafz",
+  "Rorbas",
+  "Wallisellen",
+  "Wasterkingen",
+  "Wil (ZH)",
+  "Winkel",
+  "Bachs",
+  "Boppelsen",
+  "Buchs (ZH)",
+  "Dällikon",
+  "Dänikon",
+  "Dielsdorf",
+  "Hüttikon",
+  "Neerach",
+  "Niederglatt",
+  "Niederhasli",
+  "Niederweningen",
+  "Oberglatt",
+  "Oberweningen",
+  "Otelfingen",
+  "Regensberg",
+  "Regensdorf",
+  "Rümlang",
+  "Schleinikon",
+  "Schöfflisdorf",
+  "Stadel",
+  "Steinmaur",
+  "Weiach",
+  "Bäretswil",
+  "Bubikon",
+  "Dürnten",
+  "Fischenthal",
+  "Gossau (ZH)",
+  "Grüningen",
+  "Hinwil",
+  "Rüti (ZH)",
+  "Seegräben",
+  "Wald (ZH)",
+  "Wetzikon (ZH)",
+  "Adliswil",
+  "Kilchberg (ZH)",
+  "Langnau am Albis",
+  "Oberrieden",
+  "Richterswil",
+  "Rüschlikon",
+  "Thalwil",
+  "Erlenbach (ZH)",
+  "Herrliberg",
+  "Hombrechtikon",
+  "Küsnacht (ZH)",
+  "Männedorf",
+  "Meilen",
+  "Oetwil am See",
+  "Stäfa",
+  "Uetikon am See",
+  "Zumikon",
+  "Zollikon",
+  "Fehraltorf",
+  "Hittnau",
+  "Lindau",
+  "Pfäffikon",
+  "Russikon",
+  "Weisslingen",
+  "Wila",
+  "Wildberg",
+  "Dübendorf",
+  "Egg",
+  "Fällanden",
+  "Greifensee",
+  "Maur",
+  "Mönchaltorf",
+  "Schwerzenbach",
+  "Uster",
+  "Volketswil",
+  "Wangen-Brüttisellen",
+  "Altikon",
+  "Brütten",
+  "Dägerlen",
+  "Dättlikon",
+  "Dinhard",
+  "Ellikon an der Thur",
+  "Elsau",
+  "Hagenbuch",
+  "Hettlingen",
+  "Neftenbach",
+  "Pfungen",
+  "Rickenbach (ZH)",
+  "Schlatt (ZH)",
+  "Seuzach",
+  "Turbenthal",
+  "Winterthur",
+  "Zell (ZH)",
+  "Aesch (ZH)",
+  "Birmensdorf (ZH)",
+  "Dietikon",
+  "Geroldswil",
+  "Oberengstringen",
+  "Oetwil an der Limmat",
+  "Schlieren",
+  "Uitikon",
+  "Unterengstringen",
+  "Urdorf",
+  "Weiningen (ZH)",
+  "Zürich",
+  "Andelfingen",
+  "Stammheim",
+  "Wädenswil",
+  "Elgg",
+  "Horgen",
+  "Illnau-Effretikon",
+  "Bauma",
+  "Wiesendangen",
+]

package/src/components/select/test/select.test.js

@@ -1,29 +1,253 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { fixture, expect, elementUpdated } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
 
 import "../leu-select.js"
+import { MUNICIPALITIES } from "./fixtures.js"
 
-async function defaultFixture() {
-  return fixture(html`
-    <leu-select
-      options='[{"label":"Option 1", "value":"1"}, "Option 2", "Option 3", "Sehr lange Option um zu schauen was passiert, wenn es zu lang wird."]'
-      label="Label"
-      value=${null}
-    >
-    </leu-select>
-  `)
+async function defaultFixture(args = {}) {
+  return fixture(html`<leu-select
+    .options=${args.options}
+    label=${ifDefined(args.label)}
+    .value=${args.value ?? []}
+    ?clearable=${args.clearable}
+    ?disabled=${args.disabled}
+    ?filterable=${args.filterable}
+    ?multiple=${args.multiple}
+  >
+  </leu-select> `)
 }
 
 describe("LeuSelect", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-select")
+    const el = customElements.get("leu-select")
 
     await expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("passes the a11y audit in the open state", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      open: true,
+    })
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders a label", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+
+    expect(toggleButton).to.have.trimmed.text("Gemeinde")
+  })
+
+  it("doesn't show the list of options by default", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog).to.not.have.attribute("open")
+  })
+
+  it("opens the list of options when the toggle button is clicked", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+    await elementUpdated(el)
+
+    expect(dialog).to.have.attribute("open")
+  })
+
+  it("has a default value of an empty array", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("marks the menu item as selected a the value is set", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: "Affoltern am Albis",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector(
+      "leu-menu-item[label='Affoltern am Albis']"
+    )
+
+    expect(menuItem).to.have.attribute("active")
+    expect(menuItem).to.have.attribute("aria-selected")
+  })
+
+  it("shows the clear button when a value is set", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: "Affoltern am Albis",
+      clearable: true,
+    })
+
+    const clearButton = el.shadowRoot.querySelector(".clear-button")
+
+    expect(clearButton).to.exist
+  })
+
+  it("renders a input field to filter the options", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+
+    expect(filterInput).to.exist
+  })
+
+  it("filters the options when the filter input is changed", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albis" })
+
+    const menuItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(menuItems.length).to.equal(6)
+  })
+
+  it("resets the filter when the filter input is cleared", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albis" })
+
+    const clearFilterButton =
+      filterInput.shadowRoot.querySelector(".clear-button")
+    clearFilterButton.click()
+    await elementUpdated(el)
+
+    const menuItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(menuItems.length).to.equal(MUNICIPALITIES.length)
+  })
+
+  it("renders a message when no options are available", async () => {
+    const el = await defaultFixture({
+      options: [],
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item")
+    expect(menuItem).to.have.attribute("label", "Keine Optionen")
+  })
+
+  it("renders a message when no options are available after filtering", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albissss" })
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item")
+    expect(menuItem).to.have.attribute("label", "Keine Resultate")
+  })
+
+  it("renders a apply button when multiple selection is allowed", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      multiple: true,
+    })
+
+    const applyButton = el.shadowRoot.querySelector("leu-menu + .apply-button")
+    expect(applyButton).to.exist
+  })
+
+  it("updates the value when an option is selected", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item[label='Maur']")
+    menuItem.click()
+
+    expect(el.value).to.deep.equal(["Maur"])
+  })
+
+  it("allows a value with multiple values", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      multiple: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    el.shadowRoot.querySelector("leu-menu-item[label='Maur']").click()
+    el.shadowRoot.querySelector("leu-menu-item[label='Zollikon']").click()
+
+    expect(el.value).to.deep.equal(["Maur", "Zollikon"])
+  })
 })