Jyotisha/frontend/tests/onboarding-hint-observer.test.tsx

import "./install-test-document";
import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
import test from "node:test";

import { OnboardingHintLayer } from "../src/components/onboarding-hint-layer.tsx";
import { shouldAttachHintObserver, type HintFacts } from "../src/lib/onboarding-hints.ts";
import { OnboardingJourneyContext, type OnboardingJourney } from "../src/lib/onboarding-journey.tsx";
import { ONBOARDING_HINT_IDS } from "../src/lib/onboarding-state.ts";
import { createClientLifecycleHarness } from "./react-client-lifecycle-test-support.ts";

const layerSource = readFileSync(new URL("../src/components/onboarding-hint-layer.tsx", import.meta.url), "utf8");

function facts(patch: Partial<HintFacts> = {}): HintFacts {
  return {
    hintsSeen: [],
    followUpArmed: false,
    chartVisited: false,
    sidebarOpen: false,
    activeChartTab: null,
    synReady: false,
    ephemerisArmed: false,
    blocked: false,
    anchors: {},
    ...patch,
  };
}

function journey(hintWatch: boolean): OnboardingJourney {
  return {
    showChecklist: false,
    checklistPending: false,
    userId: "",
    items: [],
    label: "",
    celebration: false,
    activeHint: null,
    hintText: "",
    showChartDot: false,
    tabHasDot: () => false,
    dismissChecklist: () => {},
    dismissHint: async () => true,
    go: () => {},
    setChartTab: () => {},
    markChartVisited: () => {},
    setChecklistOpen: () => {},
    setLive: () => {},
    registerHome: () => {},
    hintWatch,
    motionEnabled: false,
  };
}

function installObserverCount() {
  let live = 0;
  class CountingObserver {
    constructor(_callback: MutationCallback) { live += 1; }
    observe() {}
    disconnect() { live -= 1; }
    takeRecords() { return []; }
  }
  globalThis.MutationObserver = CountingObserver as unknown as typeof MutationObserver;
  return () => live;
}

test("a full hint list or a closed checklist attaches no observer", async () => {
  assert.doesNotMatch(layerSource, /observe\(\s*document\.body,\s*\{[^}]*subtree:\s*true/);
  const armed = facts({ followUpArmed: true, sidebarOpen: true });
  assert.equal(shouldAttachHintObserver({
    checklistClosed: false,
    streaming: false,
    facts: facts({ hintsSeen: [...ONBOARDING_HINT_IDS], followUpArmed: true }),
  }), false);
  assert.equal(shouldAttachHintObserver({ checklistClosed: true, streaming: false, facts: armed }), false);
  assert.equal(shouldAttachHintObserver({ checklistClosed: false, streaming: false, facts: armed }), true);

  const live = installObserverCount();
  const harness = createClientLifecycleHarness();
  try {
    await harness.render(
      <OnboardingJourneyContext.Provider value={journey(shouldAttachHintObserver({
        checklistClosed: false,
        streaming: false,
        facts: facts({ hintsSeen: [...ONBOARDING_HINT_IDS], followUpArmed: true }),
      }))}>
        <OnboardingHintLayer />
      </OnboardingJourneyContext.Provider>,
    );
    await harness.idle();
    await harness.render(
      <OnboardingJourneyContext.Provider value={journey(shouldAttachHintObserver({
        checklistClosed: true,
        streaming: false,
        facts: armed,
      }))}>
        <OnboardingHintLayer />
      </OnboardingJourneyContext.Provider>,
    );
    await harness.idle();
    assert.equal(live(), 0);
    assert.equal(harness.errors.length, 0, harness.errors.map(String).join("\n"));
  } finally {
    await harness.close();
  }
});

function StreamingPage({ count, hintWatch }: { count: number; hintWatch: boolean }) {
  return (
    <OnboardingJourneyContext.Provider value={journey(hintWatch)}>
      <OnboardingHintLayer />
      <div>{Array.from({ length: count }, (_, index) => <span key={index}>字</span>)}</div>
    </OnboardingJourneyContext.Provider>
  );
}

test("two hundred streaming fragments do not scan for hints", async () => {
  const armed = facts({ followUpArmed: true, sidebarOpen: true });
  assert.equal(shouldAttachHintObserver({ checklistClosed: false, streaming: true, facts: armed }), false);
  const harness = createClientLifecycleHarness();
  let streaming = false;
  let scans = 0;
  const countScan = (selector: string) => {
    if (streaming && selector.includes("data-onboarding")) scans += 1;
    return selector.includes("All") ? [] : null;
  };
  harness.document.querySelector = ((selector: string) => countScan(selector)) as typeof harness.document.querySelector;
  harness.document.querySelectorAll = ((selector: string) => countScan(selector) ?? []) as typeof harness.document.querySelectorAll;
  try {
    await harness.render(<StreamingPage count={0} hintWatch={shouldAttachHintObserver({
      checklistClosed: false,
      streaming: false,
      facts: armed,
    })} />);
    await harness.idle();
    streaming = true;
    for (let count = 1; count <= 200; count += 1) {
      await harness.render(<StreamingPage count={count} hintWatch={shouldAttachHintObserver({
        checklistClosed: false,
        streaming: true,
        facts: armed,
      })} />);
    }
    await harness.idle();
    assert.equal(scans, 0);
    assert.equal(harness.errors.length, 0, harness.errors.map(String).join("\n"));
  } finally {
    await harness.close();
  }
});