mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[FIX] compiler: t-model on select with options with dynamic values
This commit is contained in:
Lucas Perais (lpe)
committed by
Aaron Bohy
Aaron Bohy
parent
700030cc7d
commit
753d82149e
@@ -1132,6 +1132,81 @@ describe("qweb parser", () => {
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// t-model
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
test("t-model select", async () => {
|
||||
expect(parse(`<select t-model="state.model"><option value="1" /></select>`)).toEqual({
|
||||
type: 2,
|
||||
tag: "select",
|
||||
dynamicTag: null,
|
||||
attrs: {},
|
||||
on: {},
|
||||
ref: null,
|
||||
content: [
|
||||
{
|
||||
type: 2,
|
||||
tag: "option",
|
||||
dynamicTag: null,
|
||||
attrs: { value: "1" },
|
||||
on: {},
|
||||
ref: null,
|
||||
content: [],
|
||||
model: null,
|
||||
ns: null,
|
||||
},
|
||||
],
|
||||
model: {
|
||||
baseExpr: "state",
|
||||
expr: "'model'",
|
||||
targetAttr: "value",
|
||||
specialInitTargetAttr: null,
|
||||
eventType: "change",
|
||||
shouldTrim: false,
|
||||
shouldNumberize: false,
|
||||
},
|
||||
ns: null,
|
||||
});
|
||||
});
|
||||
|
||||
test("t-model select dynamic options", async () => {
|
||||
expect(
|
||||
parse(`<select t-model="state.model"><option t-att-value="valueVar" /></select>`)
|
||||
).toEqual({
|
||||
type: 2,
|
||||
tag: "select",
|
||||
dynamicTag: null,
|
||||
attrs: {},
|
||||
on: {},
|
||||
ref: null,
|
||||
content: [
|
||||
{
|
||||
type: 2,
|
||||
tag: "option",
|
||||
dynamicTag: null,
|
||||
attrs: { "t-att-value": "valueVar" },
|
||||
on: {},
|
||||
ref: null,
|
||||
content: [],
|
||||
model: null,
|
||||
ns: null,
|
||||
},
|
||||
],
|
||||
model: {
|
||||
baseExpr: "state",
|
||||
expr: "'model'",
|
||||
targetAttr: "value",
|
||||
specialInitTargetAttr: null,
|
||||
eventType: "change",
|
||||
shouldTrim: false,
|
||||
shouldNumberize: false,
|
||||
hasDynamicChildren: true,
|
||||
},
|
||||
ns: null,
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// t-component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@@ -360,6 +360,123 @@ exports[`t-model directive on an textarea 1`] = `
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-model directive t-model on select with static options 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
||||
let { toNumber } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
let attr1 = ctx['state']['model'];
|
||||
let hdlr1 = [(ev) => { bExpr1['model'] = ev.target.value; }];
|
||||
let txt1 = 'a';
|
||||
let txt2 = 'b';
|
||||
let txt3 = 'c';
|
||||
return block1([attr1, hdlr1, txt1, txt2, txt3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-model directive t-model with dynamic values on select options -- 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
||||
let { toNumber } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option></select></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
let bValue1 = ctx['state']['model']
|
||||
let hdlr1 = [(ev) => { bExpr1['model'] = ev.target.value; }];
|
||||
let attr1 = ctx['options'][0];
|
||||
let attr2 = bValue1 === ctx['options'][0];
|
||||
let txt1 = ctx['options'][0];
|
||||
let attr3 = (ctx['options'][1]);
|
||||
let attr4 = bValue1 === (ctx['options'][1]);
|
||||
let txt2 = ctx['options'][1];
|
||||
return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-model directive t-model with dynamic values on select options -- 3 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
||||
let { toNumber } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option value=\\"b\\" block-attribute-4=\\"selected\\"><block-text-5/></option></select></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
let bValue1 = ctx['state']['model']
|
||||
let hdlr1 = [(ev) => { bExpr1['model'] = ev.target.value; }];
|
||||
let attr1 = ctx['options'][0];
|
||||
let attr2 = bValue1 === ctx['options'][0];
|
||||
let txt1 = ctx['options'][0];
|
||||
let attr3 = bValue1 === \\"b\\";
|
||||
let txt2 = ctx['options'][1];
|
||||
return block1([hdlr1, attr1, attr2, txt1, attr3, txt2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-model directive t-model with dynamic values on select options 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
||||
let { toNumber } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><option block-attribute-1=\\"value\\" block-attribute-2=\\"selected\\"><block-text-3/></option><option block-attribute-4=\\"value\\" block-attribute-5=\\"selected\\"><block-text-6/></option></select></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
let bValue1 = ctx['state']['model']
|
||||
let hdlr1 = [(ev) => { bExpr1['model'] = ev.target.value; }];
|
||||
let attr1 = ctx['options'][0];
|
||||
let attr2 = bValue1 === ctx['options'][0];
|
||||
let txt1 = ctx['options'][0];
|
||||
let attr3 = ctx['options'][1];
|
||||
let attr4 = bValue1 === ctx['options'][1];
|
||||
let txt2 = ctx['options'][1];
|
||||
return block1([hdlr1, attr1, attr2, txt1, attr3, attr4, txt2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-model directive t-model with dynamic values on select options in foreach 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
||||
let { toNumber, prepareList, withKey } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><select block-handler-0=\\"change\\"><block-child-0/></select></div>\`);
|
||||
let block3 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const bExpr1 = ctx['state'];
|
||||
let bValue1 = ctx['state']['model']
|
||||
let hdlr1 = [(ev) => { bExpr1['model'] = ev.target.value; }];
|
||||
ctx = Object.create(ctx);
|
||||
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);
|
||||
for (let i1 = 0; i1 < l_block2; i1++) {
|
||||
ctx[\`v\`] = v_block2[i1];
|
||||
let key1 = ctx['v'];
|
||||
let attr1 = ctx['v'];
|
||||
let attr2 = bValue1 === ctx['v'];
|
||||
let txt1 = ctx['v'];
|
||||
c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
|
||||
}
|
||||
let b2 = list(c_block2);
|
||||
return block1([hdlr1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
|
||||
@@ -452,4 +452,116 @@ describe("t-model directive", () => {
|
||||
expect(comp.state.choice).toBe("Three");
|
||||
expect(comp.state.lastClicked).toBe("Three");
|
||||
});
|
||||
|
||||
test("t-model on select with static options", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<select t-model="state.model">
|
||||
<option value="a" t-esc="'a'"/>
|
||||
<option value="b" t-esc="'b'"/>
|
||||
<option value="c" t-esc="'c'"/>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
state: any;
|
||||
options: any;
|
||||
setup() {
|
||||
this.state = useState({ model: "b" });
|
||||
this.options = ["a", "b", "c"];
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.querySelector("select")!.value).toEqual("b");
|
||||
});
|
||||
|
||||
test("t-model with dynamic values on select options", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<select t-model="state.model">
|
||||
<option t-att-value="options[0]" t-esc="options[0]"/>
|
||||
<option t-att-value="options[1]" t-esc="options[1]"/>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
state: any;
|
||||
options: any;
|
||||
setup() {
|
||||
this.state = useState({ model: "b" });
|
||||
this.options = ["a", "b"];
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.querySelector("select")!.value).toEqual("b");
|
||||
});
|
||||
|
||||
test("t-model with dynamic values on select options -- 2", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<select t-model="state.model">
|
||||
<option t-att-value="options[0]" t-esc="options[0]"/>
|
||||
<option t-attf-value="{{ options[1] }}" t-esc="options[1]"/>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
state: any;
|
||||
options: any;
|
||||
setup() {
|
||||
this.state = useState({ model: "b" });
|
||||
this.options = ["a", "b"];
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.querySelector("select")!.value).toEqual("b");
|
||||
});
|
||||
|
||||
test("t-model with dynamic values on select options -- 3", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<select t-model="state.model">
|
||||
<option t-att-value="options[0]" t-esc="options[0]"/>
|
||||
<option value="b" t-esc="options[1]"/>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
state: any;
|
||||
options: any;
|
||||
setup() {
|
||||
this.state = useState({ model: "b" });
|
||||
this.options = ["a", "b"];
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.querySelector("select")!.value).toEqual("b");
|
||||
});
|
||||
|
||||
test("t-model with dynamic values on select options in foreach", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<select t-model="state.model">
|
||||
<t t-foreach="options" t-as="v" t-key="v">
|
||||
<option t-att-value="v" t-esc="v"/>
|
||||
</t>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
state: any;
|
||||
options: any;
|
||||
setup() {
|
||||
this.state = useState({ model: "b" });
|
||||
this.options = ["a", "b", "c"];
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.querySelector("select")!.value).toEqual("b");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user