batchCooking/apps/web/cypress/component/highlight-tech-steps.cy.tsx

import type { StepTechStepView } from "@batch-cooking/shared";
import { splitDescriptionByTechSteps } from "../../src/features/recipes/steps/highlight-tech-steps";

// Pure logic, no DOM/mount needed — reuses the component-test runner
// (Cypress's Mocha/Chai, same as CheckboxOption.cy.tsx) purely for its
// `expect`, not for rendering. `.cy.tsx` (not `.cy.ts`) only because that's
// what `cypress.config.ts`'s component `specPattern` looks for.

function techStep(key: string, id: number, start: number, end: number): StepTechStepView {
  return { techStep: { id, key }, start, end };
}

describe("splitDescriptionByTechSteps", () => {
  it("returns the whole description as one plain segment when there are no matches", () => {
    expect(splitDescriptionByTechSteps("Servir immédiatement", [])).to.deep.equal([
      { text: "Servir immédiatement", techStep: null },
    ]);
  });

  it("splits a single match into before/match/after segments", () => {
    // "Faire mijoter à feu doux" — "mijoter" is [6, 13).
    const result = splitDescriptionByTechSteps("Faire mijoter à feu doux", [
      techStep("simmer", 1, 6, 13),
    ]);
    expect(result).to.deep.equal([
      { text: "Faire ", techStep: null },
      { text: "mijoter", techStep: { id: 1, key: "simmer" } },
      { text: " à feu doux", techStep: null },
    ]);
  });

  it("handles a match at the very start, with nothing before it", () => {
    const result = splitDescriptionByTechSteps("Hacher les oignons", [techStep("chop", 2, 0, 6)]);
    expect(result).to.deep.equal([
      { text: "Hacher", techStep: { id: 2, key: "chop" } },
      { text: " les oignons", techStep: null },
    ]);
  });

  it("handles a match at the very end, with nothing after it", () => {
    const result = splitDescriptionByTechSteps("Faire cuire", [techStep("cook", 3, 6, 11)]);
    expect(result).to.deep.equal([
      { text: "Faire ", techStep: null },
      { text: "cuire", techStep: { id: 3, key: "cook" } },
    ]);
  });

  it("handles several non-adjacent matches, preserving the plain text between them", () => {
    const text = "Préchauffer la poêle, puis faire fondre le beurre";
    const result = splitDescriptionByTechSteps(text, [
      techStep("preheat", 4, 0, 11),
      techStep("melt", 5, 27, 39),
    ]);
    expect(result.map((s) => s.text).join("")).to.equal(text);
    expect(result.filter((s) => s.techStep !== null)).to.have.length(2);
    expect(result[0]).to.deep.equal({ text: "Préchauffer", techStep: { id: 4, key: "preheat" } });
  });

  it("re-sorts entries that aren't already in start order", () => {
    const text = "Faire fondre le beurre puis préchauffer le four";
    // Passed in techStepId order, not text order — the function must sort
    // by `start`, not trust the input order.
    const result = splitDescriptionByTechSteps(text, [
      techStep("preheat", 4, 28, 39),
      techStep("melt", 5, 0, 12),
    ]);
    const matches = result.filter((s) => s.techStep !== null);
    expect(matches.map((s) => s.techStep?.key)).to.deep.equal(["melt", "preheat"]);
  });

  it("drops a match whose end is past the end of the description", () => {
    const result = splitDescriptionByTechSteps("Cuire", [techStep("cook", 3, 0, 999)]);
    expect(result).to.deep.equal([{ text: "Cuire", techStep: null }]);
  });

  it("drops a match with a negative start", () => {
    const result = splitDescriptionByTechSteps("Cuire", [techStep("cook", 3, -1, 5)]);
    expect(result).to.deep.equal([{ text: "Cuire", techStep: null }]);
  });

  it("drops a match whose start isn't before its end", () => {
    const result = splitDescriptionByTechSteps("Cuire", [techStep("cook", 3, 3, 3)]);
    expect(result).to.deep.equal([{ text: "Cuire", techStep: null }]);
  });

  it("drops a later match that overlaps one already accepted", () => {
    // Two entries claiming overlapping ranges shouldn't happen in practice
    // (the backend already resolves overlaps), but the splitter defends
    // against it anyway rather than producing a garbled/duplicated slice.
    const result = splitDescriptionByTechSteps("Cuire au four", [
      techStep("bake", 3, 0, 13),
      techStep("cook", 2, 0, 5),
    ]);
    expect(result).to.deep.equal([{ text: "Cuire au four", techStep: { id: 3, key: "bake" } }]);
  });

  it("returns a single empty-ish segment for an empty description with no matches", () => {
    expect(splitDescriptionByTechSteps("", [])).to.deep.equal([]);
  });
});