mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Géry Debongnie
f892929c80
Before this commit, properties were just handled as a special case of attributes. But it does not make that much sense, since they are different. For example, the `readOnly` property does not have the same name as the `readonly` attribute. The confusion probably comes from the fact that QWeb does not distinguish between property and attributes, so Owl has to infer which one is which. With this commit, we introduce a `block-property` directive in blockdom, and change the compiler to use it in emitted code. It has the additional benefits of slightly shrinking the runtime code, since the `isProp` function can now be located in the compiler.
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { mount, patch, createBlock } from "../../src/runtime/blockdom";
|
|
import { makeTestFixture } from "./helpers";
|
|
|
|
//------------------------------------------------------------------------------
|
|
// Setup and helpers
|
|
//------------------------------------------------------------------------------
|
|
|
|
let fixture: HTMLElement;
|
|
|
|
beforeEach(() => {
|
|
fixture = makeTestFixture();
|
|
});
|
|
|
|
afterEach(() => {
|
|
fixture.remove();
|
|
});
|
|
|
|
test("input with value property", () => {
|
|
// render input with initial value
|
|
const block = createBlock(`<input block-property-0="value"/>`);
|
|
|
|
const tree = block(["zucchini"]);
|
|
mount(tree, fixture);
|
|
// const bnode1 = renderToBdom(template, { v: "zucchini" });
|
|
// const fixture = makeTestFixture();
|
|
// mount(bnode1, fixture);
|
|
const input = fixture.querySelector("input")!;
|
|
expect(input.value).toBe("zucchini");
|
|
|
|
// change value manually in input, to simulate user input
|
|
input.value = "tomato";
|
|
expect(input.value).toBe("tomato");
|
|
|
|
// rerender with a different value, and patch actual dom, to check that
|
|
// input value was properly reset by owl
|
|
patch(tree, block(["potato"]));
|
|
expect(input.value).toBe("potato");
|
|
});
|
|
|
|
test("input with value property, and falsy value given", () => {
|
|
const block = createBlock(`<input block-property-0="value"/>`);
|
|
|
|
const tree = block([undefined]);
|
|
mount(tree, fixture);
|
|
const input = fixture.querySelector("input")!;
|
|
expect(input.value).toBe("");
|
|
|
|
patch(tree, block([null]));
|
|
expect(input.value).toBe("");
|
|
|
|
patch(tree, block([0]));
|
|
expect(input.value).toBe("0");
|
|
|
|
patch(tree, block([""]));
|
|
expect(input.value).toBe("");
|
|
|
|
patch(tree, block([false]));
|
|
expect(input.value).toBe("");
|
|
});
|
|
|
|
test("input type=checkbox with checked property", () => {
|
|
// render input with initial value
|
|
const block = createBlock(`<input type="checkbox" block-property-0="checked"/>`);
|
|
|
|
const tree = block([true]);
|
|
mount(tree, fixture);
|
|
expect(fixture.innerHTML).toBe(`<input type="checkbox">`);
|
|
const input = fixture.querySelector("input")!;
|
|
expect(input.checked).toBe(true);
|
|
});
|