NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] qweb/components: remove t-ref on components

Browse Source 
Refs to component expose a lot of implementation details that should be
private to parents. Parent to child communication should go through
props.
This commit is contained in:
Samuel Degueldre
2021-11-10 08:18:25 +01:00
committed by Géry Debongnie
parent ca139166ab
commit a122a94180
8 changed files with 73 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/refs.test.ts
+9 -100
View File
@@ -10,6 +10,15 @@ beforeEach(() => {
});
describe("refs", () => {
test("basic use", async () => {
class Test extends Component {
static template = xml`<div t-ref="div"/>`;
button = useRef("div");
}
const test = await mount(Test, fixture);
expect(test.button.el).toBe(fixture.firstChild);
});
test("refs are properly bound in slots", async () => {
class Dialog extends Component {
static template = xml`<span><t t-slot="footer"/></span>`;
@@ -44,104 +53,4 @@ describe("refs", () => {
'<div><span class="counter">1</span><span><button>do something</button></span></div>'
);
});
// TODO: rename
test.skip("t-refs on widget are components", async () => {
class Child extends Component {
static template = xml`<div>b</div>`;
}
let parent: Parent;
class Parent extends Component {
static template = xml`<div class="outer-div">Hello<Child t-ref="mywidgetb" /></div>`;
static components = { Child };
ref = useRef<Child>("mywidgetb");
setup() {
parent = this;
}
}
const mounted = mount(Parent, fixture);
expect(parent!.ref.comp).toBe(null);
expect(parent!.ref.el).toBe(null);
await mounted;
expect(parent!.ref.comp).toBeInstanceOf(Child);
expect(parent!.ref.el).toEqual(fixture.querySelector(".outer-div > div"));
});
test.skip("t-refs are bound at proper timing", async () => {
expect.assertions(4);
class Child extends Component {
static template = xml`<div>widget</div>`;
}
class Parent extends Component {
static template = xml`
<div>
<Child t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem"/>
</div>
`;
static components = { Child };
state = useState({ list: <any>[] });
child = useRef("child");
willPatch() {
expect(this.child.comp).toBeNull();
}
patched() {
expect(this.child.comp).not.toBeNull();
}
}
const parent = await mount(Parent, fixture);
parent.state.list.push(1);
await nextTick();
});
test.skip("t-refs are bound at proper timing (2)", async () => {
expect.assertions(10);
class Child extends Component {
static template = xml`<div>widget</div>`;
}
class Parent extends Component {
static template = xml`
<div>
<Child t-if="state.child1" t-ref="child1"/>
<Child t-if="state.child2" t-ref="child2"/>
</div>`;
static components = { Child };
state = useState({ child1: true, child2: false });
child1 = useRef("child1");
child2 = useRef("child2");
count = 0;
mounted() {
expect(this.child1.comp).toBeDefined();
expect(this.child2.comp).toBeNull();
}
willPatch() {
if (this.count === 0) {
expect(this.child1.comp).toBeDefined();
expect(this.child2.comp).toBeNull();
}
if (this.count === 1) {
expect(this.child1.comp).toBeDefined();
expect(this.child2.comp).toBeDefined();
}
}
patched() {
if (this.count === 0) {
expect(this.child1.comp).toBeDefined();
expect(this.child2.comp).toBeDefined();
}
if (this.count === 1) {
expect(this.child1.comp).toBeNull();
expect(this.child2.comp).toBeDefined();
}
this.count++;
}
}
const parent = await mount(Parent, fixture);
parent.state.child2 = true;
await nextTick();
parent.state.child1 = false;
await nextTick();
});
});