Dropdown

{
  name: "Demo form",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <h1>Demo Form</h1>
      <form>
        <oc-dropdown-v1 name="food" hint="What do you like to eat?" label="Something to eat">
          <option value="food1">Pizza</option>
          <option value="food2">Sushi</option>
          <option value="food3">Steak</option>
        </oc-dropdown-v1>
        <br />
        <oc-dropdown-v1
          name="beverages"
          hint="What do you like to drink?"
          label="Something to drink (required)"
          required
        >
          <option value="drink1">Coffee</option>
          <option value="drink2">Tea</option>
          <option value="drink3">Beer</option>
        </oc-dropdown-v1>
        <br />
        <div style="display: flex; gap: 8px;">
          <oc-button-v1 type="reset" variant="secondary" id="clear" fit-content>Reset</oc-button-v1>
          <oc-button-v1 type="submit" id="submit" fit-content>Submit</oc-button-v1>
        </div>
      </form>
      <script>
        (() => {
          const form = document.querySelector("form");
          let formData = {};
          form.addEventListener("submit", (e) => {
            e.preventDefault();
            formData = Object.fromEntries(new FormData(form).entries());
            alert("Submitted form data: " + JSON.stringify(formData));
          });
        })();
      </script>`;
  }
}

{
  name: "Complex Demo Form",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html` <h1>Complex Demo Form</h1>
      <p>
        This form contains two dropdowns. The first dropdown has options and optgroups defined via
        attributes and the slot, while the second dropdown uses only options defined via the slot.
      </p>
      <form>
        <oc-dropdown-v1
          name="food"
          hint="What do you like to eat?"
          label="Something to eat"
          options='[{"label":"Cake","value":"food4"},{"label":"Ice Cream","value":"food5"}]'
        >
          <option value="food1">Bread</option>
          <option value="food2">Fries</option>
          <option value="food3">Salad</option>
          <optgroup label="Italian">
            <option value="it-food4">Pasta</option>
            <option value="it-food5">Pizza</option>
          </optgroup>
          <optgroup label="Japanese">
            <option value="jp-food6">Sushi</option>
            <option value="jp-food7">Ramen</option>
          </optgroup>
          <optgroup label="American">
            <option value="am-food8">Steak</option>
            <option value="am-food9">Burger</option>
          </optgroup>
        </oc-dropdown-v1>
        <br />
        <oc-dropdown-v1
          name="beverages"
          hint="What do you like to drink?"
          label="Something to drink (required)"
          required
        >
          <option value="drink1">Coffee</option>
          <option value="drink2">Tea</option>
          <option value="drink3">Beer</option>
        </oc-dropdown-v1>
        <br />
        <div style="display: flex; gap: 8px;">
          <oc-button-v1 type="reset" variant="secondary" id="clear" fit-content>Reset</oc-button-v1>
          <oc-button-v1 type="submit" id="submit" fit-content>Submit</oc-button-v1>
        </div>
      </form>
      <script>
        (() => {
          const form = document.querySelector("form");
          let formData = {};
          form.addEventListener("submit", (e) => {
            e.preventDefault();
            formData = Object.fromEntries(new FormData(form).entries());
            alert("Submitted form data: " + JSON.stringify(formData));
          });
        })();
      </script>`;
  }
}

{
  render() {
    return html`
      <form>
        <oc-dropdown-v1 name="name">{Enter}</oc-dropdown-v1>
        <button type="submit"></button>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    canvasElement.getElementsByTagName("form").item(0)!.addEventListener("submit", ev => ev.preventDefault());
    const dropdown = canvasElement.getElementsByTagName("oc-dropdown-v1").item(0)!;
    let fired = 0;
    dropdown.addEventListener("keydown", () => fired += 1);
    await userEvent.type(dropdown.shadowRoot!.querySelector("select")!, "{Enter}");
    await expect(fired, "keydown should be fired one time").toBe(1);
  }
}

{
  render() {
    return html`
      <form id="form1">
        <oc-dropdown-v1 name="name">{Enter}</oc-dropdown-v1>
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form2">
        <oc-dropdown-v1 name="name">{Enter}</oc-dropdown-v1>
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form3">
        <oc-dropdown-v1 name="name">{Enter}</oc-dropdown-v1>
        Should submit the form
      </form>

      <form id="form4">Should submit the form</form>
      <oc-dropdown-v1 name="name" form="form4">{Enter}</oc-dropdown-v1>

      <form id="form5">
        <button type="submit" data-should-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-dropdown-v1 name="name" form="form5">{Enter}</oc-dropdown-v1>

      <form id="form6">
        <input type="submit" data-should-submit />
        <button type="submit" data-should-not-submit></button>
      </form>
      <oc-dropdown-v1 name="name" form="form6">{Enter}</oc-dropdown-v1>

      <form id="form7">
        <oc-dropdown-v1 name="name">{Enter}</oc-dropdown-v1>
        <button type="submit" disabled data-should-not-submit></button>
        <button type="submit" data-should-not-submit></button>
      </form>

      <form id="form8">
        <oc-dropdown-v1 name="name">{Enter}</oc-dropdown-v1>
        <input type="submit" disabled data-should-not-submit />
        <input type="submit" data-should-not-submit />
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const submits: {
      form: string;
      submitter: HTMLElement | null;
    }[] = [];
    canvasElement.querySelectorAll("form").forEach(form => form.addEventListener("submit", ev => {
      ev.preventDefault();
      submits.push({
        form: form.id,
        submitter: ev.submitter
      });
    }));
    const dropdowns = Array.from(canvasElement.querySelectorAll(`oc-dropdown-v1[name="name"]`)) as (HTMLOcTextFieldV1Element & {
      internals: ElementInternals;
    })[];
    const shadowInputs = dropdowns.map(oc => oc.shadowRoot!.querySelector("select")!);
    for (let i = 0; i < dropdowns.length; i += 1) {
      const dropdown = dropdowns[i];
      // eslint-disable-next-line no-await-in-loop
      await expect(dropdown.internals.form?.id, "dropdown should have correct associated form").toBe(`form${i + 1}`);
    }

    // eslint-disable-next-line no-restricted-syntax
    for (const input of shadowInputs) {
      // eslint-disable-next-line no-await-in-loop
      await userEvent.type(input, "{Enter}");
    }
    await expect(submits.length, "number of submits").toBe(6);
    await expect(submits[0].form).toBe("form1");
    await expect(submits[0].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[1].form).toBe("form2");
    await expect(submits[1].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[2].form).toBe("form3");
    await expect(submits[2].submitter).toBe(null);
    await expect(submits[3].form).toBe("form4");
    await expect(submits[3].submitter).toBe(null);
    await expect(submits[4].form).toBe("form5");
    await expect(submits[4].submitter?.dataset.shouldSubmit).toBeDefined();
    await expect(submits[5].form).toBe("form6");
    await expect(submits[5].submitter?.dataset.shouldSubmit).toBeDefined();
  }
}

{
  render() {
    return html` <form>
      <oc-dropdown-v1 name="music" label="Favorite music">
        <option value="1">Rock</option>
        <option value="2">Electro</option>
        <option value="3">Hip-Hop</option>
      </oc-dropdown-v1>
      <button type="submit" style="margin-top: 20px;">submit</button>
    </form>`;
  },
  async play({
    canvasElement
  }) {
    const selectElement = deepQuerySelector(canvasElement, "select")!;
    await userEvent.selectOptions(selectElement, "Electro");
    const form = canvasElement.getElementsByTagName("form").item(0)!;
    let formData = {};
    form.addEventListener("submit", ev => {
      ev.preventDefault();
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      formData = Object.fromEntries(new FormData(form).entries());
    });
    const button = canvasElement.querySelector("button") as HTMLButtonElement;
    // https://github.com/testing-library/user-event/issues/1075
    await fireEvent.click(button);
    await expect(formData).toStrictEqual({
      music: "2"
    });
  }
}

{
  render() {
    return html`
      <form>
        <oc-dropdown-v1 name="music" label="please select ...">
          <option value="1">Rock</option>
          <option value="2">Electro</option>
          <option value="3">Hip-Hop</option>
        </oc-dropdown-v1>
        <button type="reset" style="margin-top: 20px;">reset</button>
      </form>
      <script>`;
  },
  async play({
    canvasElement
  }) {
    const selectElement = deepQuerySelector(canvasElement, "select") as HTMLSelectElement;
    await expect(selectElement?.value).toBe("");
    await userEvent.selectOptions(selectElement, "Electro");
    await expect(selectElement?.value).toBe("2");
    const button = canvasElement.querySelector("button") as HTMLButtonElement;
    // Test in Firefox needs extra help here
    // https://github.com/testing-library/user-event/issues/1075
    await fireEvent.click(button);
    await userEvent.click(button);
    await expect(selectElement?.value).toBe("");
  }
}

{
  render() {
    return html`
      <form>
        <oc-dropdown-v1 name="music" label="please select ...">
          <option value="1">Rock</option>
          <option value="2">Electro</option>
          <option value="3">Hip-Hop</option>
        </oc-dropdown-v1>
        <button type="reset" style="margin-top: 20px;">reset</button>
      </form>
    `;
  },
  async play({
    canvasElement
  }) {
    const selectElement = deepQuerySelector(canvasElement, "select") as HTMLSelectElement;
    const dropdownElement = document.querySelector("oc-dropdown-v1");
    let lastChangeEvent: PropertyChangeEvent | undefined;
    dropdownElement?.addEventListener("oc-property-change", e => {
      lastChangeEvent = e;
    });
    await expect(selectElement?.value).toBe("");
    await userEvent.selectOptions(selectElement, "Electro");
    await expect(selectElement?.value).toBe("2");
    await expect(lastChangeEvent?.detail.value).toEqual({
      previous: "",
      current: "2"
    });
  }
}

{
  parameters: {
    docs: {
      disable: true
    }
  },
  render() {
    return html`
      <oc-dropdown-v1 label="please select ..." required> </oc-dropdown-v1>
      <oc-dropdown-v1 label="please select ..." required> </oc-dropdown-v1>
    `;
  },
  async play({
    canvasElement
  }) {
    const [dropdown1, dropdown2] = Array.from(canvasElement.getElementsByTagName("oc-dropdown-v1"));

    // Initialize dropdowns
    dropdown1.setAttribute("options", JSON.stringify([{
      label: "Rock",
      value: "1"
    }, {
      label: "Electro",
      value: "2"
    }, {
      label: "Hip-Hop",
      value: "3"
    }]));
    await tick();
    dropdown1.setAttribute("value", "2");
    dropdown2.innerHTML = `
      <option value="1">Rock</option>
      <option value="2">Electro</option>
      <option value="3">Hip-Hop</option>
    `;
    await tick();
    dropdown2.value = "2";

    // register event listener
    let eventCounter = 0;
    const listener = (): void => {
      eventCounter += 1;
    };
    dropdown1.addEventListener("oc-property-change", listener);
    dropdown2.addEventListener("oc-property-change", listener);

    // initial checks
    await expect(dropdown1.value).toBe("2");
    await expect(dropdown2.value).toBe("2");
    await expect(eventCounter, "2 events have been fired till now").toBe(2);
    eventCounter = 0;

    // add option to dropdown1
    dropdown1.setAttribute("options", JSON.stringify([{
      label: "Rock",
      value: "1"
    }, {
      label: "Electro",
      value: "2"
    }, {
      label: "Hip-Hop",
      value: "3"
    }, {
      label: "Pop",
      value: "4"
    }]));

    // add option to dropdown2
    dropdown2.innerHTML = `
      <option value="1">Rock</option>
      <option value="2">Electro</option>
      <option value="3">Hip-Hop</option>
      <option value="4">Pop</option>
    `;
    await tick();
    await expect(dropdown1.value).toBe("2");
    await expect(dropdown2.value).toBe("2");
    await expect(eventCounter, "1 event for option change has been fired").toBe(1);
    eventCounter = 0;

    // remove selected option from dropdown1
    dropdown1.setAttribute("options", JSON.stringify([{
      label: "Rock",
      value: "1"
    }, {
      label: "Hip-Hop",
      value: "3"
    }, {
      label: "Pop",
      value: "4"
    }]));

    // remove selected option from dropdown2
    dropdown2.innerHTML = `
      <option value="1">Rock</option>
      <option value="3">Hip-Hop</option>
      <option value="4">Pop</option>
    `;
    await tick();
    await expect(dropdown1.shadowRoot!.querySelector("select")!.value).toBe("");
    await expect(dropdown2.shadowRoot!.querySelector("select")!.value).toBe("");

    // restore initial state
    dropdown1.setAttribute("options", JSON.stringify([{
      label: "Rock",
      value: "1"
    }, {
      label: "Electro",
      value: "2"
    }, {
      label: "Hip-Hop",
      value: "3"
    }]));
    dropdown1.setAttribute("value", "2");
    dropdown2.innerHTML = `
      <option value="1">Rock</option>
      <option value="2">Electro</option>
      <option value="3">Hip-Hop</option>
    `;
    dropdown2.value = "2";
    await expect(dropdown1.value).toBe("2");
    await expect(dropdown2.value).toBe("2");
    await expect(eventCounter, "2 events has been fired").toBe(2);
  }
}