import { afterEach, describe, expect, it } from "vitest";
import { observeOutOfStock, resolveOutOfStockValues } from "./outOfStock";

describe("out-of-stock AJAX cache ownership", () => {
  afterEach(() => {
    document.body.innerHTML = "";
    delete window.jQuery;
  });

  it("keeps a sibling observer's form cache until the final unsubscribe", () => {
    document.body.innerHTML = `
      <form class="variations_form" data-product_variations="false">
        <select name="attribute_color" data-b3-wvs-out-of-stock-values='["Red"]'><option value="Red">Red</option></select>
        <select name="attribute_size" data-b3-wvs-out-of-stock-values='["S"]'><option value="S">S</option></select>
      </form>
    `;
    const [color, size] = Array.from(
      document.querySelectorAll<HTMLSelectElement>("select"),
    );
    const handlers = new Map<string, (...args: unknown[]) => void>();
    const wrapper = {
      on(events: string, handler: (...args: unknown[]) => void) {
        handlers.set(events, handler);
        return wrapper;
      },
      off() {
        return wrapper;
      },
    };
    window.jQuery = (() => wrapper) as unknown as JQueryStatic;

    const stopColor = observeOutOfStock(color, () => undefined);
    const stopSize = observeOutOfStock(size, () => undefined);
    handlers.get("found_variation.b3wvsoos")?.(
      {},
      {
        variation_id: 1,
        is_in_stock: true,
        is_purchasable: true,
        attributes: { attribute_color: "Red", attribute_size: "S" },
      },
    );

    stopColor();
    expect(resolveOutOfStockValues(size, ["S"])).not.toContain("S");

    stopSize();
    expect(resolveOutOfStockValues(size, ["S"])).toContain("S");
  });
});