import { describe, it, expect } from "vitest";
import { mount } from "@vue/test-utils";
import KpiTile from "../KpiTile.vue";

describe("KpiTile", () => {
  it("renders label, value and sub", () => {
    const w = mount(KpiTile, { props: { label: "Actions", value: 12, sub: "3 public" } });
    expect(w.text()).toContain("Actions");
    expect(w.get('[data-testid="kpi-value"]').text()).toBe("12");
    expect(w.text()).toContain("3 public");
  });

  it("applies the accent colour to the value", () => {
    const w = mount(KpiTile, { props: { label: "Events", value: 4, accent: "#c08bff" } });
    expect(w.get('[data-testid="kpi-value"]').attributes("style")).toContain("#c08bff");
  });

  it("omits the sub line when not given", () => {
    const w = mount(KpiTile, { props: { label: "Queries", value: 0 } });
    expect(w.text()).toContain("Queries");
    expect(w.text()).toContain("0");
  });
});