[IMP] components: add back style_class tests

The tests have been adapted to the new way of doing things, some tests are skipped because they rely on features that are not implemented yet
2025-10-06 19:59:41 +07:00 · 2021-10-15 11:40:37 +02:00
parent 0a544bd7e8
commit 900a3ee501
2 changed files with 209 additions and 1 deletions
@@ -137,6 +137,21 @@ exports[`style and class handling can set style and class inside component 1`] =
 }"
 `;

+exports[`style and class handling class on components do not interfere with user defined classes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {c:ctx['state'].c};
+    return block1([d1]);
+  }
+}"
+`;
+
 exports[`style and class handling class on sub component, which is switched to another 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -281,6 +296,33 @@ exports[`style and class handling component class and parent class combine toget
 }"
 `;

+exports[`style and class handling dynamic t-att-style is properly added and updated on widget root el 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = {'font-size':'20px',...ctx['props'].style};
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling dynamic t-att-style is properly added and updated on widget root el 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {style: ctx['state'].style}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
 exports[`style and class handling empty class attribute is not added on widget root el 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -311,6 +353,34 @@ exports[`style and class handling empty class attribute is not added on widget r
 }"
 `;

+exports[`style and class handling error in subcomponent with class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><block-text-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].class;
+    let d2 = this.will.crash;
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`style and class handling error in subcomponent with class 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {class: 'a'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
 exports[`style and class handling no class is set is child ignores it 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -364,6 +434,33 @@ exports[`style and class handling no class is set is parent does not give it as
 }"
 `;

+exports[`style and class handling style is properly added on widget root el 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].style;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`style and class handling style is properly added on widget root el 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {style: 'font-weight: bold;'}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1,4 +1,4 @@
-import { Component, mount, useState, xml } from "../../src";
+import { Component, mount, useState, useRef, xml } from "../../src";
 import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";

 snapshotEverything();
@@ -195,6 +195,7 @@ describe("style and class handling", () => {
    expect(fixture.innerHTML).toBe(`<p><div class="a b c d"></div></p>`);
  });

+  // TODO: adapt name (t-att-class no longer makes sense on Components)
  test("t-att-class is properly added/removed on widget root el (v2)", async () => {
    let child: any = null;
    class Child extends Component {
@@ -234,4 +235,114 @@ describe("style and class handling", () => {
    await nextTick();
    expect(span.className).toBe("c b d");
  });
+
+  // TODO: adapt name (t-att-class no longer makes sense on Components)
+  // TODO: this test depends on ref to components
+  test.skip("t-att-class is properly added/removed on widget root el (v3)", async () => {
+    class Child extends Component {
+      static template = `<span t-name="Child" class="c" t-att-class="state.d ? 'd' : ''"/>`;
+      state = useState({ d: true });
+    }
+    class Parent extends Component {
+      static template = xml`<Child class="a" t-att-class="state.b ? 'b' : ''" t-ref="child"/>`
+      static components = { Child };
+      state = useState({ b: true });
+      child = useRef("child");
+    }
+    const widget = await mount(Parent, fixture);
+
+    const span = fixture.querySelector("span")!;
+    expect(span.className).toBe("c d a b");
+
+    widget.state.b = false;
+    await nextTick();
+    expect(span.className).toBe("c d a");
+
+    (widget.child.comp as Child).state.d = false;
+    await nextTick();
+    expect(span.className).toBe("c a");
+
+    widget.state.b = true;
+    await nextTick();
+    expect(span.className).toBe("c a b");
+
+    (widget.child.comp as Child).state.d = true;
+    await nextTick();
+    expect(span.className).toBe("c a b d");
+  });
+
+  test.skip("class on components do not interfere with user defined classes", async () => {
+    class App extends Component {
+      static template = xml`<div t-att-class="{ c: state.c }" />`;
+      state = useState({ c: true });
+      mounted() {
+        (<HTMLDivElement>this.el!).classList.add("user");
+      }
+    }
+    const widget = await mount(App, fixture);
+
+    expect(fixture.innerHTML).toBe('<div class="c user"></div>');
+
+    widget.state.c = false;
+    await nextTick();
+
+    expect(fixture.innerHTML).toBe('<div class="user"></div>');
+  });
+
+  // TODO: adapt name
+  test("style is properly added on widget root el", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div t-att-style="props.style"/>`;
+    }
+
+    class ParentWidget extends Component {
+      static components = { Child: SomeComponent };
+      static template = xml`<Child style="'font-weight: bold;'"/>`;
+    }
+    await mount(ParentWidget, fixture);
+    expect(fixture.innerHTML).toBe(`<div style="font-weight: bold;"></div>`);
+  });
+
+  // TODO: adapt name
+  // TODO: t-att-style as object (like class)
+  test.skip("dynamic t-att-style is properly added and updated on widget root el", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div t-att-style="{ 'font-size': '20px', ...props.style }"/>`;
+    }
+
+    class ParentWidget extends Component {
+      static template = xml`<Child style="state.style"/>`;
+      static components = { Child: SomeComponent };
+      state = useState({ style: { "font-size": "20px" } });
+    }
+    const widget = await mount(ParentWidget, fixture);
+
+    expect(fixture.innerHTML).toBe(`<div t-att-style="font-size: 20px;"></div>`);
+
+    widget.state.style["font-size"] = "30px" ;
+    await nextTick();
+
+    expect(fixture.innerHTML).toBe(`<div style="font-size: 30px;"></div>`);
+  });
+
+  // TODO: does this test need to be moved? (class now a standard prop)
+  test("error in subcomponent with class", async () => {
+    class Child extends Component {
+      static template = xml`<div t-att-class="props.class" t-esc="this.will.crash"/>`;
+    }
+    class ParentWidget extends Component {
+      static template = xml`<Child class="'a'"/>`;
+      static components = { Child };
+    }
+    let error;
+    try {
+      await mount(ParentWidget, fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    const regexp = /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
+    expect(error.message).toMatch(regexp);
+    expect(fixture.innerHTML).toBe("");
+  });
 });