[FIX] router: properly react on hashchange

Before this commit, hashchanges were not taken into account by the
router, if used in history mode.

Also, it's stupid, but i ran prettier on the codebase
This commit is contained in:
Géry Debongnie
2019-09-01 11:45:13 +02:00
parent 40d8090232
commit f9861040c8
10 changed files with 73 additions and 55 deletions
-1
View File
@@ -25,7 +25,6 @@ export class Observer {
notifyCB() {} notifyCB() {}
async notifyChange() { async notifyChange() {
this.dirty = true; this.dirty = true;
await Promise.resolve(); await Promise.resolve();
if (this.dirty) { if (this.dirty) {
+8 -3
View File
@@ -85,9 +85,6 @@ export class Router {
this.routeIds.push(partialRoute.name); this.routeIds.push(partialRoute.name);
} }
(this as any)._listener = () => this.matchAndApplyRules(this.currentPath());
window.addEventListener("popstate", (this as any)._listener);
// setup link and directive // setup link and directive
env.qweb.addTemplate(LINK_TEMPLATE_NAME, LINK_TEMPLATE); env.qweb.addTemplate(LINK_TEMPLATE_NAME, LINK_TEMPLATE);
QWeb.addDirective(makeDirective(<RouterEnv>env)); QWeb.addDirective(makeDirective(<RouterEnv>env));
@@ -98,6 +95,11 @@ export class Router {
//-------------------------------------------------------------------------- //--------------------------------------------------------------------------
async start() { async start() {
(this as any)._listener = () => this._navigate(this.currentPath());
window.addEventListener("popstate", (this as any)._listener);
if (this.mode === "hash") {
window.addEventListener("hashchange", (this as any)._listener);
}
const result = await this.matchAndApplyRules(this.currentPath()); const result = await this.matchAndApplyRules(this.currentPath());
if (result.type === "match") { if (result.type === "match") {
this.currentRoute = result.route; this.currentRoute = result.route;
@@ -111,6 +113,9 @@ export class Router {
async navigate(to: Destination): Promise<boolean> { async navigate(to: Destination): Promise<boolean> {
const path = this.destToPath(to); const path = this.destToPath(to);
return this._navigate(path);
}
async _navigate(path: string): Promise<boolean> {
const initialName = this.currentRouteName; const initialName = this.currentRouteName;
const initialParams = this.currentParams; const initialParams = this.currentParams;
const result = await this.matchAndApplyRules(path); const result = await this.matchAndApplyRules(path);
+1 -1
View File
@@ -56,7 +56,7 @@ export class Store extends EventBus {
if (config.getters) { if (config.getters) {
const firstArg = { const firstArg = {
state: this.state, state: this.state,
getters: this.getters, getters: this.getters
}; };
for (let g in config.getters) { for (let g in config.getters) {
this.getters[g] = config.getters[g].bind(this, firstArg); this.getters[g] = config.getters[g].bind(this, firstArg);
+1 -1
View File
@@ -526,7 +526,7 @@ const htmlDomApi = {
parentNode, parentNode,
nextSibling, nextSibling,
tagName, tagName,
setTextContent, setTextContent
} as DOMAPI; } as DOMAPI;
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
-1
View File
@@ -310,7 +310,6 @@ describe("props validation", () => {
QWeb.utils.validateProps(TestWidget, { message: null }); QWeb.utils.validateProps(TestWidget, { message: null });
}).toThrow(); }).toThrow();
}); });
}); });
describe("default props", () => { describe("default props", () => {
+1 -1
View File
@@ -65,7 +65,7 @@ describe("observer", () => {
expect(observer.revNumber(obj)).toBe(1); expect(observer.revNumber(obj)).toBe(1);
expect(observer.deepRevNumber(obj)).toBe(1); expect(observer.deepRevNumber(obj)).toBe(1);
expect(observer.rev).toBe(1); expect(observer.rev).toBe(1);
expect(typeof obj.date.getFullYear()).toBe('number'); expect(typeof obj.date.getFullYear()).toBe("number");
expect(obj.date).toBe(date); expect(obj.date).toBe(date);
obj.date = new Date(); obj.date = new Date();
+16 -1
View File
@@ -1,5 +1,5 @@
import { Destination, RouterEnv, Route } from "../../src/router/Router"; import { Destination, RouterEnv, Route } from "../../src/router/Router";
import { makeTestEnv } from "../helpers"; import { makeTestEnv, nextTick } from "../helpers";
import { TestRouter } from "./TestRouter"; import { TestRouter } from "./TestRouter";
let env: RouterEnv; let env: RouterEnv;
@@ -37,6 +37,21 @@ describe("router miscellaneous", () => {
expect(window.location.pathname).toBe("/users/5"); expect(window.location.pathname).toBe("/users/5");
expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(2); expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(2);
}); });
test("changing url to same route but with different params should trigger update (hash mode)", async () => {
env.qweb.forceUpdate = jest.fn();
router = new TestRouter(env, [{ name: "users", path: "/users/{{id}}" }], { mode: "hash" });
await router.start();
await router.navigate({ to: "users", params: { id: 3 } });
expect(window.location.hash).toBe("#/users/3");
expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(1);
window.location.hash = "/users/5";
window.dispatchEvent(new Event("hashchange"));
await nextTick();
expect(window.location.hash).toBe("#/users/5");
expect(env.qweb.forceUpdate).toHaveBeenCalledTimes(2);
});
}); });
describe("routeToPath", () => { describe("routeToPath", () => {
+1 -1
View File
@@ -1088,7 +1088,7 @@ describe("connected components and default values", () => {
await app.mount(fixture); await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div>0</div>"); expect(fixture.innerHTML).toBe("<div>0</div>");
const res = app.dispatch('inc'); const res = app.dispatch("inc");
expect(res).toBe(1); expect(res).toBe(1);
await nextTick(); await nextTick();
expect(fixture.innerHTML).toBe("<div>1</div>"); expect(fixture.innerHTML).toBe("<div>1</div>");