feuerwerk/tests/ui/render.test.ts

import type { Application } from 'pixi.js';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import {
  afterFrames,
  cancelFrameWork,
  initRenderLoop,
  isRendering,
  onFrame,
  renderCount,
  requestRender,
  resetRenderLoop,
} from '../../src/ui/render';

/** A stand-in for the Pixi application: counts draws and remembers what was put on the ticker. */
function fakeApp() {
  const added: { fn: () => void; priority?: number }[] = [];
  const removed: { fn: unknown; context: unknown }[] = [];
  const app = {
    drawn: 0,
    render(): void {
      app.drawn += 1;
    },
    ticker: {
      add(fn: () => void, _context?: unknown, priority?: number) {
        added.push({ fn, priority });
        return this;
      },
      remove(fn: unknown, context?: unknown) {
        removed.push({ fn, context });
        return this;
      },
    },
  };
  return { app, added, removed, tick: () => added.forEach((entry) => entry.fn()) };
}

describe('render loop', () => {
  let now = 0;

  beforeEach(() => {
    now = 1000;
    vi.spyOn(performance, 'now').mockImplementation(() => now);
    resetRenderLoop();
  });

  afterEach(() => vi.restoreAllMocks());

  it('is asleep until something asks for a frame', () => {
    expect(isRendering()).toBe(false);
  });

  it('stays awake for a window after the request, not for a single frame', () => {
    requestRender();
    expect(isRendering()).toBe(true);
    now += 199;
    expect(isRendering()).toBe(true);
    now += 2;
    expect(isRendering()).toBe(false);
  });

  it('a later request extends the window rather than queueing a second one', () => {
    requestRender();
    now += 150;
    requestRender();
    now += 150;
    expect(isRendering()).toBe(true);
  });

  it('takes the renderer off the ticker and drives it itself', () => {
    const { app, removed, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    expect(removed).toEqual([{ fn: app.render, context: app }]);

    // `initRenderLoop` opens the first window, so the first frames are drawn.
    tick();
    tick();
    expect(app.drawn).toBe(2);
    expect(renderCount()).toBe(2);
  });

  it('draws nothing while nothing changed, and again after a request', () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;

    for (let i = 0; i < 30; i++) tick();
    expect(app.drawn).toBe(0);
    expect(renderCount()).toBe(0);

    requestRender();
    tick();
    expect(app.drawn).toBe(1);

    // And it falls asleep again by itself.
    now += 500;
    tick();
    expect(app.drawn).toBe(1);
  });

  it('afterFrames resolves only once that many frames were really drawn', async () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;

    let done = false;
    const waited = afterFrames(2).then(() => (done = true));

    tick();
    await Promise.resolve();
    expect(done).toBe(false);
    tick();
    await waited;
    expect(done).toBe(true);
    expect(app.drawn).toBe(2);
  });

  it('afterFrames wakes the loop itself, so an idle editor still answers', async () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;
    for (let i = 0; i < 5; i++) tick();
    expect(app.drawn).toBe(0);

    const waited = afterFrames(1);
    tick();
    await waited;
    expect(app.drawn).toBe(1);
  });

  it('runs work put off to a frame once, however often it was asked for', () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;

    let ran = 0;
    for (let i = 0; i < 20; i++) onFrame('drag', () => (ran += 1));
    expect(ran).toBe(0);
    tick();
    expect(ran).toBe(1);

    // And it is gone afterwards: the next frame has nothing left to do.
    tick();
    expect(ran).toBe(1);
  });

  it('keeps the work of two keys apart, and the last one wins per key', () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;

    const ran: string[] = [];
    onFrame('a', () => ran.push('a1'));
    onFrame('a', () => ran.push('a2'));
    onFrame('b', () => ran.push('b'));
    tick();
    expect(ran).toEqual(['a2', 'b']);
  });

  it('runs the work before the frame it is meant to be in', () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;

    let drawnWhenRun = -1;
    onFrame('drag', () => (drawnWhenRun = app.drawn));
    tick();
    expect(drawnWhenRun).toBe(0);
    expect(app.drawn).toBe(1);
  });

  it('wakes the loop itself, so work asked for by an idle editor is not lost', () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;
    tick();
    expect(app.drawn).toBe(0);

    let ran = 0;
    onFrame('drag', () => (ran += 1));
    tick();
    expect(ran).toBe(1);
  });

  it('cancelled work never runs – a gesture that ended writes nothing more', () => {
    const { app, tick } = fakeApp();
    initRenderLoop(app as unknown as Application);
    now += 500;

    let ran = 0;
    onFrame('drag', () => (ran += 1));
    onFrame('other', () => (ran += 10));
    cancelFrameWork('drag');
    tick();
    expect(ran).toBe(10);
  });

  it('afterFrames gives up rather than hanging when no frame ever comes', async () => {
    vi.useFakeTimers();
    try {
      const { app } = fakeApp();
      initRenderLoop(app as unknown as Application);
      const waited = afterFrames(1, 50);
      vi.advanceTimersByTime(60);
      await waited;
      expect(app.drawn).toBe(0);
    } finally {
      vi.useRealTimers();
    }
  });
});