// @vitest-environment jsdom
import { describe, it, expect, beforeAll, afterEach } from "vitest";
import { render, cleanup, fireEvent } from "@testing-library/react";
import { useScrollFade } from "./useScrollFade";

beforeAll(() => {
  class Stub {
    observe() {}
    unobserve() {}
    disconnect() {}
  }
  globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
});
afterEach(cleanup);

function Scroller({ fadeTop = true }: { fadeTop?: boolean }) {
  const fade = useScrollFade(20, fadeTop);
  const { ref } = fade;
  return <div data-testid="s" ref={ref} style={fade.style} />;
}

/** A scroller 100 px tall over 300 px of content, scrolled to `top`. */
function scrolledTo(el: HTMLElement, top: number) {
  Object.defineProperties(el, {
    clientHeight: { configurable: true, value: 100 },
    scrollHeight: { configurable: true, value: 300 },
    scrollTop: { configurable: true, value: top, writable: true },
  });
  fireEvent.scroll(el);
}

// iPad WebKit kept a scrolled container's mask stuck to the content: at the bottom of a scrolled page
// the last strip (a table's pager) sat under a dark band. With no edge to fade there is no mask.
describe("useScrollFade", () => {
  it("masks the edge that is clipped", () => {
    const { getByTestId } = render(<Scroller />);
    const el = getByTestId("s");
    scrolledTo(el, 0);
    expect(el.style.maskImage).toContain("calc(100% - 20px)");
  });

  it("sets no mask once nothing fades, and keeps the layer it made", () => {
    const { getByTestId } = render(<Scroller fadeTop={false} />);
    const el = getByTestId("s");
    scrolledTo(el, 200);
    expect(el.style.maskImage).toBe("");
    expect(el.style.isolation).toBe("isolate");
  });
});