Ensure compatibility with history@5 #111 (#113)

Ensure compatibility with history@5

Author: marionebl

package-lock.json

@@ -68,7 +68,6 @@
     "preversion": "npm run lint -s && npm run lint:types -s && npm run lint:deps -s && npm run test -s"
   },
   "dependencies": {
-    "history": "4.10.1",
     "lodash.debounce": "^4.0.8",
     "lodash.noop": "^3.0.1",
     "path-to-regexp": "^1.7.0",
@@ -120,6 +119,8 @@
     "eslint-plugin-react-hooks": "^4.0.2",
     "flow-bin": "^0.135.0",
     "flow-copy-source": "^2.0.7",
+    "history": "4.10.1",
+    "history-5": "npm:history@^5.2.0",
     "jest": "^26.0.1",
     "madge": "^4.0.1",
     "prettier": "^2.0.5",
@@ -131,6 +132,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "peerDependencies": {
+    "history": "^4 || ^5",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "typescript": "^3.7.2"

package.json

@@ -0,0 +1,57 @@
+import { parsePath } from '../../../../../common/utils/create-location/parse-path';
+
+describe.each([
+  {
+    input: '/a/b?c=d#e',
+    description: 'full path',
+    pathname: '/a/b',
+    search: '?c=d',
+    hash: '#e',
+  },
+  {
+    input: 'a/b?c=d#e',
+    description: 'relative path',
+    pathname: 'a/b',
+    search: '?c=d',
+    hash: '#e',
+  },
+  {
+    input: '?a=b#c',
+    description: 'no pathname',
+    pathname: '/',
+    search: '?a=b',
+    hash: '#c',
+  },
+  {
+    input: '/a/b#c',
+    description: 'no search',
+    pathname: '/a/b',
+    search: '',
+    hash: '#c',
+  },
+  {
+    input: '/a/b?c=d',
+    description: 'no hash',
+    pathname: '/a/b',
+    search: '?c=d',
+    hash: '',
+  },
+  {
+    input: '/a/b#c?d=e',
+    description: 'search in hash',
+    pathname: '/a/b',
+    search: '',
+    hash: '#c?d=e',
+  },
+])(
+  'parsePath($input): { pathname, search, hash }',
+  ({ input, description, pathname, search, hash }) => {
+    test(description, () => {
+      expect(parsePath(input)).toMatchObject({
+        pathname,
+        search,
+        hash,
+      });
+    });
+  }
+);

src/__tests__/unit/common/utils/create-location/test.ts

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { mount, render } from 'enzyme';
 import * as historyHelper from 'history';
+import * as historyHelper5 from 'history-5';
 import { defaultRegistry } from 'react-sweet-state';
 import { act } from 'react-dom/test-utils';
 
@@ -156,7 +157,7 @@ describe('SPA Router store', () => {
     });
   });
 
-  describe('listening for real history changes', () => {
+  describe('listening for real history changes on history@4', () => {
     let children: any;
 
     beforeEach(() => {
@@ -243,6 +244,98 @@ describe('SPA Router store', () => {
     });
   });
 
+  describe('listening for real history changes on history@5', () => {
+    let children: any;
+
+    beforeEach(() => {
+      children = jest.fn().mockReturnValue(null);
+
+      jest
+        .spyOn(historyHelper, 'createMemoryHistory')
+        // @ts-ignore
+        .mockImplementation(historyHelper5.createMemoryHistory);
+    });
+
+    it('should send location with route change', async () => {
+      mount(
+        <MemoryRouter routes={mockRoutes} location={mockRoutes[0].path}>
+          <RouterSubscriber>{children}</RouterSubscriber>
+        </MemoryRouter>
+      );
+      const { history } = children.mock.calls[0][0];
+
+      await nextTick();
+
+      expect(children.mock.calls[0]).toEqual([
+        expect.objectContaining({
+          routes: mockRoutes,
+          route: mockRoutes[0],
+          action: DEFAULT_ACTION,
+          history: expect.any(Object),
+        }),
+        expect.any(Object),
+      ]);
+
+      const newLocation = {
+        pathname: '/blah',
+        search: '?somequery=value',
+        hash: '#bing',
+      };
+
+      history.push(Object.values(newLocation).join(''));
+
+      await nextTick();
+
+      expect(children.mock.calls[1]).toEqual([
+        expect.objectContaining({
+          routes: mockRoutes,
+          route: mockRoutes[1],
+          action: 'PUSH',
+          history: expect.any(Object),
+        }),
+        expect.any(Object),
+      ]);
+    });
+
+    it('should send correct action key for route changes', async () => {
+      mount(
+        <MemoryRouter routes={mockRoutes}>
+          <RouterSubscriber>{children}</RouterSubscriber>
+        </MemoryRouter>
+      );
+      const { history } = children.mock.calls[0][0];
+
+      expect(children.mock.calls[0]).toEqual([
+        expect.objectContaining({
+          action: DEFAULT_ACTION,
+        }),
+        expect.any(Object),
+      ]);
+
+      history.push('/pathname');
+
+      await nextTick();
+
+      expect(children.mock.calls[1]).toEqual([
+        expect.objectContaining({
+          action: 'PUSH',
+        }),
+        expect.any(Object),
+      ]);
+
+      history.replace('/blah');
+
+      await nextTick();
+
+      expect(children.mock.calls[2]).toEqual([
+        expect.objectContaining({
+          action: 'REPLACE',
+        }),
+        expect.any(Object),
+      ]);
+    });
+  });
+
   describe('store actions', () => {
     const currentLocation = 'http://localhost/';
 

src/__tests__/unit/common/utils/location/test.ts

@@ -0,0 +1,9 @@
+import { decodePath } from './decode-path';
+import { parsePath } from './parse-path';
+
+export function createLocation(path = '') {
+  const location = parsePath(path);
+  location.pathname = decodePath(location.pathname);
+
+  return location;
+}

src/__tests__/unit/controllers/router-store/test.tsx

@@ -0,0 +1,19 @@
+class DecodeUriError extends URIError {
+  constructor(path: string) {
+    super(
+      `Pathname ${path} could not be decoded. This is likely caused by an invalid percent-encoding.`
+    );
+  }
+}
+
+export function decodePath(path: string) {
+  try {
+    return decodeURI(path);
+  } catch (e) {
+    if (e instanceof URIError) {
+      throw new DecodeUriError(path);
+    } else {
+      throw e;
+    }
+  }
+}

src/common/utils/create-location/create-location.ts

@@ -0,0 +1 @@
+export { createLocation } from './create-location';

src/common/utils/create-location/decode-path.ts

@@ -0,0 +1,13 @@
+export function parsePath(path: string) {
+  const url = new URL(path, 'ws://a.a');
+  const isAbsolute = path.startsWith('/');
+
+  const pathname =
+    isAbsolute || url.pathname === '/' ? url.pathname : url.pathname.slice(1);
+
+  return {
+    pathname,
+    search: url.search,
+    hash: url.hash,
+  };
+}