From 73fb8f899873360998c060e13f9d991adb88260b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Mon, 15 Apr 2019 16:37:00 +0200
Subject: [PATCH] [FIX] store: connected component deeply reactive with
 undefined, null and string props

Revision on https://github.com/odoo/owl/commit/9f77344c3a19592d4a37df43b65f9e647fe41f24

Deeply reactive version of fix above.
---
 tests/store.test.ts | 72 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/tests/store.test.ts b/tests/store.test.ts
index c49abe03..0b07d704 100644
--- a/tests/store.test.ts
+++ b/tests/store.test.ts
@@ -832,4 +832,76 @@ describe("connecting a component to store", () => {
       "<div><div><span>taster:aaron</span><span>consumed:jupiler</span></div></div>"
     );
   });
+
+  test("connected component deeply reactive with undefined, null and string props", async () => {
+    class Beer extends Component<any, any, any> {
+      inlineTemplate = `<div>
+          <span>taster:<t t-esc="props.taster"/></span>
+          <span t-if="props.selected">selected:<t t-esc="props.selected.name"/></span>
+          <span t-if="props.consumed">consumed:<t t-esc="props.consumed.name"/></span>
+        </div>`;
+    }
+    const ConnectedBeer = connect((state, props) => {
+      return {
+        selected: state.beers[props.id],
+        consumed: state.beers[state.consumedID] || null,
+        taster: state.taster,
+      };
+    })(Beer);
+
+    class App extends Component<any, any, any> {
+      inlineTemplate = `<div>
+              <t t-widget="ConnectedBeer" t-props="{id: state.beerId}"/>
+          </div>`;
+      widgets = { ConnectedBeer };
+      state = { beerId: 0 };
+    }
+
+    const mutations = {
+      changeTaster({ state }, newTaster) {
+        state.taster = newTaster;
+      },
+      consume({ state }, beerId) {
+        state.consumedID = beerId;
+      },
+      renameBeer({ state }, { beerId, name }) {
+        state.beers[beerId].name = name;
+      },
+    };
+    const state = {
+      beers: {
+        1: { name: "jupiler" }
+      },
+      consumedID: null,
+      taster: "aaron"
+    };
+    const store = new Store({ state, mutations });
+    (<any>env).store = store;
+    const app = new App(env);
+
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div><span>taster:aaron</span></div></div>");
+
+    await app.updateState({ beerId: 1 });
+    expect(fixture.innerHTML).toBe("<div><div><span>taster:aaron</span><span>selected:jupiler</span></div></div>");
+
+    store.commit("renameBeer", { beerId: 1, name: "kwak" });
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><div><span>taster:aaron</span><span>selected:kwak</span></div></div>");
+
+    store.commit("consume", 1);
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><div><span>taster:aaron</span><span>selected:kwak</span><span>consumed:kwak</span></div></div>");
+
+    await app.updateState({ beerId: 0 });
+    expect(fixture.innerHTML).toBe("<div><div><span>taster:aaron</span><span>consumed:kwak</span></div></div>");
+
+    store.commit("renameBeer", { beerId: 1, name: "jupiler" });
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><div><span>taster:aaron</span><span>consumed:jupiler</span></div></div>");
+
+    store.commit("changeTaster", "matthieu");
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><div><span>taster:matthieu</span><span>consumed:jupiler</span></div></div>");
+  });
 });