import { html } from "lit";

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

  it("should display filters button", () => {
    cy.mount(html`<tems-search-bar display-filters=""></tems-search-bar>`);
    cy.get("tems-search-bar")
      .find("tems-button[label='Filters']")
      .should("exist");
  });

  it("should display saved search button", () => {
    cy.mount(html`<tems-search-bar display-saved-search=""></tems-search-bar>`);
    cy.get("tems-search-bar")
      .find("tems-button[label='Saved Search']")
      .should("exist");
  });

  it("should display views dropdown", () => {
    cy.mount(html`<tems-search-bar display-views=""></tems-search-bar>`);
    cy.get("tems-search-bar")
      .find("tems-dropdown[label='Views']")
      .should("exist");
  });

  it("should emit toggle-filters event on filters button click", () => {
    const onToggleFiltersSpy = cy.spy().as("onToggleFiltersSpy");
    cy.mount(
      html`<tems-search-bar
        display-filters=""
        @toggle-filters=${onToggleFiltersSpy}
      ></tems-search-bar>`,
    );
    cy.get("tems-search-bar").find("tems-button[label='Filters']").click();
    cy.get("@onToggleFiltersSpy").should("have.been.calledOnce");
  });

  it("should emit change-view event on views dropdown item click", () => {
    const onChangeViewSpy = cy.spy().as("onChangeViewSpy");
    cy.mount(
      html`<tems-search-bar
        display-views=""
        @change-view=${onChangeViewSpy}
      ></tems-search-bar>`,
    );
    cy.get("tems-search-bar")
      .find("tems-dropdown[label='Views']")
      .click()
      .find("tems-dropdown-item[label='Card']")
      .click();
    cy.get("@onChangeViewSpy").should("have.been.calledOnce");
  });
});