[IMP] qweb: compiler: support t-key on node and component without t-foreach

tests/qweb/__snapshots__/t_foreach.test.ts.snap

@@ -479,7 +479,8 @@ exports[`t-foreach throws error if invalid loop expression 1`] = `
       ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
       let key1 = ctx['item'];
-      c_block2[i1] = withKey(block3(), key1);
+      const tKey_1 = ctx['item_index'];
+      c_block2[i1] = withKey(block3(), tKey_1 + key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);

tests/qweb/__snapshots__/t_key.test.ts.snap

@@ -9,8 +9,41 @@ exports[`t-key can use t-key directive on a node 1`] = `
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['beer'].id;
     let d1 = ctx['beer'].name;
-    return block1([d1]);
+    return toggler(tKey_1, block1([d1]));
+  }
+}"
+`;
+
+exports[`t-key can use t-key directive on a node 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['beer'].id;
+    let d1 = ctx['beer'].name;
+    return toggler(tKey_1, block1([d1]));
+  }
+}"
+`;
+
+exports[`t-key can use t-key directive on a node as a function 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const tKey_1 = ctx['getKey'](ctx['beer']);
+    let d1 = ctx['beer'].name;
+    return toggler(tKey_1, block1([d1]));
   }
 }"
 `;

tests/qweb/__snapshots__/t_ref.test.ts.snap

@@ -102,10 +102,11 @@ exports[`t-ref refs in a loop 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       let key1 = ctx['item'];
-      const v1 = ctx['item'];
-      let d1 = (el) => refs[\`\${v1}\`] = el;
+      const tKey_1 = ctx['item'];
+      const v2 = ctx['item'];
+      let d1 = (el) => refs[\`\${v2}\`] = el;
       let d2 = ctx['item'];
-      c_block2[i1] = withKey(block3([d1, d2]), key1);
+      c_block2[i1] = withKey(block3([d1, d2]), tKey_1 + key1);
     }
     let b2 = list(c_block2);
     return block1([], [b2]);

tests/qweb/t_key.test.ts

@@ -1,4 +1,5 @@
-import { renderToString, snapshotEverything } from "../helpers";
+import { renderToString, renderToBdom, snapshotEverything, makeTestFixture } from "../helpers";
+import { mount, patch } from "../../src/blockdom/index";
 
 snapshotEverything();
 
@@ -10,6 +11,28 @@ describe("t-key", () => {
     );
   });
 
+  test("can use t-key directive on a node as a function", () => {
+    const template = `<div t-key="getKey(beer)"><t t-esc="beer.name"/></div>`;
+    const getKey = (arg: any) => arg.id;
+    expect(renderToString(template, { getKey, beer: { id: 12, name: "Chimay Rouge" } })).toBe(
+      "<div>Chimay Rouge</div>"
+    );
+  });
+
+  test("can use t-key directive on a node 2", async () => {
+    const template = `<div t-key="beer.id"><t t-esc="beer.name"/></div>`;
+    const bd = renderToBdom(template, { beer: { id: 12, name: "Chimay Rouge" } });
+    const fixture = makeTestFixture();
+    await mount(bd, fixture);
+    const div = fixture.firstChild;
+
+    expect((div as HTMLElement).outerHTML).toBe("<div>Chimay Rouge</div>");
+    const bd2 = renderToBdom(template, { beer: { id: 13, name: "Chimay Rouge" } });
+    await patch(bd, bd2);
+    expect(div !== fixture.firstChild).toBeTruthy();
+    expect((div as HTMLElement).outerHTML).toBe("<div>Chimay Rouge</div>");
+  });
+
   test("t-key directive in a list", () => {
     const template = `<ul>
         <li t-foreach="beers" t-as="beer" t-key="beer.id"><t t-esc="beer.name"/></li>