one/dist/esm/router/web/__tests__/WebStackView.runtime.test.mjs

One is a new React Framework that makes Vite serve both native and web.

import { describe, expect, it, vi } from "vitest";
import React, { createElement, useId, useState } from "react";
import TestRenderer, { act } from "react-test-renderer";
import { WebStackView } from "../WebStackView.mjs";
import { StackRenderProvider } from "../ScreenRenderContext.mjs";
function makeRoute(name) {
  return {
    key: `${name}-key`,
    name,
    params: void 0
  };
}
function makeState(names, index) {
  return {
    key: "stack-1",
    index,
    routeNames: names,
    routes: names.map(makeRoute),
    type: "stack",
    stale: false,
    preloadedRoutes: []
  };
}
function makeDescriptors(perRoute) {
  const out = {};
  for (const name of Object.keys(perRoute)) {
    out[`${name}-key`] = {
      options: perRoute[name].options,
      render: () => perRoute[name].content,
      navigation: {}
    };
  }
  return out;
}
const KeepMountedRender = ({
  children,
  open
}) => createElement("div", {
  "data-open": String(open),
  style: {
    display: open ? "block" : "none"
  }
}, children);
function IdProbe({
  onId
}) {
  const id = useId();
  React.useEffect(() => {
    onId(id);
  }, [id, onId]);
  return createElement("span", {
    "data-id": id
  });
}
function MountProbe({
  onMount
}) {
  React.useEffect(() => {
    onMount();
  }, [onMount]);
  return null;
}
function StatefulProbe({
  initial,
  onMount
}) {
  const [value, setValue] = useState(initial);
  React.useEffect(() => {
    onMount(setValue);
  }, [onMount]);
  return createElement("span", {
    "data-value": String(value)
  });
}
describe("useId stability", () => {
  it("returns the same id across parent re-renders for the same mount", () => {
    const captured = [];
    const onId = id => captured.push(id);
    const state = makeState(["home", "sheet"], 1);
    const descriptors = makeDescriptors({
      home: {
        options: {
          presentation: "card"
        },
        content: null
      },
      sheet: {
        options: {
          presentation: "formSheet"
        },
        content: createElement(IdProbe, {
          onId
        })
      }
    });
    const navigation = {
      dispatch: vi.fn()
    };
    let testRoot;
    act(() => {
      testRoot = TestRenderer.create(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state,
        navigation,
        descriptors
      })));
    });
    const firstId = captured.at(-1);
    expect(firstId).toBeTruthy();
    act(() => {
      testRoot.update(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state,
        navigation,
        descriptors
      })));
    });
    const secondId = captured.at(-1);
    expect(secondId).toBe(firstId);
  });
});
describe("regular overlay (no keepMounted) lifecycle", () => {
  it("mounts once on open, unmounts on pop", () => {
    const mounts = [];
    const onMount = () => mounts.push(Date.now());
    const stateOpen = makeState(["home", "sheet"], 1);
    const stateClosed = makeState(["home"], 0);
    const descriptors = makeDescriptors({
      home: {
        options: {
          presentation: "card"
        },
        content: null
      },
      sheet: {
        options: {
          presentation: "formSheet"
        },
        content: createElement(MountProbe, {
          onMount
        })
      }
    });
    const navigation = {
      dispatch: vi.fn()
    };
    let testRoot;
    act(() => {
      testRoot = TestRenderer.create(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    act(() => {
      testRoot.update(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state: stateClosed,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    act(() => {
      testRoot.update(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(2);
  });
});
describe("keepMounted overlay lifecycle", () => {
  it("survives dismissal: state persists when route is popped and re-opened", () => {
    const mounts = [];
    let setValue;
    const stateOpen = makeState(["home", "settings"], 1);
    const stateClosed = makeState(["home"], 0);
    const stableContent = createElement(StatefulProbe, {
      initial: 7,
      onMount: setter => {
        mounts.push(Date.now());
        setValue = setter;
      }
    });
    const descriptors = makeDescriptors({
      home: {
        options: {
          presentation: "card"
        },
        content: null
      },
      settings: {
        options: {
          presentation: "formSheet",
          keepMounted: true
        },
        content: stableContent
      }
    });
    const navigation = {
      dispatch: vi.fn()
    };
    let testRoot;
    act(() => {
      testRoot = TestRenderer.create(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    expect(typeof setValue).toBe("function");
    act(() => {
      setValue(42);
    });
    act(() => {
      testRoot.update(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state: stateClosed,
        navigation,
        // descriptor for 'settings' no longer present in state.routes -
        // we keep the same map so the captured slot still works.
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    act(() => {
      testRoot.update(createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    const tree = testRoot.toJSON();
    const json = JSON.stringify(tree);
    expect(json).toContain('"data-value":"42"');
    expect(json).not.toContain('"data-value":"7"');
  });
});
//# sourceMappingURL=WebStackView.runtime.test.mjs.map