@servicetitan/hash-browser-router 22.14.0 → 22.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/hash-browser-router",
-    "version": "22.14.0",
+    "version": "22.16.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -15,8 +15,9 @@
         "src"
     ],
     "devDependencies": {
-        "@servicetitan/react-ioc": "22.14.0",
-        "@servicetitan/web-components": "22.14.0",
+        "@servicetitan/react-ioc": "22.16.0",
+        "@servicetitan/web-components": "22.16.0",
+        "@testing-library/react": "^12.1.5",
         "@types/history": "~4.7.10",
         "@types/react": "~17.0.38",
         "@types/react-router": "~5.1.17",
@@ -25,8 +26,8 @@
         "react-router-dom": "~5.3.0"
     },
     "peerDependencies": {
-        "@servicetitan/react-ioc": "22.14.0",
-        "@servicetitan/web-components": "22.14.0",
+        "@servicetitan/react-ioc": "22.16.0",
+        "@servicetitan/web-components": "22.16.0",
         "history": "~4.10.1",
         "react": "~17.0.2",
         "react-router-dom": "~5.3.0"
@@ -37,5 +38,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "e0064d9f47c180d6b128f1b19f92c5f46d4e0320"
+    "gitHead": "79adb1a1ec5d89601541349b01201a16bc2e2db9"
 }

package/src/__tests__/hash-browser-router.test.tsx

@@ -0,0 +1,153 @@
+import { render } from '@testing-library/react';
+import { FC } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { HashBrowserRouter } from '../hash-browser-router';
+
+describe(`${HashBrowserRouter.name}`, () => {
+    const prompt = jest.fn().mockReturnValue(false);
+    let props: Parameters<typeof HashBrowserRouter>[0];
+    let history: ReturnType<typeof useHistory>;
+
+    beforeEach(() => {
+        props = {};
+        jest.resetAllMocks();
+        jest.useFakeTimers();
+        jest.spyOn(window.history, 'pushState');
+        jest.spyOn(window.history, 'replaceState');
+        jest.spyOn(window, 'dispatchEvent');
+    });
+
+    const CaptureHistory: FC = () => {
+        history = useHistory();
+        history.block(prompt);
+        return null;
+    };
+
+    const subject = () => {
+        render(
+            <HashBrowserRouter {...props}>
+                <CaptureHistory />
+            </HashBrowserRouter>
+        );
+    };
+
+    let location: string;
+    let locationObj: Partial<Location>;
+
+    function itPushesAndReplacesWith(
+        description: string,
+        { url, prompt: promptLocation }: { url: () => string; prompt: () => Partial<Location> }
+    ) {
+        test(`history.push pushes ${description}`, () => {
+            subject();
+            history.push(locationObj ?? location);
+
+            expect(prompt).toHaveBeenCalledWith(
+                expect.objectContaining(promptLocation()),
+                expect.anything()
+            );
+
+            expect(window.history.pushState).toHaveBeenCalledWith(expect.anything(), null, url());
+
+            jest.runOnlyPendingTimers();
+            expect(window.dispatchEvent).toHaveBeenCalledWith(
+                expect.objectContaining({ type: 'hashchange' })
+            );
+        });
+
+        test(`history.replace replaces with ${description}`, () => {
+            subject();
+            history.replace(locationObj ?? location);
+
+            expect(window.history.replaceState).toHaveBeenCalledWith(
+                expect.anything(),
+                null,
+                url()
+            );
+
+            expect(prompt).toHaveBeenCalledWith(
+                expect.objectContaining(promptLocation()),
+                expect.anything()
+            );
+
+            jest.runOnlyPendingTimers();
+            expect(window.dispatchEvent).toHaveBeenCalledWith(
+                expect.objectContaining({ type: 'hashchange' })
+            );
+        });
+    }
+
+    beforeEach(() => (location = '/foo'));
+
+    itPushesAndReplacesWith('/#{location}', {
+        url: () => `/#${location}`,
+        prompt: () => ({ pathname: location, search: '', hash: '' }),
+    });
+
+    describe('when location starts with "/#"', () => {
+        beforeEach(() => (location = '/#bar'));
+
+        itPushesAndReplacesWith('location', {
+            url: () => `${location}`,
+            prompt: () => ({ pathname: `${location.replace('/#', '')}`, search: '', hash: '' }),
+        });
+    });
+
+    describe('with a basename', () => {
+        beforeEach(() => (props.basename = '/baz'));
+
+        itPushesAndReplacesWith('"/#{basename}{location}"', {
+            url: () => `/#${props.basename}${location}`,
+            prompt: () => ({ pathname: location, search: '', hash: '' }),
+        });
+    });
+
+    describe('with location object', () => {
+        beforeEach(() => (locationObj = { pathname: '/foo?baz=qux' })); // testing pathname with search params
+
+        itPushesAndReplacesWith('"/#{location.pathname}"', {
+            url: () => `/#${locationObj.pathname}`,
+            prompt: () => ({
+                pathname: `${locationObj.pathname!.match(/^([^?]+)/)![0]}`,
+                search: `${locationObj.pathname!.match(/(\?.+)$/)![0]}`,
+                hash: '',
+            }),
+        });
+
+        describe('when location includes a hash', () => {
+            beforeEach(() => (locationObj.hash = '#bar'));
+
+            itPushesAndReplacesWith('location', {
+                url: () => `${locationObj.pathname}${locationObj.hash}`,
+                prompt: () => ({
+                    pathname: `${locationObj.hash!.replace('#', '')}`,
+                    search: '',
+                    hash: '',
+                }),
+            });
+        });
+
+        describe('with a basename', () => {
+            beforeEach(() => (props.basename = '/baz'));
+
+            itPushesAndReplacesWith('"/#{basename}{location.pathname}', {
+                url: () => `/#${props.basename}${locationObj.pathname}`,
+                prompt: () => ({
+                    pathname: `${locationObj.pathname!.match(/^([^?]+)/)![0]}`,
+                    search: `${locationObj.pathname!.match(/(\?.+)$/)![0]}`,
+                    hash: '',
+                }),
+            });
+
+            describe('when location has no pathname', () => {
+                beforeEach(() => delete locationObj.pathname);
+
+                itPushesAndReplacesWith('/', {
+                    url: () => '/',
+                    prompt: () => ({ pathname: '/', search: '', hash: '' }),
+                });
+            });
+        });
+    });
+});