one/dist/esm/router/web/__tests__/WebStackView.runtime.test.native.js

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.native.js";
import { StackRenderProvider } from "../ScreenRenderContext.native.js";
function _type_of(obj) {
  "@swc/helpers - typeof";

  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
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) {
  var out = {};
  var _iteratorNormalCompletion = true,
    _didIteratorError = false,
    _iteratorError = void 0;
  try {
    var _loop = function () {
      var name = _step.value;
      out[`${name}-key`] = {
        options: perRoute[name].options,
        render: function () {
          return perRoute[name].content;
        },
        navigation: {}
      };
    };
    for (var _iterator = Object.keys(perRoute)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return != null) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }
  return out;
}
var KeepMountedRender = function (param) {
  var {
    children,
    open
  } = param;
  return /* @__PURE__ */createElement("div", {
    "data-open": String(open),
    style: {
      display: open ? "block" : "none"
    }
  }, children);
};
function IdProbe(param) {
  var {
    onId
  } = param;
  var id = useId();
  React.useEffect(function () {
    onId(id);
  }, [id, onId]);
  return /* @__PURE__ */createElement("span", {
    "data-id": id
  });
}
function MountProbe(param) {
  var {
    onMount
  } = param;
  React.useEffect(function () {
    onMount();
  }, [onMount]);
  return null;
}
function StatefulProbe(param) {
  var {
    initial,
    onMount
  } = param;
  var [value, setValue] = useState(initial);
  React.useEffect(function () {
    onMount(setValue);
  }, [onMount]);
  return /* @__PURE__ */createElement("span", {
    "data-value": String(value)
  });
}
describe("useId stability", function () {
  it("returns the same id across parent re-renders for the same mount", function () {
    var captured = [];
    var onId = function (id) {
      return captured.push(id);
    };
    var state = makeState(["home", "sheet"], 1);
    var descriptors = makeDescriptors({
      home: {
        options: {
          presentation: "card"
        },
        content: null
      },
      sheet: {
        options: {
          presentation: "formSheet"
        },
        content: /* @__PURE__ */createElement(IdProbe, {
          onId
        })
      }
    });
    var navigation = {
      dispatch: vi.fn()
    };
    var testRoot;
    act(function () {
      testRoot = TestRenderer.create(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */createElement(WebStackView, {
        state,
        navigation,
        descriptors
      })));
    });
    var firstId = captured.at(-1);
    expect(firstId).toBeTruthy();
    act(function () {
      testRoot.update(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */createElement(WebStackView, {
        state,
        navigation,
        descriptors
      })));
    });
    var secondId = captured.at(-1);
    expect(secondId).toBe(firstId);
  });
});
describe("regular overlay (no keepMounted) lifecycle", function () {
  it("mounts once on open, unmounts on pop", function () {
    var mounts = [];
    var onMount = function () {
      return mounts.push(Date.now());
    };
    var stateOpen = makeState(["home", "sheet"], 1);
    var stateClosed = makeState(["home"], 0);
    var descriptors = makeDescriptors({
      home: {
        options: {
          presentation: "card"
        },
        content: null
      },
      sheet: {
        options: {
          presentation: "formSheet"
        },
        content: /* @__PURE__ */createElement(MountProbe, {
          onMount
        })
      }
    });
    var navigation = {
      dispatch: vi.fn()
    };
    var testRoot;
    act(function () {
      testRoot = TestRenderer.create(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    act(function () {
      testRoot.update(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */createElement(WebStackView, {
        state: stateClosed,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    act(function () {
      testRoot.update(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(2);
  });
});
describe("keepMounted overlay lifecycle", function () {
  it("survives dismissal: state persists when route is popped and re-opened", function () {
    var mounts = [];
    var setValue;
    var stateOpen = makeState(["home", "settings"], 1);
    var stateClosed = makeState(["home"], 0);
    var stableContent = /* @__PURE__ */createElement(StatefulProbe, {
      initial: 7,
      onMount: function (setter) {
        mounts.push(Date.now());
        setValue = setter;
      }
    });
    var descriptors = makeDescriptors({
      home: {
        options: {
          presentation: "card"
        },
        content: null
      },
      settings: {
        options: {
          presentation: "formSheet",
          keepMounted: true
        },
        content: stableContent
      }
    });
    var navigation = {
      dispatch: vi.fn()
    };
    var testRoot;
    act(function () {
      testRoot = TestRenderer.create(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    expect(typeof setValue === "undefined" ? "undefined" : _type_of(setValue)).toBe("function");
    act(function () {
      setValue(42);
    });
    act(function () {
      testRoot.update(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */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(function () {
      testRoot.update(/* @__PURE__ */createElement(StackRenderProvider, {
        value: {
          web: KeepMountedRender
        }
      }, /* @__PURE__ */createElement(WebStackView, {
        state: stateOpen,
        navigation,
        descriptors
      })));
    });
    expect(mounts).toHaveLength(1);
    var tree = testRoot.toJSON();
    var json = JSON.stringify(tree);
    expect(json).toContain('"data-value":"42"');
    expect(json).not.toContain('"data-value":"7"');
  });
});
//# sourceMappingURL=WebStackView.runtime.test.native.js.map