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");