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

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

  it("should display the label", () => {
    cy.mount(
      html`<tems-sidebar-section
        ><div slot="label">Section Label</div></tems-sidebar-section
      >`
    );
    cy.get("tems-sidebar-section").contains("Section Label");
  });

  it("should toggle the closed state when the button is clicked", () => {
    cy.mount(
      html`<tems-sidebar-section
        ><div slot="label">Section Label</div></tems-sidebar-section
      >`
    );
    cy.get("tems-sidebar-section").should("not.have.attr", "closed");
    cy.get("tems-sidebar-section").find("button").click({ force: true });
    cy.get("tems-sidebar-section").should("have.attr", "closed");
    cy.get("tems-sidebar-section").find("button").click({ force: true });
    cy.get("tems-sidebar-section").should("not.have.attr", "closed");
  });

  it("should dispatch a 'closed' event when the section is closed", () => {
    const onClosedSpy = cy.spy().as("handleClosed");
    cy.mount(
      html`<tems-sidebar-section @closed=${onClosedSpy}>
        >
        <div slot="label">Section Label</div></tems-sidebar-section
      >`
    );
    cy.get("tems-sidebar-section").find("button").click({ force: true });
    cy.get("@handleClosed").should("have.been.calledOnce");
  });

  it("should dispatch an 'opened' event when the section is opened", () => {
    const onOpenedSpy = cy.spy().as("handleOpened");
    cy.mount(
      html`<tems-sidebar-section closed @opened=${onOpenedSpy}
        ><div slot="label">Section Label</div></tems-sidebar-section
      >`
    );
    cy.get("tems-sidebar-section").find("button").click({ force: true });
    cy.get("@handleOpened").should("have.been.calledOnce");
  });

  it("should display the content when the section is open", () => {
    cy.mount(
      html`<tems-sidebar-section
        ><div slot="label">Section Label</div>
        <div>Section Content</div></tems-sidebar-section
      >`
    );
    cy.get("tems-sidebar-section").contains("Section Content");
  });

  it("should not display the content when the section is closed", () => {
    cy.mount(
      html`<tems-sidebar-section
        ><div slot="label">Section Label</div>
        <div>Section Content</div></tems-sidebar-section
      >`
    );
    cy.get("tems-sidebar-section").find("label > div").should("exist");

    cy.mount(
      html`<tems-sidebar-section closed
        ><div slot="label">Section Label</div>
        <div>Section Content</div></tems-sidebar-section
      >`
    );
    cy.get("tems-sidebar-section").find("label > div").should("not.exist");
  });
});