owl/tests/components/t_key.test.ts

import { snapshotEverything, makeTestFixture, addTemplate } from "../helpers";
import { Component, mount, xml } from "../../src/index";

snapshotEverything();

let fixture: HTMLElement;

beforeEach(() => {
  fixture = makeTestFixture();
});

describe("t-key", () => {
  test("t-key on Component", async () => {
    let childInstance = null;
    class Child extends Component {
      static template = xml`<div t-esc="props.key"></div>`;

      setup() {
        childInstance = this;
      }
    }

    class Parent extends Component {
      static components = { Child };
      static template = xml`<span><Child t-key="key" key="key" /></span>`;

      key = 1;
    }

    const parent = await mount(Parent, fixture);
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div>");

    const oldChild = childInstance;
    parent.key = 2;
    await parent.render();
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div>");
    expect(oldChild === childInstance).toBeFalsy();
  });

  test("t-key on Component as a function", async () => {
    let childInstance = null;
    class Child extends Component {
      static template = xml`<div t-esc="props.key"></div>`;

      setup() {
        childInstance = this;
      }
    }

    let keyCalls = 0;
    let __key = 1;
    class Parent extends Component {
      static components = { Child };
      static template = xml`<span><Child t-key="key" key="key" /></span>`;

      get key() {
        keyCalls++;
        return __key;
      }
    }

    const parent = await mount(Parent, fixture);
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div>");
    expect(keyCalls).toBe(2); // one for t-key, the other for the props

    const oldChild = childInstance;
    __key = 2;
    await parent.render();
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div>");
    expect(oldChild === childInstance).toBeFalsy();
    expect(keyCalls).toBe(4);
  });

  test("t-key on multiple Components", async () => {
    const childInstances = [];
    class Child extends Component {
      static template = xml`<div t-esc="props.key"></div>`;

      setup() {
        childInstances.push(this);
      }
    }

    class Parent extends Component {
      static components = { Child };
      static template = xml`<span>
        <Child t-key="key1" key="key1" />
        <Child t-key="key2" key="key2" />
      </span>`;

      key1 = 1;
      key2 = 2;
    }

    const parent = await mount(Parent, fixture);
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");

    parent.key1 = 2;
    parent.key2 = 1;
    await parent.render();
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div><div>1</div>");
    expect(childInstances.length).toBe(4);
  });

  test("t-key on multiple Components with t-call 1", async () => {
    const childInstances = [];
    class Child extends Component {
      static template = xml`<div t-esc="props.key"></div>`;

      setup() {
        childInstances.push(this);
      }
    }

    addTemplate("calledTemplate", `<Child t-key="key" key="key" />`);

    class Parent extends Component {
      static components = { Child };
      static template = xml`<span>
        <t t-call="calledTemplate"><t t-set="key" t-value="key1" /></t>
        <t t-call="calledTemplate"><t t-set="key" t-value="key2" /></t>
      </span>`;

      key1 = 1;
      key2 = 2;
    }

    const parent = await mount(Parent, fixture);
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");

    parent.key1 = 2;
    parent.key2 = 1;
    await parent.render();
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div><div>1</div>");
    expect(childInstances.length).toBe(4);
  });

  test("t-key on multiple Components with t-call 2", async () => {
    const childInstances = [];
    class Child extends Component {
      static template = xml`<div t-esc="props.key"></div>`;

      setup() {
        childInstances.push(this);
      }
    }

    addTemplate(
      "calledTemplate",
      `<Child t-key="key1" key="key1" /><Child t-key="key2" key="key2" />`
    );

    class Parent extends Component {
      static components = { Child };
      static template = xml`<span>
        <t t-call="calledTemplate" />
      </span>`;

      key1 = 1;
      key2 = 2;
    }

    const parent = await mount(Parent, fixture);
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1</div><div>2</div>");

    parent.key1 = 2;
    parent.key2 = 1;
    await parent.render();
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2</div><div>1</div>");
    expect(childInstances.length).toBe(4);
  });

  test("t-foreach with t-key switch component position", async () => {
    const childInstances = [];
    class Child extends Component {
      static template = xml`<div t-esc="props.key"></div>`;
      setup() {
        childInstances.push(this);
      }
    }

    class Parent extends Component {
      static components = { Child };
      static template = xml`<span>
        <t t-foreach="clist" t-as="c" t-key="c">
          <Child key="c + key1" t-key="key1"/>
        </t>
      </span>`;

      key1 = "key1";
      clist = [1, 2];
    }

    const parent = await mount(Parent, fixture);
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1key1</div><div>2key1</div>");
    parent.clist = [2, 1];
    await parent.render();
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>2key1</div><div>1key1</div>");
    expect(childInstances.length).toBe(2);
    childInstances.length = 0;

    parent.clist = [1, 2];
    parent.key1 = "key2";
    await parent.render();
    expect((parent.el as HTMLElement).innerHTML).toBe("<div>1key2</div><div>2key2</div>");
    expect(childInstances.length).toBe(2);
  });
});