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

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

  it("should display a single breadcrumb item", () => {
    const path = [{ label: "Home", route: "home" }];
    cy.mount(html`<tems-breadcrumb .path=${path}></tems-breadcrumb>`);
    cy.get("tems-breadcrumb")
      .find("tems-breadcrumb-item")
      .should("have.length", 1);
    cy.get("tems-breadcrumb").find("tems-breadcrumb-item").contains("Home");
  });

  it("should display multiple breadcrumb items", () => {
    const path = [
      { label: "Home", route: "home" },
      { label: "Services", route: "services" },
      { label: "Consulting", route: "consulting" },
    ];
    cy.mount(html`<tems-breadcrumb .path=${path}></tems-breadcrumb>`);
    cy.get("tems-breadcrumb")
      .find("tems-breadcrumb-item")
      .should("have.length", 3);
    cy.get("tems-breadcrumb")
      .find("tems-breadcrumb-item")
      .eq(0)
      .contains("Home");
    cy.get("tems-breadcrumb")
      .find("tems-breadcrumb-item")
      .eq(1)
      .contains("Services");
    cy.get("tems-breadcrumb")
      .find("tems-breadcrumb-item")
      .eq(2)
      .contains("Consulting");
  });

  it("should display the last breadcrumb item as active", () => {
    const path = [
      { label: "Home", route: "home" },
      { label: "Services", route: "services" },
      { label: "Consulting", route: "consulting" },
    ];
    cy.mount(html`<tems-breadcrumb .path=${path}></tems-breadcrumb>`);
    cy.get("tems-breadcrumb")
      .find("tems-breadcrumb-item")
      .last()
      .should("have.attr", "active");
  });

  it("should disable breadcrumb items with no route", () => {
    const path = [{ label: "Home" }];
    cy.mount(html`<tems-breadcrumb .path=${path}></tems-breadcrumb>`);
    cy.get("tems-breadcrumb")
      .find("tems-breadcrumb-item")
      .should("have.attr", "disabled");
  });
});