@portnet/ui 6.0.1 → 6.0.3

package/dist/v2/__tests__/useFocusOnRouteChange.test.js

@@ -0,0 +1,156 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _AppMain = _interopRequireDefault(require("../patterns/AppMain"));
+var _useFocusOnRouteChange = _interopRequireDefault(require("../hooks/useFocusOnRouteChange"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * G-60 — focus on page change.
+ *
+ * What this guards is invisible by construction: after a route change in a
+ * single-page application the pixels are perfect and the focus is on
+ * `document.body`, so the next Tab starts at the top of the BROWSER rather than
+ * the page. Only an assertion catches it.
+ *
+ * The harness mirrors the real arrangement — the hook is called by a component
+ * INSIDE the landmark it targets, because that is where a router puts it — and
+ * drives the key by prop rather than importing a router: the hook is
+ * router-agnostic and its tests should be too.
+ */function Page({
+  routeKey
+}) {
+  (0, _useFocusOnRouteChange.default)(routeKey);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    type: "button",
+    children: "Action de la page"
+  });
+}
+function Harness({
+  routeKey
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppMain.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Page, {
+      routeKey: routeKey
+    })
+  });
+}
+describe("useFocusOnRouteChange", () => {
+  /* The browser already places focus at the start of the document on load.
+   * Moving it then would fight the browser and scroll a deep-linked page away
+   * from its anchor. */
+  it("leaves focus alone on the first render", () => {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Harness, {
+      routeKey: "/demandes"
+    }));
+    expect(_react.screen.getByRole("main")).not.toHaveFocus();
+  });
+  it("moves focus to the landmark when the key changes", () => {
+    const {
+      rerender
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Harness, {
+      routeKey: "/demandes"
+    }));
+
+    /* Focus somewhere inside the old page, as a user would have it after
+       clicking the action that navigates. */
+    _react.screen.getByRole("button").focus();
+    expect(_react.screen.getByRole("button")).toHaveFocus();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Harness, {
+      routeKey: "/demandes/42"
+    }));
+    expect(_react.screen.getByRole("main")).toHaveFocus();
+  });
+
+  /* A re-render with the SAME key must not steal focus — a listing re-renders
+   * on every keystroke of its search field, and the host is told to watch the
+   * pathname precisely so that state changes are not page changes. */
+  it("does not move focus when the key is unchanged", () => {
+    const {
+      rerender
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Harness, {
+      routeKey: "/demandes"
+    }));
+    _react.screen.getByRole("button").focus();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Harness, {
+      routeKey: "/demandes"
+    }));
+    expect(_react.screen.getByRole("button")).toHaveFocus();
+  });
+  it("honours a custom target id", () => {
+    function CustomPage({
+      routeKey
+    }) {
+      (0, _useFocusOnRouteChange.default)(routeKey, {
+        targetId: "zone-principale"
+      });
+      return null;
+    }
+    const {
+      rerender
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppMain.default, {
+      id: "zone-principale",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomPage, {
+        routeKey: "/a"
+      })
+    }));
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppMain.default, {
+      id: "zone-principale",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomPage, {
+        routeKey: "/b"
+      })
+    }));
+    expect(_react.screen.getByRole("main")).toHaveFocus();
+  });
+  it("can be suspended", () => {
+    function DisabledPage({
+      routeKey
+    }) {
+      (0, _useFocusOnRouteChange.default)(routeKey, {
+        enabled: false
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        children: "Action"
+      });
+    }
+    const {
+      rerender
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppMain.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DisabledPage, {
+        routeKey: "/a"
+      })
+    }));
+    _react.screen.getByRole("button").focus();
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppMain.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DisabledPage, {
+        routeKey: "/b"
+      })
+    }));
+    expect(_react.screen.getByRole("button")).toHaveFocus();
+  });
+
+  /* A host may render the hook on a shell that mounts before its landmark —
+   * a pre-auth screen, an error boundary. Throwing there would replace a
+   * missing focus move with a crash. */
+  it("does nothing when the target is absent", () => {
+    function Orphan({
+      routeKey
+    }) {
+      (0, _useFocusOnRouteChange.default)(routeKey);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "sans landmark"
+      });
+    }
+    const {
+      rerender
+    } = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Orphan, {
+      routeKey: "/a"
+    }));
+    expect(() => rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Orphan, {
+      routeKey: "/b"
+    }))).not.toThrow();
+  });
+});
+//# sourceMappingURL=useFocusOnRouteChange.test.js.map

package/dist/v2/__tests__/useFocusOnRouteChange.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusOnRouteChange.test.js","names":["require","_react","_AppMain","_interopRequireDefault","_useFocusOnRouteChange","_jsxRuntime","e","__esModule","default","Page","routeKey","useFocusOnRouteChange","jsx","type","children","Harness","describe","it","render","expect","screen","getByRole","not","toHaveFocus","rerender","focus","CustomPage","targetId","id","DisabledPage","enabled","Orphan","toThrow"],"sources":["../../../src/lib/v2/__tests__/useFocusOnRouteChange.test.tsx"],"sourcesContent":["import \"@testing-library/jest-dom\";\r\nimport { render, screen } from \"@testing-library/react\";\r\n\r\nimport AppMain from \"../patterns/AppMain\";\r\nimport useFocusOnRouteChange from \"../hooks/useFocusOnRouteChange\";\r\n\r\n/**\r\n * G-60 — focus on page change.\r\n *\r\n * What this guards is invisible by construction: after a route change in a\r\n * single-page application the pixels are perfect and the focus is on\r\n * `document.body`, so the next Tab starts at the top of the BROWSER rather than\r\n * the page. Only an assertion catches it.\r\n *\r\n * The harness mirrors the real arrangement — the hook is called by a component\r\n * INSIDE the landmark it targets, because that is where a router puts it — and\r\n * drives the key by prop rather than importing a router: the hook is\r\n * router-agnostic and its tests should be too.\r\n */\r\n\r\nfunction Page({ routeKey }: { routeKey: string }) {\r\n  useFocusOnRouteChange(routeKey);\r\n  return <button type=\"button\">Action de la page</button>;\r\n}\r\n\r\nfunction Harness({ routeKey }: { routeKey: string }) {\r\n  return (\r\n    <AppMain>\r\n      <Page routeKey={routeKey} />\r\n    </AppMain>\r\n  );\r\n}\r\n\r\ndescribe(\"useFocusOnRouteChange\", () => {\r\n  /* The browser already places focus at the start of the document on load.\r\n   * Moving it then would fight the browser and scroll a deep-linked page away\r\n   * from its anchor. */\r\n  it(\"leaves focus alone on the first render\", () => {\r\n    render(<Harness routeKey=\"/demandes\" />);\r\n    expect(screen.getByRole(\"main\")).not.toHaveFocus();\r\n  });\r\n\r\n  it(\"moves focus to the landmark when the key changes\", () => {\r\n    const { rerender } = render(<Harness routeKey=\"/demandes\" />);\r\n\r\n    /* Focus somewhere inside the old page, as a user would have it after\r\n       clicking the action that navigates. */\r\n    screen.getByRole(\"button\").focus();\r\n    expect(screen.getByRole(\"button\")).toHaveFocus();\r\n\r\n    rerender(<Harness routeKey=\"/demandes/42\" />);\r\n\r\n    expect(screen.getByRole(\"main\")).toHaveFocus();\r\n  });\r\n\r\n  /* A re-render with the SAME key must not steal focus — a listing re-renders\r\n   * on every keystroke of its search field, and the host is told to watch the\r\n   * pathname precisely so that state changes are not page changes. */\r\n  it(\"does not move focus when the key is unchanged\", () => {\r\n    const { rerender } = render(<Harness routeKey=\"/demandes\" />);\r\n\r\n    screen.getByRole(\"button\").focus();\r\n    rerender(<Harness routeKey=\"/demandes\" />);\r\n\r\n    expect(screen.getByRole(\"button\")).toHaveFocus();\r\n  });\r\n\r\n  it(\"honours a custom target id\", () => {\r\n    function CustomPage({ routeKey }: { routeKey: string }) {\r\n      useFocusOnRouteChange(routeKey, { targetId: \"zone-principale\" });\r\n      return null;\r\n    }\r\n\r\n    const { rerender } = render(\r\n      <AppMain id=\"zone-principale\">\r\n        <CustomPage routeKey=\"/a\" />\r\n      </AppMain>\r\n    );\r\n    rerender(\r\n      <AppMain id=\"zone-principale\">\r\n        <CustomPage routeKey=\"/b\" />\r\n      </AppMain>\r\n    );\r\n\r\n    expect(screen.getByRole(\"main\")).toHaveFocus();\r\n  });\r\n\r\n  it(\"can be suspended\", () => {\r\n    function DisabledPage({ routeKey }: { routeKey: string }) {\r\n      useFocusOnRouteChange(routeKey, { enabled: false });\r\n      return <button type=\"button\">Action</button>;\r\n    }\r\n\r\n    const { rerender } = render(\r\n      <AppMain>\r\n        <DisabledPage routeKey=\"/a\" />\r\n      </AppMain>\r\n    );\r\n    screen.getByRole(\"button\").focus();\r\n    rerender(\r\n      <AppMain>\r\n        <DisabledPage routeKey=\"/b\" />\r\n      </AppMain>\r\n    );\r\n\r\n    expect(screen.getByRole(\"button\")).toHaveFocus();\r\n  });\r\n\r\n  /* A host may render the hook on a shell that mounts before its landmark —\r\n   * a pre-auth screen, an error boundary. Throwing there would replace a\r\n   * missing focus move with a crash. */\r\n  it(\"does nothing when the target is absent\", () => {\r\n    function Orphan({ routeKey }: { routeKey: string }) {\r\n      useFocusOnRouteChange(routeKey);\r\n      return <span>sans landmark</span>;\r\n    }\r\n\r\n    const { rerender } = render(<Orphan routeKey=\"/a\" />);\r\n    expect(() => rerender(<Orphan routeKey=\"/b\" />)).not.toThrow();\r\n  });\r\n});\r\n"],"mappings":"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","ignoreList":[]}