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] types: make component generic types optional

Browse Source 
In most cases, we just want Component<any, Env>. But since it was so
annoying to have always the type Env, we actually used
Component<any,any> everywhere.

With this commit, the generic types have a default (and their order is
swapped), so we can simply use Component in most cases, and
Component<Props> when we want to type the props.
This commit is contained in:
Géry Debongnie
2020-02-05 21:30:14 +01:00
committed by aab-odoo
parent d212309f1b
commit 3fdc7a48f3
33 changed files with 700 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/component/async.test.ts
+66 -66
View File
@@ -25,7 +25,7 @@ afterEach(() => {
fixture.remove();
});
function children(w: Component<any, any>): Component<any, any>[] {
function children(w: Component): Component[] {
const childrenMap = w.__owl__.children;
return Object.keys(childrenMap).map(id => childrenMap[id]);
}
@@ -33,7 +33,7 @@ function children(w: Component<any, any>): Component<any, any>[] {
describe("async rendering", () => {
test("destroying a widget before start is over", async () => {
let def = makeDeferred();
class W extends Component<any, any> {
class W extends Component {
static template = xml`<div/>`;
willStart(): Promise<void> {
return def;
@@ -53,7 +53,7 @@ describe("async rendering", () => {
test("destroying/recreating a subwidget with different props (if start is not over)", async () => {
let def = makeDeferred();
let n = 0;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span>child:<t t-esc="props.val"/></span>`;
constructor(parent, props) {
super(parent, props);
@@ -63,7 +63,7 @@ describe("async rendering", () => {
return def;
}
}
class W extends Component<any, any> {
class W extends Component {
static template = xml`<div><t t-if="state.val > 1"><Child val="state.val"/></t></div>`;
static components = { Child };
state = useState({ val: 1 });
@@ -90,7 +90,7 @@ describe("async rendering", () => {
let defB = makeDeferred();
let nbRenderings: number = 0;
class ChildA extends Component<any, any> {
class ChildA extends Component {
static template = xml`<span><t t-esc="getValue()"/></span>`;
willStart(): Promise<void> {
return defA;
@@ -101,13 +101,13 @@ describe("async rendering", () => {
}
}
class ChildB extends Component<any, any> {
class ChildB extends Component {
static template = xml`<span>b</span>`;
willStart(): Promise<void> {
return defB;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<t t-if="state.flagA"><ChildA /></t>
@@ -139,20 +139,20 @@ describe("async rendering", () => {
let defA = makeDeferred();
let defB = makeDeferred();
class ChildA extends Component<any, any> {
class ChildA extends Component {
static template = xml`<span>a<t t-esc="props.val"/></span>`;
willUpdateProps(): Promise<void> {
return defA;
}
}
class ChildB extends Component<any, any> {
class ChildB extends Component {
static template = xml`<span>b<t t-esc="props.val"/></span>`;
willStart(): Promise<void> {
return defB;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<ChildA val="state.valA"/>
@@ -182,20 +182,20 @@ describe("async rendering", () => {
let defA = makeDeferred();
let defB = makeDeferred();
class ChildA extends Component<any, any> {
class ChildA extends Component {
static template = xml`<span>a<t t-esc="props.val"/></span>`;
willUpdateProps(): Promise<void> {
return defA;
}
}
class ChildB extends Component<any, any> {
class ChildB extends Component {
static template = xml`<span>b<t t-esc="props.val"/></span>`;
willStart(): Promise<void> {
return defB;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<ChildA val="state.valA"/>
@@ -224,7 +224,7 @@ describe("async rendering", () => {
const steps: string[] = [];
const defs = [makeDeferred(), makeDeferred()];
let index = 0;
class ChildA extends Component<any, any> {
class ChildA extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
willUpdateProps(): Promise<void> {
return defs[index++];
@@ -234,7 +234,7 @@ describe("async rendering", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><ChildA val="state.valA"/></div>`;
static components = { ChildA };
state = useState({ valA: 1 });
@@ -258,7 +258,7 @@ describe("async rendering", () => {
test("update a sub-component twice in the same frame, 2", async () => {
const steps: string[] = [];
class ChildA extends Component<any, any> {
class ChildA extends Component {
static template = xml`<span><t t-esc="val()"/></span>`;
patched() {
steps.push("patched");
@@ -269,7 +269,7 @@ describe("async rendering", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><ChildA val="state.valA"/></div>`;
static components = { ChildA };
state = useState({ valA: 1 });
@@ -302,9 +302,9 @@ describe("async rendering", () => {
});
test("components in a node in a t-foreach ", async () => {
class Child extends Component<any, any> {}
class Child extends Component {}
class App extends Component<any, any> {
class App extends Component {
static components = { Child };
get items() {
@@ -335,7 +335,7 @@ describe("async rendering", () => {
test("properly behave when destroyed/unmounted while rendering ", async () => {
const def = makeDeferred();
class SubChild extends Component<any, any> {
class SubChild extends Component {
static template = xml`<div/>`;
willPatch() {
throw new Error("Should not happen!");
@@ -348,12 +348,12 @@ describe("async rendering", () => {
}
}
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div><SubChild /></div>`;
static components = { SubChild };
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><t t-if="state.flag"><Child val="state.val"/></t></div>`;
static components = { Child };
state = useState({ flag: true, val: "Framboise Lindemans" });
@@ -396,18 +396,18 @@ describe("async rendering", () => {
`);
let destroyCount = 0;
class ChildA extends Component<any, any> {
class ChildA extends Component {
destroy() {
destroyCount++;
super.destroy();
}
}
class ChildB extends Component<any, any> {
class ChildB extends Component {
willStart(): any {
return new Promise(function() {});
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { ChildA, ChildB };
state = useState({ valA: 1, valB: 2, flag: false });
}
@@ -426,11 +426,11 @@ describe("async rendering", () => {
});
test("rendering component again in next microtick", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div t-name="Child">Child</div>`;
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<button t-on-click="onClick">Click</button>
@@ -458,7 +458,7 @@ describe("async rendering", () => {
const def = makeDeferred();
let stateB;
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="someValue()"/></span>`;
someValue() {
return this.props.fromB;
@@ -469,7 +469,7 @@ describe("async rendering", () => {
}
ComponentC.prototype.someValue = jest.fn(ComponentC.prototype.someValue);
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static components = { ComponentC };
static template = xml`<p><ComponentC fromA="props.fromA" fromB="state.fromB" /></p>`;
state = useState({ fromB: "b" });
@@ -480,7 +480,7 @@ describe("async rendering", () => {
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
@@ -514,14 +514,14 @@ describe("async rendering", () => {
const defs = [makeDeferred(), makeDeferred()];
let index = 0;
let stateB;
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="props.fromB"/></span>`;
willUpdateProps() {
return defs[index++];
}
}
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" fromB="state.fromB" /></p>`;
static components = { ComponentC };
state = useState({ fromB: "b" });
@@ -532,7 +532,7 @@ describe("async rendering", () => {
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static template = xml`<div><t t-esc="state.fromA"/><ComponentB fromA="state.fromA"/></div>`;
static components = { ComponentB };
state = useState({ fromA: 1 });
@@ -564,14 +564,14 @@ describe("async rendering", () => {
const defs = [makeDeferred(), makeDeferred()];
let index = 0;
let stateB;
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="props.fromB"/></span>`;
willUpdateProps() {
return defs[index++];
}
}
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" fromB="state.fromB" /></p>`;
static components = { ComponentC };
state = useState({ fromB: "b" });
@@ -582,7 +582,7 @@ describe("async rendering", () => {
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
static components = { ComponentB };
state = useState({ fromA: 1 });
@@ -616,7 +616,7 @@ describe("async rendering", () => {
let index = 0;
let stateC;
class ComponentD extends Component<any, any> {
class ComponentD extends Component {
static template = xml`<i><t t-esc="props.fromA"/><t t-esc="someValue()"/></i>`;
someValue() {
return this.props.fromC;
@@ -627,7 +627,7 @@ describe("async rendering", () => {
}
ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue);
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<span><ComponentD fromA="props.fromA" fromC="state.fromC" /></span>`;
static components = { ComponentD };
state = useState({ fromC: "c" });
@@ -637,7 +637,7 @@ describe("async rendering", () => {
}
}
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" /></p>`;
static components = { ComponentC };
@@ -646,7 +646,7 @@ describe("async rendering", () => {
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
@@ -686,7 +686,7 @@ describe("async rendering", () => {
let index = 0;
let stateC;
class ComponentD extends Component<any, any> {
class ComponentD extends Component {
static template = xml`<i><t t-esc="props.fromA"/><t t-esc="someValue()"/></i>`;
someValue() {
return this.props.fromC;
@@ -697,7 +697,7 @@ describe("async rendering", () => {
}
ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue);
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<span><ComponentD fromA="props.fromA" fromC="state.fromC" /></span>`;
static components = { ComponentD };
state = useState({ fromC: "c" });
@@ -707,7 +707,7 @@ describe("async rendering", () => {
}
}
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" /></p>`;
static components = { ComponentC };
@@ -716,7 +716,7 @@ describe("async rendering", () => {
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
@@ -754,7 +754,7 @@ describe("async rendering", () => {
const defsB = [makeDeferred(), makeDeferred()];
let index = 0;
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><t t-esc="someValue()" /></p>`;
someValue() {
return this.props.fromA;
@@ -765,7 +765,7 @@ describe("async rendering", () => {
}
ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue);
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
@@ -799,7 +799,7 @@ describe("async rendering", () => {
const defsB = [makeDeferred(), makeDeferred()];
let index = 0;
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><t t-esc="someValue()" /></p>`;
someValue() {
return this.props.fromA;
@@ -810,7 +810,7 @@ describe("async rendering", () => {
}
ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue);
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
@@ -841,7 +841,7 @@ describe("async rendering", () => {
});
test("concurrent renderings scenario 7", async () => {
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><t t-esc="props.fromA" /><t t-esc="someValue()" /></p>`;
state = useState({ fromB: "b" });
someValue() {
@@ -853,7 +853,7 @@ describe("async rendering", () => {
}
ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue);
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
@@ -874,7 +874,7 @@ describe("async rendering", () => {
test("concurrent renderings scenario 8", async () => {
const def = makeDeferred();
let stateB;
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><t t-esc="props.fromA" /><t t-esc="state.fromB" /></p>`;
state = useState({ fromB: "b" });
constructor(parent, props) {
@@ -886,7 +886,7 @@ describe("async rendering", () => {
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
@@ -925,10 +925,10 @@ describe("async rendering", () => {
// re-rendering
const def = makeDeferred();
let stateC;
class ComponentD extends Component<any, any> {
class ComponentD extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="props.fromC"/></span>`;
}
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<p><ComponentD fromA="props.fromA" fromC="state.fromC" /></p>`;
static components = { ComponentD };
state = useState({ fromC: "b1" });
@@ -938,13 +938,13 @@ describe("async rendering", () => {
stateC = this.state;
}
}
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<b><t t-esc="props.fromA"/></b>`;
willUpdateProps() {
return def;
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static template = xml`
<div>
<t t-esc="state.fromA"/>
@@ -991,14 +991,14 @@ describe("async rendering", () => {
const defB = makeDeferred();
const defC = makeDeferred();
let stateB;
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<span><t t-esc="props.value"/></span>`;
willStart() {
return defC;
}
}
ComponentC.prototype.__render = jest.fn(ComponentC.prototype.__render);
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static template = xml`<p><ComponentC t-if="state.hasChild" value="props.value"/></p>`;
state = useState({ hasChild: false });
static components = { ComponentC };
@@ -1010,7 +1010,7 @@ describe("async rendering", () => {
return defB;
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static template = xml`<div><ComponentB value="state.value"/></div>`;
static components = { ComponentB };
state = useState({ value: 1 });
@@ -1042,7 +1042,7 @@ describe("async rendering", () => {
// remapped to the promise of the ambient rendering)
const def = makeDeferred();
let child;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/>|<t t-esc="val"/></span>`;
val = 3;
willUpdateProps() {
@@ -1051,7 +1051,7 @@ describe("async rendering", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child val="state.valA"/></div>`;
static components = { Child };
state = useState({ valA: 1 });
@@ -1079,14 +1079,14 @@ describe("async rendering", () => {
// rendered but not completed yet)
const def = makeDeferred();
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
willUpdateProps() {
return def;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child val="state.val"/></div>`;
static components = { Child };
state = useState({ val: 1 });
@@ -1117,7 +1117,7 @@ describe("async rendering", () => {
test("concurrent renderings scenario 13", async () => {
let lastChild;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="state.val"/></span>`;
state = useState({ val: 0 });
mounted() {
@@ -1129,7 +1129,7 @@ describe("async rendering", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<Child/>
@@ -1153,7 +1153,7 @@ describe("async rendering", () => {
});
test("change state and call manually render: no unnecessary rendering", async () => {
class Widget extends Component<any, any> {
class Widget extends Component {
static template = xml`<div><t t-esc="state.val"/></div>`;
state = useState({ val: 1 });
}
tests/component/class_style.test.ts
+19 -19
View File
@@ -28,10 +28,10 @@ afterEach(() => {
describe("class and style attributes with t-component", () => {
test("class is properly added on widget root el", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div class="c"/>`;
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static template = xml`<div><Child class="a b"/></div>`;
static components = { Child };
}
@@ -41,10 +41,10 @@ describe("class and style attributes with t-component", () => {
});
test("empty class attribute is not added on widget root el", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span/>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child class=""/></div>`;
static components = { Child };
}
@@ -54,10 +54,10 @@ describe("class and style attributes with t-component", () => {
});
test("t-att-class is properly added/removed on widget root el", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div class="c"/>`;
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static template = xml`<div><Child t-att-class="{a:state.a, b:state.b}"/></div>`;
static components = { Child };
state = useState({ a: true, b: false });
@@ -80,8 +80,8 @@ describe("class and style attributes with t-component", () => {
<Child class="a b c d"/>
</div>`
);
class Child extends Component<any, any> {}
class ParentWidget extends Component<any, any> {
class Child extends Component {}
class ParentWidget extends Component {
static components = { Child };
}
env.qweb.addTemplate("Child", `<div/>`);
@@ -99,10 +99,10 @@ describe("class and style attributes with t-component", () => {
<span t-name="Child" class="c" t-att-class="{ d: state.d }"/>
</templates>`);
class Child extends Component<any, any> {
class Child extends Component {
state = useState({ d: true });
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static components = { Child };
state = useState({ b: true });
child = useRef("child");
@@ -141,10 +141,10 @@ describe("class and style attributes with t-component", () => {
<span t-name="Child" class="c" t-att-class="state.d ? 'd' : ''"/>
</templates>`);
class Child extends Component<any, any> {
class Child extends Component {
state = useState({ d: true });
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static components = { Child };
state = useState({ b: true });
child = useRef("child");
@@ -180,7 +180,7 @@ describe("class and style attributes with t-component", () => {
<div t-name="App" t-att-class="{ c: state.c }" />
</templates>`);
class App extends Component<any, any> {
class App extends Component {
state = useState({ c: true });
mounted() {
this.el!.classList.add("user");
@@ -207,11 +207,11 @@ describe("class and style attributes with t-component", () => {
</div>`
);
class SomeComponent extends Component<any, any> {
class SomeComponent extends Component {
static template = xml`<div/>`;
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static components = { child: SomeComponent };
}
const widget = new ParentWidget();
@@ -228,11 +228,11 @@ describe("class and style attributes with t-component", () => {
</div>`
);
class SomeComponent extends Component<any, any> {
class SomeComponent extends Component {
static template = xml`<div/>`;
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static components = { child: SomeComponent };
state = useState({ style: "font-size: 20px" });
}
@@ -250,10 +250,10 @@ describe("class and style attributes with t-component", () => {
});
test("error in subcomponent with class", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div t-esc="this.will.crash"/>`;
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static template = xml`<div><Child class="a"/></div>`;
static components = { Child };
}
tests/component/component.test.ts
+254 -254
View File
File diff suppressed because it is too large Load Diff
tests/component/error_handling.test.ts
+32 -32
View File
@@ -41,10 +41,10 @@ describe("component error handling (catchError)", () => {
console.error = jest.fn();
const handler = jest.fn();
env.qweb.on("error", null, handler);
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
}
class ErrorBoundary extends Component<any, any> {
class ErrorBoundary extends Component {
static template = xml`
<div>
<t t-if="state.error">Error handled</t>
@@ -56,7 +56,7 @@ describe("component error handling (catchError)", () => {
this.state.error = true;
}
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<ErrorBoundary><ErrorComponent flag="state.flag"/></ErrorBoundary>
@@ -83,11 +83,11 @@ describe("component error handling (catchError)", () => {
const consoleError = console.error;
console.error = jest.fn();
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><ErrorComponent flag="state.flag"/></div>`;
static components = { ErrorComponent };
state = useState({ flag: false });
@@ -117,10 +117,10 @@ describe("component error handling (catchError)", () => {
env.qweb.on("error", null, handler);
const consoleError = console.error;
console.error = jest.fn();
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
}
class ErrorBoundary extends Component<any, any> {
class ErrorBoundary extends Component {
static template = xml`
<div>
<t t-if="state.error">Error handled</t>
@@ -132,7 +132,7 @@ describe("component error handling (catchError)", () => {
this.state.error = true;
}
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
@@ -153,10 +153,10 @@ describe("component error handling (catchError)", () => {
env.qweb.on("error", null, handler);
const consoleError = console.error;
console.error = jest.fn();
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
}
class ErrorBoundary extends Component<any, any> {
class ErrorBoundary extends Component {
static template = xml`
<div>
<t t-if="state.error">Error handled</t>
@@ -168,7 +168,7 @@ describe("component error handling (catchError)", () => {
this.state.error = true;
}
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<ErrorBoundary t-if="state.flag"><ErrorComponent /></ErrorBoundary>
@@ -203,20 +203,20 @@ describe("component error handling (catchError)", () => {
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
</div>
</templates>`);
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
constructor(parent) {
super(parent);
throw new Error("NOOOOO");
}
}
class ErrorBoundary extends Component<any, any> {
class ErrorBoundary extends Component {
state = useState({ error: false });
catchError() {
this.state.error = true;
}
}
class App extends Component<any, any> {
class App extends Component {
static components = { ErrorBoundary, ErrorComponent };
}
const app = new App();
@@ -231,7 +231,7 @@ describe("component error handling (catchError)", () => {
test("can catch an error in the willStart call", async () => {
const consoleError = console.error;
console.error = jest.fn();
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
static template = xml`<div t-name="ErrorComponent">Some text</div>`;
async willStart() {
// we wait a little bit to be in a different stack frame
@@ -239,7 +239,7 @@ describe("component error handling (catchError)", () => {
throw new Error("NOOOOO");
}
}
class ErrorBoundary extends Component<any, any> {
class ErrorBoundary extends Component {
static template = xml`
<div>
<t t-if="state.error">Error handled</t>
@@ -251,7 +251,7 @@ describe("component error handling (catchError)", () => {
this.state.error = true;
}
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><ErrorBoundary><ErrorComponent /></ErrorBoundary></div>`;
static components = { ErrorBoundary, ErrorComponent };
}
@@ -277,19 +277,19 @@ describe("component error handling (catchError)", () => {
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
</div>
</templates>`);
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
mounted() {
throw new Error("NOOOOO");
}
}
class ErrorBoundary extends Component<any, any> {
class ErrorBoundary extends Component {
state = useState({ error: false });
catchError() {
this.state.error = true;
}
}
class App extends Component<any, any> {
class App extends Component {
static components = { ErrorBoundary, ErrorComponent };
}
const app = new App();
@@ -304,13 +304,13 @@ describe("component error handling (catchError)", () => {
// we do not catch error in willPatch anymore
const consoleError = console.error;
console.error = jest.fn();
class ErrorComponent extends Component<any, any> {
class ErrorComponent extends Component {
static template = xml`<div><t t-esc="props.message"/></div>`;
willPatch() {
throw new Error("NOOOOO");
}
}
class ErrorBoundary extends Component<any, any> {
class ErrorBoundary extends Component {
static template = xml`
<div>
<t t-if="state.error">Error handled</t>
@@ -322,7 +322,7 @@ describe("component error handling (catchError)", () => {
this.state.error = true;
}
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<span><t t-esc="state.message"/></span>
@@ -347,7 +347,7 @@ describe("component error handling (catchError)", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
// we do not catch error in willPatch anymore
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-esc="this.will.crash"/></div>`;
}
@@ -369,7 +369,7 @@ describe("component error handling (catchError)", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div>abc</div>`;
mounted() {
throw new Error("boom");
@@ -395,7 +395,7 @@ describe("component error handling (catchError)", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-esc="val"/></div>`;
val = 3;
willPatch() {
@@ -424,7 +424,7 @@ describe("component error handling (catchError)", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-esc="val"/></div>`;
val = 3;
patched() {
@@ -453,10 +453,10 @@ describe("component error handling (catchError)", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
// we do not catch error in willPatch anymore
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div><t t-esc="this.will.crash"/></div>`;
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><Child/></div>`;
static components = { Child };
}
@@ -479,7 +479,7 @@ describe("component error handling (catchError)", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
// we do not catch error in willPatch anymore
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
flag = false;
}
@@ -502,10 +502,10 @@ describe("component error handling (catchError)", () => {
});
test("a rendering error will reject the render promise (with sub components)", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span></span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child/><t t-esc="x.y"/></div>`;
static components = { Child };
}
tests/component/props_validation.test.ts
+25 -25
View File
@@ -25,7 +25,7 @@ afterEach(() => {
QWeb.dev = dev;
});
class Widget extends Component<any, any> {}
class Widget extends Component {}
//------------------------------------------------------------------------------
// Tests
@@ -96,7 +96,7 @@ describe("props validation", () => {
];
let props;
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
get p() {
return props.p;
@@ -153,14 +153,14 @@ describe("props validation", () => {
];
let props;
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
get p() {
return props.p;
}
}
for (let test of Tests) {
let TestWidget = class extends Component<any, any> {
let TestWidget = class extends Component {
static props = { p: { type: test.type } };
static template = xml`<div>hey</div>`;
};
@@ -200,11 +200,11 @@ describe("props validation", () => {
});
test("can validate a prop with multiple types", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`<div>hey</div>`;
static props = { p: [String, Boolean] };
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget };
get p() {
@@ -244,11 +244,11 @@ describe("props validation", () => {
});
test("can validate an optional props", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`<div>hey</div>`;
static props = { p: { type: String, optional: true } };
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget };
get p() {
@@ -288,11 +288,11 @@ describe("props validation", () => {
});
test("can validate an array with given primitive type", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`<div>hey</div>`;
static props = { p: { type: Array, element: String } };
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget };
get p() {
@@ -340,11 +340,11 @@ describe("props validation", () => {
});
test("can validate an array with multiple sub element types", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`<div>hey</div>`;
static props = { p: { type: Array, element: [String, Boolean] } };
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget };
get p() {
@@ -393,13 +393,13 @@ describe("props validation", () => {
});
test("can validate an object with simple shape", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`<div>hey</div>`;
static props = {
p: { type: Object, shape: { id: Number, url: String } }
};
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget };
get p() {
@@ -451,7 +451,7 @@ describe("props validation", () => {
});
test("can validate recursively complicated prop def", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`<div>hey</div>`;
static props = {
p: {
@@ -463,7 +463,7 @@ describe("props validation", () => {
}
};
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="p"/></div>`;
static components = { TestWidget };
get p() {
@@ -503,7 +503,7 @@ describe("props validation", () => {
});
test("can validate optional attributes in nested sub props", () => {
class TestComponent extends Component<any, any> {
class TestComponent extends Component {
static props = {
myprop: {
type: Array,
@@ -536,7 +536,7 @@ describe("props validation", () => {
});
test("can validate with a custom validator", () => {
class TestComponent extends Component<any, any> {
class TestComponent extends Component {
static props = {
size: {
validate: e => ["small", "medium", "large"].includes(e)
@@ -562,7 +562,7 @@ describe("props validation", () => {
test("can validate with a custom validator, and a type", () => {
const validator = jest.fn(n => 0 <= n && n <= 10);
class TestComponent extends Component<any, any> {
class TestComponent extends Component {
static props = {
n: {
type: Number,
@@ -738,7 +738,7 @@ describe("props validation", () => {
test("props are validated whenever component is updated", async () => {
let error;
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static props = { p: { type: Number } };
static template = xml`<div><t t-esc="props.p"/></div>`;
@@ -750,7 +750,7 @@ describe("props validation", () => {
}
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="state.p"/></div>`;
static components = { TestWidget };
state: any = useState({ p: 1 });
@@ -767,12 +767,12 @@ describe("props validation", () => {
});
test("default values are applied before validating props at update", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static props = { p: { type: Number } };
static template = xml`<div><t t-esc="props.p"/></div>`;
static defaultProps = { p: 4 };
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget p="state.p"/></div>`;
static components = { TestWidget };
state: any = useState({ p: 1 });
@@ -790,11 +790,11 @@ describe("props validation", () => {
describe("default props", () => {
test("can set default values", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static defaultProps = { p: 4 };
static template = xml`<div><t t-esc="props.p"/></div>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><TestWidget /></div>`;
static components = { TestWidget };
}
tests/component/slots.test.ts
+70 -70
View File
@@ -26,7 +26,7 @@ afterEach(() => {
fixture.remove();
});
function children(w: Component<any, any>): Component<any, any>[] {
function children(w: Component): Component[] {
const childrenMap = w.__owl__.children;
return Object.keys(childrenMap).map(id => childrenMap[id]);
}
@@ -51,8 +51,8 @@ describe("t-slot directive", () => {
</div>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
}
const parent = new Parent();
@@ -68,13 +68,13 @@ describe("t-slot directive", () => {
});
test("named slots can define a default content", async () => {
class Dialog extends Component<any, any> {
class Dialog extends Component {
static template = xml`
<span>
<t t-slot="header">default content</t>
</span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Dialog/></div>`;
static components = { Dialog };
}
@@ -86,13 +86,13 @@ describe("t-slot directive", () => {
});
test("dafault slots can define a default content", async () => {
class Dialog extends Component<any, any> {
class Dialog extends Component {
static template = xml`
<span>
<t t-slot="default">default content</t>
</span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Dialog/></div>`;
static components = { Dialog };
}
@@ -104,13 +104,13 @@ describe("t-slot directive", () => {
});
test("default content is not rendered if slot is provided", async () => {
class Dialog extends Component<any, any> {
class Dialog extends Component {
static template = xml`
<span>
<t t-slot="default">default content</t>
</span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Dialog>hey</Dialog></div>`;
static components = { Dialog };
}
@@ -121,13 +121,13 @@ describe("t-slot directive", () => {
});
test("default content is not rendered if named slot is provided", async () => {
class Dialog extends Component<any, any> {
class Dialog extends Component {
static template = xml`
<span>
<t t-slot="header">default content</t>
</span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Dialog><t t-set="header">hey</t></Dialog></div>`;
static components = { Dialog };
}
@@ -149,8 +149,8 @@ describe("t-slot directive", () => {
<span t-name="Dialog"><t t-slot="footer"/></span>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
state = useState({ val: 0 });
doSomething() {
@@ -186,9 +186,9 @@ describe("t-slot directive", () => {
</div>
</templates>
`);
class Link extends Component<any, any> {}
class Link extends Component {}
class App extends Component<any, any> {
class App extends Component {
state = useState({
users: [
{ id: 1, name: "Aaron" },
@@ -230,9 +230,9 @@ describe("t-slot directive", () => {
</div>
</templates>
`);
class Link extends Component<any, any> {}
class Link extends Component {}
class App extends Component<any, any> {
class App extends Component {
state = useState({
users: [
{ id: 1, name: "Aaron" },
@@ -272,9 +272,9 @@ describe("t-slot directive", () => {
</div>
</templates>
`);
class Link extends Component<any, any> {}
class Link extends Component {}
class App extends Component<any, any> {
class App extends Component {
state = useState({ user: { id: 1, name: "Aaron" } });
static components = { Link };
}
@@ -294,10 +294,10 @@ describe("t-slot directive", () => {
});
test("refs are properly bound in slots", async () => {
class Dialog extends Component<any, any> {
class Dialog extends Component {
static template = xml`<span><t t-slot="footer"/></span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<span class="counter"><t t-esc="state.val"/></span>
@@ -340,8 +340,8 @@ describe("t-slot directive", () => {
<div t-name="Dialog"><t t-slot="default"/></div>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
}
const parent = new Parent();
@@ -360,8 +360,8 @@ describe("t-slot directive", () => {
<div t-name="Dialog"><t t-slot="default"/></div>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
}
const parent = new Parent();
@@ -385,8 +385,8 @@ describe("t-slot directive", () => {
<div t-name="Dialog"><t t-slot="content"/></div>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
}
const parent = new Parent();
@@ -408,8 +408,8 @@ describe("t-slot directive", () => {
<div t-name="Dialog"><t t-slot="default"/></div>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
}
const parent = new Parent();
@@ -432,8 +432,8 @@ describe("t-slot directive", () => {
</span>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
}
const parent = new Parent();
@@ -456,8 +456,8 @@ describe("t-slot directive", () => {
</span>
</templates>
`);
class Dialog extends Component<any, any> {}
class Parent extends Component<any, any> {
class Dialog extends Component {}
class Parent extends Component {
static components = { Dialog };
}
const parent = new Parent();
@@ -478,9 +478,9 @@ describe("t-slot directive", () => {
<div t-name="GrandChild">Grand Child</div>
</templates>
`);
class Child extends Component<any, any> {}
class GrandChild extends Component<any, any> {}
class Parent extends Component<any, any> {
class Child extends Component {}
class GrandChild extends Component {}
class Parent extends Component {
static components = { Child, GrandChild };
}
const parent = new Parent();
@@ -499,24 +499,24 @@ describe("t-slot directive", () => {
test("nested slots: evaluation context and parented relationship", async () => {
let slot;
class Slot extends Component<any, any> {
class Slot extends Component {
static template = xml`<span t-esc="props.val"/>`;
constructor(parent, props) {
super(parent, props);
slot = this;
}
}
class GrandChild extends Component<any, any> {
class GrandChild extends Component {
static template = xml`<div><t t-slot="default"/></div>`;
}
class Child extends Component<any, any> {
class Child extends Component {
static components = { GrandChild };
static template = xml`
<GrandChild>
<t t-slot="default"/>
</GrandChild>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child, Slot };
static template = xml`<Child><Slot val="state.val"/></Child>`;
state = useState({ val: 3 });
@@ -548,9 +548,9 @@ describe("t-slot directive", () => {
</div>
</templates>
`);
class SomeComponent extends Component<any, any> {}
class GenericComponent extends Component<any, any> {}
class App extends Component<any, any> {
class SomeComponent extends Component {}
class GenericComponent extends Component {}
class App extends Component {
static components = { GenericComponent, SomeComponent };
state = useState({ val: 4 });
@@ -568,14 +568,14 @@ describe("t-slot directive", () => {
});
test("slots and wrapper components", async () => {
class Link extends Component<any, any> {
class Link extends Component {
static template = xml`
<a href="abc">
<t t-slot="default"/>
</a>`;
}
class A extends Component<any, any> {
class A extends Component {
static template = xml`<Link>hey</Link>`;
static components = { Link: Link };
}
@@ -587,14 +587,14 @@ describe("t-slot directive", () => {
});
test("template can just return a slot", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.value"/></span>`;
}
class SlotComponent extends Component<any, any> {
class SlotComponent extends Component {
static template = xml`<t t-slot="default"/>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<SlotComponent><Child value="state.value"/></SlotComponent>
@@ -614,13 +614,13 @@ describe("t-slot directive", () => {
});
test("multiple slots containing components", async () => {
class C extends Component<any, any> {
class C extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
}
class B extends Component<any, any> {
class B extends Component {
static template = xml`<div><t t-slot="s1"/><t t-slot="s2"/></div>`;
}
class A extends Component<any, any> {
class A extends Component {
static template = xml`
<B>
<t t-set="s1"><C val="1"/></t>
@@ -636,14 +636,14 @@ describe("t-slot directive", () => {
});
test("slots in t-foreach and re-rendering", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="state.val"/><t t-slot="default"/></span>`;
state = useState({ val: "A" });
mounted() {
this.state.val = "B";
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child };
static template = xml`
<div>
@@ -661,7 +661,7 @@ describe("t-slot directive", () => {
});
test("slots in t-foreach with t-set and re-rendering", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<span>
<t t-esc="state.val"/>
@@ -672,7 +672,7 @@ describe("t-slot directive", () => {
this.state.val = "B";
}
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static components = { Child };
static template = xml`
<div>
@@ -693,7 +693,7 @@ describe("t-slot directive", () => {
test("nested slots in same template", async () => {
let child, child2, child3;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<span id="c1">
<div>
@@ -705,7 +705,7 @@ describe("t-slot directive", () => {
child = this;
}
}
class Child2 extends Component<any, any> {
class Child2 extends Component {
static template = xml`
<span id="c2">
<t t-slot="default"/>
@@ -715,7 +715,7 @@ describe("t-slot directive", () => {
child2 = this;
}
}
class Child3 extends Component<any, any> {
class Child3 extends Component {
static template = xml`
<span>Child 3</span>`;
constructor(parent, props) {
@@ -723,7 +723,7 @@ describe("t-slot directive", () => {
child3 = this;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child, Child2, Child3 };
static template = xml`
<span id="parent">
@@ -748,7 +748,7 @@ describe("t-slot directive", () => {
test("t-slot nested within another slot", async () => {
let portal, modal, child3;
class Child3 extends Component<any, any> {
class Child3 extends Component {
static template = xml`
<span>Child 3</span>`;
constructor(parent, props) {
@@ -756,7 +756,7 @@ describe("t-slot directive", () => {
child3 = this;
}
}
class Modal extends Component<any, any> {
class Modal extends Component {
static template = xml`
<span id="modal">
<t t-slot="default"/>
@@ -766,7 +766,7 @@ describe("t-slot directive", () => {
modal = this;
}
}
class Portal extends Component<any, any> {
class Portal extends Component {
static template = xml`
<span id="portal">
<t t-slot="default"/>
@@ -776,7 +776,7 @@ describe("t-slot directive", () => {
portal = this;
}
}
class Dialog extends Component<any, any> {
class Dialog extends Component {
static components = { Modal, Portal };
static template = xml`
<span id="c2">
@@ -787,7 +787,7 @@ describe("t-slot directive", () => {
</Modal>
</span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child3, Dialog };
static template = xml`
<span id="c1">
@@ -809,7 +809,7 @@ describe("t-slot directive", () => {
test("t-slot supports many instances", async () => {
let child3;
class Child3 extends Component<any, any> {
class Child3 extends Component {
static template = xml`
<span>Child 3</span>`;
constructor(parent, props) {
@@ -817,13 +817,13 @@ describe("t-slot directive", () => {
child3 = this;
}
}
class Dialog extends Component<any, any> {
class Dialog extends Component {
static template = xml`
<span id="c2">
<t t-slot="default"/>
</span>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child3, Dialog };
static template = xml`
<span id="c1">
@@ -845,10 +845,10 @@ describe("t-slot directive", () => {
});
test("slots in slots, with vars", async () => {
class B extends Component<any, any> {
class B extends Component {
static template = xml`<span><t t-slot="default"/></span>`;
}
class A extends Component<any, any> {
class A extends Component {
static template = xml`
<div>
<B>
@@ -857,7 +857,7 @@ describe("t-slot directive", () => {
</div>`;
static components = { B };
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<t t-set="test" t-value="state.name"/>
tests/component/styles.test.ts
+4 -4
View File
@@ -32,7 +32,7 @@ afterEach(() => {
describe("styles and component", () => {
test("can define an inline stylesheet", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div class="app">text</div>`;
static style = css`
.app {
@@ -54,7 +54,7 @@ describe("styles and component", () => {
});
test("inherited components properly apply css", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div class="app">text</div>`;
static style = css`
.app {
@@ -86,7 +86,7 @@ describe("styles and component", () => {
});
test("get a meaningful error message if css helper is missing", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div class="app">text</div>`;
static style = `.app {color: red;}`;
}
@@ -103,7 +103,7 @@ describe("styles and component", () => {
});
test("inline stylesheets are processed", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div class="app">text</div>`;
static style = css`
.app {
tests/component/un_mounting.test.ts
+19 -19
View File
@@ -27,7 +27,7 @@ afterEach(() => {
describe("mount targets", () => {
test("can attach a component to an existing node (if same tagname)", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div>app</div>`;
}
const div = document.createElement("div");
@@ -39,7 +39,7 @@ describe("mount targets", () => {
});
test("cannot attach a component to an existing node (if not same tagname)", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<span>app</span>`;
}
const div = document.createElement("div");
@@ -57,7 +57,7 @@ describe("mount targets", () => {
});
test("can mount a component (with position='first-child')", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div>app</div>`;
}
const span = document.createElement("span");
@@ -69,7 +69,7 @@ describe("mount targets", () => {
});
test("can mount a component (with position='last-child')", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div>app</div>`;
}
const span = document.createElement("span");
@@ -81,7 +81,7 @@ describe("mount targets", () => {
});
test("default mount option is 'last-child'", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div>app</div>`;
}
const span = document.createElement("span");
@@ -96,7 +96,7 @@ describe("mount targets", () => {
describe("unmounting and remounting", () => {
test("widget can be unmounted and remounted", async () => {
const steps: string[] = [];
class MyWidget extends Component<any, any> {
class MyWidget extends Component {
static template = xml`<div>Hey</div>`;
async willStart() {
steps.push("willstart");
@@ -128,7 +128,7 @@ describe("unmounting and remounting", () => {
test("widget can be mounted twice without ill effect", async () => {
const steps: string[] = [];
class MyWidget extends Component<any, any> {
class MyWidget extends Component {
static template = xml`<div>Hey</div>`;
async willStart() {
steps.push("willstart");
@@ -151,7 +151,7 @@ describe("unmounting and remounting", () => {
test("state changes in willUnmount do not trigger rerender", async () => {
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<span><t t-esc="props.val"/><t t-esc="state.n"/></span>
`;
@@ -172,7 +172,7 @@ describe("unmounting and remounting", () => {
this.state.n = 3;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<Child t-if="state.flag" val="state.val"/>
@@ -193,7 +193,7 @@ describe("unmounting and remounting", () => {
});
test("state changes in willUnmount will be applied on remount", async () => {
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`
<div><t t-esc="state.val"/></div>
`;
@@ -216,7 +216,7 @@ describe("unmounting and remounting", () => {
});
test("sub component is still active after being unmounted and remounted", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<p t-on-click="state.value++">
<t t-esc="state.value"/>
@@ -225,7 +225,7 @@ describe("unmounting and remounting", () => {
state = useState({ value: 1 });
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child };
static template = xml`<div><Child/></div>`;
}
@@ -248,7 +248,7 @@ describe("unmounting and remounting", () => {
test("change state just before mounting component", async () => {
const steps: number[] = [];
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`
<div><t t-esc="state.val"/></div>
`;
@@ -278,7 +278,7 @@ describe("unmounting and remounting", () => {
test("change state while mounting component", async () => {
const steps: number[] = [];
class TestWidget extends Component<any, any> {
class TestWidget extends Component {
static template = xml`
<div><t t-esc="state.val"/></div>
`;
@@ -312,7 +312,7 @@ describe("unmounting and remounting", () => {
test("change state while component is unmounted", async () => {
let child;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span t-esc="state.val"/>`;
state = useState({
val: "C1"
@@ -323,7 +323,7 @@ describe("unmounting and remounting", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child };
static template = xml`<div><t t-esc="state.val"/><Child/></div>`;
state = useState({ val: "P1" });
@@ -345,7 +345,7 @@ describe("unmounting and remounting", () => {
test("unmount component during a re-rendering", async () => {
const def = makeDeferred();
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
willUpdateProps() {
return def;
@@ -353,7 +353,7 @@ describe("unmounting and remounting", () => {
}
Child.prototype.__render = jest.fn(Child.prototype.__render);
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child val="state.val"/></div>`;
static components = { Child };
state = useState({ val: 1 });
@@ -379,7 +379,7 @@ describe("unmounting and remounting", () => {
test("widget can be mounted on different target", async () => {
const steps: string[] = [];
class MyWidget extends Component<any, any> {
class MyWidget extends Component {
static template = xml`<div>Hey</div>`;
async willStart() {
steps.push("willstart");
tests/context.test.ts
+21 -21
View File
@@ -32,7 +32,7 @@ describe("Context", () => {
test("very simple use, with initial value", async () => {
const testContext = new Context({ value: 123 });
class Test extends Component<any, any> {
class Test extends Component {
static template = xml`<div><t t-esc="contextObj.value"/></div>`;
contextObj = useContext(testContext);
}
@@ -44,7 +44,7 @@ describe("Context", () => {
test("useContext hook is reactive, for one component", async () => {
const testContext = new Context({ value: 123 });
class Test extends Component<any, any> {
class Test extends Component {
static template = xml`<div><t t-esc="contextObj.value"/></div>`;
contextObj = useContext(testContext);
}
@@ -59,11 +59,11 @@ describe("Context", () => {
test("two components can subscribe to same context", async () => {
const testContext = new Context({ value: 123 });
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="contextObj.value"/></span>`;
contextObj = useContext(testContext);
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child /><Child /></div>`;
static components = { Child };
}
@@ -80,7 +80,7 @@ describe("Context", () => {
const def = makeDeferred();
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="contextObj.value"/></span>`;
contextObj = useContext(testContext);
async render() {
@@ -90,7 +90,7 @@ describe("Context", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child /><Child /></div>`;
static components = { Child };
}
@@ -111,13 +111,13 @@ describe("Context", () => {
const def = makeDeferred();
const steps: string[] = [];
class SlowComp extends Component<any, any> {
class SlowComp extends Component {
static template = xml`<p><t t-esc="props.value"/></p>`;
willUpdateProps() {
return def;
}
}
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><SlowComp value="contextObj.value"/></span>`;
static components = { SlowComp };
contextObj = useContext(testContext);
@@ -128,12 +128,12 @@ describe("Context", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child /><Child /></div>`;
static components = { Child };
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><Child /><Parent /></div>`;
static components = { Child, Parent };
}
@@ -166,7 +166,7 @@ describe("Context", () => {
const testContext = new Context({ a: 1, b: 2 });
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="contextObj1.a"/><t t-esc="contextObj2.b"/></span>`;
contextObj1 = useContext(testContext);
contextObj2 = useContext(testContext);
@@ -175,7 +175,7 @@ describe("Context", () => {
return super.__render(fiber);
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child /></div>`;
static components = { Child };
}
@@ -193,7 +193,7 @@ describe("Context", () => {
const testContext = new Context({ a: 123, b: 321 });
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="contextObj.a"/></span>`;
contextObj = useContext(testContext);
__render(fiber) {
@@ -201,7 +201,7 @@ describe("Context", () => {
return super.__render(fiber);
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child /><t t-esc="contextObj.b"/></div>`;
static components = { Child };
contextObj = useContext(testContext);
@@ -227,7 +227,7 @@ describe("Context", () => {
const testContext = new Context({ a: 123 });
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="contextObj.a"/></span>`;
contextObj = useContext(testContext);
__render(fiber) {
@@ -235,7 +235,7 @@ describe("Context", () => {
return super.__render(fiber);
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child t-if="state.flag"/></div>`;
static components = { Child };
state = useState({ flag: true });
@@ -263,14 +263,14 @@ describe("Context", () => {
test("destroyed component before being mounted is inactive", async () => {
const testContext = new Context({ a: 123 });
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="contextObj.a"/></span>`;
contextObj = useContext(testContext);
willStart() {
return makeDeferred();
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child t-if="state.flag"/></div>`;
static components = { Child };
state = useState({ flag: true });
@@ -293,7 +293,7 @@ describe("Context", () => {
const testContext = new Context({ x: { n: 1 }, key: "x" });
const def = makeDeferred();
let stateC;
class ComponentC extends Component<any, any> {
class ComponentC extends Component {
static template = xml`<span><t t-esc="context[props.key].n"/><t t-esc="state.x"/></span>`;
context = useContext(testContext);
state = useState({ x: "a" });
@@ -303,7 +303,7 @@ describe("Context", () => {
stateC = this.state;
}
}
class ComponentB extends Component<any, any> {
class ComponentB extends Component {
static components = { ComponentC };
static template = xml`<p><ComponentC key="props.key"/></p>`;
@@ -311,7 +311,7 @@ describe("Context", () => {
return def;
}
}
class ComponentA extends Component<any, any> {
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB key="context.key"/></div>`;
context = useContext(testContext);
tests/hooks.test.ts
+28 -28
View File
@@ -42,7 +42,7 @@ afterEach(() => {
describe("hooks", () => {
test("can use a state hook", async () => {
class Counter extends Component<any, any> {
class Counter extends Component {
static template = xml`<div><t t-esc="counter.value"/></div>`;
counter = useState({ value: 42 });
}
@@ -64,7 +64,7 @@ describe("hooks", () => {
steps.push("willunmount");
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div>hey</div>`;
constructor() {
super();
@@ -92,7 +92,7 @@ describe("hooks", () => {
steps.push("willunmount");
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div>hey</div>`;
constructor(parent, props) {
super(parent, props);
@@ -100,7 +100,7 @@ describe("hooks", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><MyComponent t-if="state.flag"/></div>`;
static components = { MyComponent };
state = useState({ flag: true });
@@ -126,7 +126,7 @@ describe("hooks", () => {
steps.push("hook:willunmount");
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div>hey</div>`;
constructor() {
super();
@@ -157,7 +157,7 @@ describe("hooks", () => {
steps.push("hook:willunmount");
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div>hey</div>`;
constructor(parent, props) {
super(parent, props);
@@ -171,7 +171,7 @@ describe("hooks", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><MyComponent t-if="state.flag"/></div>`;
static components = { MyComponent };
state = useState({ flag: true });
@@ -197,7 +197,7 @@ describe("hooks", () => {
steps.push("hook:willunmount" + i);
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div>hey</div>`;
constructor() {
super();
@@ -219,7 +219,7 @@ describe("hooks", () => {
});
test("useRef hook", async () => {
class Counter extends Component<any, any> {
class Counter extends Component {
static template = xml`<div><button t-ref="button"><t t-esc="value"/></button></div>`;
button = useRef("button");
value = 0;
@@ -241,7 +241,7 @@ describe("hooks", () => {
test("useRef hook is null if ref is removed ", async () => {
expect.assertions(4);
class TestRef extends Component<any, any> {
class TestRef extends Component {
static template = xml`<div><span t-if="state.flag" t-ref="span">owl</span></div>`;
spanRef = useRef("span");
state = useState({ flag: true });
@@ -261,10 +261,10 @@ describe("hooks", () => {
});
test("t-refs on widget are components", async () => {
class WidgetB extends Component<any, any> {
class WidgetB extends Component {
static template = xml`<div>b</div>`;
}
class WidgetC extends Component<any, any> {
class WidgetC extends Component {
static template = xml`<div class="outer-div">Hello<WidgetB t-ref="mywidgetb" /></div>`;
static components = { WidgetB };
ref = useRef("mywidgetb");
@@ -280,11 +280,11 @@ describe("hooks", () => {
test("t-refs are bound at proper timing", async () => {
expect.assertions(2);
class Widget extends Component<any, any> {
class Widget extends Component {
static template = xml`<div>widget</div>`;
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static template = xml`
<div>
<t t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem" t-component="Widget"/>
@@ -309,10 +309,10 @@ describe("hooks", () => {
test("t-refs are bound at proper timing (2)", async () => {
expect.assertions(10);
class Widget extends Component<any, any> {
class Widget extends Component {
static template = xml`<div>widget</div>`;
}
class ParentWidget extends Component<any, any> {
class ParentWidget extends Component {
static template = xml`
<div>
<t t-if="state.child1" t-ref="child1" t-component="Widget"/>
@@ -369,7 +369,7 @@ describe("hooks", () => {
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div><t t-if="state.flag">hey</t></div>`;
state = useState({ flag: true });
@@ -403,7 +403,7 @@ describe("hooks", () => {
steps.push("hook:willPatch");
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div><t t-if="state.flag">hey</t></div>`;
state = useState({ flag: true });
@@ -437,7 +437,7 @@ describe("hooks", () => {
steps.push("hook:willPatch" + i);
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<div>hey<t t-esc="state.value"/></div>`;
state = useState({ value: 1 });
constructor() {
@@ -473,7 +473,7 @@ describe("hooks", () => {
}
test("simple input", async () => {
class SomeComponent extends Component<any, any> {
class SomeComponent extends Component {
static template = xml`
<div>
<input t-ref="input1"/>
@@ -494,7 +494,7 @@ describe("hooks", () => {
});
test("input in a t-if", async () => {
class SomeComponent extends Component<any, any> {
class SomeComponent extends Component {
static template = xml`
<div>
<input t-ref="input1"/>
@@ -521,7 +521,7 @@ describe("hooks", () => {
});
test("can use sub env", async () => {
class TestComponent extends Component<any, any> {
class TestComponent extends Component {
static template = xml`<div><t t-esc="env.val"/></div>`;
constructor() {
super();
@@ -536,7 +536,7 @@ describe("hooks", () => {
});
test("parent and child env", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div><t t-esc="env.val"/></div>`;
constructor(parent, props) {
super(parent, props);
@@ -544,7 +544,7 @@ describe("hooks", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><t t-esc="env.val"/><Child/></div>`;
static components = { Child };
constructor() {
@@ -568,14 +568,14 @@ describe("hooks", () => {
steps.push("onWillUpdateProps");
});
}
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<span><t t-esc="props.value"/></span>`;
constructor(parent, props) {
super(parent, props);
useMyHook();
}
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><MyComponent value="state.value"/></div>`;
static components = { MyComponent };
state = useState({ value: 1 });
@@ -597,7 +597,7 @@ describe("hooks", () => {
test("useExternalListener", async () => {
let n = 0;
class MyComponent extends Component<any, any> {
class MyComponent extends Component {
static template = xml`<span><t t-esc="props.value"/></span>`;
constructor(parent, props) {
super(parent, props);
@@ -607,7 +607,7 @@ describe("hooks", () => {
n++;
}
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><MyComponent t-if="state.flag"/></div>`;
static components = { MyComponent };
state = useState({ flag: false });
tests/misc/async_root.test.ts
+6 -6
View File
@@ -27,7 +27,7 @@ afterEach(() => {
describe("Asyncroot", () => {
test("delayed component with AsyncRoot component", async () => {
let def;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
}
class AsyncChild extends Child {
@@ -35,7 +35,7 @@ describe("Asyncroot", () => {
return def;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<button t-on-click="updateApp">Update App State</button>
@@ -74,7 +74,7 @@ describe("Asyncroot", () => {
test("fast component with AsyncRoot", async () => {
let def;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
}
class AsyncChild extends Child {
@@ -83,7 +83,7 @@ describe("Asyncroot", () => {
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<button t-on-click="updateApp">Update App State</button>
@@ -122,7 +122,7 @@ describe("Asyncroot", () => {
test("asyncroot component: mixed re-renderings", async () => {
let def;
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<span t-on-click="increment">
<t t-esc="state.val"/>/<t t-esc="props.val"/>
@@ -138,7 +138,7 @@ describe("Asyncroot", () => {
return def;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<button t-on-click="updateApp">Update App State</button>
tests/misc/portal.test.ts
+45 -45
View File
@@ -36,7 +36,7 @@ describe("Portal: Props validation", () => {
test("target is mandatory", async () => {
const dev = QWeb.dev;
QWeb.dev = true;
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -61,7 +61,7 @@ describe("Portal: Props validation", () => {
test("target is not list", async () => {
const dev = QWeb.dev;
QWeb.dev = true;
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -88,7 +88,7 @@ describe("Portal: Basic use and DOM placement", () => {
test("basic use of portal", async () => {
const dev = QWeb.dev;
QWeb.dev = true;
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -113,7 +113,7 @@ describe("Portal: Basic use and DOM placement", () => {
});
test("conditional use of Portal", async () => {
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -148,10 +148,10 @@ describe("Portal: Basic use and DOM placement", () => {
});
test("conditional use of Portal (with sub Component)", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div><t t-esc="props.val"/></div>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div>
@@ -190,7 +190,7 @@ describe("Portal: Basic use and DOM placement", () => {
});
test("with target in template (before portal)", async () => {
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -210,7 +210,7 @@ describe("Portal: Basic use and DOM placement", () => {
});
test("with target in template (after portal)", async () => {
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -233,7 +233,7 @@ describe("Portal: Basic use and DOM placement", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -260,7 +260,7 @@ describe("Portal: Basic use and DOM placement", () => {
test("portal with child and props", async () => {
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
mounted() {
steps.push("mounted");
@@ -271,7 +271,7 @@ describe("Portal: Basic use and DOM placement", () => {
expect(outside.innerHTML).toBe("<span>2</span>");
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div>
@@ -298,7 +298,7 @@ describe("Portal: Basic use and DOM placement", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -326,7 +326,7 @@ describe("Portal: Basic use and DOM placement", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -354,7 +354,7 @@ describe("Portal: Basic use and DOM placement", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -379,7 +379,7 @@ describe("Portal: Basic use and DOM placement", () => {
});
test("portal with dynamic body", async () => {
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -405,7 +405,7 @@ describe("Portal: Basic use and DOM placement", () => {
const consoleError = console.error;
console.error = jest.fn(() => {});
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -439,7 +439,7 @@ describe("Portal: Basic use and DOM placement", () => {
test("lifecycle hooks of portal sub component are properly called", async () => {
const steps: any[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span t-esc="props.val"/>`;
mounted() {
steps.push("child:mounted");
@@ -454,7 +454,7 @@ describe("Portal: Basic use and DOM placement", () => {
steps.push("child:willUnmount");
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div>
@@ -520,11 +520,11 @@ describe("Portal: Basic use and DOM placement", () => {
});
test("portal destroys on crash", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span t-esc="props.error and this.will.crash" />`;
state = {};
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div>
@@ -550,7 +550,7 @@ describe("Portal: Basic use and DOM placement", () => {
});
test("portal manual unmount", async () => {
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -577,7 +577,7 @@ describe("Portal: Basic use and DOM placement", () => {
test("portal manual unmount with subcomponent", async () => {
expect.assertions(9);
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span>gloria</span>`;
mounted() {
expect(outside.contains(this.el)).toBeTruthy();
@@ -586,7 +586,7 @@ describe("Portal: Basic use and DOM placement", () => {
expect(outside.contains(this.el)).toBeTruthy();
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div>
@@ -614,7 +614,7 @@ describe("Portal: Basic use and DOM placement", () => {
describe("Portal: Events handling", () => {
test("events triggered on movable pure node are handled", async () => {
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal };
static template = xml`
<div>
@@ -638,8 +638,8 @@ describe("Portal: Events handling", () => {
});
test("events triggered on movable owl components are redirected", async () => {
let childInst: Component<any, any> | null = null;
class Child extends Component<any, any> {
let childInst: Component | null = null;
class Child extends Component {
static template = xml`
<span t-on-custom="_onCustom" t-esc="props.val"/>`;
@@ -652,7 +652,7 @@ describe("Portal: Events handling", () => {
this.trigger("custom-portal");
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div t-on-custom-portal="_onCustomPortal">
@@ -677,8 +677,8 @@ describe("Portal: Events handling", () => {
test("events triggered on contained movable owl components are redirected", async () => {
const steps: string[] = [];
let childInst: Component<any, any> | null = null;
class Child extends Component<any, any> {
let childInst: Component | null = null;
class Child extends Component {
static template = xml`
<span t-on-custom="_onCustom"/>`;
@@ -691,7 +691,7 @@ describe("Portal: Events handling", () => {
this.trigger("custom-portal");
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div t-on-custom="_handled" t-on-custom-portal="_handled">
@@ -717,9 +717,9 @@ describe("Portal: Events handling", () => {
});
test("Dom events are not mapped", async () => {
let childInst: Component<any, any> | null = null;
let childInst: Component | null = null;
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<button>child</button>`;
@@ -728,7 +728,7 @@ describe("Portal: Events handling", () => {
childInst = this;
}
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div t-on-click="_handled">
@@ -760,22 +760,22 @@ describe("Portal: Events handling", () => {
fixture.appendChild(outside2);
const steps: Array<string> = [];
let childInst: Component<any, any> | null = null;
class Child2 extends Component<any, any> {
let childInst: Component | null = null;
class Child2 extends Component {
static template = xml`<div>child2</div>`;
constructor(parent, props) {
super(parent, props);
childInst = this;
}
}
class Child extends Component<any, any> {
class Child extends Component {
static components = { Portal, Child2 };
static template = xml`
<Portal target="'#outside2'">
<Child2 />
</Portal>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div t-on-custom='_handled'>
@@ -797,11 +797,11 @@ describe("Portal: Events handling", () => {
});
test("portal's parent's env is not polluted", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<button>child</button>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div>
@@ -818,22 +818,22 @@ describe("Portal: Events handling", () => {
test("Portal composed with t-slot", async () => {
const steps: Array<string> = [];
let childInst: Component<any, any> | null = null;
class Child2 extends Component<any, any> {
let childInst: Component | null = null;
class Child2 extends Component {
static template = xml`<div>child2</div>`;
constructor(parent, props) {
super(parent, props);
childInst = this;
}
}
class Child extends Component<any, any> {
class Child extends Component {
static components = { Portal, Child2 };
static template = xml`
<Portal target="'#outside'">
<t t-slot="default"/>
</Portal>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Child, Child2 };
static template = xml`
<div t-on-custom='_handled'>
@@ -857,11 +857,11 @@ describe("Portal: Events handling", () => {
describe("Portal: UI/UX", () => {
test("focus is kept across re-renders", async () => {
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`
<input id="target-me" t-att-placeholder="props.val"/>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static components = { Portal, Child };
static template = xml`
<div>
tests/router/link.test.ts
+2 -2
View File
@@ -31,7 +31,7 @@ describe("Link component", () => {
</div>
</templates>
`);
class App extends Component<any, any> {
class App extends Component {
static components = { Link: Link };
}
@@ -65,7 +65,7 @@ describe("Link component", () => {
</div>
</templates>
`);
class App extends Component<any, any> {
class App extends Component {
static components = { Link: Link };
}
tests/router/route_component.test.ts
+7 -7
View File
@@ -33,9 +33,9 @@ describe("RouteComponent", () => {
<span t-name="Users">Users</span>
</templates>
`);
class About extends Component<any, any> {}
class Users extends Component<any, any> {}
class App extends Component<any, any> {
class About extends Component {}
class Users extends Component {}
class App extends Component {
static components = { RouteComponent };
}
@@ -65,8 +65,8 @@ describe("RouteComponent", () => {
<span t-name="Book">Book <t t-esc="props.title"/></span>
</templates>
`);
class Book extends Component<any, any> {}
class App extends Component<any, any> {
class Book extends Component {}
class App extends Component {
static components = { RouteComponent };
}
@@ -87,12 +87,12 @@ describe("RouteComponent", () => {
<span t-name="Book">Book <t t-esc="props.title"/>|<t t-esc="incVal"/></span>
</templates>
`);
class Book extends Component<any, any> {
class Book extends Component {
get incVal() {
return this.props.val + 1;
}
}
class App extends Component<any, any> {
class App extends Component {
static components = { RouteComponent };
}
tests/store_hooks.test.ts
+44 -44
View File
@@ -29,7 +29,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<span t-foreach="todos" t-key="todo.id" t-as="todo"><t t-esc="todo.msg"/></span>
@@ -60,7 +60,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<span t-if="isBoolean">ok</span>
@@ -102,7 +102,7 @@ describe("connecting a component to store", () => {
const state = { smallerArray: [1], biggerArray: [2, 3], useSmallArray: true };
const store = new Store({ state });
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div t-esc="mapAdd"/>`;
storeProps = {
array: useStore(state => {
@@ -131,7 +131,7 @@ describe("connecting a component to store", () => {
});
test("throw error if no store is found", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div></div>`;
todos = useStore(state => state.todos);
}
@@ -151,7 +151,7 @@ describe("connecting a component to store", () => {
const actions = {};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div/>`;
storeState = useStore(state => state.a);
}
@@ -174,7 +174,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<span t-esc="a.value"/>
@@ -208,7 +208,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<span t-foreach="todos" t-key="todo.id" t-as="todo"><t t-esc="todo.msg"/></span>
@@ -245,7 +245,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-esc="nbrTodos.value"/></div>`;
nbrTodos = useStore(state => ({ value: state.todos.length }));
}
@@ -273,7 +273,7 @@ describe("connecting a component to store", () => {
}
};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-esc="nbrTodos.value"/></div>`;
nbrTodos = useStore(state => ({ value: state.todos.length }), { isEqual: shallowEqual });
}
@@ -307,7 +307,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions });
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<span t-foreach="todos" t-key="todo.id" t-as="todo"><t t-esc="todo.msg"/></span>
@@ -336,7 +336,7 @@ describe("connecting a component to store", () => {
});
(<any>env).store = store;
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<button t-on-click="dispatch('inc')">Inc</button>
@@ -365,14 +365,14 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions: {} });
class TodoItem extends Component<any, any> {
class TodoItem extends Component {
static template = xml`<span><t t-esc="todo.text"/></span>`;
todo = useStore((state, props) => {
return state.todos.find(t => t.id === props.todoId);
});
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><TodoItem todoId="state.currentId"/></div>`;
static components = { TodoItem };
state = useState({ currentId: 1 });
@@ -399,14 +399,14 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, actions });
class TodoItem extends Component<any, any> {
class TodoItem extends Component {
static template = xml`<span><t t-esc="todo.text"/></span>`;
todo = useStore((state, props) => {
return state.todos.find(t => t.id === props.id);
});
}
class TodoList extends Component<any, any> {
class TodoList extends Component {
static template = xml`
<div>
<TodoItem t-foreach="todos" t-as="todo" id="todo.id" t-key="todo.id"/>
@@ -444,7 +444,7 @@ describe("connecting a component to store", () => {
};
const store = new Store({ state, getters });
class TodoItem extends Component<any, any> {
class TodoItem extends Component {
static template = xml`
<div>
<span><t t-esc="storeProps.activeTodoText"/></span>
@@ -460,7 +460,7 @@ describe("connecting a component to store", () => {
});
}
class TodoList extends Component<any, any> {
class TodoList extends Component {
static components = { TodoItem };
static template = xml`
<div>
@@ -481,12 +481,12 @@ describe("connecting a component to store", () => {
});
test("connected component is updated when props are updated", async () => {
class Beer extends Component<any, any> {
class Beer extends Component {
static template = xml`<span><t t-esc="beer.name"/></span>`;
beer = useStore((state, props) => state.beers[props.id]);
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><Beer id="state.beerId"/></div>`;
static components = { Beer };
state = useState({ beerId: 1 });
@@ -506,7 +506,7 @@ describe("connecting a component to store", () => {
});
test("connected component is updated when store is changed", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`
<div>
<span t-foreach="data.beers" t-as="beer" t-key="beer.name"><t t-esc="beer.name"/></span>
@@ -539,7 +539,7 @@ describe("connecting a component to store", () => {
test("connected component is updated when mixing store and props changes", async () => {
let counter = 0;
class Beer extends Component<any, any> {
class Beer extends Component {
static template = xml`<span><t t-esc="beer.name"/></span>`;
beer = useStore((state, props) => state.beers[props.id], {
onUpdate: result => {
@@ -548,7 +548,7 @@ describe("connecting a component to store", () => {
});
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><Beer id="state.beerId"/></div>`;
static components = { Beer };
state = useState({ beerId: 1 });
@@ -580,7 +580,7 @@ describe("connecting a component to store", () => {
});
test("connected component is properly cleaned up on destroy", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div></div>`;
state = useStore((state, props) => state);
}
@@ -599,7 +599,7 @@ describe("connecting a component to store", () => {
});
test("connected component with undefined, null and string props", async () => {
class Beer extends Component<any, any> {
class Beer extends Component {
static template = xml`
<div t-name="Beer">
<span>taster:<t t-esc="data.taster"/></span>
@@ -613,7 +613,7 @@ describe("connecting a component to store", () => {
}));
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><Beer id="state.beerId"/></div>`;
static components = { Beer };
state = useState({ beerId: 0 });
@@ -658,7 +658,7 @@ describe("connecting a component to store", () => {
});
test("connected component deeply reactive with undefined, null and string props", async () => {
class Beer extends Component<any, any> {
class Beer extends Component {
static template = xml`
<div>
<span>taster:<t t-esc="info.taster"/></span>
@@ -674,7 +674,7 @@ describe("connecting a component to store", () => {
});
}
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><Beer id="state.beerId"/></div>`;
static components = { Beer };
state = useState({ beerId: 0 });
@@ -749,7 +749,7 @@ describe("connecting a component to store", () => {
state.x.val = val;
}
};
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><t t-esc="x.val"/></div>`;
x = useStore(state => {
return Object.assign({}, state.x);
@@ -770,7 +770,7 @@ describe("connecting a component to store", () => {
test("correct update order when parent/children are connected", async () => {
const steps: string[] = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="state.msg"/></span>`;
state = useStore((state, props) => {
@@ -778,7 +778,7 @@ describe("connecting a component to store", () => {
return { msg: state.msg[props.key] };
});
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child key="state.current"/></div>`;
static components = { Child };
@@ -817,7 +817,7 @@ describe("connecting a component to store", () => {
let def = makeDeferred();
def.resolve();
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="state.msg"/></span>`;
state = useStore((s, props) => {
steps.push("child");
@@ -825,7 +825,7 @@ describe("connecting a component to store", () => {
});
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`
<div>
<Child t-if="state.flag" someId="state.someId"/>
@@ -885,7 +885,7 @@ describe("connecting a component to store", () => {
actions
});
class TodoItem extends Component<any, any> {
class TodoItem extends Component {
static template = xml`
<div class="todo">
<t t-esc="state.todo.title"/>
@@ -906,7 +906,7 @@ describe("connecting a component to store", () => {
return super.__render(f);
}
}
class TodoApp extends Component<any, any> {
class TodoApp extends Component {
static template = xml`
<div class="todoapp">
<t t-foreach="Object.values(state.todos)" t-as="todo">
@@ -958,7 +958,7 @@ describe("connecting a component to store", () => {
actions
});
class TodoItem extends Component<any, any> {
class TodoItem extends Component {
static template = xml`
<div class="todo">
<t t-esc="state.todo.title"/>
@@ -980,7 +980,7 @@ describe("connecting a component to store", () => {
}
}
class TodoApp extends Component<any, any> {
class TodoApp extends Component {
static template = xml`
<div class="todoapp">
<t t-foreach="Object.values(state.todos)" t-as="todo">
@@ -1024,7 +1024,7 @@ describe("connecting a component to store", () => {
test("connected component willpatch/patch hooks are called on store updates", async () => {
const steps: string[] = [];
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-esc="store.msg"/></div>`;
store = useStore(s => ({ msg: s.msg }));
@@ -1059,12 +1059,12 @@ describe("connecting a component to store", () => {
test("connected child components stop listening to store when destroyed", async () => {
let steps: any = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div><t t-esc="store.val"/></div>`;
store = useStore(s => s);
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child t-if="state.child" /></div>`;
static components = { Child };
state = useState({ child: true });
@@ -1097,14 +1097,14 @@ describe("connecting a component to store", () => {
test("connected child component destroyed by dispatched action", async () => {
let steps: any = [];
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div><t t-esc="store.val"/></div>`;
store = useStore(s => {
steps.push("child selector");
return s;
});
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child t-if="store.child" /></div>`;
static components = { Child };
store = useStore(s => {
@@ -1135,7 +1135,7 @@ describe("connecting a component to store", () => {
});
test("dispatch an action", async () => {
class App extends Component<any, any> {
class App extends Component {
static template = xml`<div><t t-esc="store.counter"/></div>`;
store = useStore(state => state);
dispatch = useDispatch();
@@ -1203,7 +1203,7 @@ describe("various scenarios", () => {
};
const store = new Store({ actions, state });
class Attachment extends Component<any, any> {
class Attachment extends Component {
static template = xml`
<div>
<span>Attachment <t t-esc="props.id"/></span>
@@ -1213,7 +1213,7 @@ describe("various scenarios", () => {
attachment = useStore((state, props) => ({ name: state.attachments[props.id].name }));
}
class Message extends Component<any, any> {
class Message extends Component {
static template = xml`
<div>
<button t-on-click="doStuff">Do stuff</button>
tests/tooling/debug_script_1.test.ts
+2 -2
View File
@@ -22,11 +22,11 @@ test("can log full lifecycle", async () => {
const log = console.log;
console.log = arg => steps.push(arg);
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div>child</div>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child t-if="state.flag"/></div>`;
static components = { Child };
state = useState({ flag: false });
tests/tooling/debug_script_2.test.ts
+2 -2
View File
@@ -21,11 +21,11 @@ test("can log scheduler start and stop", async () => {
const log = console.log;
console.log = arg => steps.push(arg);
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<div>child</div>`;
}
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child /></div>`;
static components = { Child };
}
tests/tooling/debug_script_3.test.ts
+1 -1
View File
@@ -21,7 +21,7 @@ test("log a specific message for render method calls if component is not mounted
const log = console.log;
console.log = arg => steps.push(arg);
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><t t-esc="state.value"/></div>`;
state = owl.hooks.useState({ value: 1 });
}
tests/tooling/debug_script_4.test.ts
+2 -2
View File
@@ -21,14 +21,14 @@ test("log a sub component with non stringifiable props", async () => {
const log = console.log;
console.log = arg => steps.push(arg);
class Child extends Component<any, any> {
class Child extends Component {
static template = xml`<span><t t-esc="props.obj.val"/></span>`;
}
const circularObject: any = { val: 1 };
circularObject.circularObject = circularObject;
class Parent extends Component<any, any> {
class Parent extends Component {
static template = xml`<div><Child obj="obj"/></div>`;
static components = { Child };
obj = circularObject;