From 97d8b3ed8cdaa83aaecfeebab321a45769c61148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Wed, 11 Dec 2019 11:36:59 +0100 Subject: [PATCH] [REF] tests: remove Widget common class Bad name, and bad practice to use it. It makes tests less standalone. --- .../__snapshots__/component.test.ts.snap | 2 +- tests/component/component.test.ts | 548 ++++---- tests/component/slots.test.ts | 1176 ++++++++--------- tests/helpers.ts | 4 +- tests/qweb/qweb.test.ts | 16 +- 5 files changed, 918 insertions(+), 828 deletions(-) diff --git a/tests/component/__snapshots__/component.test.ts.snap b/tests/component/__snapshots__/component.test.ts.snap index 1060aa71..ab1484b8 100644 --- a/tests/component/__snapshots__/component.test.ts.snap +++ b/tests/component/__snapshots__/component.test.ts.snap @@ -967,7 +967,7 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = ` exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument on a t-foreach 1`] = ` "function anonymous(context, extra ) { - // Template name: \\"__template__1\\" + // Template name: \\"__template__2\\" let utils = this.constructor.utils; let QWeb = this.constructor; let parent = context; diff --git a/tests/component/component.test.ts b/tests/component/component.test.ts index f6df45ce..25e40613 100644 --- a/tests/component/component.test.ts +++ b/tests/component/component.test.ts @@ -28,11 +28,6 @@ let env: Env; beforeEach(() => { fixture = makeTestFixture(); env = makeTestEnv(); - env.qweb.addTemplate("Widget", "
"); - env.qweb.addTemplate( - "Counter", - `
` - ); env.qweb.addTemplate("WidgetA", `
Hello
`); env.qweb.addTemplate("WidgetB", `
world
`); Component.env = env; @@ -42,27 +37,16 @@ afterEach(() => { fixture.remove(); }); -class Widget extends Component {} - -function children(w: Widget): Widget[] { +function children(w: Component): Component[] { const childrenMap = w.__owl__.children; return Object.keys(childrenMap).map(id => childrenMap[id]); } // Test components -class Counter extends Widget { - state = useState({ - counter: 0 - }); - inc() { - this.state.counter++; - } -} +class WidgetB extends Component {} -class WidgetB extends Widget {} - -class WidgetA extends Widget { +class WidgetA extends Component { static components = { b: WidgetB }; } @@ -72,12 +56,12 @@ class WidgetA extends Widget { describe("basic widget properties", () => { test("props is set on root components", async () => { - const widget = new Widget(null, {}); + const widget = new Component(null, {}); expect(widget.props).toEqual({}); }); test("has no el after creation", async () => { - const widget = new Widget(); + const widget = new Component(); expect(widget.el).toBe(null); }); @@ -145,6 +129,14 @@ describe("basic widget properties", () => { }); test("can be clicked on and updated", async () => { + class Counter extends Component { + static template = xml` +
`; + state = useState({ + counter: 0 + }); + } + const counter = new Counter(); counter.mount(fixture); await nextTick(); @@ -156,6 +148,14 @@ describe("basic widget properties", () => { }); test("cannot be clicked on and updated if not in DOM", async () => { + class Counter extends Component { + static template = xml` +
`; + state = useState({ + counter: 0 + }); + } + const counter = new Counter(); const target = document.createElement("div"); await counter.mount(target); @@ -168,7 +168,7 @@ describe("basic widget properties", () => { }); test("widget style and classname", async () => { - class StyledWidget extends Widget { + class StyledWidget extends Component { static template = xml`
world
`; @@ -180,7 +180,8 @@ describe("basic widget properties", () => { test("changing state before first render does not trigger a render", async () => { const steps: string[] = []; - class TestW extends Widget { + class TestW extends Component { + static template = xml`
`; state = useState({ drinks: 1 }); async willStart() { this.state.drinks++; @@ -255,12 +256,15 @@ describe("basic widget properties", () => { }); test("keeps a reference to env", async () => { - const widget = new Widget(); + const widget = new Component(); expect(widget.env).toBe(env); }); test("do not remove previously rendered dom if not necessary", async () => { - const widget = new Widget(); + class SomeComponent extends Component { + static template = xml`
`; + } + const widget = new SomeComponent(); await widget.mount(fixture); expect(fixture.innerHTML).toBe(`
`); widget.el!.appendChild(document.createElement("span")); @@ -429,7 +433,8 @@ describe("mount targets", () => { describe("lifecycle hooks", () => { test("willStart hook is called", async () => { let willstart = false; - class HookWidget extends Widget { + class HookWidget extends Component { + static template = xml`
`; async willStart() { willstart = true; } @@ -441,7 +446,8 @@ describe("lifecycle hooks", () => { test("mounted hook is not called if not in DOM", async () => { let mounted = false; - class HookWidget extends Widget { + class HookWidget extends Component { + static template = xml`
`; async mounted() { mounted = true; } @@ -454,7 +460,8 @@ describe("lifecycle hooks", () => { test("mounted hook is called if mounted in DOM", async () => { let mounted = false; - class HookWidget extends Widget { + class HookWidget extends Component { + static template = xml`
`; async mounted() { mounted = true; } @@ -466,13 +473,14 @@ describe("lifecycle hooks", () => { test("willStart hook is called on subwidget", async () => { let ok = false; - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; async willStart() { ok = true; } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
`; static components = { child: ChildWidget }; } @@ -484,14 +492,15 @@ describe("lifecycle hooks", () => { test("mounted hook is called on subcomponents, in proper order", async () => { const steps: any[] = []; - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; mounted() { expect(document.body.contains(this.el)).toBe(true); steps.push("child:mounted"); } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
`; static components = { ChildWidget }; mounted() { @@ -506,7 +515,8 @@ describe("lifecycle hooks", () => { test("mounted hook is called on subsubcomponents, in proper order", async () => { const steps: any[] = []; - class ChildChildWidget extends Widget { + class ChildChildWidget extends Component { + static template = xml`
`; mounted() { steps.push("childchild:mounted"); } @@ -515,7 +525,7 @@ describe("lifecycle hooks", () => { } } - class ChildWidget extends Widget { + class ChildWidget extends Component { static template = xml`
`; static components = { childchild: ChildChildWidget }; mounted() { @@ -526,7 +536,7 @@ describe("lifecycle hooks", () => { } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
`; static components = { child: ChildWidget }; state = useState({ flag: false }); @@ -559,7 +569,7 @@ describe("lifecycle hooks", () => { env.qweb.addTemplate("ChildWidget", `
`); env.qweb.addTemplate("ChildChildWidget", `
`); - class ChildChildWidget extends Widget { + class ChildChildWidget extends Component { willPatch() { steps.push("childchild:willPatch"); } @@ -567,7 +577,7 @@ describe("lifecycle hooks", () => { steps.push("childchild:patched"); } } - class ChildWidget extends Widget { + class ChildWidget extends Component { static components = { childchild: ChildChildWidget }; willPatch() { steps.push("child:willPatch"); @@ -578,7 +588,7 @@ describe("lifecycle hooks", () => { } env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { child: ChildWidget }; state = useState({ n: 1 }); willPatch() { @@ -623,7 +633,8 @@ describe("lifecycle hooks", () => {
` ); - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; async willStart() { steps.push("child:willStart"); } @@ -631,7 +642,7 @@ describe("lifecycle hooks", () => { steps.push("child:mounted"); } } - class ParentWidget extends Widget { + class ParentWidget extends Component { state = useState({ ok: false }); static components = { child: ChildWidget }; } @@ -650,13 +661,15 @@ describe("lifecycle hooks", () => { // being visited, so the mount action of the parent could cause a mount // action of the new child widget, even though it is not ready yet. expect.assertions(1); - class ParentWidget extends Widget { + class ParentWidget extends Component { + static template = xml`
`; mounted() { const child = new ChildWidget(this); child.mount(this.el!); } } - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; mounted() { expect(this.el).toBeTruthy(); } @@ -669,7 +682,8 @@ describe("lifecycle hooks", () => { test("components are unmounted and destroyed if no longer in DOM", async () => { let steps: string[] = []; - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; constructor(parent) { super(parent); steps.push("init"); @@ -684,7 +698,7 @@ describe("lifecycle hooks", () => { steps.push("willunmount"); } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
@@ -705,14 +719,14 @@ describe("lifecycle hooks", () => { test("components are unmounted and destroyed if no longer in DOM, even after updateprops", async () => { let childUnmounted = false; - class ChildWidget extends Widget { + class ChildWidget extends Component { static template = xml``; willUnmount() { childUnmounted = true; } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
@@ -745,7 +759,8 @@ describe("lifecycle hooks", () => { test("hooks are called in proper order in widget creation/destruction", async () => { let steps: string[] = []; - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; constructor(parent) { super(parent); steps.push("c init"); @@ -760,7 +775,7 @@ describe("lifecycle hooks", () => { steps.push("c willunmount"); } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
`; static components = { child: ChildWidget }; constructor(parent?) { @@ -796,17 +811,17 @@ describe("lifecycle hooks", () => { test("willUpdateProps hook is called", async () => { let def = makeDeferred(); env.qweb.addTemplate("Parent", ''); - class HookWidget extends Widget { + class HookWidget extends Component { + static template = xml``; willUpdateProps(nextProps) { expect(nextProps.n).toBe(2); return def; } } - class Parent extends Widget { + class Parent extends Component { state = useState({ n: 1 }); static components = { Child: HookWidget }; } - env.qweb.addTemplate("HookWidget", ''); const widget = new Parent(); await widget.mount(fixture); expect(fixture.innerHTML).toBe("1"); @@ -821,7 +836,8 @@ describe("lifecycle hooks", () => { test("patched hook is called after updating State", async () => { let n = 0; - class TestWidget extends Widget { + class TestWidget extends Component { + static template = xml`
`; state = useState({ a: 1 }); patched() { @@ -844,12 +860,13 @@ describe("lifecycle hooks", () => { test("patched hook is called after updateProps", async () => { let n = 0; - class TestWidget extends Widget { + class TestWidget extends Component { + static template = xml`
`; patched() { n++; } } - class Parent extends Widget { + class Parent extends Component { static template = xml`
`; state = useState({ a: 1 }); static components = { Child: TestWidget }; @@ -866,13 +883,13 @@ describe("lifecycle hooks", () => { test("shouldUpdate hook prevent rerendering", async () => { let shouldUpdate = false; - class TestWidget extends Widget { + class TestWidget extends Component { static template = xml`
`; shouldUpdate() { return shouldUpdate; } } - class Parent extends Widget { + class Parent extends Component { static template = xml`
`; static components = { Child: TestWidget }; state = useState({ val: 42 }); @@ -894,7 +911,8 @@ describe("lifecycle hooks", () => { let created = false; let mounted = false; - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; constructor(parent, props) { super(parent, props); created = true; @@ -903,7 +921,7 @@ describe("lifecycle hooks", () => { mounted = true; } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
@@ -928,7 +946,8 @@ describe("lifecycle hooks", () => { test("willPatch/patched hook", async () => { const steps: string[] = []; - class ChildWidget extends Widget { + class ChildWidget extends Component { + static template = xml`
`; willPatch() { steps.push("child:willPatch"); } @@ -936,7 +955,7 @@ describe("lifecycle hooks", () => { steps.push("child:patched"); } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
@@ -970,7 +989,11 @@ describe("lifecycle hooks", () => { describe("destroy method", () => { test("destroy remove the widget from the DOM", async () => { - const widget = new Widget(); + class SomeComponent extends Component { + static template = xml`
`; + } + + const widget = new SomeComponent(); await widget.mount(fixture); expect(document.contains(widget.el)).toBe(true); widget.destroy(); @@ -1005,7 +1028,8 @@ describe("destroy method", () => { test("destroying a widget before willStart is done", async () => { let def = makeDeferred(); let isRendered = false; - class DelayedWidget extends Widget { + class DelayedWidget extends Component { + static template = xml`
`; willStart() { return def; } @@ -1115,7 +1139,7 @@ describe("composition", () => { test("can use components from the global registry", async () => { QWeb.registerComponent("WidgetB", WidgetB); env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Widget {} + class ParentWidget extends Component {} const widget = new ParentWidget(); await widget.mount(fixture); expect(fixture.innerHTML).toBe("
world
"); @@ -1174,8 +1198,8 @@ describe("composition", () => { QWeb.registerComponent("WidgetB", WidgetB); // should not use this widget env.qweb.addTemplate("ParentWidget", `
`); env.qweb.addTemplate("AnotherWidgetB", `Belgium`); - class AnotherWidgetB extends Widget {} - class ParentWidget extends Widget { + class AnotherWidgetB extends Component {} + class ParentWidget extends Component { static components = { WidgetB: AnotherWidgetB }; } const widget = new ParentWidget(); @@ -1190,8 +1214,8 @@ describe("composition", () => {
`); - class C extends Widget {} - class P extends Widget { + class C extends Component {} + class P extends Component { static components = { C }; } const parent = new P(); @@ -1203,9 +1227,10 @@ describe("composition", () => { const consoleError = console.error; console.error = jest.fn(); + class SomeComponent extends Component {} env.qweb.addTemplate("Parent", `
`); - class Parent extends Widget { - static components = { SomeWidget: Widget }; + class Parent extends Component { + static components = { SomeWidget: SomeComponent }; } const parent = new Parent(); let error; @@ -1221,8 +1246,16 @@ describe("composition", () => { }); test("modifying a sub widget", async () => { + class Counter extends Component { + static template = xml` +
`; + state = useState({ + counter: 0 + }); + } + env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { Counter }; } const widget = new ParentWidget(); @@ -1243,8 +1276,11 @@ describe("composition", () => {
` ); - class ParentWidget extends Widget { - static components = { Child: Widget }; + class SomeComponent extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { + static components = { Child: SomeComponent }; elem1 = useRef("1"); elem2 = useRef("2"); elem3 = useRef("3"); @@ -1280,8 +1316,16 @@ describe("composition", () => { }); test("rerendering a widget with a sub widget", async () => { + class Counter extends Component { + static template = xml` +
`; + state = useState({ + counter: 0 + }); + } + env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { Counter }; } const widget = new ParentWidget(); @@ -1295,8 +1339,16 @@ describe("composition", () => { }); test("sub components are destroyed if no longer in dom, then recreated", async () => { + class Counter extends Component { + static template = xml` +
`; + state = useState({ + counter: 0 + }); + } + env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Widget { + class ParentWidget extends Component { state = useState({ ok: true }); static components = { Counter }; } @@ -1317,7 +1369,7 @@ describe("composition", () => { test("sub components rendered in a loop", async () => { env.qweb.addTemplate("ChildWidget", ``); - class ChildWidget extends Widget {} + class ChildWidget extends Component {} env.qweb.addTemplate( "Parent", @@ -1328,7 +1380,7 @@ describe("composition", () => {
` ); - class Parent extends Widget { + class Parent extends Component { state = useState({ numbers: [1, 2, 3] }); @@ -1350,7 +1402,7 @@ describe("composition", () => { test("sub components with some state rendered in a loop", async () => { let n = 1; env.qweb.addTemplate("ChildWidget", ``); - class ChildWidget extends Widget { + class ChildWidget extends Component { state: any; constructor(parent) { super(parent); @@ -1367,7 +1419,7 @@ describe("composition", () => {
` ); - class Parent extends Widget { + class Parent extends Component { static template = "parent"; state = useState({ numbers: [1, 2, 3] @@ -1391,11 +1443,11 @@ describe("composition", () => { test("sub components between t-ifs", async () => { // this confuses the patching algorithm... - class ChildWidget extends Widget { + class ChildWidget extends Component { static template = xml`child`; } - class Parent extends Widget { + class Parent extends Component { static template = xml`

hey

@@ -1447,8 +1499,8 @@ describe("composition", () => { asdf `); - class SubWidget extends Widget {} - class Parent extends Widget { + class SubWidget extends Component {} + class Parent extends Component { static components = { SubWidget }; state = useState({ blips: [ @@ -1485,8 +1537,8 @@ describe("composition", () => { asdf `); - class SubWidget extends Widget {} - class Parent extends Widget { + class SubWidget extends Component {} + class Parent extends Component { static components = { SubWidget }; state = useState({ blips: [{ a: "a", id: 1 }] }); } @@ -1497,7 +1549,7 @@ describe("composition", () => { test("t-component with dynamic value", async () => { env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { WidgetB }; state = useState({ widget: "WidgetB" }); } @@ -1509,7 +1561,7 @@ describe("composition", () => { test("t-component with dynamic value 2", async () => { env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { WidgetB }; state = useState({ widget: "B" }); } @@ -1605,14 +1657,14 @@ describe("composition", () => { describe("props evaluation ", () => { test("explicit object prop", async () => { env.qweb.addTemplate("Parent", `
`); - class Child extends Widget { + class Child extends Component { state: { someval: number }; constructor(parent: Parent, props: { value: number }) { super(parent); this.state = useState({ someval: props.value }); } } - class Parent extends Widget { + class Parent extends Component { static components = { child: Child }; state = useState({ val: 42 }); } @@ -1626,10 +1678,10 @@ describe("props evaluation ", () => { test("accept ES6-like syntax for props (with getters)", async () => { env.qweb.addTemplate("Child", ``); - class Child extends Widget {} + class Child extends Component {} env.qweb.addTemplate("Parent", `
`); - class Parent extends Widget { + class Parent extends Component { static components = { child: Child }; get greetings() { const name = "aaron"; @@ -1642,7 +1694,7 @@ describe("props evaluation ", () => { }); test("t-set works ", async () => { - class Child extends Widget {} + class Child extends Component {} env.qweb.addTemplate( "Parent", ` @@ -1651,7 +1703,7 @@ describe("props evaluation ", () => {
` ); - class Parent extends Widget { + class Parent extends Component { static components = { child: Child }; } env.qweb.addTemplate( @@ -1670,10 +1722,10 @@ describe("props evaluation ", () => { describe("class and style attributes with t-component", () => { test("class is properly added on widget root el", async () => { - class Child extends Widget { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
`; static components = { Child }; } @@ -1696,10 +1748,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 Widget { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
`; static components = { Child }; state = useState({ a: true, b: false }); @@ -1722,8 +1774,8 @@ describe("class and style attributes with t-component", () => {
` ); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component {} + class ParentWidget extends Component { static components = { Child }; } env.qweb.addTemplate("Child", `
`); @@ -1741,10 +1793,10 @@ describe("class and style attributes with t-component", () => { `); - class Child extends Widget { + class Child extends Component { state = useState({ d: true }); } - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { Child }; state = useState({ b: true }); child = useRef("child"); @@ -1783,10 +1835,10 @@ describe("class and style attributes with t-component", () => { `); - class Child extends Widget { + class Child extends Component { state = useState({ d: true }); } - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { Child }; state = useState({ b: true }); child = useRef("child"); @@ -1822,7 +1874,7 @@ describe("class and style attributes with t-component", () => {
`); - class App extends Widget { + class App extends Component { state = useState({ c: true }); mounted() { this.el!.classList.add("user"); @@ -1848,8 +1900,13 @@ describe("class and style attributes with t-component", () => {
` ); - class ParentWidget extends Widget { - static components = { child: Widget }; + + class SomeComponent extends Component { + static template = xml`
`; + } + + class ParentWidget extends Component { + static components = { child: SomeComponent }; } const widget = new ParentWidget(); await widget.mount(fixture); @@ -1864,8 +1921,13 @@ describe("class and style attributes with t-component", () => {
` ); - class ParentWidget extends Widget { - static components = { child: Widget }; + + class SomeComponent extends Component { + static template = xml`
`; + } + + class ParentWidget extends Component { + static components = { child: SomeComponent }; state = useState({ style: "font-size: 20px" }); } const widget = new ParentWidget(); @@ -1882,10 +1944,10 @@ describe("class and style attributes with t-component", () => { }); test("error in subcomponent with class", async () => { - class Child extends Widget { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Widget { + class ParentWidget extends Component { static template = xml`
`; static components = { Child }; } @@ -1910,8 +1972,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { static components = { child: Child }; n = 0; someMethod(ev) { @@ -1969,8 +2033,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { static components = { child: Child }; onEv(n, ev) { expect(n).toBe(3); @@ -1991,8 +2057,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { static components = { child: Child }; onEv(o, ev) { expect(o).toEqual({ val: 3 }); @@ -2013,8 +2081,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { static components = { child: Child }; onEv(o, ev) { expect(o).toEqual({}); @@ -2035,8 +2105,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { static components = { child: Child }; onEv(o, ev) { expect(o).toEqual({}); @@ -2062,8 +2134,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { static components = { child: Child }; onEv1(ev) { expect(ev.defaultPrevented).toBe(false); @@ -2098,11 +2172,13 @@ describe("other directives with t-component", () => { `); const steps: string[] = []; - class GrandChild extends Widget {} - class Child extends Widget { + class GrandChild extends Component { + static template = xml`
`; + } + class Child extends Component { static components = { child: GrandChild }; } - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { child: Child }; onEv1(ev) { steps.push("onEv1"); @@ -2135,11 +2211,13 @@ describe("other directives with t-component", () => { `); const steps: boolean[] = []; - class GrandChild extends Widget {} - class Child extends Widget { + class GrandChild extends Component { + static template = xml`
`; + } + class Child extends Component { static components = { child: GrandChild }; } - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { child: Child }; onEv() {} } @@ -2167,11 +2245,14 @@ describe("other directives with t-component", () => { `); const steps: boolean[] = []; - class GrandChild extends Widget {} - class Child extends Widget { + class GrandChild extends Component { + static template = xml`
`; + } + + class Child extends Component { static components = { GrandChild }; } - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { Child }; onEv() {} } @@ -2398,8 +2479,8 @@ describe("other directives with t-component", () => { test("t-if works with t-component", async () => { env.qweb.addTemplate("ParentWidget", `
`); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2428,8 +2509,8 @@ describe("other directives with t-component", () => {
` ); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2454,8 +2535,8 @@ describe("other directives with t-component", () => {
` ); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2480,8 +2561,8 @@ describe("other directives with t-component", () => {
` ); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2498,7 +2579,7 @@ describe("other directives with t-component", () => { }); test("t-foreach with t-component, and update", async () => { - class Child extends Widget { + class Child extends Component { static template = xml` @@ -2509,7 +2590,7 @@ describe("other directives with t-component", () => { this.state.val = "B"; } } - class ParentWidget extends Widget { + class ParentWidget extends Component { static components = { Child }; static template = xml`
@@ -2537,8 +2618,13 @@ describe("random stuff/miscellaneous", () => { "Test", `
txt
` ); - class Test extends Widget { - static components = { widget: Widget }; + + class SomeComponent extends Component { + static template = xml`
`; + } + + class Test extends Component { + static components = { widget: SomeComponent }; } const widget = new Test(); await widget.mount(fixture); @@ -2548,8 +2634,10 @@ describe("random stuff/miscellaneous", () => { test("t-on with handler bound to dynamic argument on a t-foreach", async () => { expect.assertions(3); - class Child extends Widget {} - class ParentWidget extends Widget { + class Child extends Component { + static template = xml`
`; + } + class ParentWidget extends Component { static template = xml`
@@ -2575,8 +2663,8 @@ describe("random stuff/miscellaneous", () => { // interplay between components and vnodes, a sub widget vnode was patched // twice. env.qweb.addTemplate("Parent", `
`); - class Child extends Widget {} - class Parent extends Widget { + class Child extends Component {} + class Parent extends Component { static components = { child: Child }; state = useState({ flag: false }); } @@ -2596,8 +2684,8 @@ describe("random stuff/miscellaneous", () => { "Parent", `
` ); - class Child extends Widget {} - class Parent extends Widget { + class Child extends Component {} + class Parent extends Component { static components = { child: Child }; state = useState({ flag: false }); } @@ -2613,7 +2701,7 @@ describe("random stuff/miscellaneous", () => { let steps: string[] = []; let c: C; - class TestWidget extends Widget { + class TestWidget extends Component { name: string = "test"; async willStart() { steps.push(`${this.name}:willStart`); @@ -2760,7 +2848,7 @@ describe("random stuff/miscellaneous", () => { test("can inject values in tagged templates", async () => { const SUBTEMPLATE = xml``; - class Parent extends Widget { + class Parent extends Component { static template = xml`
`; state = useState({ n: 42 }); } @@ -2775,7 +2863,8 @@ describe("random stuff/miscellaneous", () => { describe("async rendering", () => { test("destroying a widget before start is over", async () => { let def = makeDeferred(); - class W extends Widget { + class W extends Component { + static template = xml`
`; willStart(): Promise { return def; } @@ -2794,7 +2883,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 Widget { + class Child extends Component { static template = xml`child:`; constructor(parent, props) { super(parent, props); @@ -2804,7 +2893,7 @@ describe("async rendering", () => { return def; } } - class W extends Widget { + class W extends Component { static template = xml`
`; static components = { Child }; state = useState({ val: 1 }); @@ -3043,9 +3132,9 @@ describe("async rendering", () => { }); test("components in a node in a t-foreach ", async () => { - class Child extends Widget {} + class Child extends Component {} - class App extends Widget { + class App extends Component { static components = { Child }; get items() { @@ -3076,7 +3165,8 @@ describe("async rendering", () => { test("properly behave when destroyed/unmounted while rendering ", async () => { const def = makeDeferred(); - class SubChild extends Widget { + class SubChild extends Component { + static template = xml`
`; willPatch() { throw new Error("Should not happen!"); } @@ -3088,12 +3178,12 @@ describe("async rendering", () => { } } - class Child extends Widget { + class Child extends Component { static template = xml`
`; static components = { SubChild }; } - class Parent extends Widget { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true, val: "Framboise Lindemans" }); @@ -3136,18 +3226,18 @@ describe("async rendering", () => { `); let destroyCount = 0; - class ChildA extends Widget { + class ChildA extends Component { destroy() { destroyCount++; super.destroy(); } } - class ChildB extends Widget { + class ChildB extends Component { willStart(): any { return new Promise(function() {}); } } - class Parent extends Widget { + class Parent extends Component { static components = { ChildA, ChildB }; state = useState({ valA: 1, valB: 2, flag: false }); } @@ -3166,11 +3256,11 @@ describe("async rendering", () => { }); test("rendering component again in next microtick", async () => { - class Child extends Widget { + class Child extends Component { static template = xml`
Child
`; } - class App extends Widget { + class App extends Component { static template = xml`
@@ -3913,7 +4003,7 @@ describe("async rendering", () => { describe("widget and observable state", () => { test("widget is rerendered when its state is changed", async () => { - class TestWidget extends Widget { + class TestWidget extends Component { static template = xml`
`; state = useState({ drink: "water" }); } @@ -3931,13 +4021,14 @@ describe("widget and observable state", () => { const consoleError = console.error; console.error = jest.fn(); env.qweb.addTemplate("Parent", `
`); - class Child extends Widget { + class Child extends Component { + static template = xml`
`; constructor(parent, props) { super(parent, props); props.obj.coffee = 2; } } - class Parent extends Widget { + class Parent extends Component { state = useState({ obj: { coffee: 1 } }); static components = { Child }; } @@ -3957,7 +4048,7 @@ describe("widget and observable state", () => { describe("can deduce template from name", () => { test("can find template if name of component", async () => { - class ABC extends Widget {} + class ABC extends Component {} env.qweb.addTemplate("ABC", "Orval"); const abc = new ABC(); await abc.mount(fixture); @@ -3965,7 +4056,7 @@ describe("can deduce template from name", () => { }); test("can find template of parent component", async () => { - class ABC extends Widget {} + class ABC extends Component {} class DEF extends ABC {} env.qweb.addTemplate("ABC", "Orval"); const def = new DEF(); @@ -3974,7 +4065,7 @@ describe("can deduce template from name", () => { }); test("can find template of parent component, defined by template key", async () => { - class ABC extends Widget { + class ABC extends Component { static template = "Achel"; } class DEF extends ABC {} @@ -3988,7 +4079,7 @@ describe("can deduce template from name", () => { const env2 = makeTestEnv(); env.qweb.addTemplate("ABC", "Rochefort 8"); env2.qweb.addTemplate("ABC", "Rochefort 10"); - class ABC extends Widget {} + class ABC extends Component {} const abc = new ABC(); await abc.mount(fixture); expect(fixture.innerHTML).toBe("Rochefort 8"); @@ -4000,10 +4091,9 @@ describe("can deduce template from name", () => { }); }); - describe("t-model directive", () => { test("basic use, on an input", async () => { - class SomeComponent extends Widget { + class SomeComponent extends Component { static template = xml`
@@ -4031,7 +4121,7 @@ describe("t-model directive", () => {
`); - class SomeComponent extends Widget { + class SomeComponent extends Component { some = useState({ text: "" }); } const comp = new SomeComponent(); @@ -4057,7 +4147,7 @@ describe("t-model directive", () => {
`); - class SomeComponent extends Widget { + class SomeComponent extends Component { state = useState({ flag: false }); } const comp = new SomeComponent(); @@ -4085,7 +4175,7 @@ describe("t-model directive", () => {
`); - class SomeComponent extends Widget { + class SomeComponent extends Component { state = useState({ text: "" }); } const comp = new SomeComponent(); @@ -4108,7 +4198,7 @@ describe("t-model directive", () => { Choice:
`); - class SomeComponent extends Widget { + class SomeComponent extends Component { state = useState({ choice: "" }); } const comp = new SomeComponent(); @@ -4148,7 +4238,7 @@ describe("t-model directive", () => { Choice:
`); - class SomeComponent extends Widget { + class SomeComponent extends Component { state = useState({ color: "" }); } const comp = new SomeComponent(); @@ -4172,7 +4262,7 @@ describe("t-model directive", () => { }); test("on a select, initial state", async () => { - class SomeComponent extends Widget { + class SomeComponent extends Component { static template = xml`
@@ -4213,7 +4303,7 @@ describe("t-model directive", () => { }); test(".lazy modifier", async () => { - class SomeComponent extends Widget { + class SomeComponent extends Component { static template = xml`
@@ -4241,7 +4331,7 @@ describe("t-model directive", () => { }); test(".trim modifier", async () => { - class SomeComponent extends Widget { + class SomeComponent extends Component { static template = xml`
@@ -4260,7 +4350,7 @@ describe("t-model directive", () => { }); test(".number modifier", async () => { - class SomeComponent extends Widget { + class SomeComponent extends Component { static template = xml`
@@ -4328,7 +4418,7 @@ describe("environment and plugins", () => { test("plugin works as expected", async () => { somePlugin(env); - class App extends Widget { + class App extends Component { static template = xml`
Red @@ -4388,10 +4478,10 @@ describe("component error handling (catchError)", () => { console.error = jest.fn(); const handler = jest.fn(); env.qweb.on("error", null, handler); - class ErrorComponent extends Widget { + class ErrorComponent extends Component { static template = xml`
hey
`; } - class ErrorBoundary extends Widget { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -4403,7 +4493,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Widget { + class App extends Component { static template = xml`
@@ -4430,11 +4520,11 @@ describe("component error handling (catchError)", () => { const consoleError = console.error; console.error = jest.fn(); - class ErrorComponent extends Widget { + class ErrorComponent extends Component { static template = xml`
hey
`; } - class App extends Widget { + class App extends Component { static template = xml`
`; static components = { ErrorComponent }; state = useState({ flag: false }); @@ -4550,20 +4640,20 @@ describe("component error handling (catchError)", () => {
`); - class ErrorComponent extends Widget { + class ErrorComponent extends Component { constructor(parent) { super(parent); throw new Error("NOOOOO"); } } - class ErrorBoundary extends Widget { + class ErrorBoundary extends Component { state = useState({ error: false }); catchError() { this.state.error = true; } } - class App extends Widget { + class App extends Component { static components = { ErrorBoundary, ErrorComponent }; } const app = new App(); @@ -4578,7 +4668,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 Widget { + class ErrorComponent extends Component { static template = xml`
Some text
`; async willStart() { // we wait a little bit to be in a different stack frame @@ -4586,7 +4676,7 @@ describe("component error handling (catchError)", () => { throw new Error("NOOOOO"); } } - class ErrorBoundary extends Widget { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -4598,7 +4688,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Widget { + class App extends Component { static template = xml`
`; static components = { ErrorBoundary, ErrorComponent }; } @@ -4624,19 +4714,19 @@ describe("component error handling (catchError)", () => {
`); - class ErrorComponent extends Widget { + class ErrorComponent extends Component { mounted() { throw new Error("NOOOOO"); } } - class ErrorBoundary extends Widget { + class ErrorBoundary extends Component { state = useState({ error: false }); catchError() { this.state.error = true; } } - class App extends Widget { + class App extends Component { static components = { ErrorBoundary, ErrorComponent }; } const app = new App(); @@ -4651,13 +4741,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 Widget { + class ErrorComponent extends Component { static template = xml`
`; willPatch() { throw new Error("NOOOOO"); } } - class ErrorBoundary extends Widget { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -4669,7 +4759,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Widget { + class App extends Component { static template = xml`
@@ -4878,8 +4968,8 @@ describe("top level sub widgets", () => { child `); - class Child extends Widget {} - class Parent extends Widget { + class Child extends Component {} + class Parent extends Component { static components = { Child }; } const parent = new Parent(); @@ -4896,13 +4986,13 @@ describe("top level sub widgets", () => { child `); - class Child extends Widget { + class Child extends Component { state = useState({ val: 1 }); inc() { this.state.val++; } } - class Parent extends Widget { + class Parent extends Component { static components = { Child }; } const parent = new Parent(); @@ -4915,13 +5005,13 @@ describe("top level sub widgets", () => { }); test("can select a sub widget ", async () => { - class Child extends Widget { + class Child extends Component { static template = xml`CHILD 1`; } - class OtherChild extends Widget { + class OtherChild extends Component { static template = xml`
CHILD 2
`; } - class Parent extends Widget { + class Parent extends Component { static template = xml` @@ -4944,13 +5034,13 @@ describe("top level sub widgets", () => { }); test("can select a sub widget, part 2", async () => { - class Child extends Widget { + class Child extends Component { static template = xml`CHILD 1`; } - class OtherChild extends Widget { + class OtherChild extends Component { static template = xml`
CHILD 2
`; } - class Parent extends Widget { + class Parent extends Component { static template = xml` @@ -4991,7 +5081,7 @@ describe("top level sub widgets", () => { describe("unmounting and remounting", () => { test("widget can be unmounted and remounted", async () => { const steps: string[] = []; - class MyWidget extends Widget { + class MyWidget extends Component { static template = xml`
Hey
`; async willStart() { steps.push("willstart"); @@ -5023,7 +5113,7 @@ describe("unmounting and remounting", () => { test("widget can be mounted twice without ill effect", async () => { const steps: string[] = []; - class MyWidget extends Widget { + class MyWidget extends Component { static template = xml`
Hey
`; async willStart() { steps.push("willstart"); @@ -5046,7 +5136,7 @@ describe("unmounting and remounting", () => { test("state changes in willUnmount do not trigger rerender", async () => { const steps: string[] = []; - class Child extends Widget { + class Child extends Component { static template = xml` `; @@ -5067,7 +5157,7 @@ describe("unmounting and remounting", () => { this.state.n = 3; } } - class Parent extends Widget { + class Parent extends Component { static template = xml`
@@ -5088,7 +5178,7 @@ describe("unmounting and remounting", () => { }); test("state changes in willUnmount will be applied on remount", async () => { - class TestWidget extends Widget { + class TestWidget extends Component { static template = xml`
`; @@ -5240,7 +5330,7 @@ describe("unmounting and remounting", () => { test("unmount component during a re-rendering", async () => { const def = makeDeferred(); - class Child extends Widget { + class Child extends Component { static template = xml``; willUpdateProps() { return def; @@ -5248,7 +5338,7 @@ describe("unmounting and remounting", () => { } Child.prototype.__render = jest.fn(Child.prototype.__render); - class Parent extends Widget { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ val: 1 }); @@ -5275,7 +5365,7 @@ describe("unmounting and remounting", () => { describe("dynamic root nodes", () => { test("template with t-if, part 1", async () => { - class TestWidget extends Widget { + class TestWidget extends Component { static template = xml` hey @@ -5291,7 +5381,7 @@ describe("dynamic root nodes", () => { }); test("template with t-if, part 2", async () => { - class TestWidget extends Widget { + class TestWidget extends Component { static template = xml` hey @@ -5307,7 +5397,7 @@ describe("dynamic root nodes", () => { }); test("switching between sub branches dynamically", async () => { - class TestWidget extends Widget { + class TestWidget extends Component { static template = xml` hey @@ -5328,13 +5418,13 @@ describe("dynamic root nodes", () => { }); test("switching between sub components dynamically", async () => { - class ChildA extends Widget { + class ChildA extends Component { static template = xml`hey`; } - class ChildB extends Widget { + class ChildB extends Component { static template = xml`
abc
`; } - class TestWidget extends Widget { + class TestWidget extends Component { static template = xml` @@ -5360,7 +5450,7 @@ describe("dynamic t-props", () => { test("basic use", async () => { expect.assertions(4); - class Child extends Widget { + class Child extends Component { static template = xml` @@ -5372,7 +5462,7 @@ describe("dynamic t-props", () => { expect(props).not.toBe(widget.some.obj); } } - class Parent extends Widget { + class Parent extends Component { static template = xml`
@@ -5393,14 +5483,14 @@ describe("dynamic t-props", () => { describe("support svg components", () => { test("add proper namespace to svg", async () => { - class GComp extends Widget { + class GComp extends Component { static template = xml` `; } - class Svg extends Widget { + class Svg extends Component { static template = xml` @@ -5418,7 +5508,7 @@ describe("support svg components", () => { describe("t-raw in components", () => { test("update properly on state changes", async () => { - class TestW extends Widget { + class TestW extends Component { static template = xml`
`; state = useState({ value: "content" }); } @@ -5433,7 +5523,7 @@ describe("t-raw in components", () => { }); test("can render list of t-raw ", async () => { - class TestW extends Widget { + class TestW extends Component { static template = xml`
diff --git a/tests/component/slots.test.ts b/tests/component/slots.test.ts index b01f9c95..3f27bd3e 100644 --- a/tests/component/slots.test.ts +++ b/tests/component/slots.test.ts @@ -2,11 +2,7 @@ import { Component, Env } from "../../src/component/component"; import { QWeb } from "../../src/qweb/qweb"; import { xml } from "../../src/tags"; import { useState, useRef } from "../../src/hooks"; -import { - makeTestFixture, - makeTestEnv, - nextTick, -} from "../helpers"; +import { makeTestFixture, makeTestEnv, nextTick } from "../helpers"; //------------------------------------------------------------------------------ // Setup and helpers @@ -37,18 +33,18 @@ afterEach(() => { fixture.remove(); }); -function children(w: Component): Component[] { - const childrenMap = w.__owl__.children; - return Object.keys(childrenMap).map(id => childrenMap[id]); - } +function children(w: Component): Component[] { + const childrenMap = w.__owl__.children; + return Object.keys(childrenMap).map(id => childrenMap[id]); +} //------------------------------------------------------------------------------ // Tests //------------------------------------------------------------------------------ describe("t-slot directive", () => { - test("can define and call slots", async () => { - env.qweb.addTemplates(` + test("can define and call slots", async () => { + env.qweb.addTemplates(`
@@ -62,94 +58,94 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe( - "
header
footer
" - ); - expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot(); - expect(env.qweb.templates.Dialog.fn.toString()).toMatchSnapshot(); - expect(QWeb.slots["1_header"].toString()).toMatchSnapshot(); - expect(QWeb.slots["1_footer"].toString()).toMatchSnapshot(); - }); - - test("named slots can define a default content", async () => { - class Dialog extends Component { - static template = xml` + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe( + "
header
footer
" + ); + expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot(); + expect(env.qweb.templates.Dialog.fn.toString()).toMatchSnapshot(); + expect(QWeb.slots["1_header"].toString()).toMatchSnapshot(); + expect(QWeb.slots["1_footer"].toString()).toMatchSnapshot(); + }); + + test("named slots can define a default content", async () => { + class Dialog extends Component { + static template = xml` default content `; - } - class Parent extends Component { - static template = xml`
`; - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
default content
"); - expect(env.qweb.templates[Dialog.template].fn.toString()).toMatchSnapshot(); - }); - - test("dafault slots can define a default content", async () => { - class Dialog extends Component { - static template = xml` + } + class Parent extends Component { + static template = xml`
`; + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
default content
"); + expect(env.qweb.templates[Dialog.template].fn.toString()).toMatchSnapshot(); + }); + + test("dafault slots can define a default content", async () => { + class Dialog extends Component { + static template = xml` default content `; - } - class Parent extends Component { - static template = xml`
`; - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
default content
"); - expect(env.qweb.templates[Dialog.template].fn.toString()).toMatchSnapshot(); - }); - - test("default content is not rendered if slot is provided", async () => { - class Dialog extends Component { - static template = xml` + } + class Parent extends Component { + static template = xml`
`; + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
default content
"); + expect(env.qweb.templates[Dialog.template].fn.toString()).toMatchSnapshot(); + }); + + test("default content is not rendered if slot is provided", async () => { + class Dialog extends Component { + static template = xml` default content `; - } - class Parent extends Component { - static template = xml`
hey
`; - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
hey
"); - }); - - test("default content is not rendered if named slot is provided", async () => { - class Dialog extends Component { - static template = xml` + } + class Parent extends Component { + static template = xml`
hey
`; + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
hey
"); + }); + + test("default content is not rendered if named slot is provided", async () => { + class Dialog extends Component { + static template = xml` default content `; - } - class Parent extends Component { - static template = xml`
hey
`; - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
hey
"); - }); - - test("slots are rendered with proper context", async () => { - env.qweb.addTemplates(` + } + class Parent extends Component { + static template = xml`
hey
`; + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
hey
"); + }); + + test("slots are rendered with proper context", async () => { + env.qweb.addTemplates(`
@@ -160,32 +156,32 @@ describe("t-slot directive", () => { `); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - state = useState({ val: 0 }); - doSomething() { - this.state.val++; - } + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + state = useState({ val: 0 }); + doSomething() { + this.state.val++; } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe( - '
0
' - ); - - fixture.querySelector("button")!.click(); - await nextTick(); - - expect(fixture.innerHTML).toBe( - '
1
' - ); - expect(QWeb.slots["1_footer"].toString()).toMatchSnapshot(); - }); - - test("slots are rendered with proper context, part 2", async () => { - env.qweb.addTemplates(` + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe( + '
0
' + ); + + fixture.querySelector("button")!.click(); + await nextTick(); + + expect(fixture.innerHTML).toBe( + '
1
' + ); + expect(QWeb.slots["1_footer"].toString()).toMatchSnapshot(); + }); + + test("slots are rendered with proper context, part 2", async () => { + env.qweb.addTemplates(` @@ -197,38 +193,38 @@ describe("t-slot directive", () => {
`); - class Link extends Component {} - - class App extends Component { - state = useState({ - users: [ - { id: 1, name: "Aaron" }, - { id: 2, name: "David" } - ] - }); - static components = { Link }; - } - - const app = new App(); - await app.mount(fixture); - - expect(fixture.innerHTML).toBe( - '' - ); - expect(env.qweb.templates.Link.fn.toString()).toMatchSnapshot(); - expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot(); - - // test updateprops here - app.state.users[1].name = "Mathieu"; - await nextTick(); - expect(fixture.innerHTML).toBe( - '' - ); - expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); - }); - - test("slots are rendered with proper context, part 3", async () => { - env.qweb.addTemplates(` + class Link extends Component {} + + class App extends Component { + state = useState({ + users: [ + { id: 1, name: "Aaron" }, + { id: 2, name: "David" } + ] + }); + static components = { Link }; + } + + const app = new App(); + await app.mount(fixture); + + expect(fixture.innerHTML).toBe( + '' + ); + expect(env.qweb.templates.Link.fn.toString()).toMatchSnapshot(); + expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot(); + + // test updateprops here + app.state.users[1].name = "Mathieu"; + await nextTick(); + expect(fixture.innerHTML).toBe( + '' + ); + expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); + }); + + test("slots are rendered with proper context, part 3", async () => { + env.qweb.addTemplates(` @@ -241,38 +237,38 @@ describe("t-slot directive", () => {
`); - class Link extends Component {} - - class App extends Component { - state = useState({ - users: [ - { id: 1, name: "Aaron" }, - { id: 2, name: "David" } - ] - }); - static components = { Link }; - } - - const app = new App(); - await app.mount(fixture); - - expect(fixture.innerHTML).toBe( - '' - ); - expect(env.qweb.templates.Link.fn.toString()).toMatchSnapshot(); - expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot(); - - // test updateprops here - app.state.users[1].name = "Mathieu"; - await nextTick(); - expect(fixture.innerHTML).toBe( - '' - ); - expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); - }); - - test("slots are rendered with proper context, part 4", async () => { - env.qweb.addTemplates(` + class Link extends Component {} + + class App extends Component { + state = useState({ + users: [ + { id: 1, name: "Aaron" }, + { id: 2, name: "David" } + ] + }); + static components = { Link }; + } + + const app = new App(); + await app.mount(fixture); + + expect(fixture.innerHTML).toBe( + '' + ); + expect(env.qweb.templates.Link.fn.toString()).toMatchSnapshot(); + expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot(); + + // test updateprops here + app.state.users[1].name = "Mathieu"; + await nextTick(); + expect(fixture.innerHTML).toBe( + '' + ); + expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); + }); + + test("slots are rendered with proper context, part 4", async () => { + env.qweb.addTemplates(` @@ -283,33 +279,33 @@ describe("t-slot directive", () => {
`); - class Link extends Component {} - - class App extends Component { - state = useState({ user: { id: 1, name: "Aaron" } }); - static components = { Link }; - } - - const app = new App(); - await app.mount(fixture); - - expect(fixture.innerHTML).toBe(''); - - expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot(); - - // test updateprops here - app.state.user.name = "David"; - await nextTick(); - expect(fixture.innerHTML).toBe(''); - expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); - }); - - test("refs are properly bound in slots", async () => { - class Dialog extends Component { - static template = xml``; - } - class Parent extends Component { - static template = xml` + class Link extends Component {} + + class App extends Component { + state = useState({ user: { id: 1, name: "Aaron" } }); + static components = { Link }; + } + + const app = new App(); + await app.mount(fixture); + + expect(fixture.innerHTML).toBe(''); + + expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot(); + + // test updateprops here + app.state.user.name = "David"; + await nextTick(); + expect(fixture.innerHTML).toBe(''); + expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); + }); + + test("refs are properly bound in slots", async () => { + class Dialog extends Component { + static template = xml``; + } + class Parent extends Component { + static template = xml`
@@ -317,31 +313,31 @@ describe("t-slot directive", () => {
`; - static components = { Dialog }; - state = useState({ val: 0 }); - button = useRef("myButton"); - doSomething() { - this.state.val++; - } + static components = { Dialog }; + state = useState({ val: 0 }); + button = useRef("myButton"); + doSomething() { + this.state.val++; } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe( - '
0
' - ); - - parent.button.el!.click(); - await nextTick(); - - expect(fixture.innerHTML).toBe( - '
1
' - ); - expect(QWeb.slots["1_footer"].toString()).toMatchSnapshot(); - }); - - test("content is the default slot", async () => { - env.qweb.addTemplates(` + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe( + '
0
' + ); + + parent.button.el!.click(); + await nextTick(); + + expect(fixture.innerHTML).toBe( + '
1
' + ); + expect(QWeb.slots["1_footer"].toString()).toMatchSnapshot(); + }); + + test("content is the default slot", async () => { + env.qweb.addTemplates(`
@@ -351,19 +347,19 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
sts rocks
"); - expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); - }); - - test("default slot work with text nodes", async () => { - env.qweb.addTemplates(` + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
sts rocks
"); + expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); + }); + + test("default slot work with text nodes", async () => { + env.qweb.addTemplates(`
sts rocks @@ -371,19 +367,19 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
sts rocks
"); - expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); - }); - - test("multiple roots are allowed in a named slot", async () => { - env.qweb.addTemplates(` + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
sts rocks
"); + expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); + }); + + test("multiple roots are allowed in a named slot", async () => { + env.qweb.addTemplates(`
@@ -396,19 +392,19 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
stsrocks
"); - expect(QWeb.slots["1_content"].toString()).toMatchSnapshot(); - }); - - test("multiple roots are allowed in a default slot", async () => { - env.qweb.addTemplates(` + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
stsrocks
"); + expect(QWeb.slots["1_content"].toString()).toMatchSnapshot(); + }); + + test("multiple roots are allowed in a default slot", async () => { + env.qweb.addTemplates(`
@@ -419,19 +415,19 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
stsrocks
"); - expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); - }); - - test("missing slots are ignored", async () => { - env.qweb.addTemplates(` + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
stsrocks
"); + expect(QWeb.slots["1_default"].toString()).toMatchSnapshot(); + }); + + test("missing slots are ignored", async () => { + env.qweb.addTemplates(`
@@ -443,21 +439,21 @@ describe("t-slot directive", () => { `); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
some content
"); - }); - - test("t-debug on a t-set (defining a slot)", async () => { - const consoleLog = console.log; - console.log = jest.fn(); - - env.qweb.addTemplates(` + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
some content
"); + }); + + test("t-debug on a t-set (defining a slot)", async () => { + const consoleLog = console.log; + console.log = jest.fn(); + + env.qweb.addTemplates(`
abc @@ -467,18 +463,18 @@ describe("t-slot directive", () => { `); - class Dialog extends Component {} - class Parent extends Component { - static components = { Dialog }; - } - const parent = new Parent(); - await parent.mount(fixture); - expect(console.log).toHaveBeenCalledTimes(0); - console.log = consoleLog; - }); - - test("slot preserves properly parented relationship", async () => { - env.qweb.addTemplates(` + class Dialog extends Component {} + class Parent extends Component { + static components = { Dialog }; + } + const parent = new Parent(); + await parent.mount(fixture); + expect(console.log).toHaveBeenCalledTimes(0); + console.log = consoleLog; + }); + + test("slot preserves properly parented relationship", async () => { + env.qweb.addTemplates(`
@@ -489,58 +485,58 @@ describe("t-slot directive", () => {
Grand Child
`); - class Child extends Component {} - class GrandChild extends Component {} - class Parent extends Component { - static components = { Child, GrandChild }; + class Child extends Component {} + class GrandChild extends Component {} + class Parent extends Component { + static components = { Child, GrandChild }; + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
Grand Child
"); + + const parentChildren = children(parent); + expect(parentChildren.length).toBe(1); + expect(parentChildren[0]).toBeInstanceOf(Child); + + const childrenChildren = children(parentChildren[0]); + expect(childrenChildren.length).toBe(1); + expect(childrenChildren[0]).toBeInstanceOf(GrandChild); + }); + + test("nested slots: evaluation context and parented relationship", async () => { + let slot; + class Slot extends Component { + static template = xml``; + constructor(parent, props) { + super(parent, props); + slot = this; } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
Grand Child
"); - - const parentChildren = children(parent); - expect(parentChildren.length).toBe(1); - expect(parentChildren[0]).toBeInstanceOf(Child); - - const childrenChildren = children(parentChildren[0]); - expect(childrenChildren.length).toBe(1); - expect(childrenChildren[0]).toBeInstanceOf(GrandChild); - }); - - test("nested slots: evaluation context and parented relationship", async () => { - let slot; - class Slot extends Component { - static template = xml``; - constructor(parent, props) { - super(parent, props); - slot = this; - } - } - class GrandChild extends Component { - static template = xml`
`; - } - class Child extends Component { - static components = { GrandChild }; - static template = xml` + } + class GrandChild extends Component { + static template = xml`
`; + } + class Child extends Component { + static components = { GrandChild }; + static template = xml` `; - } - class Parent extends Component { - static components = { Child, Slot }; - static template = xml``; - state = useState({ val: 3 }); - } - const parent = new Parent(); - await parent.mount(fixture); - - expect(fixture.innerHTML).toBe("
3
"); - expect(slot.__owl__.parent).toBeInstanceOf(GrandChild); - }); - - test("slot are properly rendered if inner props are changed", async () => { - env.qweb.addTemplates(` + } + class Parent extends Component { + static components = { Child, Slot }; + static template = xml``; + state = useState({ val: 3 }); + } + const parent = new Parent(); + await parent.mount(fixture); + + expect(fixture.innerHTML).toBe("
3
"); + expect(slot.__owl__.parent).toBeInstanceOf(GrandChild); + }); + + test("slot are properly rendered if inner props are changed", async () => { + env.qweb.addTemplates(`
SC: @@ -559,184 +555,184 @@ describe("t-slot directive", () => {
`); - class SomeComponent extends Component {} - class GenericComponent extends Component {} - class App extends Component { - static components = { GenericComponent, SomeComponent }; - state = useState({ val: 4 }); - - inc() { - this.state.val++; - } + class SomeComponent extends Component {} + class GenericComponent extends Component {} + class App extends Component { + static components = { GenericComponent, SomeComponent }; + state = useState({ val: 4 }); + + inc() { + this.state.val++; } - const app = new App(); - await app.mount(fixture); - - expect(fixture.innerHTML).toBe("
SC:4
"); - (fixture.querySelector("button")).click(); - await nextTick(); - expect(fixture.innerHTML).toBe("
SC:5
"); - }); - - test("slots and wrapper components", async () => { - class Link extends Component { - static template = xml` + } + const app = new App(); + await app.mount(fixture); + + expect(fixture.innerHTML).toBe("
SC:4
"); + (fixture.querySelector("button")).click(); + await nextTick(); + expect(fixture.innerHTML).toBe("
SC:5
"); + }); + + test("slots and wrapper components", async () => { + class Link extends Component { + static template = xml` `; - } - - class A extends Component { - static template = xml`hey`; - static components = { Link: Link }; - } - - const a = new A(); - await a.mount(fixture); - - expect(fixture.innerHTML).toBe(`hey`); - }); - - test("template can just return a slot", async () => { - class Child extends Component { - static template = xml``; - } - class SlotComponent extends Component { - static template = xml``; - } - - class Parent extends Component { - static template = xml` + } + + class A extends Component { + static template = xml`hey`; + static components = { Link: Link }; + } + + const a = new A(); + await a.mount(fixture); + + expect(fixture.innerHTML).toBe(`hey`); + }); + + test("template can just return a slot", async () => { + class Child extends Component { + static template = xml``; + } + class SlotComponent extends Component { + static template = xml``; + } + + class Parent extends Component { + static template = xml`
`; - static components = { SlotComponent, Child }; - state = useState({ value: 3 }); - } - const parent = new Parent(); - await parent.mount(fixture); - expect(fixture.innerHTML).toBe("
3
"); - - expect(QWeb.TEMPLATES[SlotComponent.template].fn.toString()).toMatchSnapshot(); - - parent.state.value = 5; - await nextTick(); - expect(fixture.innerHTML).toBe("
5
"); - }); - - test("multiple slots containing components", async () => { - class C extends Component { - static template = xml``; - } - class B extends Component { - static template = xml`
`; - } - class A extends Component { - static template = xml` + static components = { SlotComponent, Child }; + state = useState({ value: 3 }); + } + const parent = new Parent(); + await parent.mount(fixture); + expect(fixture.innerHTML).toBe("
3
"); + + expect(QWeb.TEMPLATES[SlotComponent.template].fn.toString()).toMatchSnapshot(); + + parent.state.value = 5; + await nextTick(); + expect(fixture.innerHTML).toBe("
5
"); + }); + + test("multiple slots containing components", async () => { + class C extends Component { + static template = xml``; + } + class B extends Component { + static template = xml`
`; + } + class A extends Component { + static template = xml` `; - static components = { B, C }; + static components = { B, C }; + } + + const a = new A(); + await a.mount(fixture); + + expect(fixture.innerHTML).toBe(`
12
`); + }); + + test("slots in t-foreach and re-rendering", async () => { + class Child extends Component { + static template = xml``; + state = useState({ val: "A" }); + mounted() { + this.state.val = "B"; } - - const a = new A(); - await a.mount(fixture); - - expect(fixture.innerHTML).toBe(`
12
`); - }); - - test("slots in t-foreach and re-rendering", async () => { - class Child extends Component { - static template = xml``; - state = useState({ val: "A" }); - mounted() { - this.state.val = "B"; - } - } - class Parent extends Component { - static components = { Child }; - static template = xml` + } + class Parent extends Component { + static components = { Child }; + static template = xml`
`; - } - const parent = new Parent(); - await parent.mount(fixture); - expect(fixture.innerHTML).toBe("
A0A1
"); - - await nextTick(); // wait for the changes triggered in mounted to be applied - expect(fixture.innerHTML).toBe("
B0B1
"); - }); - - test("slots in t-foreach with t-set and re-rendering", async () => { - class Child extends Component { - static template = xml` + } + const parent = new Parent(); + await parent.mount(fixture); + expect(fixture.innerHTML).toBe("
A0A1
"); + + await nextTick(); // wait for the changes triggered in mounted to be applied + expect(fixture.innerHTML).toBe("
B0B1
"); + }); + + test("slots in t-foreach with t-set and re-rendering", async () => { + class Child extends Component { + static template = xml` `; - state = useState({ val: "A" }); - mounted() { - this.state.val = "B"; - } + state = useState({ val: "A" }); + mounted() { + this.state.val = "B"; } - class ParentWidget extends Component { - static components = { Child }; - static template = xml` + } + class ParentWidget extends Component { + static components = { Child }; + static template = xml`
`; - } - - const widget = new ParentWidget(); - await widget.mount(fixture); - expect(fixture.innerHTML).toBe("
A0A1
"); - - await nextTick(); // wait for changes triggered in mounted to be applied - expect(fixture.innerHTML).toBe("
B0B1
"); - }); - - test("nested slots in same template", async () => { - let child, child2, child3; - class Child extends Component { - static template = xml` + } + + const widget = new ParentWidget(); + await widget.mount(fixture); + expect(fixture.innerHTML).toBe("
A0A1
"); + + await nextTick(); // wait for changes triggered in mounted to be applied + expect(fixture.innerHTML).toBe("
B0B1
"); + }); + + test("nested slots in same template", async () => { + let child, child2, child3; + class Child extends Component { + static template = xml`
`; - constructor(parent, props) { - super(parent, props); - child = this; - } + constructor(parent, props) { + super(parent, props); + child = this; } - class Child2 extends Component { - static template = xml` + } + class Child2 extends Component { + static template = xml` `; - constructor(parent, props) { - super(parent, props); - child2 = this; - } + constructor(parent, props) { + super(parent, props); + child2 = this; } - class Child3 extends Component { - static template = xml` + } + class Child3 extends Component { + static template = xml` Child 3`; - constructor(parent, props) { - super(parent, props); - child3 = this; - } + constructor(parent, props) { + super(parent, props); + child3 = this; } - class Parent extends Component { - static components = { Child, Child2, Child3 }; - static template = xml` + } + class Parent extends Component { + static components = { Child, Child2, Child3 }; + static template = xml` @@ -744,52 +740,52 @@ describe("t-slot directive", () => { `; - } - - const widget = new Parent(); - await widget.mount(fixture); - expect(fixture.innerHTML).toBe( - '
Child 3
' - ); - - expect(child3.__owl__.parent).toStrictEqual(child2); - expect(child2.__owl__.parent).toStrictEqual(child); - expect(child.__owl__.parent).toStrictEqual(widget); - }); - - test("t-slot nested within another slot", async () => { - let portal, modal, child3; - class Child3 extends Component { - static template = xml` + } + + const widget = new Parent(); + await widget.mount(fixture); + expect(fixture.innerHTML).toBe( + '
Child 3
' + ); + + expect(child3.__owl__.parent).toStrictEqual(child2); + expect(child2.__owl__.parent).toStrictEqual(child); + expect(child.__owl__.parent).toStrictEqual(widget); + }); + + test("t-slot nested within another slot", async () => { + let portal, modal, child3; + class Child3 extends Component { + static template = xml` Child 3`; - constructor(parent, props) { - super(parent, props); - child3 = this; - } + constructor(parent, props) { + super(parent, props); + child3 = this; } - class Modal extends Component { - static template = xml` + } + class Modal extends Component { + static template = xml` `; - constructor(parent, props) { - super(parent, props); - modal = this; - } + constructor(parent, props) { + super(parent, props); + modal = this; } - class Portal extends Component { - static template = xml` + } + class Portal extends Component { + static template = xml` `; - constructor(parent, props) { - super(parent, props); - portal = this; - } + constructor(parent, props) { + super(parent, props); + portal = this; } - class Dialog extends Component { - static components = { Modal, Portal }; - static template = xml` + } + class Dialog extends Component { + static components = { Modal, Portal }; + static template = xml` @@ -797,91 +793,91 @@ describe("t-slot directive", () => { `; - } - class Parent extends Component { - static components = { Child3, Dialog }; - static template = xml` + } + class Parent extends Component { + static components = { Child3, Dialog }; + static template = xml` `; - } - - const widget = new Parent(); - await widget.mount(fixture); - expect(fixture.innerHTML).toBe( - 'Child 3' - ); - - expect(child3.__owl__.parent).toStrictEqual(portal); - expect(portal.__owl__.parent).toStrictEqual(modal); - }); - - test("t-slot supports many instances", async () => { - let child3; - class Child3 extends Component { - static template = xml` + } + + const widget = new Parent(); + await widget.mount(fixture); + expect(fixture.innerHTML).toBe( + 'Child 3' + ); + + expect(child3.__owl__.parent).toStrictEqual(portal); + expect(portal.__owl__.parent).toStrictEqual(modal); + }); + + test("t-slot supports many instances", async () => { + let child3; + class Child3 extends Component { + static template = xml` Child 3`; - constructor(parent, props) { - super(parent, props); - child3 = this; - } + constructor(parent, props) { + super(parent, props); + child3 = this; } - class Dialog extends Component { - static template = xml` + } + class Dialog extends Component { + static template = xml` `; - } - class Parent extends Component { - static components = { Child3, Dialog }; - static template = xml` + } + class Parent extends Component { + static components = { Child3, Dialog }; + static template = xml` `; - state = { lol: "k" }; - } - - const widget = new Parent(); - await widget.mount(fixture); - expect(child3.props.val).toBe("k"); - - const widget_1 = new Parent(); - widget_1.state.lol = "m"; - await widget_1.mount(fixture); - expect(child3.props.val).toBe("m"); - }); - - test("slots in slots, with vars", async () => { - class B extends Component { - static template = xml``; - } - class A extends Component { - static template = xml` + state = { lol: "k" }; + } + + const widget = new Parent(); + await widget.mount(fixture); + expect(child3.props.val).toBe("k"); + + const widget_1 = new Parent(); + widget_1.state.lol = "m"; + await widget_1.mount(fixture); + expect(child3.props.val).toBe("m"); + }); + + test("slots in slots, with vars", async () => { + class B extends Component { + static template = xml``; + } + class A extends Component { + static template = xml`
`; - static components = { B }; - } - class Parent extends Component { - static template = xml` + static components = { B }; + } + class Parent extends Component { + static template = xml` `; - static components = { A }; - state = { name: "aaron" }; - } - - const parent = new Parent(); - await parent.mount(fixture); - expect(fixture.innerHTML).toBe("

heyaaron

"); - }); - }); \ No newline at end of file + static components = { A }; + state = { name: "aaron" }; + } + + const parent = new Parent(); + await parent.mount(fixture); + expect(fixture.innerHTML).toBe("

heyaaron

"); + }); +}); diff --git a/tests/helpers.ts b/tests/helpers.ts index 23e51799..912cb23f 100644 --- a/tests/helpers.ts +++ b/tests/helpers.ts @@ -1,4 +1,4 @@ -import { Env } from "../src/component/component"; +import { Env, Component } from "../src/component/component"; import { scheduler } from "../src/component/scheduler"; import { EvalContext, QWeb } from "../src/qweb/qweb"; import { CompilationContext } from "../src/qweb/compilation_context"; @@ -25,6 +25,7 @@ beforeEach(() => { slots = Object.assign({}, QWeb.slots); nextId = QWeb.nextId; TEMPLATES = Object.assign({}, QWeb.TEMPLATES); + Component.scheduler.tasks = []; }); afterEach(() => { @@ -32,6 +33,7 @@ afterEach(() => { QWeb.slots = slots; QWeb.nextId = nextId; QWeb.TEMPLATES = TEMPLATES; + Component.scheduler.tasks = []; }); // helpers diff --git a/tests/qweb/qweb.test.ts b/tests/qweb/qweb.test.ts index 6475bbbf..9add73b0 100644 --- a/tests/qweb/qweb.test.ts +++ b/tests/qweb/qweb.test.ts @@ -318,12 +318,13 @@ describe("t-set", () => { -
`); +
` + ); - expect(renderToString(qweb, "test")).toBe("
before
"); - }); + expect(renderToString(qweb, "test")).toBe("
before
"); + }); - test("t-set with t-value (truthy) and body", () => { + test("t-set with t-value (truthy) and body", () => { qweb.addTemplate( "test", `
@@ -335,10 +336,11 @@ describe("t-set", () => { -
`); +
` + ); - expect(renderToString(qweb, "test")).toBe("
Truthy
"); - }); + expect(renderToString(qweb, "test")).toBe("
Truthy
"); + }); }); describe("t-if", () => {