@forge/react

11.18.0-next.011.18.0-next.1
out/router/hooks/__test__/useNavigate.test.js
+out/router/hooks/__test__/useNavigate.test.jsNew file
+159
Index: package/out/router/hooks/__test__/useNavigate.test.js
===================================================================
--- package/out/router/hooks/__test__/useNavigate.test.js
+++ package/out/router/hooks/__test__/useNavigate.test.js
@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const testUtils_1 = require("../../../__test__/testUtils");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../../../__test__/reconcilerTestRenderer"));
+const components_1 = require("../../components");
+const useNavigate_1 = require("../useNavigate");
+const useLocation_1 = require("../useLocation");
+const components_2 = require("../../../components");
+const test_utils_1 = require("../../utils/test-utils");
+let mockHistory;
+const mockCreateHistory = jest.fn(async (initialPath) => {
+    mockHistory = (0, test_utils_1.createMockHistory)(initialPath);
+    return mockHistory;
+});
+jest.mock('@forge/bridge', () => ({
+    view: {
+        createHistory: () => mockCreateHistory()
+    }
+}));
+describe('useNavigate', () => {
+    let bridgeCalls;
+    beforeAll(() => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+    });
+    beforeEach(() => {
+        bridgeCalls.length = 0;
+        mockCreateHistory.mockClear();
+        mockCreateHistory.mockImplementation(async (initialPath) => {
+            mockHistory = (0, test_utils_1.createMockHistory)(initialPath);
+            return mockHistory;
+        });
+    });
+    afterEach(() => jest.clearAllMocks());
+    it('navigates to a new path using push by default', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('/settings');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings');
+    });
+    it('navigates with replace when option is set', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('/settings', { replace: true });
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.replace).toHaveBeenCalledWith('/settings');
+    });
+    it('navigates back in history when passed a negative number', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate(-1);
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.go).toHaveBeenCalledWith(-1);
+    });
+    it('navigates forward in history when passed a positive number', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate(2);
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.go).toHaveBeenCalledWith(2);
+    });
+    it('resolves relative paths against the current location', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('personal');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/personal');
+    });
+    it('resolves relative paths against updated location after navigation', async () => {
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            const location = (0, useLocation_1.useLocation)();
+            (0, react_1.useEffect)(() => {
+                if (location.pathname === '/') {
+                    navigate('/settings');
+                }
+                else if (location.pathname === '/settings') {
+                    navigate('personal');
+                }
+            }, [location, navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings');
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/personal');
+    });
+    it('navigates up one level with ../', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings/general'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('../advanced');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/advanced');
+    });
+    it('navigates up multiple levels with ../../', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings/general/details'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('../../other');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/other');
+    });
+    it('resolves to root when navigating above the root with ../', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('../../../../../../escaped');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/escaped');
+    });
+    it('resolves . as the current directory', async () => {
+        mockCreateHistory.mockImplementation(async () => { mockHistory = (0, test_utils_1.createMockHistory)('/settings/general'); return mockHistory; });
+        const NavigateTest = () => {
+            const navigate = (0, useNavigate_1.useNavigate)();
+            (0, react_1.useEffect)(() => {
+                navigate('./advanced');
+            }, [navigate]);
+            return (0, jsx_runtime_1.jsx)(components_2.Text, { children: "Navigate Test" });
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(components_1.Router, { children: (0, jsx_runtime_1.jsx)(NavigateTest, {}) }));
+        expect(mockHistory.push).toHaveBeenCalledWith('/settings/general/advanced');
+    });
+});