Update href in location

Author: pbeshai

.gitignore

@@ -4,7 +4,6 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-yarn.lock
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
 node_js:
-  - "10"
+  - "12"
 cache: npm
 

jest.config.js

@@ -156,7 +156,7 @@ module.exports = {
   // testRunner: "jasmine2",
 
   // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
-  // testURL: "http://localhost",
+  testURL: 'http://localhost:3000',
 
   // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
   // timers: "real",

package-lock.json

@@ -39,16 +39,17 @@
   "author": "Peter Beshai <peter.beshai@gmail.com>",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-typescript": "^7.3.3",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-typescript": "^7.9.0",
     "@types/jest": "^24.0.11",
-    "babel-jest": "^24.5.0",
-    "jest": "^24.5.0",
-    "rimraf": "^2.6.3",
-    "typescript": "^3.3.3333"
+    "@types/node": "12.7.4",
+    "babel-jest": "^25.3.0",
+    "jest": "^25.3.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^3.8.3"
   },
   "dependencies": {
-    "query-string": "^5.0.0"
+    "query-string": "5.1.1"
   }
 }

package.json

@@ -2,11 +2,13 @@ import { stringify, ParsedQuery } from 'query-string';
 
 export function makeMockLocation(query: ParsedQuery): Location {
   const queryStr = stringify(query);
+  const search = queryStr.length ? `?${queryStr}` : '';
   return {
     protocol: 'http:',
-    host: 'localhost',
+    host: 'localhost:3000',
     pathname: '/',
-    search: queryStr.length ? `?${queryStr}` : '',
+    search,
+    href: 'http://localhost:3000/' + search,
     key: `mock-${Date.now()}`,
   } as Location & { key: string };
 }

src/__tests__/helpers.ts

@@ -9,6 +9,7 @@ describe('updateLocation', () => {
     expect(newLocation.search).toBe('?foo=xxx');
     expect(newLocation.key).toBeDefined();
     expect(newLocation.key).not.toBe((location as any).key);
+    expect(newLocation.href).toBe('http://localhost:3000/?foo=xxx');
 
     // check multiple params
     expect(
@@ -21,6 +22,7 @@ describe('updateLocation', () => {
     const location = makeMockLocation({ foo: 'abc', bar: '555' });
     const newLocation = updateLocation({}, location);
     expect(newLocation.search).toBe('');
+    expect(newLocation.href).toBe('http://localhost:3000/');
 
     // check updating from no params
     expect(updateLocation({ foo: 'xxx' }, makeMockLocation({})).search).toBe(

src/__tests__/updateLocation-test.ts

@@ -17,7 +17,7 @@ export function decodeQueryParams<QPCMap extends QueryParamConfigMap>(
   for (const paramName of paramNames) {
     const encodedValue = encodedQuery[paramName];
     if (encodedValue == null) {
-      decodedQuery[paramName] = undefined;
+      decodedQuery[paramName as keyof QPCMap] = undefined;
       continue;
     }
 
@@ -32,9 +32,9 @@ export function decodeQueryParams<QPCMap extends QueryParamConfigMap>(
       // it default to be a string type.
       (decodedQuery as any)[paramName] = encodedValue;
     } else {
-      decodedQuery[paramName] = paramConfigMap[paramName].decode(
-        encodedValue as string | string[]
-      );
+      decodedQuery[paramName as keyof QPCMap] = paramConfigMap[
+        paramName
+      ].decode(encodedValue as string | string[]);
     }
   }
 

src/decodeQueryParams.ts

@@ -17,7 +17,7 @@ export function encodeQueryParams<QPCMap extends QueryParamConfigMap>(
   for (const paramName of paramNames) {
     const decodedValue = query[paramName];
     if (decodedValue == null) {
-      encodedQuery[paramName] = undefined;
+      encodedQuery[paramName as keyof QPCMap] = undefined;
       continue;
     }
 
@@ -31,9 +31,9 @@ export function encodeQueryParams<QPCMap extends QueryParamConfigMap>(
       // it be included by default as a string type.
       (encodedQuery as any)[paramName] = String(decodedValue);
     } else {
-      encodedQuery[paramName] = paramConfigMap[paramName].encode(
-        query[paramName]
-      );
+      encodedQuery[paramName as keyof QPCMap] = paramConfigMap[
+        paramName
+      ].encode(query[paramName]);
     }
   }
 

src/encodeQueryParams.ts

@@ -1,4 +1,4 @@
-import { stringify, parse as parseQueryString } from 'query-string';
+import { stringify, parse as parseQueryString, parseUrl } from 'query-string';
 import { EncodedQuery, EncodedQueryWithNulls } from './types';
 
 /**
@@ -32,13 +32,17 @@ export function updateLocation(
   location: Location
 ): Location {
   const encodedSearchString = stringify(filterNully(encodedQuery));
+  const search = encodedSearchString.length ? `?${encodedSearchString}` : '';
+  const href = parseUrl(location.href).url + search;
+
   const newLocation: Location & {
     key: string;
     query: EncodedQueryWithNulls;
   } = {
     ...location,
     key: `${Date.now()}`, // needed for some routers (e.g. react-router)
-    search: encodedSearchString.length ? `?${encodedSearchString}` : '',
+    href,
+    search,
     query: encodedQuery, // needed for some routers (e.g. found)
   };