@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/tests/map-ui.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { act, render, screen, waitFor } from "@testing-library/react";
+
+import { ServiceInstance } from "hkp-frontend/src/types";
+
+import MapUI from "../MapUI";
+
+/**
+ * The Map panel is shared by every runtime's Map (`map@v1`), so what a pass
+ * says about itself — `error` and `warnings`, notified and never saved — is
+ * shown here once for all of them.
+ */
+
+function createMapService() {
+  const app = {
+    registerNotificationTarget: vi.fn(),
+    unregisterNotificationTarget: vi.fn(),
+    notify: vi.fn(),
+  };
+  return {
+    app,
+    uuid: "map-1",
+    serviceId: "hookup.to/service/map",
+    serviceName: "Map",
+    board: "test-board",
+    configure: vi.fn(),
+    process: vi.fn(),
+    getConfiguration: vi.fn(async () => ({ mode: "replace", template: {} })),
+    destroy: vi.fn(),
+  } as unknown as ServiceInstance;
+}
+
+async function renderMapUI() {
+  const service = createMapService();
+  render(React.createElement(MapUI, { service, onServiceAction: vi.fn() }));
+  await waitFor(() => expect(service.getConfiguration).toHaveBeenCalled());
+  // Every target the panel registered, as the runtime would deliver to them.
+  const targets = (service.app.registerNotificationTarget as any).mock.calls.map(
+    ([, target]: [unknown, (n: unknown) => void]) => target,
+  );
+  return (notification: unknown) =>
+    act(async () => targets.forEach((target: (n: unknown) => void) => target(notification)));
+}
+
+describe("MapUI", () => {
+  it("shows the error and the warnings a pass reported, and clears them", async () => {
+    const notify = await renderMapUI();
+
+    await notify({
+      error: "x: params.n.toFixed is not a function",
+      warnings: ["title: params.titel not found"],
+    });
+    expect(screen.getByText("x: params.n.toFixed is not a function")).toBeTruthy();
+    expect(screen.getByText("title: params.titel not found")).toBeTruthy();
+
+    await notify({ error: "" });
+    await notify({ warnings: [] });
+    expect(screen.queryByText("x: params.n.toFixed is not a function")).toBeNull();
+    expect(screen.queryByText("title: params.titel not found")).toBeNull();
+  });
+
+  it("keeps what it shows when a notification is about something else", async () => {
+    const notify = await renderMapUI();
+
+    await notify({ warnings: ["title: params.titel not found"] });
+    await notify({ mode: "add" });
+    expect(screen.getByText("title: params.titel not found")).toBeTruthy();
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/tests/nested-rhythm-board.test.ts

@@ -0,0 +1,311 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// The registry first, as the app loads it: the sub-service and the registry
+// import each other, and entered from the sub-service side the registry would
+// list the sub-service before it is defined — so no scope could nest another.
+import "../../BrowserRegistry";
+import SoundDescriptor from "../Sound";
+import { BrowserSubService } from "../BrowserSubService";
+import { createSlotStore } from "../../../slots";
+import document from "../../../../../../boards/nested-rhythm-demo-board.json";
+import { linkBlocks } from "../../../../core/linkBlocks";
+
+// The board as it runs: its blocks expanded, the way loading it does.
+const board = linkBlocks(document as any).board as any;
+
+/**
+ * The Nested Rhythm demo board: a groove whose timing is nothing but where each
+ * hit sits in the nesting. One bar of each pattern, played under fake timers,
+ * has to put every drum where the pattern says — and exactly once, since a
+ * scope that handed its answer on twice would double everything after it.
+ */
+
+const EIGHTH_MS = 250;
+
+function makeApp() {
+  const slots = createSlotStore();
+  return {
+    notify: vi.fn(),
+    next: vi.fn(),
+    sendAction: vi.fn(),
+    slots: () => slots,
+  } as any;
+}
+
+class SilentAudioContext {
+  state = "running";
+  resume() {}
+  close() {}
+}
+
+let hits: Array<[number, string]> = [];
+
+beforeEach(() => {
+  vi.useFakeTimers({
+    toFake: ["setTimeout", "clearTimeout", "setInterval", "clearInterval", "Date"],
+  });
+  vi.stubGlobal("AudioContext", SilentAudioContext);
+  hits = [];
+  const start = Date.now();
+  // Every Sound on the board is this class, whichever scope built it.
+  const probe = SoundDescriptor.create(makeApp(), "b", {} as any, "probe");
+  vi.spyOn(Object.getPrototypeOf(probe), "playDrum").mockImplementation(
+    function (_ctx: unknown, drum: unknown) {
+      hits.push([(Date.now() - start) / EIGHTH_MS, drum as string]);
+    },
+  );
+  probe.destroy();
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+function at(drum: string) {
+  return hits.filter(([, d]) => d === drum).map(([eighth]) => eighth);
+}
+
+function entry(pipeline: any[], id: string) {
+  return pipeline.find((e) => e.instanceId === id);
+}
+
+function grooveEntry() {
+  return structuredClone(
+    (board.services.ui as any[]).find((s) => s.uuid === "groove"),
+  );
+}
+
+/** The board's Groove, built as the runtime builds it. */
+async function buildGroove(state = grooveEntry().state) {
+  const app = makeApp();
+  const groove = new BrowserSubService(app, "board", {} as any, "groove");
+  groove.configure(state);
+  await (groove as any)._scopeBuilding;
+  return { groove, app };
+}
+
+/** One bar, entered where the clock's tick enters it. */
+async function playBar(groove: BrowserSubService, beats = 4) {
+  const played = groove.processNested("clock", { triggerCount: 1 });
+  await vi.advanceTimersByTimeAsync(beats * 2 * EIGHTH_MS);
+  return played;
+}
+
+function choose(groove: BrowserSubService, pattern: string) {
+  (groove.getInnerInstance("pattern") as any).configure({ value: pattern });
+}
+
+/** Positions in eighths, to the nearest hundredth — swing is in thirds. */
+function near(values: number[]) {
+  return values.map((v) => Math.round(v * 100) / 100);
+}
+
+const sixteenths = Array.from({ length: 16 }, (_, i) => i / 2);
+
+describe("the Nested Rhythm demo board", () => {
+  it("is one scope holding the tempo and the pattern, a clock, and a Switch over the patterns", () => {
+    const [groove] = board.services.ui as any[];
+    expect(groove.serviceId).toBe("sub-service");
+    expect(groove.state.scope).toEqual({ slots: "own" });
+    expect(groove.state.stopPropagation).toBe(true);
+
+    const pipeline = groove.state.pipeline;
+    expect(pipeline.map((e: any) => e.instanceId)).toEqual([
+      "tempo",
+      "pattern",
+      "clock",
+      "which",
+      "patterns",
+    ]);
+    expect(entry(pipeline, "tempo").state).toEqual({ slot: "tempo", op: "write", value: 120 });
+    expect(entry(pipeline, "pattern").state).toEqual({
+      slot: "pattern",
+      op: "write",
+      value: "straight",
+    });
+    expect(entry(pipeline, "which").state).toEqual({ slot: "pattern", op: "read" });
+    expect(entry(pipeline, "clock").state).toMatchObject({
+      periodic: true,
+      periodicValue: 4,
+      periodicUnit: "beats",
+    });
+    const cases = entry(pipeline, "patterns").state.cases;
+    expect(cases.map((c: any) => c.pipeline[0].instanceId)).toEqual([
+      "straight",
+      "shuffle",
+      "four-on-the-floor",
+      "funk",
+    ]);
+  });
+
+  it("has every scope inside the Groove inherit its slots", () => {
+    // Without it a scope keeps cells of its own, finds no tempo there, and
+    // counts at the default instead of the board's.
+    const scopes: any[] = [];
+    const visit = (value: unknown) => {
+      if (Array.isArray(value)) {
+        value.forEach(visit);
+      } else if (value && typeof value === "object") {
+        const e = value as any;
+        if (e.serviceId === "sub-service") {
+          scopes.push(e);
+        }
+        Object.values(e).forEach(visit);
+      }
+    };
+    visit(entry((board.services.ui as any[])[0].state.pipeline, "patterns"));
+    expect(scopes.length).toBeGreaterThan(20);
+    for (const scope of scopes) {
+      expect(scope.state.scope).toEqual({ slots: "inherit" });
+    }
+  });
+
+  it("plays Straight: kick on 1, snare on 2 and 4, hi-hats on every eighth", async () => {
+    const { groove, app } = await buildGroove();
+    await playBar(groove);
+
+    expect(at("kick")).toEqual([0]);
+    expect(at("snare")).toEqual([2, 6]);
+    expect(at("hihat")).toEqual([0, 1, 2, 3, 4, 5, 6, 7]);
+    // Nothing leaves the Groove, and nothing ran twice.
+    expect(app.next).not.toHaveBeenCalled();
+    groove.destroy();
+  });
+
+  it("plays Shuffle: swung hi-hats, kick on 1 and 3", async () => {
+    const { groove } = await buildGroove();
+    choose(groove, "shuffle");
+    await playBar(groove);
+
+    expect(at("kick")).toEqual([0, 4]);
+    expect(near(at("snare"))).toEqual([2, 6]);
+    // The second hi-hat of each beat two thirds of the way through it.
+    expect(near(at("hihat"))).toEqual([0, 1.33, 2, 3.33, 4, 5.33, 6, 7.33]);
+    groove.destroy();
+  });
+
+  it("plays Four on the floor: a kick on every beat, hi-hats on the off-beats", async () => {
+    const { groove } = await buildGroove();
+    choose(groove, "four-on-the-floor");
+    await playBar(groove);
+
+    expect(at("kick")).toEqual([0, 2, 4, 6]);
+    expect(at("snare")).toEqual([2, 6]);
+    expect(at("hihat")).toEqual([1, 3, 5, 7]);
+    groove.destroy();
+  });
+
+  it("plays Funk: sixteenth hi-hats, kicks pushed onto the and of 2 and of 3", async () => {
+    const { groove } = await buildGroove();
+    choose(groove, "funk");
+    await playBar(groove);
+
+    expect(at("kick")).toEqual([0, 3, 5]);
+    expect(at("snare")).toEqual([2, 6]);
+    expect(at("hihat")).toEqual(sixteenths);
+    groove.destroy();
+  });
+
+  it("follows the tempo held in the Groove, at every level, through the Switch", async () => {
+    const { groove } = await buildGroove();
+    // What the tempo knob does: configure the Hold, which writes the slot.
+    (groove.getInnerInstance("tempo") as any).configure({ value: "60" });
+    await playBar(groove, 8);
+
+    // Half the tempo: every hit twice as far apart.
+    expect(at("snare")).toEqual([4, 12]);
+    expect(at("hihat")).toEqual([0, 2, 4, 6, 8, 10, 12, 14]);
+    groove.destroy();
+  });
+
+  it("counts at the tempo and plays the pattern a board is loaded with", async () => {
+    // The Holds write while the Groove is being built, so what they write has
+    // to land in the cells the Groove goes on using — at 120 this would pass
+    // on the Timer's default alone, so the board is loaded at another tempo.
+    const state = grooveEntry().state;
+    entry(state.pipeline, "tempo").state.value = 240;
+    entry(state.pipeline, "pattern").state.value = "four-on-the-floor";
+    const { groove } = await buildGroove(state);
+    await playBar(groove, 2);
+
+    // Double the tempo: an eighth is half an EIGHTH_MS.
+    expect(at("kick")).toEqual([0, 1, 2, 3]);
+    expect(at("hihat")).toEqual([0.5, 1.5, 2.5, 3.5]);
+    groove.destroy();
+  });
+
+  it("stops at once when the Groove is cancelled mid-bar, and plays again after", async () => {
+    // What Stop does besides stopping the clock: without it the bar already
+    // playing would play out to its end.
+    const { groove } = await buildGroove();
+    const played = groove.processNested("clock", { triggerCount: 1 });
+    await vi.advanceTimersByTimeAsync(3 * EIGHTH_MS + 10);
+    groove.configure({ cancel: true });
+    await vi.advanceTimersByTimeAsync(8 * EIGHTH_MS);
+
+    expect(await played).toBeNull();
+    expect(Math.max(...hits.map(([eighth]) => eighth))).toBe(3);
+
+    hits = [];
+    await playBar(groove);
+    expect(at("hihat")).toHaveLength(8);
+    groove.destroy();
+  });
+
+  it("falls silent when the Groove is destroyed while playing", async () => {
+    // Leaving the board destroys its services: the clock inside the Groove
+    // has to stop with it, not go on playing to a board that is gone.
+    const { groove } = await buildGroove();
+    (groove.getInnerInstance("clock") as any).configure({
+      start: true,
+      immediate: true,
+    });
+    await vi.advanceTimersByTimeAsync(4 * EIGHTH_MS);
+    expect(hits.length).toBeGreaterThan(0);
+
+    groove.destroy();
+    hits = [];
+    await vi.advanceTimersByTimeAsync(16 * EIGHTH_MS);
+    expect(hits).toEqual([]);
+  });
+
+  it("stops the clock it replaces when the pipeline is rebuilt", async () => {
+    const { groove } = await buildGroove();
+    const before = groove.getInnerInstance("clock") as any;
+    before.configure({ start: true, immediate: true });
+
+    groove.configure({ pipeline: grooveEntry().state.pipeline });
+    await (groove as any)._scopeBuilding;
+
+    expect(before.hasSchedule()).toBe(false);
+    groove.destroy();
+  });
+
+  it("reports what happens inside a pattern under its address through the Switch", async () => {
+    // What the overview and the panels listen for: a note inside a case is
+    // reported as groove.patterns.straight.beat-1.kick-1, not under its bare name.
+    const { groove, app } = await buildGroove();
+    await playBar(groove);
+
+    const addresses = new Set(
+      app.notify.mock.calls.map(([svc]: any[]) => svc.address).filter(Boolean),
+    );
+    expect(addresses).toContain("groove.patterns.straight.beat-1.kick-1");
+    // A note is a block of its own, so the sound in it is one level further in.
+    expect(addresses).toContain("groove.patterns.straight.beat-1.hihat-1.sound");
+    groove.destroy();
+  });
+
+  it("saves the tempo and pattern a control set, not the ones it was built with", async () => {
+    const { groove } = await buildGroove();
+    (groove.getInnerInstance("tempo") as any).configure({ value: "90" });
+    choose(groove, "funk");
+
+    const saved = await groove.getConfiguration();
+    expect(entry(saved.pipeline!, "tempo").state).toMatchObject({ value: "90" });
+    expect(entry(saved.pipeline!, "pattern").state).toMatchObject({ value: "funk" });
+    groove.destroy();
+  });
+});

package/bundle/hkp-frontend/src/runtime/browser/services/tests/night-groove-board.test.ts

@@ -0,0 +1,290 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// The registry first, as the app loads it, so the tracks can build what their
+// pipelines name.
+import "../../BrowserRegistry";
+import TimelineDescriptor from "../Timeline";
+import TracksDescriptor from "../BrowserTracks";
+import SoundDescriptor from "../Sound";
+import { createSlotStore } from "../../../slots";
+import document from "../../../../../../boards/night-groove-demo-board.json";
+import { linkBlocks } from "../../../../core/linkBlocks";
+
+/**
+ * The Night Groove demo board: one timeline, counting beats, arranging a drum
+ * groove and a night sky by name. The Show's frames are run through the
+ * board's own Band and Scene — its block uses expanded, as loading it does —
+ * so what is checked is what would be heard and what the canvas would be given.
+ */
+
+// The board as it runs: its blocks expanded, the way loading it does.
+const board = linkBlocks(document as any).board as any;
+const services = board.services.ui as any[];
+const entry = (uuid: string) =>
+  structuredClone(services.find((s) => s.uuid === uuid));
+
+const SCENE = [
+  "sky",
+  "moon",
+  "planet",
+  "star-1",
+  "star-2",
+  "star-3",
+  "star-4",
+  "rocket",
+  "comet",
+] as const;
+type Drawn = Record<(typeof SCENE)[number], any>;
+
+class SilentAudioContext {
+  state = "running";
+  currentTime = 0;
+  resume() {}
+  close() {}
+}
+
+function makeApp(slots = createSlotStore()) {
+  return {
+    notify: vi.fn(),
+    next: vi.fn(),
+    sendAction: vi.fn(),
+    getRuntimeVariable: vi.fn(() => ({})),
+    setRuntimeVariable: vi.fn(),
+    slots: () => slots,
+  } as any;
+}
+
+let slots: ReturnType<typeof createSlotStore>;
+let show: any;
+let showApp: any;
+let band: any;
+let scene: any;
+let drawnUpTo = 0;
+/** Each drum played, at the Show's time in beats. */
+let hits: Array<[number, string]> = [];
+let now = 0;
+
+beforeEach(async () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(0);
+  vi.stubGlobal("AudioContext", SilentAudioContext);
+  drawnUpTo = 0;
+  hits = [];
+  // Every Sound on the board is this class, whichever scope built it.
+  const probe = SoundDescriptor.create(makeApp(), "b", {} as any, "probe");
+  vi.spyOn(Object.getPrototypeOf(probe), "playDrum").mockImplementation(
+    function (_ctx: unknown, drum: unknown) {
+      hits.push([now, drum as string]);
+    },
+  );
+  probe.destroy();
+
+  slots = createSlotStore();
+  slots.set("tempo", entry("tempo").state.value);
+  showApp = makeApp(slots);
+  show = TimelineDescriptor.create(showApp, "board", {} as any, "show");
+  band = TracksDescriptor.create(makeApp(slots), "board", {} as any, "band");
+  band.configure(entry("band").state);
+  scene = TracksDescriptor.create(makeApp(slots), "board", {} as any, "scene");
+  scene.configure(entry("scene").state);
+});
+
+afterEach(() => {
+  show.destroy();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+/**
+ * Plays the Show for `ms` and runs each of its frames through the Band and
+ * then the Scene, in order — the timelines inside remember the frame before.
+ */
+async function play(ms: number) {
+  show.configure({ ...entry("show").state, running: true });
+  vi.advanceTimersByTime(ms);
+  const frames = showApp.next.mock.calls.slice(drawnUpTo).map(([, f]: any) => f);
+  drawnUpTo = showApp.next.mock.calls.length;
+  const out: { t: number; drawn: Drawn }[] = [];
+  for (const frame of frames) {
+    now = frame.t;
+    const carried = await band.process(frame);
+    const answers = await scene.process(carried);
+    const drawn = Object.fromEntries(SCENE.map((name, i) => [name, answers[i]]));
+    out.push({ t: frame.t, drawn: drawn as Drawn });
+  }
+  return out;
+}
+
+function at(frames: { t: number; drawn: Drawn }[], t: number): Drawn {
+  return frames.reduce((best, f) =>
+    Math.abs(f.t - t) < Math.abs(best.t - t) ? f : best,
+  ).drawn;
+}
+
+/** Where a drum was hit, in beats, to the frame it fell in. */
+function beatsOf(drum: string, from = 0, to = Infinity) {
+  return hits
+    .filter(([t, d]) => d === drum && t >= from && t < to)
+    .map(([t]) => t);
+}
+
+/** Whether every hit lies within a frame after one of the beats given, and every beat was hit once. */
+function expectOnBeats(played: number[], beats: number[]) {
+  // 60 frames a second at 120 BPM: a frame is 1/30 of a beat.
+  const frame = 1 / 30 + 1e-9;
+  expect(played).toHaveLength(beats.length);
+  played.forEach((t, i) => {
+    expect(t).toBeGreaterThanOrEqual(beats[i] - 1e-9);
+    expect(t - beats[i]).toBeLessThan(frame);
+  });
+}
+
+/**
+ * Four bars at 120 BPM, stopping short of the frame that lands on the loop —
+ * that frame is the first beat of the next pass.
+ */
+const ONE_PASS_MS = 7990;
+
+const range = (from: number, to: number, step: number) =>
+  Array.from({ length: Math.round((to - from) / step) }, (_, i) => from + i * step);
+
+describe("the Night Groove demo board", () => {
+  it("is a tempo, a Show counting beats, a Band, a Scene and a canvas", () => {
+    expect(services.map((s) => s.uuid)).toEqual([
+      "tempo",
+      "show",
+      "band",
+      "scene",
+      "canvas",
+    ]);
+    expect(entry("tempo").state).toMatchObject({ slot: "tempo", op: "write" });
+    expect(entry("show").state).toMatchObject({
+      clock: "own",
+      unit: "beats",
+      tempoSlot: "tempo",
+      length: 16,
+      loop: true,
+    });
+    expect(entry("band").state.tracks.map((t: any) => t.name)).toEqual([
+      "hats",
+      "kick",
+      "snare",
+      "fill",
+    ]);
+    expect(entry("scene").state.tracks.map((t: any) => t.name)).toEqual(SCENE);
+  });
+
+  it("writes each drum and each motion once, as blocks", () => {
+    const doc = document as any;
+    expect(doc.blocks.map((b: any) => b.id)).toEqual(["drum", "pop", "fly"]);
+    const uses = (uuid: string) =>
+      doc.services.ui
+        .find((s: any) => s.uuid === uuid)
+        .state.tracks.map((t: any) => t.pipeline[0].block)
+        .filter(Boolean);
+    expect(uses("band")).toEqual(["drum", "drum", "drum", "drum"]);
+    expect(uses("scene")).toEqual(["pop", "pop", "pop", "pop", "pop", "fly", "fly"]);
+  });
+
+  it("places every name something takes, and nothing takes a name never placed", () => {
+    const placed = new Set(entry("show").state.placements.map((p: any) => p.name));
+    const taken = new Set<string>();
+    JSON.stringify((document as any).services, (key, value) => {
+      if (key === "params" && typeof value?.name === "string") {
+        taken.add(value.name);
+      }
+      if (key === "placement" && value) {
+        taken.add(value);
+      }
+      return value;
+    });
+    expect(taken).toEqual(placed);
+  });
+
+  it("passes the Show's frame through the Band unchanged", async () => {
+    await play(100);
+    const frame = showApp.next.mock.calls.at(-1)[1];
+    expect(await band.process(frame)).toEqual(frame);
+  });
+
+  it("plays eighth-note hi-hats through all four bars", async () => {
+    await play(ONE_PASS_MS);
+    expectOnBeats(beatsOf("hihat"), range(0, 16, 0.5));
+  });
+
+  it("brings the kick in on the second bar, on every beat", async () => {
+    await play(ONE_PASS_MS);
+    expectOnBeats(beatsOf("kick"), range(4, 16, 1));
+  });
+
+  it("puts the snare on the backbeat of bars three and four, then fills the last two beats", async () => {
+    await play(ONE_PASS_MS);
+    expectOnBeats(beatsOf("snare"), [9, 11, 13, 14, 14.5, 15, 15.25, 15.5, 15.75]);
+  });
+
+  it("follows the tempo: at 60 BPM a bar takes twice as long", async () => {
+    slots.set("tempo", 60);
+    // Two beats, stopping short of the frame that lands on the third.
+    await play(1990);
+    expectOnBeats(beatsOf("hihat"), range(0, 2, 0.5));
+  });
+
+  it("stays silent while paused", async () => {
+    await play(1000);
+    const before = hits.length;
+    show.configure({ pause: true });
+    vi.advanceTimersByTime(2000);
+    expect(showApp.next.mock.calls.length).toBe(drawnUpTo);
+    expect(hits).toHaveLength(before);
+  });
+
+  it("beats the moon with the kick: absent before it, largest on each beat", async () => {
+    const frames = await play(8000);
+    expect(at(frames, 3.5)["moon"]).toBeNull();
+    const moon = (t: number) => Number(at(frames, t)["moon"].radius.replace("%", ""));
+    expect(at(frames, 4)["moon"]).toMatchObject({ type: "circle", color: "#fde68a" });
+    // Sampled a frame after each beat: the frame nearest the beat may be the
+    // last of the one before.
+    expect(moon(6.02)).toBeGreaterThan(9.5);
+    expect(moon(6.5)).toBeCloseTo(7, 5);
+    expect(moon(7.02)).toBeGreaterThan(9.5);
+  });
+
+  it("pops a star in on each beat of the first bar", async () => {
+    const frames = await play(4000);
+    for (const [name, beat] of [
+      ["star-1", 0],
+      ["star-2", 1],
+      ["star-3", 2],
+      ["star-4", 3],
+    ] as const) {
+      if (beat > 0) {
+        expect(at(frames, beat - 0.1)[name]).toBeNull();
+      }
+      expect(at(frames, beat + 0.1)[name]).toMatchObject({ type: "image" });
+    }
+  });
+
+  it("launches the rocket with the kick and brings the planet in with the snare", async () => {
+    const frames = await play(8000);
+    expect(at(frames, 3.9)["rocket"]).toBeNull();
+    expect(at(frames, 4.1)["rocket"]).toMatchObject({ type: "image" });
+    expect(at(frames, 7.9)["planet"]).toBeNull();
+    expect(at(frames, 8.1)["planet"]).toMatchObject({ type: "image", height: "45%" });
+  });
+
+  it("sends the comet across with the fill", async () => {
+    const frames = await play(8000);
+    expect(at(frames, 13.9)["comet"]).toBeNull();
+    const x = (d: any) => Number(d.centerX.replace("%", ""));
+    expect(Math.abs(x(at(frames, 15)["comet"]) - 50)).toBeLessThan(3);
+  });
+
+  it("starts the groove over when the show loops", async () => {
+    await play(10000);
+    const second = beatsOf("hihat").filter((t, i, all) => i > 0 && t < all[i - 1]);
+    expect(second).toHaveLength(1);
+    expect(beatsOf("kick", 0, 4).length).toBe(0);
+  });
+});