// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=938-12135&m=dev
import { html } from "lit";

describe("<tems-dropdown>", () => {
  it("should mount", () => {
    cy.mount(html`<tems-dropdown></tems-dropdown>`);
    cy.get("tems-dropdown").should("exist");
  });

  it("should display label", () => {
    const label = "Views";
    cy.mount(html`<tems-dropdown label="${label}"></tems-dropdown>`);
    cy.get("tems-dropdown")
      .find("summary")
      .find("tems-button")
      .should("have.attr", "label", label);
  });

  it("should toggle open state on button click", () => {
    cy.mount(html`<tems-dropdown label="Views"></tems-dropdown>`);
    cy.get("tems-dropdown").should("not.have.attr", "open");
    cy.get("tems-dropdown").find("summary").click();
    cy.get("tems-dropdown").should("have.attr", "open");
    cy.get("tems-dropdown").find("summary").click();
    cy.get("tems-dropdown").should("not.have.attr", "open");
  });

  it("should display dropdown items", () => {
    const items = ["Card", "List", "Map", "Table"];
    cy.mount(
      html`<tems-dropdown label="Views" open="true">
        ${items.map(
          (label) =>
            html`<tems-dropdown-item label="${label}"></tems-dropdown-item>`,
        )}
      </tems-dropdown>`,
    );
    cy.get("tems-dropdown")
      .find("tems-dropdown-item")
      .should("have.length", items.length);
    items.forEach((label, index) => {
      cy.get("tems-dropdown")
        .find("tems-dropdown-item")
        .eq(index)
        .should("have.attr", "label", label);
    });
  });
});