Increase complexity of test demo

2026-07-31 07:51:50 +00:00
parent 55dad11b25
commit 056f341cd3
16 changed files with 1589 additions and 52 deletions
@@ -14,6 +14,7 @@ import {
  back,
  defineOriginChoreography,
  forward,
+  replace,
  under,
 } from "./motion";
 import { createOriginScene, originView } from "./scene";
@@ -40,6 +41,23 @@ const layeredMotion = defineOriginChoreography({
  }),
 });

+const partialDrawerOpen = defineOriginChoreography({
+  name: "test-partial-drawer-open",
+  persistAtRest: true,
+  effects: ({ progress }) => ({
+    source: { transform: `translateX(${progress * 66.6667}%)` },
+    target: { transform: `translateX(${(progress - 1) * 66.6667}%)` },
+  }),
+});
+
+const partialDrawerClose = defineOriginChoreography({
+  name: "test-partial-drawer-close",
+  effects: ({ progress }) => ({
+    source: { transform: `translateX(${-progress * 66.6667}%)` },
+    target: { transform: `translateX(${(1 - progress) * 66.6667}%)` },
+  }),
+});
+
 describe("origin-relative scene graph", () => {
  it("composes X→Y and Y→Z as independent transform layers", async () => {
    const x = originView(component("X"), undefined, { key: "x" });
@@ -290,6 +308,215 @@ describe("origin-relative scene graph", () => {
    ]);
  });

+  it("replaces the current entry and makes back skip the removed instance", async () => {
+    let paymentUnmounts = 0;
+    const home = originView(component("Home"), undefined, { key: "home" });
+    const Payment = defineComponent({
+      name: "Payment",
+      setup() {
+        onUnmounted(() => {
+          paymentUnmounts += 1;
+        });
+        return () => h("div", "Payment");
+      },
+    });
+    const payment = originView(Payment, undefined, { key: "payment" });
+    const confirmation = originView(component("Confirmation"), undefined, {
+      key: "confirmation",
+    });
+    const scene = createOriginScene({ initial: home });
+    const host = document.createElement("div");
+    document.body.append(host);
+    const app = createApp({
+      render: () => h(OriginScene, { scene }),
+    });
+    mountedApps.push(app);
+    app.mount(host);
+    await nextTick();
+    const homeKey = scene.nodes.value[0]!.key;
+
+    const openPayment = await scene.begin(
+      homeKey,
+      forward(payment, layeredMotion),
+    );
+    await openPayment.finish({ commit: true, animate: false });
+
+    const confirmPayment = await scene.begin(
+      openPayment.targetKey,
+      replace(confirmation, layeredMotion),
+    );
+    await confirmPayment.finish({ commit: true, animate: false });
+    await nextTick();
+
+    expect(
+      scene.nodes.value.map((node) => [node.view.name, node.state]),
+    ).toEqual([
+      ["Home", "parked"],
+      ["Confirmation", "active"],
+    ]);
+    expect(paymentUnmounts).toBe(1);
+
+    const confirmationContext = scene.contextFor(confirmPayment.targetKey);
+    expect(confirmationContext.previous).toBe(home);
+    expect(confirmationContext.history).toEqual([home]);
+
+    const returnHome = await scene.begin(
+      confirmPayment.targetKey,
+      back(layeredMotion),
+    );
+    expect(returnHome.targetKey).toBe(homeKey);
+    await returnHome.finish({ commit: true, animate: false });
+    expect(scene.nodes.value.map((node) => node.view.name)).toEqual(["Home"]);
+  });
+
+  it("restores the current entry when an interactive replace is cancelled", async () => {
+    const home = originView(component("Home"), undefined, { key: "home" });
+    const payment = originView(component("Payment"), undefined, {
+      key: "payment",
+    });
+    const confirmation = originView(component("Confirmation"), undefined, {
+      key: "confirmation",
+    });
+    const scene = createOriginScene({ initial: home });
+    const homeKey = scene.nodes.value[0]!.key;
+    const openPayment = await scene.begin(
+      homeKey,
+      forward(payment, layeredMotion),
+    );
+    await openPayment.finish({ commit: true, animate: false });
+
+    const confirmPayment = await scene.begin(
+      openPayment.targetKey,
+      replace(confirmation, layeredMotion),
+    );
+    await confirmPayment.cancel({ animate: false });
+
+    expect(
+      scene.nodes.value.map((node) => [node.view.name, node.state]),
+    ).toEqual([
+      ["Home", "parked"],
+      ["Payment", "active"],
+    ]);
+    expect(scene.contextFor(openPayment.targetKey).history).toEqual([home]);
+  });
+
+  it("can replace an initial root without manufacturing history", async () => {
+    const scene = createOriginScene({
+      initial: originView(component("Welcome"), undefined, { key: "welcome" }),
+    });
+    const welcomeKey = scene.nodes.value[0]!.key;
+    const replacement = await scene.begin(
+      welcomeKey,
+      replace(
+        originView(component("Signed in"), undefined, { key: "signed-in" }),
+        layeredMotion,
+      ),
+    );
+    await replacement.finish({ commit: true, animate: false });
+
+    expect(scene.roots.value).toEqual([replacement.targetKey]);
+    expect(scene.nodes.value.map((node) => node.view.name)).toEqual([
+      "Signed in",
+    ]);
+    expect(scene.contextFor(replacement.targetKey)).toMatchObject({
+      canGoBack: false,
+      history: [],
+      previous: undefined,
+    });
+  });
+
+  it("can replace a target while its incoming push is still settling", async () => {
+    const home = originView(component("Home"), undefined, { key: "home" });
+    const payment = originView(component("Payment"), undefined, {
+      key: "payment",
+    });
+    const confirmation = originView(component("Confirmation"), undefined, {
+      key: "confirmation",
+    });
+    const scene = createOriginScene({ initial: home });
+    const homeKey = scene.nodes.value[0]!.key;
+    const openPayment = await scene.begin(
+      homeKey,
+      forward(payment, layeredMotion),
+    );
+    openPayment.update(0.8, 1);
+
+    const paymentSettlement = openPayment.finish({ commit: true });
+    const confirmPayment = await scene.begin(
+      openPayment.targetKey,
+      replace(confirmation, layeredMotion),
+    );
+    await confirmPayment.finish({ commit: true, animate: false });
+    await paymentSettlement;
+
+    expect(scene.operations.value).toHaveLength(0);
+    expect(
+      scene.nodes.value.map((node) => [node.view.name, node.state]),
+    ).toEqual([
+      ["Home", "parked"],
+      ["Confirmation", "active"],
+    ]);
+    expect(scene.contextFor(confirmPayment.targetKey).history).toEqual([home]);
+  });
+
+  it("keeps a partial push connected at rest and restores it after cancelled back", async () => {
+    const page = originView(component("Page"), undefined, { key: "page" });
+    const drawer = originView(component("Drawer"), undefined, {
+      key: "drawer",
+    });
+    const scene = createOriginScene({ initial: page });
+    const pageKey = scene.nodes.value[0]!.key;
+
+    const openDrawer = await scene.begin(
+      pageKey,
+      forward(drawer, partialDrawerOpen),
+    );
+    await openDrawer.finish({ commit: true, animate: false });
+
+    expect(scene.operations.value).toHaveLength(0);
+    expect(scene.roots.value).toEqual([pageKey]);
+    expect(
+      scene.nodes.value.map((node) => [node.view.name, node.state]),
+    ).toEqual([
+      ["Page", "exposed"],
+      ["Drawer", "active"],
+    ]);
+    expect(scene.styleForNode(pageKey).transform).toBe("translateX(66.6667%)");
+    expect(scene.styleForNode(pageKey).pointerEvents).toBe("none");
+    expect(scene.styleForNode(openDrawer.targetKey).transform).toBe(
+      "translateX(0%)",
+    );
+
+    const closeDrawer = await scene.begin(
+      openDrawer.targetKey,
+      back(partialDrawerClose),
+    );
+    expect(scene.styleForNode(pageKey).transform).toBe("translateX(66.6667%)");
+    await closeDrawer.cancel({ animate: false });
+
+    expect(scene.operations.value).toHaveLength(0);
+    expect(scene.roots.value).toEqual([pageKey]);
+    expect(
+      scene.nodes.value.map((node) => [node.view.name, node.state]),
+    ).toEqual([
+      ["Page", "exposed"],
+      ["Drawer", "active"],
+    ]);
+    expect(scene.styleForNode(pageKey).transform).toBe("translateX(66.6667%)");
+
+    const committedClose = await scene.begin(
+      openDrawer.targetKey,
+      back(partialDrawerClose),
+    );
+    await committedClose.finish({ commit: true, animate: false });
+
+    expect(scene.nodes.value.map((node) => [node.key, node.state])).toEqual([
+      [pageKey, "active"],
+    ]);
+    expect(scene.roots.value).toEqual([pageKey]);
+    expect(scene.styleForNode(pageKey).transform).toBe("none");
+  });
+
  it("hands an immediate back gesture from a settling push to the same instances", async () => {
    const x = originView(component("X"), undefined, { key: "x" });
    const y = originView(component("Y"), undefined, { key: "y" });