import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import TextDiff from "./components/TextDiff";

describe("TextDiff", () => {
  it("renders unchanged text without strike-through or highlight styling", () => {
    render(<TextDiff before="Backend engineer." after="Backend engineer." />);
    expect(screen.getByText("Backend engineer.")).toBeInTheDocument();
  });

  it("marks removed words with a distinct style from unchanged text", () => {
    render(<TextDiff before="Assisted with the migration." after="Led the migration." />);
    const removed = screen.getByText("Assisted with", { selector: "span" });
    const unchanged = screen.getByText(/the migration\./, { selector: "span" });
    // jsdom doesn't resolve emotion's generated CSS cascade for getComputedStyle, so assert the
    // component branched into a different (MUI-generated) class for removed vs. unchanged text
    // rather than the literal computed decoration value.
    expect(removed.className).not.toBe(unchanged.className);
  });

  it("treats an empty before as an entirely new addition", () => {
    render(<TextDiff before="" after="Brand new summary." />);
    expect(screen.getByText(/Brand new summary\./)).toBeInTheDocument();
  });
});