@ksp-gonogo/kerbcast-react 1.10.3 → 1.11.0-rc.4

package/src/CameraFeed.tsx

@@ -1,5 +1,14 @@
 import type { CameraState, KerbcastClient } from "@ksp-gonogo/kerbcast";
-import { PanZoomController, QualityPreset, TrackMode } from "@ksp-gonogo/kerbcast";
+import {
+  CameraKind,
+  CommandAimKind,
+  CommandTargetEligibility,
+  PanZoomController,
+  QualityPreset,
+  TrackMode,
+  effectiveCommandTrack,
+  formatCommandRange,
+} from "@ksp-gonogo/kerbcast";
 import {
   forwardRef,
   useCallback,
@@ -23,11 +32,14 @@ import {
   type FeedAction,
   type FeedActionBarEntry,
 } from "./FeedActionBar";
+import { CommandBlank, CommandBrackets, type CommandBracketOverlay } from "./CommandBrackets";
+import { useCommandDisplayUt } from "./hooks/useCommandDisplayUt";
 import { useKerbcastCameras } from "./hooks/useKerbcastCameras";
 import { useKerbcastInFlight } from "./hooks/useKerbcastInFlight";
 import { useKerbcastStream } from "./hooks/useKerbcastStream";
 import { useRecordings } from "./hooks/useRecordings";
 import { useReportDisplaySize } from "./hooks/useReportDisplaySize";
+import { useTargetBracketsPreference } from "./hooks/useTargetBracketsPreference";
 import { StandbyIcon } from "./StandbyIcon";
 import { isCameraDestroyed } from "./lifecycle";
 import { usePortalMenu } from "./menuPositioning";
@@ -290,6 +302,26 @@ export interface CameraFeedProps {
    * {@link CameraStreamHook}.
    */
   useStream?: CameraStreamHook;
+  /**
+   * Draw target brackets and their readout over command camera feeds, with a
+   * per-feed "Target brackets" toggle in the action bar (on by default,
+   * remembered per camera in this browser). Default true. A blanked command
+   * feed shows its reason whatever this is set to.
+   */
+  enableTargetBrackets?: boolean;
+  /**
+   * Extra drawing, corner styling and readout text for this feed's target
+   * brackets. See {@link CommandBracketOverlay}.
+   */
+  targetBracketOverlay?: CommandBracketOverlay;
+  /**
+   * Mission UT the displayed video was captured at, for a host running its
+   * own delayed playout. Picks which command-track transition is in force and
+   * ages the readout. Defaults to the displayed frame's own capture UT where
+   * the browser reports frame RTP timestamps, else the client's capture
+   * clock interpolated to now.
+   */
+  displayUt?: number;
 }
 
 export interface CameraFeedHandle {
@@ -328,6 +360,9 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
       trailingActions,
       showActions = true,
       useStream,
+      enableTargetBrackets = true,
+      targetBracketOverlay,
+      displayUt: displayUtProp,
     },
     ref,
   ) {
@@ -427,7 +462,14 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     // built-in hook is the default. See CameraStreamHook's rules-of-hooks note.
     const resolveStream = useStream ?? useKerbcastStream;
     const stream = resolveStream(flightId);
-    const videoRef = useRef<HTMLVideoElement>(null);
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+    /* Mirrors videoRef as state so the bracket overlay can measure the element
+       once it mounts. Setting a ref never remounts the video. */
+    const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null);
+    const attachVideo = useCallback((el: HTMLVideoElement | null) => {
+      videoRef.current = el;
+      setVideoEl(el);
+    }, []);
     // The feed frame; fullscreen targets this and ResizeObserver measures it.
     const wrapRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
@@ -533,6 +575,26 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     const supportsPitch =
       !!camera && camera.panPitchMax - camera.panPitchMin > 0;
 
+    /* Command camera feeds: target brackets, readout and blank label. */
+    const commandCamera =
+      camera?.kind === CameraKind.Command && !isDestroyed ? camera : null;
+    const isCommandFeed = commandCamera !== null;
+    const commandTrack = commandCamera?.commandTrack ?? null;
+    const commandDisplayUt = useCommandDisplayUt(
+      commandTrack !== null,
+      displayUtProp,
+      commandTrack?.events,
+      commandCamera?.flightId ?? null,
+      videoEl,
+    );
+    const commandState = commandTrack
+      ? effectiveCommandTrack(commandTrack, commandDisplayUt?.ut)
+      : null;
+    const [bracketsOn, toggleBrackets] = useTargetBracketsPreference(
+      commandCamera ? (commandCamera.commandCentre?.stationId ?? String(commandCamera.flightId)) : null,
+    );
+    const targetBracketsAvailable = enableTargetBrackets && isCommandFeed;
+
     // -------------------------------------------------------------------------
     // Camera selection callbacks (Next/Prev, picker)
     // onSelectCamera is ONLY called on explicit user picks, never on auto-latch.
@@ -766,6 +828,36 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
       [client, flightId, trackMode, closeTrackingMenu],
     );
 
+    // -------------------------------------------------------------------------
+    // Command camera target picker. Lists every craft the game offers; the
+    // ineligible ones stay visible but disabled with the game's reason, and
+    // the current target follows the published subjectPersistentId. Picking
+    // one aims the camera at it. Hidden while a command authority holds the
+    // aim lock, since only it can aim then.
+    // -------------------------------------------------------------------------
+    const commandTargets = commandCamera?.commandCentre?.targets ?? [];
+    const commandTargetId = commandCamera?.commandCentre?.subjectPersistentId ?? 0;
+    const commandLocked = commandCamera?.commandTrack?.authority != null;
+    const commandTargetAvailable =
+      isCommandFeed && !disableManualControls && !commandLocked && commandTargets.length > 0;
+    const commandTargetMenuId = useId();
+    const commandTargetMenu = usePortalMenu({
+      maxWidth: MENU_MAX_WIDTH,
+      maxHeight: MENU_MAX_HEIGHT,
+      align: "end",
+    });
+    const closeCommandTargetMenu = commandTargetMenu.close;
+    const selectCommandTarget = useCallback(
+      (persistentId: number) => {
+        if (flightId === null) return;
+        client
+          .setCommandAim(flightId, { kind: CommandAimKind.Vessel, persistentId })
+          .catch(() => {});
+        closeCommandTargetMenu();
+      },
+      [client, flightId, closeCommandTargetMenu],
+    );
+
     // -------------------------------------------------------------------------
     // REC control (opt-in). A stateful toggle that starts/stops a client-side
     // recording of this feed via the recordings store; state is read from the
@@ -899,6 +991,13 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
     const pipLabel = isPip ? "Exit picture in picture" : "Picture in picture";
     const fullscreenLabel = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
     const recordingLabel = recordingActive ? "Stop recording" : "Start recording";
+    const bracketsLabel = "Target brackets";
+    const commandTargetName = commandTargets.find(
+      (t) => t.persistentId === commandTargetId,
+    )?.vesselName;
+    const commandTargetLabel = commandTargetName
+      ? `Watching ${commandTargetName}`
+      : "Choose target";
 
     const entries: FeedActionBarEntry[] = [
       ...(actions?.map(feedActionToEntry) ?? []),
@@ -907,7 +1006,8 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
             {
               id: "quality",
               label: "Quality",
-              stateful: false,
+              /* Stays inline: its menu anchors on this button, which the overflow menu unmounts on click. */
+              stateful: true,
               render: () => (
                 <OverlayIconButton
                   ref={qualityMenu.triggerRef}
@@ -952,6 +1052,52 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
             } satisfies FeedActionBarEntry,
           ]
         : []),
+      ...(targetBracketsAvailable
+        ? [
+            {
+              id: "target-brackets",
+              label: bracketsLabel,
+              stateful: true,
+              render: () => (
+                <OverlayIconButton
+                  type="button"
+                  aria-label={bracketsLabel}
+                  aria-pressed={bracketsOn}
+                  title={bracketsLabel}
+                  $active={bracketsOn}
+                  onClick={toggleBrackets}
+                >
+                  <TargetBracketsIcon />
+                </OverlayIconButton>
+              ),
+            } satisfies FeedActionBarEntry,
+          ]
+        : []),
+      ...(commandTargetAvailable
+        ? [
+            {
+              id: "command-target",
+              label: commandTargetLabel,
+              /* Stays inline: its menu anchors on this button, which the overflow menu unmounts on click. */
+              stateful: true,
+              render: () => (
+                <OverlayIconButton
+                  ref={commandTargetMenu.triggerRef}
+                  type="button"
+                  aria-label="Choose target"
+                  aria-haspopup="menu"
+                  aria-expanded={commandTargetMenu.open}
+                  aria-controls={commandTargetMenuId}
+                  title={commandTargetLabel}
+                  $active={commandTargetMenu.open}
+                  onClick={commandTargetMenu.toggle}
+                >
+                  <CommandTargetIcon />
+                </OverlayIconButton>
+              ),
+            } satisfies FeedActionBarEntry,
+          ]
+        : []),
       ...(trackingAvailable
         ? [
             {
@@ -1052,6 +1198,8 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
         fullscreenAvailable ||
         qualityAvailable ||
         trackingAvailable ||
+        targetBracketsAvailable ||
+        commandTargetAvailable ||
         enableRecording);
     const hasActionBar =
       showActions &&
@@ -1094,7 +1242,7 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
         ) : (
           <>
             <StyledVideo
-              ref={videoRef}
+              ref={attachVideo}
               autoPlay
               playsInline
               muted
@@ -1177,6 +1325,59 @@ const CameraFeedInner = forwardRef<CameraFeedHandle, CameraFeedProps>(
                 </QualityMenu>,
                 document.body,
               )}
+            {commandTargetAvailable &&
+              commandTargetMenu.open &&
+              commandTargetMenu.position &&
+              createPortal(
+                <CameraMenu
+                  ref={commandTargetMenu.menuRef}
+                  id={commandTargetMenuId}
+                  role="menu"
+                  aria-label="Target"
+                  style={commandTargetMenu.position}
+                >
+                  {commandTargets.map((t) => {
+                    const eligible = t.eligibility === CommandTargetEligibility.Ok;
+                    const current = t.persistentId === commandTargetId;
+                    return (
+                      <CameraMenuItem
+                        key={t.persistentId}
+                        type="button"
+                        role="menuitemradio"
+                        aria-checked={current}
+                        $selected={current}
+                        disabled={!eligible}
+                        title={eligible ? undefined : t.eligibilityText}
+                        onClick={() => selectCommandTarget(t.persistentId)}
+                      >
+                        {t.vesselName}
+                        {t.rangeM != null ? ` · ${formatCommandRange(t.rangeM)}` : ""}
+                        {eligible ? "" : ` · ${t.eligibilityText}`}
+                      </CameraMenuItem>
+                    );
+                  })}
+                </CameraMenu>,
+                document.body,
+              )}
+            {commandState &&
+              !outOfFlight &&
+              (
+                <>
+                  {commandState.blank && <CommandBlank reason={commandState.blank} />}
+                  {targetBracketsAvailable && bracketsOn && (
+                    <CommandBrackets
+                      state={commandState}
+                      displayUt={commandDisplayUt?.ut ?? commandTrack!.ut}
+                      utSource={commandDisplayUt?.source ?? null}
+                      video={videoEl}
+                      fallbackSize={
+                        camera ? { width: camera.renderWidth, height: camera.renderHeight } : null
+                      }
+                      overlay={targetBracketOverlay}
+                    />
+                  )}
+                </>
+              )}
             {outOfFlight ? (
               showStandbyIcon && (
                 <StandbyOverlay role="status" aria-label="Standby, no active flight">
@@ -1415,6 +1616,26 @@ function QualityIcon() {
   );
 }
 
+/* Target brackets: the top-left and bottom-right corners around a centre dot. */
+function TargetBracketsIcon() {
+  return (
+    <svg {...iconProps}>
+      <path d="M2.5 7V2.5H7M13.5 9v4.5H9" />
+      <circle cx="8" cy="8" r="1.2" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+/* Command camera target: a craft silhouette inside a selection ring. */
+function CommandTargetIcon() {
+  return (
+    <svg {...iconProps}>
+      <circle cx="8" cy="8" r="6" />
+      <path d="M8 4.5l1.6 4H6.4zM6.6 8.5l-.9 2.5M9.4 8.5l.9 2.5" />
+    </svg>
+  );
+}
+
 /* Auto-track: a crosshair / reticle. */
 function CrosshairIcon() {
   return (
@@ -1738,6 +1959,15 @@ const CameraMenuItem = styled.button<{ $selected: boolean }>`
     outline: 2px solid var(--kerbcast-accent, #00ff88);
     outline-offset: -2px;
   }
+
+  &:disabled {
+    cursor: default;
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  &:disabled:not([aria-checked="true"]) {
+    background: transparent;
+  }
 `;
 
 const TopMeta = styled.div`

package/src/CommandBrackets.test.tsx

@@ -0,0 +1,259 @@
+import { effectiveCommandTrack, type CommandTrackState } from "@ksp-gonogo/kerbcast";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  CommandBlank,
+  CommandBrackets,
+  bracketGeometry,
+  containedContentRect,
+  type CommandBracketContext,
+  type CommandBracketOverlay,
+} from "./CommandBrackets";
+import {
+  MAX_UT_EXTRAPOLATION_MS,
+  extrapolateCaptureUt,
+  msUntilNextEvent,
+} from "./hooks/useCommandDisplayUt";
+
+afterEach(cleanup);
+
+function track(overrides: Partial<CommandTrackState> = {}): CommandTrackState {
+  return {
+    ut: 1000,
+    hasFix: true,
+    rangeM: 4200,
+    occluded: false,
+    occluder: "",
+    sunlit: true,
+    bracketHalfPx: 20,
+    frameHeightPx: 576,
+    framingFits: true,
+    events: [],
+    ...overrides,
+  };
+}
+
+const AUTHORITY = { owner: "gonogo" };
+
+describe("containedContentRect", () => {
+  it("letterboxes wide media in a tall box", () => {
+    expect(containedContentRect(400, 400, 1600, 900)).toEqual({
+      x: 0,
+      y: 87.5,
+      width: 400,
+      height: 225,
+    });
+  });
+
+  it("pillarboxes tall media in a wide box", () => {
+    expect(containedContentRect(800, 300, 400, 400)).toEqual({
+      x: 250,
+      y: 0,
+      width: 300,
+      height: 300,
+    });
+  });
+
+  it("uses the whole box while the media size is unknown", () => {
+    expect(containedContentRect(640, 360, 0, 0)).toEqual({ x: 0, y: 0, width: 640, height: 360 });
+  });
+});
+
+describe("bracketGeometry", () => {
+  const rect = { x: 10, y: 20, width: 1024, height: 288 };
+
+  it("scales capture px by the displayed height and centres on the frame", () => {
+    const g = bracketGeometry(rect, 40, 576);
+    expect(g.cx).toBe(522);
+    expect(g.cy).toBe(164);
+    expect(g.half).toBe(20);
+    expect(g.arm).toBeCloseTo(12);
+  });
+
+  it("never draws a box smaller than 14 display px half-size", () => {
+    const g = bracketGeometry(rect, 2, 576);
+    expect(g.half).toBe(14);
+    expect(g.arm).toBeCloseTo(8.4);
+    expect(bracketGeometry(rect, null, 576).half).toBe(14);
+  });
+
+  it("reports both corners around the centre", () => {
+    const g = bracketGeometry(rect, 40, 576);
+    expect(g.topLeft).toEqual({ x: 502, y: 144 });
+    expect(g.bottomRight).toEqual({ x: 542, y: 184 });
+  });
+});
+
+describe("extrapolateCaptureUt", () => {
+  it("advances at the warp rate and stops at the cap", () => {
+    expect(extrapolateCaptureUt(100, 4, 1000, 1500)).toBe(102);
+    expect(extrapolateCaptureUt(100, 1, 0, MAX_UT_EXTRAPOLATION_MS * 10)).toBe(
+      100 + MAX_UT_EXTRAPOLATION_MS / 1000,
+    );
+    expect(extrapolateCaptureUt(100, 1, 1000, 500)).toBe(100);
+  });
+});
+
+describe("msUntilNextEvent", () => {
+  const ev = (ut: number) => ({ ut, occluded: false, occluder: "", sunlit: true });
+  it("times the first event after the displayed UT at the warp rate", () => {
+    expect(msUntilNextEvent([ev(99), ev(103), ev(101)], 100, 2)).toBe(500);
+    expect(msUntilNextEvent([ev(99)], 100, 1)).toBeNull();
+    expect(msUntilNextEvent([], 100, 1)).toBeNull();
+    expect(msUntilNextEvent([ev(101)], 100, 0)).toBeNull();
+  });
+});
+
+function renderBrackets(
+  t: CommandTrackState,
+  displayUt = 1000,
+  overlay?: CommandBracketOverlay,
+) {
+  return render(
+    <CommandBrackets
+      state={effectiveCommandTrack(t, displayUt)}
+      displayUt={displayUt}
+      utSource="override"
+      video={null}
+      fallbackSize={{ width: 1024, height: 576 }}
+      overlay={overlay}
+    />,
+  );
+}
+
+function corner(container: HTMLElement, which: "topLeft" | "bottomRight") {
+  return container.querySelector(`path[data-corner="${which}"]`);
+}
+
+describe("CommandBrackets", () => {
+  it("draws only the two corners, solid, when in view", () => {
+    const { container } = renderBrackets(track());
+    expect(container.querySelectorAll("path")).toHaveLength(2);
+    expect(corner(container, "topLeft")!.getAttribute("stroke-dasharray")).toBeNull();
+    expect(corner(container, "bottomRight")!.getAttribute("stroke-dasharray")).toBeNull();
+    expect(screen.getByText("IN VIEW · 4.2 km")).toBeTruthy();
+  });
+
+  it("dashes both corners when occluded", () => {
+    const { container } = renderBrackets(track({ occluded: true, occluder: "Mun" }));
+    expect(corner(container, "topLeft")!.getAttribute("stroke-dasharray")).toBe("3 2");
+    expect(corner(container, "bottomRight")!.getAttribute("stroke-dasharray")).toBe("3 2");
+    expect(screen.getByText("OCCLUDED MUN · 4.2 km")).toBeTruthy();
+  });
+
+  it("mirrors the camera corner under an authority too", () => {
+    const { container } = renderBrackets(
+      track({ occluded: true, occluder: "Mun", authority: AUTHORITY }),
+    );
+    expect(corner(container, "bottomRight")!.getAttribute("stroke-dasharray")).toBe("3 2");
+    expect(screen.getByText("OCCLUDED MUN · 4.2 km")).toBeTruthy();
+  });
+
+  it("draws no box without a fix, only the readout", () => {
+    const { container } = renderBrackets(track({ hasFix: false, rangeM: undefined }));
+    expect(container.querySelector("svg")).toBeNull();
+    expect(screen.getByText("NO FIX")).toBeTruthy();
+  });
+});
+
+describe("CommandBrackets overlay", () => {
+  it("still runs the overlay and readout without a fix, with no default corners", () => {
+    const { container } = renderBrackets(track({ hasFix: false, rangeM: undefined }), 1000, {
+      render: (ctx) => (ctx.state.hasFix ? null : <circle data-testid="held" r={3} />),
+      readout: (text) => `${text} · HELD`,
+    });
+    expect(container.querySelectorAll("path")).toHaveLength(0);
+    expect(screen.getByTestId("held").closest("svg")).toBe(container.querySelector("svg"));
+    expect(screen.getByText("NO FIX · HELD")).toBeTruthy();
+  });
+
+  it("runs over a blanked feed with an empty default readout", () => {
+    let readoutDefault: string | null = null;
+    const { container } = renderBrackets(track({ blank: "Lost" }), 1000, {
+      render: (ctx) => (ctx.state.blank ? <circle data-testid="held" r={3} /> : null),
+      readout: (text) => {
+        readoutDefault = text;
+        return "HELD 2m";
+      },
+    });
+    expect(readoutDefault).toBe("");
+    expect(container.querySelectorAll("path")).toHaveLength(0);
+    expect(screen.getByTestId("held")).toBeTruthy();
+    expect(screen.getByText("HELD 2m")).toBeTruthy();
+  });
+
+  it("draws nothing over a blanked feed without an overlay", () => {
+    const { container } = renderBrackets(track({ blank: "Lost" }));
+    expect(container.querySelector("svg")).toBeNull();
+    expect(container.textContent).toBe("");
+  });
+
+  it("renders inside the bracket SVG with the geometry, UT and state", () => {
+    let seen: CommandBracketContext | null = null;
+    const { container } = renderBrackets(track({ authority: AUTHORITY }), 1234, {
+      render: (ctx) => {
+        seen = ctx;
+        const { x, y } = ctx.geometry.bottomRight;
+        return <rect data-testid="mark" x={x - 6} y={y - 6} width={4} height={4} />;
+      },
+    });
+    const ctx = seen as CommandBracketContext | null;
+    expect(ctx).not.toBeNull();
+    expect(ctx!.displayUt).toBe(1234);
+    expect(ctx!.utSource).toBe("override");
+    expect(ctx!.state.authority).toEqual(AUTHORITY);
+    expect(ctx!.geometry.stroke).toBe(2);
+    expect(ctx!.geometry.bottomRight.x).toBe(ctx!.geometry.cx + ctx!.geometry.half);
+    const path = corner(container, "bottomRight")!.getAttribute("d")!;
+    const { x, y } = ctx!.geometry.bottomRight;
+    expect(path).toContain(`L${x} ${y}`);
+    const mark = screen.getByTestId("mark");
+    expect(mark.closest("svg")).toBe(container.querySelector("svg"));
+    expect(mark.getAttribute("x")).toBe(String(x - 6));
+  });
+
+  it("applies static corner overrides", () => {
+    const { container } = renderBrackets(track(), 1000, {
+      corners: { bottomRight: { colour: "rgb(1, 2, 3)", dashed: true } },
+    });
+    const br = corner(container, "bottomRight") as SVGPathElement;
+    expect(br.getAttribute("stroke-dasharray")).toBe("3 2");
+    expect(br.style.stroke).toBe("rgb(1, 2, 3)");
+    expect(corner(container, "topLeft")!.getAttribute("stroke-dasharray")).toBeNull();
+  });
+
+  it("hides a corner and takes overrides from a function of the context", () => {
+    const { container } = renderBrackets(track({ occluded: true, occluder: "Mun" }), 1000, {
+      corners: (ctx) => ({
+        bottomRight: { hidden: true },
+        topLeft: { dashed: !ctx.state.occluded },
+      }),
+    });
+    expect(corner(container, "bottomRight")).toBeNull();
+    expect(corner(container, "topLeft")!.getAttribute("stroke-dasharray")).toBeNull();
+  });
+
+  it("extends the readout with the displayed UT", () => {
+    renderBrackets(track(), 1060, {
+      readout: (text, ctx) => `${text} · AGE ${ctx.displayUt - 1000}s`,
+    });
+    expect(screen.getByText("IN VIEW · 4.2 km · AGE 60s")).toBeTruthy();
+  });
+
+  it("replaces the readout, or hides it with null", () => {
+    renderBrackets(track(), 1000, { readout: () => "CUSTOM" });
+    expect(screen.getByText("CUSTOM")).toBeTruthy();
+    cleanup();
+    renderBrackets(track(), 1000, { readout: () => null });
+    expect(screen.queryByText(/IN VIEW/)).toBeNull();
+  });
+});
+
+describe("CommandBlank", () => {
+  it("labels the blank with its reason", () => {
+    render(<CommandBlank reason="Waiting for gonogo" />);
+    expect(screen.getByRole("status", { name: "Feed blanked" }).textContent).toBe(
+      "Waiting for gonogo",
+    );
+  });
+});