// WizardNavigation — the getting-started target (#398). No jsdom:
// react-dom/server renders in vitest's node environment, and the markup says
// which button carries the highlight.
import { describe, it, expect, vi } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";

vi.mock("react-i18next", async () => (await import("../../test/i18nMock")).i18nMock());

import WizardNavigation, { WIZARD_NEXT_TARGET } from "./WizardNavigation";

const HIGHLIGHT = 'data-onboarding-highlight="true"';

const markup = (props: Parameters<typeof WizardNavigation>[0]) =>
  renderToStaticMarkup(
    <WizardNavigation
      onBack={vi.fn()}
      onNext={vi.fn()}
      onCancel={vi.fn()}
      nextLabel="NEXT_LABEL"
      {...props}
    />,
  );

/** The buttons, in order: cancel, back, next. */
const buttons = (html: string) => html.split("<button").slice(1);

describe("WizardNavigation — getting-started target (#398)", () => {
  it("highlights the next button, and neither back nor cancel", () => {
    const html = markup({ onboardingTarget: true });
    expect(html.split(HIGHLIGHT).length - 1).toBe(1);
    const all = buttons(html);
    expect(all).toHaveLength(3);
    const [cancel, back, next] = all;
    expect(next).toContain("NEXT_LABEL");
    expect(next).toContain(HIGHLIGHT);
    expect(next).toContain(`data-onboarding-target="${WIZARD_NEXT_TARGET}"`);
    expect(cancel).toContain("t(common.cancel)");
    expect(cancel).not.toContain("data-onboarding");
    expect(back).toContain("t(import.wizard.back)");
    expect(back).not.toContain("data-onboarding");
  });

  it("keeps the highlight on a disabled next button", () => {
    const html = markup({ onboardingTarget: true, nextDisabled: true });
    expect(html.split(HIGHLIGHT).length - 1).toBe(1);
  });

  it("highlights nothing without the property, or without a next button", () => {
    expect(markup({})).not.toContain("data-onboarding");
    expect(markup({ onboardingTarget: false })).not.toContain("data-onboarding");
    expect(markup({ onboardingTarget: true, showNext: false })).not.toContain("data-onboarding");
  });
});