mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
|
import {HistWindow, UrlState} from 'app/client/lib/UrlState';
|
||
|
|
import {assert} from 'chai';
|
||
|
|
import {dom} from 'grainjs';
|
||
|
|
import {popGlobals, pushGlobals} from 'grainjs/dist/cjs/lib/browserGlobals';
|
||
|
|
import {JSDOM} from 'jsdom';
|
||
|
|
import fromPairs = require('lodash/fromPairs');
|
||
|
|
|
||
|
|
describe('UrlState', function() {
|
||
|
|
let mockWindow: HistWindow;
|
||
|
|
|
||
|
|
function pushState(state: any, title: any, href: string) {
|
||
|
|
mockWindow.location = new URL(href) as unknown as Location;
|
||
|
|
}
|
||
|
|
|
||
|
|
beforeEach(function() {
|
||
|
|
mockWindow = {
|
||
|
|
location: new URL('http://localhost:8080') as unknown as Location,
|
||
|
|
history: {pushState} as History,
|
||
|
|
addEventListener: () => undefined,
|
||
|
|
removeEventListener: () => undefined,
|
||
|
|
dispatchEvent: () => true,
|
||
|
|
};
|
||
|
|
// These grainjs browserGlobals are needed for using dom() in tests.
|
||
|
|
const jsdomDoc = new JSDOM("<!doctype html><html><body></body></html>");
|
||
|
|
pushGlobals(jsdomDoc.window);
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(function() {
|
||
|
|
popGlobals();
|
||
|
|
});
|
||
|
|
|
||
|
|
interface State {
|
||
|
|
[key: string]: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function encodeUrl(state: State, baseLocation: Location | URL): string {
|
||
|
|
const url = new URL(baseLocation.href);
|
||
|
|
for (const key of Object.keys(state)) { url.searchParams.set(key, state[key]); }
|
||
|
|
return url.href;
|
||
|
|
}
|
||
|
|
function decodeUrl(location: Location | URL): State {
|
||
|
|
const url = new URL(location.href);
|
||
|
|
return fromPairs(Array.from(url.searchParams.entries()));
|
||
|
|
}
|
||
|
|
function updateState(prevState: State, newState: State): State {
|
||
|
|
return {...prevState, ...newState};
|
||
|
|
}
|
||
|
|
function needPageLoad(prevState: State, newState: State): boolean {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
async function delayPushUrl(prevState: State, newState: State): Promise<void> {
|
||
|
|
// no-op
|
||
|
|
}
|
||
|
|
|
||
|
|
it('should produce correct results with configProd', async function() {
|
||
|
|
mockWindow.location = new URL('https://example.com/?foo=A&bar=B') as unknown as Location;
|
||
|
|
const urlState = new UrlState<State>(mockWindow, {encodeUrl, decodeUrl, updateState, needPageLoad, delayPushUrl});
|
||
|
|
assert.deepEqual(urlState.state.get(), {foo: 'A', bar: 'B'});
|
||
|
|
|
||
|
|
const link = dom('a', urlState.setLinkUrl({bar: 'C'}));
|
||
|
|
assert.equal(link.getAttribute('href'), 'https://example.com/?foo=A&bar=C');
|
||
|
|
|
||
|
|
assert.equal(urlState.makeUrl({bar: "X"}), 'https://example.com/?foo=A&bar=X');
|
||
|
|
assert.equal(urlState.makeUrl({foo: 'F', bar: ""}), 'https://example.com/?foo=F&bar=');
|
||
|
|
|
||
|
|
await urlState.pushUrl({bar: 'X'});
|
||
|
|
assert.equal(mockWindow.location.href, 'https://example.com/?foo=A&bar=X');
|
||
|
|
assert.deepEqual(urlState.state.get(), {foo: 'A', bar: 'X'});
|
||
|
|
assert.equal(link.getAttribute('href'), 'https://example.com/?foo=A&bar=C');
|
||
|
|
|
||
|
|
await urlState.pushUrl({foo: 'F', baz: 'T'});
|
||
|
|
assert.equal(mockWindow.location.href, 'https://example.com/?foo=F&bar=X&baz=T');
|
||
|
|
assert.deepEqual(urlState.state.get(), {foo: 'F', bar: 'X', baz: 'T'});
|
||
|
|
assert.equal(link.getAttribute('href'), 'https://example.com/?foo=F&bar=C&baz=T');
|
||
|
|
});
|
||
|
|
});
|