@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/tests/timeline-ui-model.test.ts

@@ -0,0 +1,230 @@
+/**
+ * The Timeline panel's edits: each one a function from what the service holds
+ * to what to configure it with.
+ */
+import { describe, expect, it } from "vitest";
+import {
+  describeData,
+  addAction,
+  displayLength,
+  EMPTY_VIEW,
+  moveAction,
+  moveKeyframe,
+  objectAt,
+  parseFieldValue,
+  propertiesOf,
+  readView,
+  removeKeyframe,
+  setEase,
+  setValue,
+  snap,
+  TimelineView,
+  toggleKey,
+  valueOf,
+  withImage,
+  addPlacement,
+  indexOfPlacement,
+  movePlacement,
+  placementNames,
+  placementNote,
+  renamePlacements,
+  resizePlacement,
+} from "../TimelineUI/model";
+
+const image = { type: "image", url: "a.png", height: "20%" };
+const view = (over: Partial<TimelineView> = {}): TimelineView => ({
+  ...EMPTY_VIEW,
+  object: image,
+  length: 4,
+  ...over,
+});
+const rotate = [
+  { at: 0, value: 0 },
+  { at: 2, value: 360 },
+];
+
+describe("reading the service", () => {
+  it("takes what a notification says over what the panel has", () => {
+    const next = readView({ t: 1.5, running: true, unknown: 1 }, view());
+    expect(next.t).toBe(1.5);
+    expect(next.running).toBe(true);
+    expect(next.object).toBe(image);
+    expect((next as any).unknown).toBeUndefined();
+  });
+
+  it("shows a bounded timeline's length, and room past an unbounded one's contents", () => {
+    expect(displayLength(view())).toBe(4);
+    expect(displayLength(view({ length: 0, actions: [{ at: 8 }] }))).toBe(10);
+    expect(displayLength(view({ length: 0 }))).toBe(4);
+  });
+
+  it("offers an image's properties, then any other keyframed", () => {
+    expect(propertiesOf(view({ keyframes: { blur: rotate } }), ["glow"])).toEqual([
+      "centerX",
+      "centerY",
+      "height",
+      "rotate",
+      "scale",
+      "opacity",
+      "blur",
+      "glow",
+    ]);
+  });
+
+  it("reads a value from its keyframes, else the object, else its default", () => {
+    const v = view({ keyframes: { rotate } });
+    expect(valueOf(v, "rotate", 1)).toBe(180);
+    expect(valueOf(v, "height", 1)).toBe("20%");
+    expect(valueOf(v, "scale", 1)).toBe(1);
+    expect(objectAt(v, 1)).toEqual({ ...image, rotate: 180 });
+  });
+});
+
+describe("setting values", () => {
+  it("changes a fixed value of the object when the property is not animated", () => {
+    expect(setValue(view(), "height", 1, "40%")).toEqual({
+      object: { ...image, height: "40%" },
+    });
+  });
+
+  it("sets a keyframe at the playhead on an animated property", () => {
+    const { keyframes } = setValue(view({ keyframes: { rotate } }), "rotate", 1, 90);
+    expect(keyframes!.rotate).toEqual([
+      { at: 0, value: 0 },
+      { at: 1, value: 90 },
+      { at: 2, value: 360 },
+    ]);
+  });
+
+  it("changes the keyframe already at the playhead", () => {
+    const { keyframes } = setValue(view({ keyframes: { rotate } }), "rotate", 2.01, 720);
+    expect(keyframes!.rotate).toEqual([
+      { at: 0, value: 0 },
+      { at: 2, value: 720 },
+    ]);
+  });
+
+  it("reads numbers typed into a field as numbers", () => {
+    expect(parseFieldValue(" 42 ")).toBe(42);
+    expect(parseFieldValue("30%")).toBe("30%");
+  });
+});
+
+describe("the key button", () => {
+  it("starts animating a fixed value with a keyframe at its value", () => {
+    expect(toggleKey(view(), "height", 1.02).keyframes).toEqual({
+      height: [{ at: 1, value: "20%" }],
+    });
+  });
+
+  it("adds a keyframe at the value the property has there", () => {
+    const { keyframes } = toggleKey(view({ keyframes: { rotate } }), "rotate", 0.5);
+    expect(keyframes!.rotate[1]).toEqual({ at: 0.5, value: 90 });
+  });
+
+  it("takes away the keyframe at the playhead", () => {
+    const { keyframes } = toggleKey(view({ keyframes: { rotate } }), "rotate", 2);
+    expect(keyframes!.rotate).toEqual([{ at: 0, value: 0 }]);
+  });
+
+  it("leaves the last keyframe's value as the object's when it is taken away", () => {
+    const v = view({ keyframes: { rotate: [{ at: 1, value: 45 }] } });
+    expect(removeKeyframe(v, "rotate", 0)).toEqual({
+      keyframes: {},
+      object: { ...image, rotate: 45 },
+    });
+  });
+});
+
+describe("moving and easing", () => {
+  it("moves a keyframe, snapped, and says where it went", () => {
+    const moved = moveKeyframe({ rotate }, "rotate", 0, 3.013);
+    expect(moved.keyframes.rotate.map((k) => k.at)).toEqual([2, 3]);
+    expect(moved.index).toBe(1);
+  });
+
+  it("eases the way a value leaves a keyframe", () => {
+    expect(setEase({ rotate }, "rotate", 0, "in-out").rotate[0].ease).toBe("in-out");
+  });
+
+  it("places and moves actions on the snap, keeping their order", () => {
+    const actions = addAction([{ at: 1, data: "a" }], 0.51);
+    expect(actions).toEqual([
+      { at: 1, data: "a" },
+      { at: 0.5, data: {} },
+    ]);
+    expect(moveAction(actions, 0, 2.22)[0].at).toBe(2.2);
+    expect(snap(-1)).toBe(0);
+  });
+});
+
+describe("dropping an image", () => {
+  it("changes what an image shows, keeping how it is placed", () => {
+    expect(withImage(image, "b.png")).toEqual({ ...image, url: "b.png" });
+  });
+
+  it("makes anything else an image, centred", () => {
+    expect(withImage(null, "b.png")).toEqual({
+      type: "image",
+      url: "b.png",
+      centerX: "50%",
+      centerY: "50%",
+      height: "60%",
+    });
+  });
+});
+
+describe("placements", () => {
+  const placements = [
+    { name: "a", at: 0, duration: 2 },
+    { name: "b", at: 1, duration: 1 },
+    { name: "a", at: 3, duration: 1 },
+  ];
+
+  it("shows each name once, in the order it first starts", () => {
+    expect(placementNames(placements)).toEqual(["a", "b"]);
+  });
+
+  it("places a name at the playhead for a unit, snapped", () => {
+    expect(addPlacement([], "c", 1.52)).toEqual([{ name: "c", at: 1.5, duration: 1 }]);
+  });
+
+  it("moves and resizes one placement, never shorter than a snap", () => {
+    expect(movePlacement(placements, 1, 2.01)[1].at).toBe(2);
+    expect(resizePlacement(placements, 1, 0)[1].duration).toBe(0.05);
+  });
+
+  it("renames every placement of a name", () => {
+    expect(renamePlacements(placements, "a", "z").map((p) => p.name)).toEqual(["z", "b", "z"]);
+  });
+
+  it("finds a placement again after the list is sorted", () => {
+    const moved = movePlacement(placements, 0, 5);
+    const sorted = [...moved].sort((x, y) => x.at - y.at);
+    expect(indexOfPlacement(sorted, moved[0])).toBe(2);
+  });
+
+  it("warns when nothing places the name a timeline takes", () => {
+    const view = { ...EMPTY_VIEW, placement: "star", placementStatus: "unplaced" as const };
+    expect(placementNote(view)).toEqual({ text: 'nothing places "star"', warn: true });
+    expect(placementNote({ ...view, placementStatus: "playing" })?.warn).toBe(false);
+    expect(placementNote(EMPTY_VIEW)).toBeNull();
+  });
+
+  it("makes room on an unbounded axis for the last placement", () => {
+    expect(displayLength({ ...EMPTY_VIEW, placements: [{ name: "a", at: 6, duration: 2 }] })).toBe(10);
+  });
+});
+
+
+describe("describeData", () => {
+  it("writes JSON out, and lets it be edited as text", () => {
+    expect(describeData({ note: 60 })).toEqual({ text: '{"note":60}', editable: true });
+    expect(describeData(undefined)).toEqual({ text: "null", editable: true });
+  });
+
+  it("describes recorded data that is not JSON, and keeps it from being edited", () => {
+    const blob = new Blob([new Uint8Array(3000)], { type: "audio/webm" });
+    expect(describeData(blob)).toEqual({ text: "audio/webm, 3 KB", editable: false });
+  });
+});

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

@@ -0,0 +1,371 @@
+/**
+ * The Timeline's panel and editor, on a real Timeline: what is pressed or
+ * typed configures the service, and what the service says comes back to the
+ * panel through its notifications, as on a board.
+ */
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import TimelineDescriptor from "../Timeline";
+import BlockUseFrame from "../../../ui/BlockUse";
+
+const image = { type: "image", url: "a.png", height: "20%" };
+const rotate = [
+  { at: 0, value: 0 },
+  { at: 2, value: 360 },
+];
+
+function createTimeline(state: Record<string, unknown>) {
+  const targets = new Set<(n: any) => void>();
+  const app = {
+    notify: (_svc: unknown, n: any) => targets.forEach((target) => target(n)),
+    next: vi.fn(),
+    sendAction: vi.fn(),
+    registerNotificationTarget: (_svc: unknown, target: (n: any) => void) =>
+      targets.add(target),
+    unregisterNotificationTarget: (_svc: unknown, target: (n: any) => void) =>
+      targets.delete(target),
+  };
+  const service = TimelineDescriptor.create(app as any, "board", {} as any, "tl") as any;
+  service.configure(state);
+  return { service, app };
+}
+
+async function renderTimeline(
+  state: Record<string, unknown>,
+  { insideBlockUse = false } = {},
+) {
+  const { service, app } = createTimeline(state);
+  const configure = vi.spyOn(service, "configure");
+  const UI = TimelineDescriptor.createUI;
+  const panel = React.createElement(UI, { service, onServiceAction: vi.fn() } as any);
+  render(
+    insideBlockUse
+      ? React.createElement(BlockUseFrame, { address: "tl", locked: true }, panel)
+      : panel,
+  );
+  await screen.findByText(/\/ 4\.00 s/);
+  return { service, app, configure };
+}
+
+/** Presses an element at a fraction of its width. */
+function pressAt(element: Element, fraction: number) {
+  fireEvent.pointerDown(element, { clientX: 400 * fraction, pointerId: 1 });
+  fireEvent.pointerUp(element, { pointerId: 1 });
+}
+
+/** The value field on a property's row in the editor. */
+function fieldOf(property: string): HTMLInputElement {
+  const row = screen.getByText(property).parentElement as HTMLElement;
+  return row.querySelector("input") as HTMLInputElement;
+}
+
+function openEditor() {
+  fireEvent.click(screen.getByTitle("Show the timeline's rows"));
+  return screen.findByText("actions");
+}
+
+// jsdom has no PointerEvent, and the plain Event it falls back to carries no
+// position; a MouseEvent does.
+if (typeof window.PointerEvent === "undefined") {
+  class PointerEvent extends MouseEvent {
+    pointerId: number;
+    constructor(type: string, init: PointerEventInit = {}) {
+      super(type, init);
+      this.pointerId = init.pointerId ?? 0;
+    }
+  }
+  (window as any).PointerEvent = PointerEvent;
+}
+
+beforeEach(() => {
+  // jsdom lays nothing out: every element is 400 px wide from the left edge.
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+    left: 0,
+    top: 0,
+    width: 400,
+    height: 20,
+    right: 400,
+    bottom: 20,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect);
+  HTMLElement.prototype.setPointerCapture = vi.fn();
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("the Timeline panel", () => {
+  it("plays and pauses the timeline's own clock", async () => {
+    const { service, configure } = await renderTimeline({ length: 4, object: image });
+    fireEvent.click(screen.getByTitle("Play"));
+    expect(configure).toHaveBeenCalledWith({ play: true });
+    await screen.findByTitle("Pause");
+    fireEvent.click(screen.getByTitle("Pause"));
+    expect(service.state.running).toBe(false);
+  });
+
+  it("seeks where the ruler is pressed, and the playhead follows", async () => {
+    const { configure } = await renderTimeline({ length: 4, object: image });
+    const ruler = screen.getByText("0").closest(".cursor-ew-resize") as HTMLElement;
+    pressAt(ruler, 0.5);
+    expect(configure).toHaveBeenCalledWith({ seek: 2 });
+    await screen.findByText(/^2\.00/);
+  });
+
+  it("offers to choose an image to animate", async () => {
+    await renderTimeline({ length: 4 });
+    expect(screen.getByTitle("Choose an image to animate")).toBeTruthy();
+  });
+
+  it("grows to show its rows in place, and back", async () => {
+    await renderTimeline({ length: 4, object: image });
+    expect(screen.queryByText("actions")).toBeNull();
+    await openEditor();
+    expect(screen.queryByRole("dialog")).toBeNull();
+    expect(screen.getByText("rotate")).toBeTruthy();
+    fireEvent.click(screen.getByTitle("Back to the compact view"));
+    await waitFor(() => expect(screen.queryByText("actions")).toBeNull());
+  });
+});
+
+describe("the Timeline editor", () => {
+  it("sets the value of a keyframed property at the playhead as a keyframe", async () => {
+    const { service } = await renderTimeline({ length: 4, object: image, keyframes: { rotate } });
+    await openEditor();
+    act(() => service.configure({ seek: 1 }));
+    await waitFor(() => expect(fieldOf("rotate").value).toBe("180"));
+
+    const field = fieldOf("rotate");
+    fireEvent.focus(field);
+    fireEvent.change(field, { target: { value: "90" } });
+    fireEvent.keyDown(field, { key: "Enter" });
+    fireEvent.blur(field);
+
+    expect(service.state.keyframes.rotate).toEqual([
+      { at: 0, value: 0 },
+      { at: 1, value: 90 },
+      { at: 2, value: 360 },
+    ]);
+  });
+
+  it("changes a fixed value of the object when the property is not animated", async () => {
+    const { service } = await renderTimeline({ length: 4, object: image });
+    await openEditor();
+    const field = fieldOf("height");
+    fireEvent.focus(field);
+    fireEvent.change(field, { target: { value: "40%" } });
+    fireEvent.blur(field);
+    expect(service.state.object).toEqual({ ...image, height: "40%" });
+    expect(service.state.keyframes).toEqual({});
+  });
+
+  it("starts animating a property from its key button", async () => {
+    const { service } = await renderTimeline({ length: 4, object: image });
+    await openEditor();
+    const row = screen.getByText("height").parentElement as HTMLElement;
+    fireEvent.click(row.querySelector("button[title='Set a keyframe here']")!);
+    expect(service.state.keyframes).toEqual({ height: [{ at: 0, value: "20%" }] });
+  });
+
+  it("moves a keyframe dragged along its lane, and eases it once picked", async () => {
+    const { service } = await renderTimeline({ length: 4, object: image, keyframes: { rotate } });
+    await openEditor();
+    const diamond = screen.getByTitle("360 at 2.00");
+    const lane = diamond.parentElement as HTMLElement;
+    fireEvent.pointerDown(diamond, { clientX: 200, pointerId: 1 });
+    fireEvent.pointerMove(lane, { clientX: 300, pointerId: 1 });
+    fireEvent.pointerUp(lane, { pointerId: 1 });
+    expect(service.state.keyframes.rotate).toEqual([
+      { at: 0, value: 0 },
+      { at: 3, value: 360 },
+    ]);
+
+    fireEvent.pointerDown(screen.getByTitle("0 at 0.00"), { pointerId: 1 });
+    await screen.findByText(/towards the next keyframe/);
+    expect(screen.getByText("rotate at 0.00: 0")).toBeTruthy();
+  });
+
+  it("places an action at the playhead and edits what it emits", async () => {
+    const { service } = await renderTimeline({ length: 4, object: image });
+    await openEditor();
+    fireEvent.click(screen.getByTitle("Place an action at the playhead"));
+    expect(service.state.actions).toEqual([{ at: 0, data: {} }]);
+
+    const data = await screen.findByText(/emits/);
+    const field = data.parentElement!.querySelector("input")!;
+    fireEvent.change(field, { target: { value: '{"scene":"b"}' } });
+    fireEvent.blur(field);
+    expect(service.state.actions).toEqual([{ at: 0, data: { scene: "b" } }]);
+  });
+});
+
+describe("placing names", () => {
+  it("places a name at the playhead, and moves and stretches its bar", async () => {
+    const { service } = await renderTimeline({ length: 4 });
+    await openEditor();
+    const name = await screen.findByPlaceholderText("+ place a name at the playhead");
+    fireEvent.change(name, { target: { value: "star" } });
+    fireEvent.keyDown(name, { key: "Enter" });
+    expect(service.state.placements).toEqual([{ name: "star", at: 0, duration: 1 }]);
+
+    const bar = await screen.findByTitle("star: 0.00 for 1.00");
+    const lane = bar.parentElement as HTMLElement;
+    fireEvent.pointerDown(bar, { clientX: 0, pointerId: 1 });
+    fireEvent.pointerMove(lane, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerUp(lane, { pointerId: 1 });
+    expect(service.state.placements).toEqual([{ name: "star", at: 1, duration: 1 }]);
+
+    const edge = (await screen.findByTitle("star: 1.00 for 1.00")).querySelector(
+      "[title='Drag to change how long it plays']",
+    ) as HTMLElement;
+    fireEvent.pointerDown(edge, { clientX: 200, pointerId: 1 });
+    fireEvent.pointerMove(lane, { clientX: 300, pointerId: 1 });
+    fireEvent.pointerUp(lane, { pointerId: 1 });
+    expect(service.state.placements).toEqual([{ name: "star", at: 1, duration: 2 }]);
+    await waitFor(() =>
+      expect((screen.getByTitle("Lasts") as HTMLInputElement).value).toBe("2"),
+    );
+    expect((screen.getByTitle("Starts at") as HTMLInputElement).value).toBe("1");
+
+    const lasts = screen.getByTitle("Lasts") as HTMLInputElement;
+    fireEvent.focus(lasts);
+    fireEvent.change(lasts, { target: { value: "0.5" } });
+    fireEvent.blur(lasts);
+    expect(service.state.placements).toEqual([{ name: "star", at: 1, duration: 0.5 }]);
+  });
+});
+
+describe("a driven Timeline", () => {
+  it("pins its playhead where it is pressed instead of seeking, until told to follow", async () => {
+    const { configure } = await renderTimeline({
+      clock: "input",
+      length: 4,
+      object: image,
+    });
+    const ruler = screen.getByText("0").closest(".cursor-ew-resize") as HTMLElement;
+    pressAt(ruler, 0.75);
+    expect(configure).not.toHaveBeenCalledWith({ seek: expect.anything() });
+    await screen.findByText(/^3\.00/);
+
+    fireEvent.click(screen.getByTitle("Follow the time driving this timeline again"));
+    await screen.findByText(/^0\.00/);
+  });
+
+  it("says when nothing places the name it takes", async () => {
+    const { service } = await renderTimeline({
+      clock: "input",
+      length: 4,
+      object: image,
+      placement: "star",
+    });
+    act(() => {
+      service.process({ t: 0, placements: { moon: null } });
+    });
+    expect(await screen.findByText('nothing places "star"')).toBeTruthy();
+    act(() => {
+      service.process({ t: 0, placements: { star: { progress: 0.5, elapsed: 1 } } });
+    });
+    expect(await screen.findByText('plays as "star"')).toBeTruthy();
+  });
+});
+
+describe("a Timeline inside a use of a block", () => {
+  const state = { length: 4, object: image, keyframes: { rotate }, actions: [{ at: 1, data: { a: 1 } }] };
+
+  it("can still be opened, and shows itself read-only", async () => {
+    const { configure } = await renderTimeline(state, { insideBlockUse: true });
+    const expand = screen.getByTitle("Show the timeline's rows");
+    expect(expand.closest("[inert]")).toBeNull();
+    expect(screen.queryByTitle("Choose an image to animate")).toBeNull();
+    expect((screen.getByTitle("Play") as HTMLButtonElement).disabled).toBe(true);
+    expect(screen.getByText("read-only")).toBeTruthy();
+
+    const ruler = screen.getByText("0").parentElement!.parentElement as HTMLElement;
+    pressAt(ruler, 0.5);
+
+    fireEvent.click(expand);
+    await screen.findByText("properties");
+    expect(fieldOf("rotate").readOnly).toBe(true);
+    const row = screen.getByText("height").parentElement as HTMLElement;
+    expect((row.querySelector("button") as HTMLButtonElement).disabled).toBe(true);
+    expect(
+      (screen.getByTitle("Place an action at the playhead") as HTMLButtonElement).disabled,
+    ).toBe(true);
+    expect(screen.queryByPlaceholderText("+ property")).toBeNull();
+
+    expect(configure).not.toHaveBeenCalled();
+  });
+
+  it("shows a picked keyframe or action without offering to change it", async () => {
+    const { configure, service } = await renderTimeline(state, { insideBlockUse: true });
+    fireEvent.click(screen.getByTitle("Show the timeline's rows"));
+    await screen.findByText("properties");
+
+    const diamond = screen.getByTitle("360 at 2.00");
+    fireEvent.pointerDown(diamond, { clientX: 200, pointerId: 1 });
+    fireEvent.pointerMove(diamond.parentElement!, { clientX: 300, pointerId: 1 });
+    fireEvent.pointerUp(diamond.parentElement!, { pointerId: 1 });
+    expect(await screen.findByText("rotate at 2.00: 360")).toBeTruthy();
+    expect(screen.queryByTitle("Remove")).toBeNull();
+
+    fireEvent.pointerDown(screen.getByTitle('{"a":1} at 1.00'), { pointerId: 1 });
+    const data = (await screen.findByText(/emits/)).parentElement!.querySelector("input")!;
+    expect(data.readOnly).toBe(true);
+
+    expect(service.state.keyframes.rotate[1].at).toBe(2);
+    expect(configure).not.toHaveBeenCalled();
+  });
+});
+
+describe("the loop range", () => {
+  it("shows the whole length as the range where none is set", async () => {
+    await renderTimeline({ length: 4 });
+    expect(screen.getByTitle("loop 0.00 – 4.00 (off)")).toBeTruthy();
+  });
+
+  it("is drawn on the strip above the ruler, and drawing it loops it", async () => {
+    const { service } = await renderTimeline({ length: 4 });
+    const strip = screen.getByTitle("Drag to set the loop range");
+    fireEvent.pointerDown(strip, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerMove(strip, { clientX: 300, pointerId: 1 });
+    fireEvent.pointerUp(strip, { pointerId: 1 });
+    expect(service.state).toMatchObject({ loop: true, loopStart: 1, loopEnd: 3 });
+    expect(await screen.findByTitle("loop 1.00 – 3.00")).toBeTruthy();
+  });
+
+  it("moves with the range, and each edge with itself", async () => {
+    const { service } = await renderTimeline({ length: 4, loop: true, loopStart: 1, loopEnd: 2 });
+    const strip = screen.getByTitle("Drag to set the loop range");
+    const range = screen.getByTitle("loop 1.00 – 2.00");
+    fireEvent.pointerDown(range, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerMove(strip, { clientX: 200, pointerId: 1 });
+    fireEvent.pointerUp(strip, { pointerId: 1 });
+    expect(service.state).toMatchObject({ loopStart: 2, loopEnd: 3 });
+
+    const end = (await screen.findByTitle("loop 2.00 – 3.00")).lastElementChild as HTMLElement;
+    fireEvent.pointerDown(end, { clientX: 300, pointerId: 1 });
+    fireEvent.pointerMove(strip, { clientX: 350, pointerId: 1 });
+    fireEvent.pointerUp(strip, { pointerId: 1 });
+    expect(service.state).toMatchObject({ loopStart: 2, loopEnd: 3.5 });
+  });
+
+  it("switches looping off and on when the range is pressed", async () => {
+    const { service } = await renderTimeline({ length: 4, loop: true, loopStart: 1, loopEnd: 2 });
+    pressAt(screen.getByTitle("loop 1.00 – 2.00"), 0.375);
+    expect(service.state.loop).toBe(false);
+    pressAt(await screen.findByTitle("loop 1.00 – 2.00 (off)"), 0.375);
+    expect(service.state.loop).toBe(true);
+  });
+
+  it("is looped from the transport too", async () => {
+    const { service } = await renderTimeline({ length: 4 });
+    fireEvent.click(screen.getByTitle("Loop"));
+    expect(service.state.loop).toBe(true);
+  });
+});