dns-autoresolver/web/src/components/StatusBadge.test.tsx

import { render, screen } from "@testing-library/react"
import { test, expect } from "vitest"
import { StatusBadge } from "./StatusBadge"

test("in_sync — emerald, текст «in sync»", () => {
  render(<StatusBadge status="in_sync" />)
  expect(screen.getByText("in sync")).toBeInTheDocument()
  const badge = screen.getByText("in sync").closest('[data-slot="status-badge"]')
  expect(badge).toHaveAttribute("data-status", "in_sync")
  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-add)" })
})

test("drift — amber, текст «drift»", () => {
  render(<StatusBadge status="drift" />)
  expect(screen.getByText("drift")).toBeInTheDocument()
  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-update)" })
})

test("error — rose, текст «error»", () => {
  render(<StatusBadge status="error" />)
  expect(screen.getByText("error")).toBeInTheDocument()
  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-delete)" })
})

test("unknown — muted, текст «unknown»", () => {
  render(<StatusBadge status="unknown" />)
  expect(screen.getByText("unknown")).toBeInTheDocument()
  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-readonly)" })
})

test("no_template — muted, текст «без шаблона»", () => {
  render(<StatusBadge status="no_template" />)
  expect(screen.getByText("без шаблона")).toBeInTheDocument()
  expect(screen.getByTestId("status-dot")).toHaveStyle({ background: "var(--diff-readonly)" })
})

test("отсутствие статуса трактуется как unknown", () => {
  render(<StatusBadge />)
  expect(screen.getByText("unknown")).toBeInTheDocument()
})

test("неизвестное значение статуса не падает и рендерит unknown", () => {
  render(<StatusBadge status="bogus" />)
  expect(screen.getByText("unknown")).toBeInTheDocument()
})