boxel: Skill for Claude Code

Testing motion

Never sleep(200). A sleep encodes a duration the test doesn't own; change a spring and every sleep becomes flaky or slow.

import { setupChoreo } from '@cardstack/choreo/test-support';
import {
  animationsSettled,
  bounds,
  shape,
} from 'glimmer-motion/test-support';

module('the inbox', function (hooks) {
  setupRenderingTest(hooks);
  setupChoreo(hooks);

  test('a deleted row flies to the bin', async function (assert) {
    await render(<template><Inbox /></template>);
    await animationsSettled();

    await click('[data-test-delete="row-2"]');
    await animationsSettled();

    assert.dom('[data-test-row="row-2"]').doesNotExist();
  });
});

• setupMotion(hooks) — resets what outlives an owner: the projection root, the layout-loop guard, motion speed, and any reset registered with registerMotionReset(fn). Its afterEach also fails a test in which a layout loop ran. Always pair with setupRenderingTest.
• setupChoreo(hooks) (@cardstack/choreo/test-support) — the setup for a suite that renders <Choreo>, in place of setupMotion. It is setupMotion plus Choreo's own resets: the beacon registry, the far-match barrier, gesture samples.
• animationsSettled() — resolves when every motion element, layout animation and <Choreo> timeline in the document has stopped. On timeout it names what was still moving ({ timeout }, default 5000 ms; whatIsBusy() / isMotionIdle() are the probes it polls). It is deliberately NOT folded into settled(): a blocking waiter would turn "click again while it is still moving" into "wait for it to finish", and interruption tests would go green by no longer testing anything.
• bounds(el) — measures relative to #ember-testing, not the viewport (QUnit moves and scales its container; raw getBoundingClientRect() answers a different question depending on how many tests have run).
• shape(el) — the cumulative 2×2 transform. The way to assert a label was not smeared by its parent's scale; reading x will never tell you.
• orphanCount() / strandedTransforms() (@cardstack/choreo/test-support) — the two invariants to assert after any interruption test: nothing parked in a Choreo orphan layer, nothing wearing a transform nobody is animating.
• live(selector) / liveAll(selector) (@cardstack/choreo/test-support) — query while a crossing may be aloft. A leaver's skin is parked in [data-choreo-orphans], so a bare querySelector can return the ghost rather than the live element.
• advanceGate() opens every parked c.Gate and settles; seekTo(seconds) pauses every live run and sets its clock — the way to assert a frame mid-timeline without timing it.
• Also in glimmer-motion/test-support: boundsAndShape(el) (both in one object) and velocityOf(el) (px/s, sampled across two frames).