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

describe("DurationBar", () => {
  it("renders the duration label with one decimal", () => {
    const w = mount(DurationBar, { props: { ms: 12.34 } });
    expect(w.get('[data-testid="duration-value"]').text()).toBe("12.3ms");
  });

  it("is green under the warn threshold", () => {
    const w = mount(DurationBar, { props: { ms: 10, warnMs: 50, dangerMs: 100 } });
    expect(w.get('[data-testid="duration-bar"]').attributes("data-tone")).toBe("ok");
  });

  it("turns amber at the warn threshold", () => {
    const w = mount(DurationBar, { props: { ms: 60, warnMs: 50, dangerMs: 100 } });
    expect(w.get('[data-testid="duration-bar"]').attributes("data-tone")).toBe("warn");
  });

  it("turns red at the danger threshold", () => {
    const w = mount(DurationBar, { props: { ms: 120, warnMs: 50, dangerMs: 100 } });
    expect(w.get('[data-testid="duration-bar"]').attributes("data-tone")).toBe("danger");
  });

  it("scales the bar width against max", () => {
    const w = mount(DurationBar, { props: { ms: 25, max: 100 } });
    const bar = w.get('[data-testid="duration-bar"] > div > div');
    expect(bar.attributes("style")).toContain("width: 25%");
  });
});