test: fix remaining vitest failures and async leaks; full suite green

- Workflow fixed 14 files: vi.mock default keys, constructor mocks, fake-timer
  rAF semantics (toFake), runTimersToTime->advanceTimersByTime, ESM mock shapes.
- Convert leftover done()-callback async tests to Promise/async form
  (loadExternalData, useExternalData, withExternalData).
- Harden rAF polyfill (window + global) for animejs; clean obsolete snapshots.
Result: 93 files / 540 tests passing, 0 failures.

Author: jthrilly

src/behaviours/DragAndDrop/__mocks__/DragPreview.js

@@ -3,10 +3,14 @@
 const position = vi.fn();
 const cleanup = vi.fn();
 
-const DragPreview = vi.fn(() => ({
-  position,
-  cleanup,
-}));
+function DragPreviewMock() {
+  return {
+    position,
+    cleanup,
+  };
+}
+
+const DragPreview = vi.fn(DragPreviewMock);
 
 export {
   position,

src/behaviours/DragAndDrop/__tests__/DropObstacle.test.js

@@ -8,7 +8,9 @@ import DropObstacle from '../DropObstacle';
 
 vi.mock('../store');
 vi.mock('../reducer');
-vi.useFakeTimers();
+// Exclude requestAnimationFrame from the faked APIs so the global polyfill
+// (setTimeout(cb, 1)) drives the frame loop, matching the original Jest timing.
+vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout', 'Date'] });
 
 const mockProps = {
   id: 'foo',
@@ -53,7 +55,7 @@ describe('DropObstacle', () => {
     });
 
     it('upserts obstacle with UPSERT_OBSTACLE on interval', () => {
-      vi.runTimersToTime(1000);
+      vi.advanceTimersByTime(1000);
       expect(actions.upsertObstacle.mock.calls.length).toEqual(10); // 10 fps
     });
   });

src/behaviours/DragAndDrop/__tests__/DropTarget.test.js

@@ -8,7 +8,9 @@ import DropTarget from '../DropTarget';
 
 vi.mock('../store');
 vi.mock('../reducer');
-vi.useFakeTimers();
+// Don't fake requestAnimationFrame so the setup polyfill (setTimeout-based) is
+// used; Vitest's faked rAF advances by frame budget, throwing off the fps count.
+vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
 
 const mockProps = {
   id: 'foo',
@@ -53,7 +55,7 @@ describe('DropTarget', () => {
     });
 
     it('upserts target with UPSERT_TARGET on interval', () => {
-      vi.runTimersToTime(1000);
+      vi.advanceTimersByTime(1000);
       expect(actions.upsertTarget.mock.calls.length).toEqual(10); // 10 fps
     });
   });

src/components/Canvas/__tests__/__snapshots__/EdgeLayout.test.js.snap

@@ -29,33 +29,3 @@ exports[`<EdgeLayout /> > renders ok 1`] = `
   </svg>
 </div>
 `;
-
-exports[`<EdgeLayout /> renders ok 1`] = `
-<div
-  className="edge-layout"
->
-  <svg
-    preserveAspectRatio="none"
-    viewBox="0 0 100 100"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <Connect(Edge)
-      from={
-        Object {
-          "x": 100,
-          "y": 100,
-        }
-      }
-      key="foo_bar_baz"
-      to={
-        Object {
-          "x": 100,
-          "y": 100,
-        }
-      }
-      type="type"
-      viewBoxScale={100}
-    />
-  </svg>
-</div>
-`;

src/components/Canvas/__tests__/__snapshots__/NodeLayout.test.js.snap

@@ -8,12 +8,3 @@ exports[`<Audio /> > renders ok 1`] = `
   bar
 </audio>
 `;
-
-exports[`<Audio /> renders ok 1`] = `
-<audio
-  miscellaneousAdditionalProperty="baz"
-  src="foo"
->
-  bar
-</audio>
-`;

src/components/__tests__/__snapshots__/Audio.test.js.snap

@@ -11,15 +11,3 @@ exports[`<BackgroundImage /> > renders ok 1`] = `
   }
 />
 `;
-
-exports[`<BackgroundImage /> renders ok 1`] = `
-<div
-  miscellaneousAdditionalProperty="baz"
-  style={
-    Object {
-      "backgroundImage": "url(foo)",
-      "width": "100%",
-    }
-  }
-/>
-`;

src/components/__tests__/__snapshots__/BackgroundImage.test.js.snap

@@ -94,98 +94,3 @@ exports[`Card component > renders unselected card 1`] = `
   </div>
 </div>
 `;
-
-exports[`Card component renders selected card 1`] = `
-<div
-  className="card card--selected"
-  onClick={null}
->
-  <svg
-    className="card__indicator"
-    viewBox="0 0 100 100"
-    x="0px"
-    xmlns="http://www.w3.org/2000/svg"
-    y="0px"
-  >
-    <path
-      d="M100,50c0,27.6-22.4,50-50,50s-50-22.4-50-50S22.5,0,50,0S100,22.4,100,50z M50,8.3C27,8.3,8.4,27,8.4,50S27,91.6,50,91.6 S91.7,73,91.7,50S73,8.3,50,8.3z"
-    />
-    <polygon
-      className="tick"
-      points="30.8,43 45.3,57.2 69,32.1 77.4,40.6 46.3,73.8 22.7,51.6"
-    />
-  </svg>
-  <div>
-    <h1
-      className="card__label"
-    >
-      name
-    </h1>
-    <div
-      className="card__attributes"
-    >
-      <h5
-        className="card__attribute"
-        key="0"
-      >
-        age
-        :
-         
-        33
-      </h5>
-      <h5
-        className="card__attribute"
-        key="1"
-      >
-        fullname
-        :
-         
-        full name
-      </h5>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Card component renders unselected card 1`] = `
-<div
-  className="card"
-  onClick={null}
->
-  <svg
-    className="card__indicator"
-    viewBox="0 0 100 100"
-    x="0px"
-    xmlns="http://www.w3.org/2000/svg"
-    y="0px"
-  >
-    <path
-      d="M100,50c0,27.6-22.4,50-50,50s-50-22.4-50-50S22.5,0,50,0S100,22.4,100,50z M50,8.3C27,8.3,8.4,27,8.4,50S27,91.6,50,91.6 S91.7,73,91.7,50S73,8.3,50,8.3z"
-    />
-    <polygon
-      className="tick"
-      points="30.8,43 45.3,57.2 69,32.1 77.4,40.6 46.3,73.8 22.7,51.6"
-    />
-  </svg>
-  <div>
-    <h1
-      className="card__label"
-    >
-      name
-    </h1>
-    <div
-      className="card__attributes"
-    >
-      <h5
-        className="card__attribute"
-        key="0"
-      >
-        age
-        :
-         
-        33
-      </h5>
-    </div>
-  </div>
-</div>
-`;

src/components/__tests__/__snapshots__/Card.test.js.snap

@@ -55,60 +55,3 @@ exports[`CardList component > renders cards with list 1`] = `
   />
 </ContextProvider>
 `;
-
-exports[`CardList component renders cards with list 1`] = `
-<ContextProvider
-  value={
-    Object {
-      "store": Object {
-        "@@observable": [Function],
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "subscription": Object {
-        "addNestedSub": [Function],
-        "getListeners": [Function],
-        "handleChangeWrapper": [Function],
-        "isSubscribed": [Function],
-        "notifyNestedSubs": [Function],
-        "onStateChange": [Function],
-        "trySubscribe": [Function],
-        "tryUnsubscribe": [Function],
-      },
-    }
-  }
->
-  <CardList
-    className=""
-    details={[Function]}
-    getKey={[Function]}
-    isItemSelected={[Function]}
-    items={Array []}
-    label={[Function]}
-    nodes={
-      Array [
-        Object {
-          "age": "22",
-          "name": "a name",
-          "uid": "a",
-        },
-        Object {
-          "age": "88",
-          "name": "b name",
-          "uid": "b",
-        },
-        Object {
-          "age": "33",
-          "name": "c name",
-          "uid": "c",
-        },
-      ]
-    }
-    onItemClick={[Function]}
-    onToggleCard={[Function]}
-    selected={[Function]}
-  />
-</ContextProvider>
-`;

src/components/__tests__/__snapshots__/CardList.test.js.snap

@@ -35,39 +35,3 @@ exports[`CategoricalItem component > renders unexpanded categorical item 1`] = `
   </div>
 </FlippedWithContext>
 `;
-
-exports[`CategoricalItem component renders unexpanded categorical item 1`] = `
-<FlippedWithContext>
-  <div
-    className="categorical-item"
-    onClick={[Function]}
-    style={
-      Object {
-        "--categorical-item-color": "black",
-      }
-    }
-  >
-    <div
-      className="categorical-item__disk"
-    />
-    <div
-      className="categorical-item__inner"
-    >
-      <FlippedWithContext
-        scale={true}
-      >
-        <div
-          className="categorical-item__title"
-        >
-          <h3>
-            <Memo(MarkdownLabel)
-              inline={true}
-              label="undefined"
-            />
-          </h3>
-        </div>
-      </FlippedWithContext>
-    </div>
-  </div>
-</FlippedWithContext>
-`;