[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

src/core/observer.ts

@@ -25,7 +25,6 @@ export class Observer {
 
   notifyCB() {}
   async notifyChange() {
-
     this.dirty = true;
     await Promise.resolve();
     if (this.dirty) {

src/router/Router.ts

@@ -85,9 +85,6 @@ export class Router {
       this.routeIds.push(partialRoute.name);
     }
 
-    (this as any)._listener = () => this.matchAndApplyRules(this.currentPath());
-    window.addEventListener("popstate", (this as any)._listener);
-
     // setup link and directive
     env.qweb.addTemplate(LINK_TEMPLATE_NAME, LINK_TEMPLATE);
     QWeb.addDirective(makeDirective(<RouterEnv>env));
@@ -98,6 +95,11 @@ export class Router {
   //--------------------------------------------------------------------------
 
   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());
     if (result.type === "match") {
       this.currentRoute = result.route;
@@ -111,6 +113,9 @@ export class Router {
 
   async navigate(to: Destination): Promise<boolean> {
     const path = this.destToPath(to);
+    return this._navigate(path);
+  }
+  async _navigate(path: string): Promise<boolean> {
     const initialName = this.currentRouteName;
     const initialParams = this.currentParams;
     const result = await this.matchAndApplyRules(path);

src/store/store.ts

@@ -56,7 +56,7 @@ export class Store extends EventBus {
     if (config.getters) {
       const firstArg = {
         state: this.state,
-            getters: this.getters,
+        getters: this.getters
       };
       for (let g in config.getters) {
         this.getters[g] = config.getters[g].bind(this, firstArg);

src/vdom/vdom.ts

@@ -526,7 +526,7 @@ const htmlDomApi = {
   parentNode,
   nextSibling,
   tagName,
-  setTextContent,
+  setTextContent
 } as DOMAPI;
 
 //------------------------------------------------------------------------------

tests/component/props_validation.test.ts

@@ -280,7 +280,7 @@ describe("props validation", () => {
 
   test("props: extra props cause an error, part 2", async () => {
     class TestWidget extends Widget {
-      static props = {message: true};
+      static props = { message: true };
     }
 
     expect(() => {
@@ -294,23 +294,22 @@ describe("props validation", () => {
     }
 
     expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1});
+      QWeb.utils.validateProps(TestWidget, { message: 1 });
     }).not.toThrow();
   });
 
   test("optional prop do not cause an error if value is undefined", async () => {
     class TestWidget extends Widget {
-      static props = {message: {type: String, optional: true}};
+      static props = { message: { type: String, optional: true } };
     }
 
     expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: undefined});
+      QWeb.utils.validateProps(TestWidget, { message: undefined });
     }).not.toThrow();
     expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: null});
+      QWeb.utils.validateProps(TestWidget, { message: null });
     }).toThrow();
   });
-
 });
 
 describe("default props", () => {

tests/core/observer.test.ts

@@ -65,7 +65,7 @@ describe("observer", () => {
     expect(observer.revNumber(obj)).toBe(1);
     expect(observer.deepRevNumber(obj)).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);
 
     obj.date = new Date();

tests/router/router.test.ts

@@ -1,5 +1,5 @@
 import { Destination, RouterEnv, Route } from "../../src/router/Router";
-import { makeTestEnv } from "../helpers";
+import { makeTestEnv, nextTick } from "../helpers";
 import { TestRouter } from "./TestRouter";
 
 let env: RouterEnv;
@@ -37,6 +37,21 @@ describe("router miscellaneous", () => {
     expect(window.location.pathname).toBe("/users/5");
     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", () => {

tests/store/connected_component.test.ts

@@ -628,7 +628,7 @@ describe("connecting a component to store", () => {
       }
     }
 
-    const state = { someId: 1, flag: true, messages: {1: "abc"}};
+    const state = { someId: 1, flag: true, messages: { 1: "abc" } };
     const actions = {
       setFlagToFalse({ state }) {
         state.flag = false;
@@ -1040,7 +1040,7 @@ describe("connected components and default values", () => {
         super.off(eventType, owner);
       }
     }
-    const store = new TestStore({ state: {val: 1} });
+    const store = new TestStore({ state: { val: 1 } });
     (<any>env).store = store;
     const parent = new Parent(env);
 
@@ -1088,7 +1088,7 @@ describe("connected components and default values", () => {
     await app.mount(fixture);
     expect(fixture.innerHTML).toBe("<div>0</div>");
 
-    const res = app.dispatch('inc');
+    const res = app.dispatch("inc");
     expect(res).toBe(1);
     await nextTick();
     expect(fixture.innerHTML).toBe("<div>1</div>");