diff --git a/doc/learning/how_to_debug.md b/doc/learning/how_to_debug.md index bdebd812..bf50648c 100644 --- a/doc/learning/how_to_debug.md +++ b/doc/learning/how_to_debug.md @@ -41,4 +41,3 @@ Each component has an internal `id`, which is very useful when debugging. Note that it is certainly useful to run this code at some point in an application, just to get a feel of what each user action implies, for the framework. - diff --git a/doc/learning/overview.md b/doc/learning/overview.md index 71e99b96..1ef8cd70 100644 --- a/doc/learning/overview.md +++ b/doc/learning/overview.md @@ -1,6 +1,5 @@ # 🦉 Quick Overview 🦉 - Owl components in an application are used to define a (dynamic) tree of components. ``` @@ -110,7 +109,10 @@ class Parent extends Component { line="line" /> `; static components = { OrderLine }; - orders = useState([{ id: 1, name: "Coffee", quantity: 0 }, { id: 2, name: "Tea", quantity: 0 }]); + orders = useState([ + { id: 1, name: "Coffee", quantity: 0 }, + { id: 2, name: "Tea", quantity: 0 } + ]); addToOrder(event) { const line = event.detail.line; diff --git a/doc/learning/quick_start.md b/doc/learning/quick_start.md index 7d921985..236773a9 100644 --- a/doc/learning/quick_start.md +++ b/doc/learning/quick_start.md @@ -9,16 +9,16 @@ ## Overview -Each software project has its specific needs. Many of these needs can be solved +Each software project has its specific needs. Many of these needs can be solved with some tooling: `webpack`, `gulp`, css preprocessor, bundlers, transpilers, ... -Because of that, it is usually not simple to just start a project. Some -frameworks provide their own tooling to help with that. But then, you have to +Because of that, it is usually not simple to just start a project. Some +frameworks provide their own tooling to help with that. But then, you have to integrate and learn how these applications work. Owl is designed to be used with no tooling at all. Because of that, Owl can -"easily" be integrated in a modern build toolchain. In this section, we will -discuss a few different setups to start a project. Each of these setups has +"easily" be integrated in a modern build toolchain. In this section, we will +discuss a few different setups to start a project. Each of these setups has advantages and disadvantages in different situations. ## Simple html file @@ -74,8 +74,7 @@ whenReady(setup); Now, simply loading this html file in a browser should display a welcome message. This setup is not fancy, but it is extremely simple. There are no tooling at -all required. It can be slightly optimized by using the minified build of Owl. - +all required. It can be slightly optimized by using the minified build of Owl. ## With a static server @@ -87,7 +86,7 @@ variables and we lose autocompletion across files. There is a low tech solution to this issue: using native javascript modules. This however has a requirement: for security reasons, browsers will not accept -modules on content served through the `file` protocol. This means that we need +modules on content served through the `file` protocol. This means that we need to use a static server. Let us start a new project with the following file structure: @@ -101,7 +100,6 @@ hello_owl/ owl.js ``` - As previously, the file `owl.js` can be downloaded from the last release published at [https://github.com/odoo/owl/releases](https://github.com/odoo/owl/releases). @@ -130,10 +128,9 @@ const { Component } = owl; const { xml } = owl.tags; export class App extends Component { - static template = xml`
Hello Owl
`; + static template = xml`
Hello Owl
`; } - // main.js --------------------------------------------------------------------- import { App } from "./app.js"; @@ -145,11 +142,11 @@ function setup() { owl.utils.whenReady(setup); ``` -The `main.js` file import the `app.js` file. Note that the import statement has -a `.js` suffix, which is important. Most text editor can understand this syntax +The `main.js` file import the `app.js` file. Note that the import statement has +a `.js` suffix, which is important. Most text editor can understand this syntax and will provide autocompletion. -Now, to execute this code, we need to serve the `src` folder statically. A low +Now, to execute this code, we need to serve the `src` folder statically. A low tech way to do that is to use for example the python `SimpleHTTPServer` feature: ``` @@ -180,18 +177,16 @@ that, we can add the following `package.json` file at the root of the project: We can now install the `serve` tool with the command `npm install`, and then, start a static server with the simple `npm run serve` command. - ## Standard Javascript project The previous setup works, and is certainly good for some usecases, including -quick prototyping. However, it lacks some useful features, such as livereload, +quick prototyping. However, it lacks some useful features, such as livereload, a test suite, or bundling the code in a single file. Each of these features, and many others, can be done in many different ways. Since it is really not trivial to configure such a project, we provide here an example that can be used as a starting point. - Our standard Owl project has the following file structure: ``` @@ -244,7 +239,6 @@ export class App extends Component { } } - // src/main.js ----------------------------------------------------------------- import { utils } from "@odoo/owl"; import { App } from "./components/App"; @@ -256,7 +250,6 @@ function setup() { utils.whenReady(setup); - // tests/components/App.test.js ------------------------------------------------ import { App } from "../../src/components/App"; import { makeTestFixture, nextTick, click } from "../helpers"; @@ -283,16 +276,13 @@ describe("App", () => { }); }); - // tests/helpers.js ------------------------------------------------------------ import { Component } from "@odoo/owl"; import "regenerator-runtime/runtime"; export async function nextTick() { return new Promise(function(resolve) { - setTimeout(() => - Component.scheduler.requestAnimationFrame(() => resolve()) - ); + setTimeout(() => Component.scheduler.requestAnimationFrame(() => resolve())); }); } @@ -347,9 +337,7 @@ dist/ "@odoo/owl": "^1.0.4" }, "babel": { - "plugins": [ - "@babel/plugin-proposal-class-properties" - ], + "plugins": ["@babel/plugin-proposal-class-properties"], "env": { "test": { "plugins": ["transform-es2015-modules-commonjs"] @@ -359,9 +347,7 @@ dist/ "jest": { "verbose": false, "testRegex": "(/tests/.*(test|spec))\\.js?$", - "moduleFileExtensions": [ - "js" - ], + "moduleFileExtensions": ["js"], "transform": { "^.+\\.[t|j]sx?$": "babel-jest" } diff --git a/doc/readme.md b/doc/readme.md index d5d5491c..a15fa2dd 100644 --- a/doc/readme.md +++ b/doc/readme.md @@ -46,9 +46,7 @@ which cannot be considered either a tutorial, or reference documentation. - [Comparison with React/Vue](miscellaneous/comparison.md) - [Why did Odoo built Owl?](miscellaneous/why_owl.md) - --- Found an issue in the documentation? A broken link? Some outdated information? Please open an issue or submit a PR! - diff --git a/src/component/component.ts b/src/component/component.ts index cc90440f..93fa3ec7 100644 --- a/src/component/component.ts +++ b/src/component/component.ts @@ -46,7 +46,7 @@ interface MountOptions { * useful to typecheck and describe the internal keys used by Owl to manage the * component tree. */ -interface Internal { +interface Internal { // each component has a unique id, useful mostly to handle parent/child // relationships readonly id: number; @@ -58,8 +58,8 @@ interface Internal { // parent and children keys are obviously useful to setup the parent-children // relationship. - parent: Component | null; - children: { [key: number]: Component }; + parent: Component | null; + children: { [key: number]: Component }; // children mapping: from templateID to componentID. templateID identifies a // place in a template. The t-component directive needs it to be able to get // the component instance back whenever the template is rerendered. @@ -85,7 +85,7 @@ interface Internal { willStartCB: Function | null; willUpdatePropsCB: Function | null; classObj: { [key: string]: boolean } | null; - refs: { [key: string]: Component | HTMLElement | undefined } | null; + refs: { [key: string]: Component | HTMLElement | undefined } | null; } export const portalSymbol = Symbol("portal"); // FIXME @@ -95,11 +95,11 @@ export const portalSymbol = Symbol("portal"); // FIXME //------------------------------------------------------------------------------ let nextId = 1; -export class Component { - readonly __owl__: Internal; +export class Component { + readonly __owl__: Internal; static template?: string | null = null; static _template?: string | null = null; - static current: Component | null = null; + static current: Component | null = null; static components = {}; static props?: any; static defaultProps?: any; @@ -130,7 +130,7 @@ export class Component { * hand. Other components should be created automatically by the framework (with * the t-component directive in a template) */ - constructor(parent?: Component | null, props?: Props) { + constructor(parent?: Component | null, props?: Props) { Component.current = this; let constr = this.constructor as any; @@ -441,7 +441,7 @@ export class Component { * Note that it does not call the __callWillUnmount method to avoid visiting * all children many times. */ - __destroy(parent: Component | null) { + __destroy(parent: Component | null) { const __owl__ = this.__owl__; const isMounted = __owl__.isMounted; if (isMounted) { @@ -501,7 +501,7 @@ export class Component { * Private trigger method, allows to choose the component which triggered * the event in the first place */ - __trigger(component: Component, eventType: string, payload?: any) { + __trigger(component: Component, eventType: string, payload?: any) { if (this.el) { const ev = new OwlEvent(component, eventType, { bubbles: true, diff --git a/src/component/fiber.ts b/src/component/fiber.ts index 0de55ef9..40beda9f 100644 --- a/src/component/fiber.ts +++ b/src/component/fiber.ts @@ -50,7 +50,7 @@ export class Fiber { scope: any; - component: Component; + component: Component; vnode: VNode | null = null; root: Fiber; @@ -61,7 +61,7 @@ export class Fiber { error?: Error; - constructor(parent: Fiber | null, component: Component, force, inserter) { + constructor(parent: Fiber | null, component: Component, force: boolean, inserter) { this.component = component; this.force = force; this.inserter = inserter; diff --git a/src/context.ts b/src/context.ts index 5a9f6b7c..ffe4e088 100644 --- a/src/context.ts +++ b/src/context.ts @@ -100,11 +100,11 @@ export class Context extends EventBus { * to context state changes. The `useContext` method returns the context state */ export function useContext(ctx: Context): any { - const component: Component = Component.current!; + const component: Component = Component.current!; return useContextWithCB(ctx, component, component.render.bind(component)); } -export function useContextWithCB(ctx: Context, component: Component, method): any { +export function useContextWithCB(ctx: Context, component: Component, method): any { const __owl__ = component.__owl__; const id = __owl__.id; const mapping = ctx.mapping; diff --git a/src/core/owl_event.ts b/src/core/owl_event.ts index 85573152..2a37a51f 100644 --- a/src/core/owl_event.ts +++ b/src/core/owl_event.ts @@ -7,7 +7,7 @@ import { Component } from "../component/component"; */ export class OwlEvent extends CustomEvent { - originalComponent: Component; + originalComponent: Component; constructor(component, eventType, options) { super(eventType, options); this.originalComponent = component; diff --git a/src/hooks.ts b/src/hooks.ts index 6b06591a..259194a2 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -22,7 +22,7 @@ import { Observer } from "./core/observer"; * trigger a rerendering of the current component. */ export function useState(state: T): T { - const component: Component = Component.current!; + const component: Component = Component.current!; const __owl__ = component.__owl__; if (!__owl__.observer) { __owl__.observer = new Observer(); @@ -37,7 +37,7 @@ export function useState(state: T): T { function makeLifecycleHook(method: string, reverse: boolean = false) { if (reverse) { return function(cb) { - const component: Component = Component.current!; + const component: Component = Component.current!; if (component.__owl__[method]) { const current = component.__owl__[method]; component.__owl__[method] = function() { @@ -50,7 +50,7 @@ function makeLifecycleHook(method: string, reverse: boolean = false) { }; } else { return function(cb) { - const component: Component = Component.current!; + const component: Component = Component.current!; if (component.__owl__[method]) { const current = component.__owl__[method]; component.__owl__[method] = function() { @@ -66,7 +66,7 @@ function makeLifecycleHook(method: string, reverse: boolean = false) { function makeAsyncHook(method: string) { return function(cb) { - const component: Component = Component.current!; + const component: Component = Component.current!; if (component.__owl__[method]) { const current = component.__owl__[method]; component.__owl__[method] = function(...args) { @@ -96,7 +96,7 @@ export const onWillUpdateProps = makeAsyncHook("willUpdatePropsCB"); */ interface Ref { el: HTMLElement | null; - comp: Component | null; + comp: Component | null; } export function useRef(name: string): Ref { @@ -111,7 +111,7 @@ export function useRef(name: string): Ref { } return null; }, - get comp(): Component | null { + get comp(): Component | null { const val = __owl__.refs && __owl__.refs[name]; return val instanceof Component ? val : null; } diff --git a/src/misc/async_root.ts b/src/misc/async_root.ts index 604f582f..da4c4b9c 100644 --- a/src/misc/async_root.ts +++ b/src/misc/async_root.ts @@ -10,7 +10,7 @@ import { xml } from "../tags"; * from this coordination. This is the goal of the AsyncRoot component. */ -export class AsyncRoot extends Component { +export class AsyncRoot extends Component { static template = xml``; async __updateProps(nextProps, parentFiber) { diff --git a/src/misc/portal.ts b/src/misc/portal.ts index c49af5d4..8b53c028 100644 --- a/src/misc/portal.ts +++ b/src/misc/portal.ts @@ -18,7 +18,11 @@ import { useSubEnv } from "../hooks"; * are re-triggered on an empty node located in the parent's DOM. */ -export class Portal extends Component { +interface Props { + target: string; +} + +export class Portal extends Component { static template = xml``; static props = { target: { @@ -43,7 +47,7 @@ export class Portal extends Component { // represents the element that is moved somewhere else portal: VNode | null = null; // the target where we will move `portal` - target: HTMLElement | null = null; + target: Element | null = null; constructor(parent, props) { super(parent, props); @@ -158,7 +162,7 @@ export class Portal extends Component { /** * Override to set the env */ - __trigger(component: Component, eventType: string, payload?: any) { + __trigger(component: Component, eventType: string, payload?: any) { const env = this.env; this.env = this.parentEnv; super.__trigger(component, eventType, payload); diff --git a/src/router/link.ts b/src/router/link.ts index 8885fa7e..f7edac9c 100644 --- a/src/router/link.ts +++ b/src/router/link.ts @@ -4,7 +4,7 @@ import { Destination, RouterEnv } from "./router"; type Props = Destination; -export class Link extends Component { +export class Link extends Component { static template = xml` { +export class RouteComponent extends Component { static template = xml` a === b; export function useStore(selector, options: SelectorOptions = {}): any { - const component: Component = Component.current!; + const component: Component = Component.current!; const componentId = component.__owl__.id; const store = options.store || (component.env.store as Store); if (!(store instanceof Store)) { diff --git a/tests/component/async.test.ts b/tests/component/async.test.ts index 07f77a1d..c89113d3 100644 --- a/tests/component/async.test.ts +++ b/tests/component/async.test.ts @@ -25,7 +25,7 @@ afterEach(() => { fixture.remove(); }); -function children(w: Component): Component[] { +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): Component[] { describe("async rendering", () => { test("destroying a widget before start is over", async () => { let def = makeDeferred(); - class W extends Component { + class W extends Component { static template = xml`
`; willStart(): Promise { 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 { + class Child extends Component { static template = xml`child:`; constructor(parent, props) { super(parent, props); @@ -63,7 +63,7 @@ describe("async rendering", () => { return def; } } - class W extends Component { + class W extends Component { static template = xml`
`; 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 { + class ChildA extends Component { static template = xml``; willStart(): Promise { return defA; @@ -101,13 +101,13 @@ describe("async rendering", () => { } } - class ChildB extends Component { + class ChildB extends Component { static template = xml`b`; willStart(): Promise { return defB; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -139,20 +139,20 @@ describe("async rendering", () => { let defA = makeDeferred(); let defB = makeDeferred(); - class ChildA extends Component { + class ChildA extends Component { static template = xml`a`; willUpdateProps(): Promise { return defA; } } - class ChildB extends Component { + class ChildB extends Component { static template = xml`b`; willStart(): Promise { return defB; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -182,20 +182,20 @@ describe("async rendering", () => { let defA = makeDeferred(); let defB = makeDeferred(); - class ChildA extends Component { + class ChildA extends Component { static template = xml`a`; willUpdateProps(): Promise { return defA; } } - class ChildB extends Component { + class ChildB extends Component { static template = xml`b`; willStart(): Promise { return defB; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -224,7 +224,7 @@ describe("async rendering", () => { const steps: string[] = []; const defs = [makeDeferred(), makeDeferred()]; let index = 0; - class ChildA extends Component { + class ChildA extends Component { static template = xml``; willUpdateProps(): Promise { return defs[index++]; @@ -234,7 +234,7 @@ describe("async rendering", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class ChildA extends Component { static template = xml``; patched() { steps.push("patched"); @@ -269,7 +269,7 @@ describe("async rendering", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 {} + class Child extends Component {} - class App extends Component { + 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 { + class SubChild extends Component { static template = xml`
`; willPatch() { throw new Error("Should not happen!"); @@ -348,12 +348,12 @@ describe("async rendering", () => { } } - class Child extends Component { + class Child extends Component { static template = xml`
`; static components = { SubChild }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true, val: "Framboise Lindemans" }); @@ -396,18 +396,18 @@ describe("async rendering", () => { `); let destroyCount = 0; - class ChildA extends Component { + class ChildA extends Component { destroy() { destroyCount++; super.destroy(); } } - class ChildB extends Component { + class ChildB extends Component { willStart(): any { return new Promise(function() {}); } } - class Parent extends Component { + 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 { + class Child extends Component { static template = xml`
Child
`; } - class App extends Component { + class App extends Component { static template = xml`
@@ -458,7 +458,7 @@ describe("async rendering", () => { const def = makeDeferred(); let stateB; - class ComponentC extends Component { + class ComponentC extends Component { static template = xml``; someValue() { return this.props.fromB; @@ -469,7 +469,7 @@ describe("async rendering", () => { } ComponentC.prototype.someValue = jest.fn(ComponentC.prototype.someValue); - class ComponentB extends Component { + class ComponentB extends Component { static components = { ComponentC }; static template = xml`

`; state = useState({ fromB: "b" }); @@ -480,7 +480,7 @@ describe("async rendering", () => { } } - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; state = useState({ fromA: 1 }); @@ -514,14 +514,14 @@ describe("async rendering", () => { const defs = [makeDeferred(), makeDeferred()]; let index = 0; let stateB; - class ComponentC extends Component { + class ComponentC extends Component { static template = xml``; willUpdateProps() { return defs[index++]; } } - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; static components = { ComponentC }; state = useState({ fromB: "b" }); @@ -532,7 +532,7 @@ describe("async rendering", () => { } } - class ComponentA extends Component { + class ComponentA extends Component { static template = xml`
`; 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 { + class ComponentC extends Component { static template = xml``; willUpdateProps() { return defs[index++]; } } - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; static components = { ComponentC }; state = useState({ fromB: "b" }); @@ -582,7 +582,7 @@ describe("async rendering", () => { } } - class ComponentA extends Component { + class ComponentA extends Component { static template = xml`
`; static components = { ComponentB }; state = useState({ fromA: 1 }); @@ -616,7 +616,7 @@ describe("async rendering", () => { let index = 0; let stateC; - class ComponentD extends Component { + class ComponentD extends Component { static template = xml``; someValue() { return this.props.fromC; @@ -627,7 +627,7 @@ describe("async rendering", () => { } ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue); - class ComponentC extends Component { + class ComponentC extends Component { static template = xml``; static components = { ComponentD }; state = useState({ fromC: "c" }); @@ -637,7 +637,7 @@ describe("async rendering", () => { } } - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; static components = { ComponentC }; @@ -646,7 +646,7 @@ describe("async rendering", () => { } } - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; state = useState({ fromA: 1 }); @@ -686,7 +686,7 @@ describe("async rendering", () => { let index = 0; let stateC; - class ComponentD extends Component { + class ComponentD extends Component { static template = xml``; someValue() { return this.props.fromC; @@ -697,7 +697,7 @@ describe("async rendering", () => { } ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue); - class ComponentC extends Component { + class ComponentC extends Component { static template = xml``; static components = { ComponentD }; state = useState({ fromC: "c" }); @@ -707,7 +707,7 @@ describe("async rendering", () => { } } - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; static components = { ComponentC }; @@ -716,7 +716,7 @@ describe("async rendering", () => { } } - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; state = useState({ fromA: 1 }); @@ -754,7 +754,7 @@ describe("async rendering", () => { const defsB = [makeDeferred(), makeDeferred()]; let index = 0; - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; someValue() { return this.props.fromA; @@ -765,7 +765,7 @@ describe("async rendering", () => { } ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue); - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; state = useState({ fromA: 1 }); @@ -799,7 +799,7 @@ describe("async rendering", () => { const defsB = [makeDeferred(), makeDeferred()]; let index = 0; - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; someValue() { return this.props.fromA; @@ -810,7 +810,7 @@ describe("async rendering", () => { } ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue); - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; state = useState({ fromA: 1 }); @@ -841,7 +841,7 @@ describe("async rendering", () => { }); test("concurrent renderings scenario 7", async () => { - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; state = useState({ fromB: "b" }); someValue() { @@ -853,7 +853,7 @@ describe("async rendering", () => { } ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue); - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; 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 { + class ComponentB extends Component { static template = xml`

`; state = useState({ fromB: "b" }); constructor(parent, props) { @@ -886,7 +886,7 @@ describe("async rendering", () => { } } - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; state = useState({ fromA: 1 }); @@ -925,10 +925,10 @@ describe("async rendering", () => { // re-rendering const def = makeDeferred(); let stateC; - class ComponentD extends Component { + class ComponentD extends Component { static template = xml``; } - class ComponentC extends Component { + class ComponentC extends Component { static template = xml`

`; static components = { ComponentD }; state = useState({ fromC: "b1" }); @@ -938,13 +938,13 @@ describe("async rendering", () => { stateC = this.state; } } - class ComponentB extends Component { + class ComponentB extends Component { static template = xml``; willUpdateProps() { return def; } } - class ComponentA extends Component { + class ComponentA extends Component { static template = xml`
@@ -991,14 +991,14 @@ describe("async rendering", () => { const defB = makeDeferred(); const defC = makeDeferred(); let stateB; - class ComponentC extends Component { + class ComponentC extends Component { static template = xml``; willStart() { return defC; } } ComponentC.prototype.__render = jest.fn(ComponentC.prototype.__render); - class ComponentB extends Component { + class ComponentB extends Component { static template = xml`

`; state = useState({ hasChild: false }); static components = { ComponentC }; @@ -1010,7 +1010,7 @@ describe("async rendering", () => { return defB; } } - class ComponentA extends Component { + class ComponentA extends Component { static template = xml`
`; 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 { + class Child extends Component { static template = xml`|`; val = 3; willUpdateProps() { @@ -1051,7 +1051,7 @@ describe("async rendering", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class Child extends Component { static template = xml``; willUpdateProps() { return def; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class Child extends Component { static template = xml``; state = useState({ val: 0 }); mounted() { @@ -1129,7 +1129,7 @@ describe("async rendering", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -1153,7 +1153,7 @@ describe("async rendering", () => { }); test("change state and call manually render: no unnecessary rendering", async () => { - class Widget extends Component { + class Widget extends Component { static template = xml`
`; state = useState({ val: 1 }); } diff --git a/tests/component/class_style.test.ts b/tests/component/class_style.test.ts index 50bfe3f9..aab09df3 100644 --- a/tests/component/class_style.test.ts +++ b/tests/component/class_style.test.ts @@ -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 { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
`; 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 { + class Child extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
`; static components = { Child }; state = useState({ a: true, b: false }); @@ -80,8 +80,8 @@ describe("class and style attributes with t-component", () => {
` ); - class Child extends Component {} - class ParentWidget extends Component { + class Child extends Component {} + class ParentWidget extends Component { static components = { Child }; } env.qweb.addTemplate("Child", `
`); @@ -99,10 +99,10 @@ describe("class and style attributes with t-component", () => { `); - class Child extends Component { + class Child extends Component { state = useState({ d: true }); } - class ParentWidget extends Component { + 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", () => { `); - class Child extends Component { + class Child extends Component { state = useState({ d: true }); } - class ParentWidget extends Component { + 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", () => {
`); - class App extends Component { + 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", () => {
` ); - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: SomeComponent }; } const widget = new ParentWidget(); @@ -228,11 +228,11 @@ describe("class and style attributes with t-component", () => {
` ); - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
`; } - class ParentWidget extends Component { + 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 { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
`; static components = { Child }; } diff --git a/tests/component/component.test.ts b/tests/component/component.test.ts index 8a265bd0..00980a51 100644 --- a/tests/component/component.test.ts +++ b/tests/component/component.test.ts @@ -37,16 +37,16 @@ afterEach(() => { fixture.remove(); }); -function children(w: Component): Component[] { +function children(w: Component): Component[] { const childrenMap = w.__owl__.children; return Object.keys(childrenMap).map(id => childrenMap[id]); } // Test components -class WidgetB extends Component {} +class WidgetB extends Component {} -class WidgetA extends Component { +class WidgetA extends Component { static components = { b: WidgetB }; } @@ -56,17 +56,17 @@ class WidgetA extends Component { describe("basic widget properties", () => { test("props is set on root components", async () => { - const widget = new Component(null, {}); + const widget = new Component(null, {}); expect(widget.props).toEqual({}); }); test("has no el after creation", async () => { - const widget = new Component(); + const widget = new Component(); expect(widget.el).toBe(null); }); test("can be mounted", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
content
`; } const widget = new SomeWidget(); @@ -76,7 +76,7 @@ describe("basic widget properties", () => { }); test("can be mounted on a documentFragment", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
content
`; } const widget = new SomeWidget(); @@ -87,7 +87,7 @@ describe("basic widget properties", () => { }); test("display a nice message if mounted on a non existing node", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
content
`; } const widget = new SomeWidget(); @@ -104,7 +104,7 @@ describe("basic widget properties", () => { }); test("display an error message if result of rendering is empty", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml``; } const widget = new SomeWidget(); @@ -120,7 +120,7 @@ describe("basic widget properties", () => { test("crashes if it cannot find a template", async () => { expect.assertions(1); - class SomeWidget extends Component {} + class SomeWidget extends Component {} try { new SomeWidget(); } catch (e) { @@ -129,7 +129,7 @@ describe("basic widget properties", () => { }); test("can be clicked on and updated", async () => { - class Counter extends Component { + class Counter extends Component { static template = xml`
`; state = useState({ @@ -148,10 +148,10 @@ describe("basic widget properties", () => { }); test("can handle empty props", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; } @@ -163,7 +163,7 @@ describe("basic widget properties", () => { }); test("cannot be clicked on and updated if not in DOM", async () => { - class Counter extends Component { + class Counter extends Component { static template = xml`
`; state = useState({ @@ -183,7 +183,7 @@ describe("basic widget properties", () => { }); test("widget style and classname", async () => { - class StyledWidget extends Component { + class StyledWidget extends Component { static template = xml`
world
`; @@ -195,7 +195,7 @@ describe("basic widget properties", () => { test("changing state before first render does not trigger a render", async () => { const steps: string[] = []; - class TestW extends Component { + class TestW extends Component { static template = xml`
`; state = useState({ drinks: 1 }); async willStart() { @@ -219,7 +219,7 @@ describe("basic widget properties", () => { test("changing state before first render does not trigger a render (with parent)", async () => { const steps: string[] = []; - class TestW extends Component { + class TestW extends Component { static template = xml`W`; state = useState({ drinks: 1 }); async willStart() { @@ -236,7 +236,7 @@ describe("basic widget properties", () => { steps.push("patched"); } } - class Parent extends Component { + class Parent extends Component { state = useState({ flag: false }); static components = { TestW }; static template = xml`
`; @@ -254,7 +254,7 @@ describe("basic widget properties", () => { }); test("render method wait until rendering is done", async () => { - class TestW extends Component { + class TestW extends Component { static template = xml`
`; state = { drinks: 1 }; } @@ -271,12 +271,12 @@ describe("basic widget properties", () => { }); test("keeps a reference to env", async () => { - const widget = new Component(); + const widget = new Component(); expect(widget.env).toBe(env); }); test("do not remove previously rendered dom if not necessary", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
`; } const widget = new SomeComponent(); @@ -291,11 +291,11 @@ describe("basic widget properties", () => { test("reconciliation alg is not confused in some specific situation", async () => { // in this test, we set t-key to 4 because it was in conflict with the // template id corresponding to the first child. - class Child extends Component { + class Child extends Component { static template = xml`child`; } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -313,11 +313,11 @@ describe("basic widget properties", () => { test("reconciliation alg works for t-foreach in t-foreach", async () => { const warn = console.warn; console.warn = () => {}; - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -338,11 +338,11 @@ describe("basic widget properties", () => { }); test("reconciliation alg works for t-foreach in t-foreach, 2", async () => { - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class Parent extends Component { + class Parent extends Component { static template = xml`

@@ -368,11 +368,11 @@ describe("basic widget properties", () => { }); test("same t-keys in two different places", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`

@@ -388,11 +388,11 @@ describe("basic widget properties", () => { }); test("t-key on a component with t-if, and a sibling component", async () => { - class Child extends Component { + class Child extends Component { static template = xml`child`; } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -411,7 +411,7 @@ describe("basic widget properties", () => { describe("lifecycle hooks", () => { test("willStart hook is called", async () => { let willstart = false; - class HookWidget extends Component { + class HookWidget extends Component { static template = xml`
`; async willStart() { willstart = true; @@ -424,7 +424,7 @@ describe("lifecycle hooks", () => { test("mounted hook is not called if not in DOM", async () => { let mounted = false; - class HookWidget extends Component { + class HookWidget extends Component { static template = xml`
`; async mounted() { mounted = true; @@ -438,7 +438,7 @@ describe("lifecycle hooks", () => { test("mounted hook is called if mounted in DOM", async () => { let mounted = false; - class HookWidget extends Component { + class HookWidget extends Component { static template = xml`
`; async mounted() { mounted = true; @@ -451,14 +451,14 @@ describe("lifecycle hooks", () => { test("willStart hook is called on subwidget", async () => { let ok = false; - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; async willStart() { ok = true; } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
`; static components = { child: ChildWidget }; } @@ -470,7 +470,7 @@ describe("lifecycle hooks", () => { test("mounted hook is called on subcomponents, in proper order", async () => { const steps: any[] = []; - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; mounted() { expect(document.body.contains(this.el)).toBe(true); @@ -478,7 +478,7 @@ describe("lifecycle hooks", () => { } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
`; static components = { ChildWidget }; mounted() { @@ -493,7 +493,7 @@ describe("lifecycle hooks", () => { test("mounted hook is called on subsubcomponents, in proper order", async () => { const steps: any[] = []; - class ChildChildWidget extends Component { + class ChildChildWidget extends Component { static template = xml`
`; mounted() { steps.push("childchild:mounted"); @@ -503,7 +503,7 @@ describe("lifecycle hooks", () => { } } - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; static components = { childchild: ChildChildWidget }; mounted() { @@ -514,7 +514,7 @@ describe("lifecycle hooks", () => { } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
`; static components = { child: ChildWidget }; state = useState({ flag: false }); @@ -547,7 +547,7 @@ describe("lifecycle hooks", () => { env.qweb.addTemplate("ChildWidget", `
`); env.qweb.addTemplate("ChildChildWidget", `
`); - class ChildChildWidget extends Component { + class ChildChildWidget extends Component { willPatch() { steps.push("childchild:willPatch"); } @@ -555,7 +555,7 @@ describe("lifecycle hooks", () => { steps.push("childchild:patched"); } } - class ChildWidget extends Component { + class ChildWidget extends Component { static components = { childchild: ChildChildWidget }; willPatch() { steps.push("child:willPatch"); @@ -566,7 +566,7 @@ describe("lifecycle hooks", () => { } env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: ChildWidget }; state = useState({ n: 1 }); willPatch() { @@ -611,7 +611,7 @@ describe("lifecycle hooks", () => {
` ); - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; async willStart() { steps.push("child:willStart"); @@ -620,7 +620,7 @@ describe("lifecycle hooks", () => { steps.push("child:mounted"); } } - class ParentWidget extends Component { + class ParentWidget extends Component { state = useState({ ok: false }); static components = { child: ChildWidget }; } @@ -639,14 +639,14 @@ 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 Component { + class ParentWidget extends Component { static template = xml`
`; mounted() { const child = new ChildWidget(this); child.mount(this.el!); } } - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; mounted() { expect(this.el).toBeTruthy(); @@ -660,7 +660,7 @@ describe("lifecycle hooks", () => { test("components are unmounted and destroyed if no longer in DOM", async () => { let steps: string[] = []; - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; constructor(parent) { super(parent); @@ -676,7 +676,7 @@ describe("lifecycle hooks", () => { steps.push("willunmount"); } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
@@ -697,14 +697,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 Component { + class ChildWidget extends Component { static template = xml``; willUnmount() { childUnmounted = true; } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
@@ -737,7 +737,7 @@ describe("lifecycle hooks", () => { test("hooks are called in proper order in widget creation/destruction", async () => { let steps: string[] = []; - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; constructor(parent) { super(parent); @@ -753,7 +753,7 @@ describe("lifecycle hooks", () => { steps.push("c willunmount"); } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
`; static components = { child: ChildWidget }; constructor(parent?) { @@ -789,14 +789,14 @@ describe("lifecycle hooks", () => { test("willUpdateProps hook is called", async () => { let def = makeDeferred(); env.qweb.addTemplate("Parent", ''); - class HookWidget extends Component { + class HookWidget extends Component { static template = xml``; willUpdateProps(nextProps) { expect(nextProps.n).toBe(2); return def; } } - class Parent extends Component { + class Parent extends Component { state = useState({ n: 1 }); static components = { Child: HookWidget }; } @@ -814,7 +814,7 @@ describe("lifecycle hooks", () => { test("patched hook is called after updating State", async () => { let n = 0; - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
`; state = useState({ a: 1 }); @@ -838,13 +838,13 @@ describe("lifecycle hooks", () => { test("patched hook is called after updateProps", async () => { let n = 0; - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
`; patched() { n++; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; state = useState({ a: 1 }); static components = { Child: TestWidget }; @@ -861,13 +861,13 @@ describe("lifecycle hooks", () => { test("shouldUpdate hook prevent rerendering", async () => { let shouldUpdate = false; - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
`; shouldUpdate() { return shouldUpdate; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child: TestWidget }; state = useState({ val: 42 }); @@ -889,7 +889,7 @@ describe("lifecycle hooks", () => { let created = false; let mounted = false; - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; constructor(parent, props) { super(parent, props); @@ -899,7 +899,7 @@ describe("lifecycle hooks", () => { mounted = true; } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
@@ -924,7 +924,7 @@ describe("lifecycle hooks", () => { test("willPatch/patched hook", async () => { const steps: string[] = []; - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; willPatch() { steps.push("child:willPatch"); @@ -933,7 +933,7 @@ describe("lifecycle hooks", () => { steps.push("child:patched"); } } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
@@ -967,7 +967,7 @@ describe("lifecycle hooks", () => { describe("destroy method", () => { test("destroy remove the widget from the DOM", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
`; } @@ -1006,7 +1006,7 @@ describe("destroy method", () => { test("destroying a widget before willStart is done", async () => { let def = makeDeferred(); let isRendered = false; - class DelayedWidget extends Component { + class DelayedWidget extends Component { static template = xml`
`; willStart() { return def; @@ -1031,14 +1031,14 @@ describe("destroy method", () => { }); test("destroying a widget before being mounted", async () => { - class GrandChild extends Component { + class GrandChild extends Component { static template = xml` `; } - class Child extends Component { + class Child extends Component { static template = xml` @@ -1056,7 +1056,7 @@ describe("destroy method", () => { return { val: this.state.val }; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -1079,7 +1079,7 @@ describe("destroy method", () => { test("destroying a widget before being mounted (2)", async () => { const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; willStart() { steps.push("willStart"); @@ -1090,7 +1090,7 @@ describe("destroy method", () => { super.__destroy(parent); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true }); @@ -1117,7 +1117,7 @@ describe("composition", () => { test("can use components from the global registry", async () => { QWeb.registerComponent("WidgetB", WidgetB); env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Component {} + class ParentWidget extends Component {} const widget = new ParentWidget(); await widget.mount(fixture); expect(fixture.innerHTML).toBe("
world
"); @@ -1125,13 +1125,13 @@ describe("composition", () => { }); test("can use dynamic components (the class) if given", async () => { - class A extends Component { + class A extends Component { static template = xml`child a`; } - class B extends Component { + class B extends Component { static template = xml`child b`; } - class App extends Component { + class App extends Component { static template = xml``; state = useState({ child: "a" @@ -1149,13 +1149,13 @@ describe("composition", () => { }); test("can use dynamic components (the class) if given (with different root tagname)", async () => { - class A extends Component { + class A extends Component { static template = xml`child a`; } - class B extends Component { + class B extends Component { static template = xml`
child b
`; } - class App extends Component { + class App extends Component { static template = xml``; state = useState({ child: "a" @@ -1176,8 +1176,8 @@ describe("composition", () => { QWeb.registerComponent("WidgetB", WidgetB); // should not use this widget env.qweb.addTemplate("ParentWidget", `
`); env.qweb.addTemplate("AnotherWidgetB", `Belgium`); - class AnotherWidgetB extends Component {} - class ParentWidget extends Component { + class AnotherWidgetB extends Component {} + class ParentWidget extends Component { static components = { WidgetB: AnotherWidgetB }; } const widget = new ParentWidget(); @@ -1192,8 +1192,8 @@ describe("composition", () => {
`); - class C extends Component {} - class P extends Component { + class C extends Component {} + class P extends Component { static components = { C }; } const parent = new P(); @@ -1205,9 +1205,9 @@ describe("composition", () => { const consoleError = console.error; console.error = jest.fn(); - class SomeComponent extends Component {} + class SomeComponent extends Component {} env.qweb.addTemplate("Parent", `
`); - class Parent extends Component { + class Parent extends Component { static components = { SomeWidget: SomeComponent }; } const parent = new Parent(); @@ -1224,7 +1224,7 @@ describe("composition", () => { }); test("modifying a sub widget", async () => { - class Counter extends Component { + class Counter extends Component { static template = xml`
`; state = useState({ @@ -1233,7 +1233,7 @@ describe("composition", () => { } env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { Counter }; } const widget = new ParentWidget(); @@ -1254,10 +1254,10 @@ describe("composition", () => {
` ); - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { Child: SomeComponent }; elem1 = useRef("1"); elem2 = useRef("2"); @@ -1294,7 +1294,7 @@ describe("composition", () => { }); test("rerendering a widget with a sub widget", async () => { - class Counter extends Component { + class Counter extends Component { static template = xml`
`; state = useState({ @@ -1303,7 +1303,7 @@ describe("composition", () => { } env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { Counter }; } const widget = new ParentWidget(); @@ -1317,7 +1317,7 @@ describe("composition", () => { }); test("sub components are destroyed if no longer in dom, then recreated", async () => { - class Counter extends Component { + class Counter extends Component { static template = xml`
`; state = useState({ @@ -1326,7 +1326,7 @@ describe("composition", () => { } env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Component { + class ParentWidget extends Component { state = useState({ ok: true }); static components = { Counter }; } @@ -1347,7 +1347,7 @@ describe("composition", () => { test("sub components rendered in a loop", async () => { env.qweb.addTemplate("ChildWidget", ``); - class ChildWidget extends Component {} + class ChildWidget extends Component {} env.qweb.addTemplate( "Parent", @@ -1358,7 +1358,7 @@ describe("composition", () => {
` ); - class Parent extends Component { + class Parent extends Component { state = useState({ numbers: [1, 2, 3] }); @@ -1380,7 +1380,7 @@ describe("composition", () => { test("sub components with some state rendered in a loop", async () => { let n = 1; env.qweb.addTemplate("ChildWidget", ``); - class ChildWidget extends Component { + class ChildWidget extends Component { state: any; constructor(parent) { super(parent); @@ -1397,7 +1397,7 @@ describe("composition", () => {
` ); - class Parent extends Component { + class Parent extends Component { static template = "parent"; state = useState({ numbers: [1, 2, 3] @@ -1421,11 +1421,11 @@ describe("composition", () => { test("sub components between t-ifs", async () => { // this confuses the patching algorithm... - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`child`; } - class Parent extends Component { + class Parent extends Component { static template = xml`

hey

@@ -1477,8 +1477,8 @@ describe("composition", () => { asdf `); - class SubWidget extends Component {} - class Parent extends Component { + class SubWidget extends Component {} + class Parent extends Component { static components = { SubWidget }; state = useState({ blips: [ @@ -1515,8 +1515,8 @@ describe("composition", () => { asdf `); - class SubWidget extends Component {} - class Parent extends Component { + class SubWidget extends Component {} + class Parent extends Component { static components = { SubWidget }; state = useState({ blips: [{ a: "a", id: 1 }] }); } @@ -1527,7 +1527,7 @@ describe("composition", () => { test("t-component with dynamic value", async () => { env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { WidgetB }; state = useState({ widget: "WidgetB" }); } @@ -1539,7 +1539,7 @@ describe("composition", () => { test("t-component with dynamic value 2", async () => { env.qweb.addTemplate("ParentWidget", `
`); - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { WidgetB }; state = useState({ widget: "B" }); } @@ -1550,10 +1550,10 @@ describe("composition", () => { }); test("t-component not on a node", async () => { - class Child extends Component { + class Child extends Component { static template = xml`1`; } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml`
`; } @@ -1571,7 +1571,7 @@ describe("composition", () => { }); test("sub components, loops, and shouldUpdate", async () => { - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml``; shouldUpdate(nextProps) { if (nextProps.val === 12) { @@ -1581,7 +1581,7 @@ describe("composition", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -1613,14 +1613,14 @@ describe("composition", () => { }); test("three level of components with collapsing root nodes", async () => { - class GrandChild extends Component { + class GrandChild extends Component { static template = xml`
2
`; } - class Child extends Component { + class Child extends Component { static components = { GrandChild }; static template = xml``; } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml``; } @@ -1635,14 +1635,14 @@ describe("composition", () => { describe("props evaluation ", () => { test("explicit object prop", async () => { env.qweb.addTemplate("Parent", `
`); - class Child extends Component { + class Child extends Component { state: { someval: number }; constructor(parent: Parent, props: { value: number }) { super(parent); this.state = useState({ someval: props.value }); } } - class Parent extends Component { + class Parent extends Component { static components = { child: Child }; state = useState({ val: 42 }); } @@ -1656,10 +1656,10 @@ describe("props evaluation ", () => { test("accept ES6-like syntax for props (with getters)", async () => { env.qweb.addTemplate("Child", ``); - class Child extends Component {} + class Child extends Component {} env.qweb.addTemplate("Parent", `
`); - class Parent extends Component { + class Parent extends Component { static components = { child: Child }; get greetings() { const name = "aaron"; @@ -1672,7 +1672,7 @@ describe("props evaluation ", () => { }); test("t-set works ", async () => { - class Child extends Component {} + class Child extends Component {} env.qweb.addTemplate( "Parent", ` @@ -1681,7 +1681,7 @@ describe("props evaluation ", () => {
` ); - class Parent extends Component { + class Parent extends Component { static components = { child: Child }; } env.qweb.addTemplate( @@ -1706,10 +1706,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; n = 0; someMethod(ev) { @@ -1731,14 +1731,14 @@ describe("other directives with t-component", () => { test("t-on works, even if flush is called many times", async () => { let flag = false; let mounted = false; - class Child extends Component { + class Child extends Component { static template = xml`child`; mounted() { mounted = true; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; @@ -1761,11 +1761,11 @@ describe("other directives with t-component", () => { }); test("t-on with inline statement", async () => { - class Child extends Component { + class Child extends Component { static template = xml`child`; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = { n: 3 }; @@ -1784,10 +1784,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; onEv(n, ev) { expect(n).toBe(3); @@ -1808,10 +1808,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; onEv(o, ev) { expect(o).toEqual({ val: 3 }); @@ -1832,10 +1832,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; onEv(o, ev) { expect(o).toEqual({}); @@ -1856,10 +1856,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; onEv(o, ev) { expect(o).toEqual({}); @@ -1885,10 +1885,10 @@ describe("other directives with t-component", () => {
`); - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; onEv1(ev) { expect(ev.defaultPrevented).toBe(false); @@ -1923,13 +1923,13 @@ describe("other directives with t-component", () => { `); const steps: string[] = []; - class GrandChild extends Component { + class GrandChild extends Component { static template = xml`
`; } - class Child extends Component { + class Child extends Component { static components = { child: GrandChild }; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; onEv1(ev) { steps.push("onEv1"); @@ -1962,13 +1962,13 @@ describe("other directives with t-component", () => { `); const steps: boolean[] = []; - class GrandChild extends Component { + class GrandChild extends Component { static template = xml`
`; } - class Child extends Component { + class Child extends Component { static components = { child: GrandChild }; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { child: Child }; onEv() {} } @@ -1996,14 +1996,14 @@ describe("other directives with t-component", () => { `); const steps: boolean[] = []; - class GrandChild extends Component { + class GrandChild extends Component { static template = xml`
`; } - class Child extends Component { + class Child extends Component { static components = { GrandChild }; } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { Child }; onEv() {} } @@ -2022,10 +2022,10 @@ describe("other directives with t-component", () => { }); test("t-on with getter as handler", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -2051,10 +2051,10 @@ describe("other directives with t-component", () => { }); test("t-on with inline statement", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -2077,14 +2077,14 @@ describe("other directives with t-component", () => { test("t-on with no handler (only modifiers)", async () => { expect.assertions(2); - class ComponentB extends Component { + class ComponentB extends Component { static template = xml``; } - class ComponentA extends Component { + class ComponentA extends Component { static template = xml`

`; static components = { ComponentB }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { ComponentA }; onEv(ev) { @@ -2103,7 +2103,7 @@ describe("other directives with t-component", () => { test("t-on on nested components with collapsing root nodes", async () => { const steps: string[] = []; let grandChild; - class GrandChild extends Component { + class GrandChild extends Component { static template = xml``; constructor() { super(...arguments); @@ -2113,14 +2113,14 @@ describe("other directives with t-component", () => { steps.push("GrandChild"); } } - class Child extends Component { + class Child extends Component { static template = xml``; static components = { GrandChild }; _onEv() { steps.push("Child"); } } - class Parent extends Component { + class Parent extends Component { static template = xml``; static components = { Child }; _onEv() { @@ -2137,7 +2137,7 @@ describe("other directives with t-component", () => { test("t-on on unmounted components", async () => { const steps: string[] = []; let child; - class Child extends Component { + class Child extends Component { static template = xml`
`; mounted() { child = this; @@ -2146,7 +2146,7 @@ describe("other directives with t-component", () => { steps.push("click"); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true }); @@ -2166,7 +2166,7 @@ describe("other directives with t-component", () => { test("t-on on destroyed components", async () => { const steps: string[] = []; let child; - class Child extends Component { + class Child extends Component { static template = xml`
`; mounted() { child = this; @@ -2175,7 +2175,7 @@ describe("other directives with t-component", () => { steps.push("click"); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true }); @@ -2196,10 +2196,10 @@ describe("other directives with t-component", () => { test("t-on on destroyed components, part 2", async () => { const steps: string[] = []; let child; - class GrandChild extends Component { + class GrandChild extends Component { static template = xml`
grandchild
`; } - class Child extends Component { + class Child extends Component { static template = xml`
`; static components = { GrandChild }; gc = useRef("gc"); @@ -2210,7 +2210,7 @@ describe("other directives with t-component", () => { steps.push("click"); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true }); @@ -2230,8 +2230,8 @@ describe("other directives with t-component", () => { test("t-if works with t-component", async () => { env.qweb.addTemplate("ParentWidget", `
`); - class Child extends Component {} - class ParentWidget extends Component { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2260,8 +2260,8 @@ describe("other directives with t-component", () => {
` ); - class Child extends Component {} - class ParentWidget extends Component { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2286,8 +2286,8 @@ describe("other directives with t-component", () => {
` ); - class Child extends Component {} - class ParentWidget extends Component { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2312,8 +2312,8 @@ describe("other directives with t-component", () => {
` ); - class Child extends Component {} - class ParentWidget extends Component { + class Child extends Component {} + class ParentWidget extends Component { static components = { child: Child }; state = useState({ flag: true }); } @@ -2330,7 +2330,7 @@ describe("other directives with t-component", () => { }); test("t-foreach with t-component, and update", async () => { - class Child extends Component { + class Child extends Component { static template = xml` @@ -2341,7 +2341,7 @@ describe("other directives with t-component", () => { this.state.val = "B"; } } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { Child }; static template = xml`
@@ -2360,7 +2360,7 @@ describe("other directives with t-component", () => { }); test("t-set outside modified in t-foreach", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2381,7 +2381,7 @@ describe("other directives with t-component", () => { }); test("t-set outside modified in t-if", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2415,7 +2415,7 @@ describe("other directives with t-component", () => { test("t-set in t-if", async () => { // Weird that code block within 'if' leaks outside of it // Python does the same - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2446,7 +2446,7 @@ describe("other directives with t-component", () => { }); test("t-set can't alter component", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`

@@ -2469,7 +2469,7 @@ describe("other directives with t-component", () => { "ChildWidget", `
` ); - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2490,7 +2490,7 @@ describe("other directives with t-component", () => { "ChildWidget", `
` ); - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2509,10 +2509,10 @@ describe("other directives with t-component", () => { }); test("slot setted value (with t-set) not accessible with t-esc", async () => { - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; } - class SomeWidget extends Component { + class SomeWidget extends Component { static components = { ChildWidget }; static template = xml`
@@ -2533,7 +2533,7 @@ describe("other directives with t-component", () => { test("t-set not altered by child widget", async () => { let child; - class ChildWidget extends Component { + class ChildWidget extends Component { static template = xml`
`; iter = "child"; constructor() { @@ -2541,7 +2541,7 @@ describe("other directives with t-component", () => { child = this; } } - class SomeWidget extends Component { + class SomeWidget extends Component { static components = { ChildWidget }; static template = xml`
@@ -2560,7 +2560,7 @@ describe("other directives with t-component", () => { }); test("t-set outside modified in t-foreach increment-after operator", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2579,7 +2579,7 @@ describe("other directives with t-component", () => { }); test("t-set outside modified in t-foreach increment-before operator", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2598,7 +2598,7 @@ describe("other directives with t-component", () => { }); test("t-on expression in t-foreach", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2625,7 +2625,7 @@ describe("other directives with t-component", () => { }); test("t-on expression in t-foreach with t-set", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2654,7 +2654,7 @@ describe("other directives with t-component", () => { }); test("t-on method call in t-foreach", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2685,7 +2685,7 @@ describe("other directives with t-component", () => { }); test("t-on expression captured in t-foreach", async () => { - class SomeWidget extends Component { + class SomeWidget extends Component { static template = xml`
@@ -2723,11 +2723,11 @@ describe("random stuff/miscellaneous", () => { `
txt
` ); - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
`; } - class Test extends Component { + class Test extends Component { static components = { widget: SomeComponent }; } const widget = new Test(); @@ -2738,10 +2738,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 Component { + class Child extends Component { static template = xml`
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
@@ -2767,8 +2767,8 @@ describe("random stuff/miscellaneous", () => { // interplay between components and vnodes, a sub widget vnode was patched // twice. env.qweb.addTemplate("Parent", `
`); - class Child extends Component {} - class Parent extends Component { + class Child extends Component {} + class Parent extends Component { static components = { child: Child }; state = useState({ flag: false }); } @@ -2788,8 +2788,8 @@ describe("random stuff/miscellaneous", () => { "Parent", `
` ); - class Child extends Component {} - class Parent extends Component { + class Child extends Component {} + class Parent extends Component { static components = { child: Child }; state = useState({ flag: false }); } @@ -2805,7 +2805,7 @@ describe("random stuff/miscellaneous", () => { let steps: string[] = []; let c: C; - class TestWidget extends Component { + class TestWidget extends Component { name: string = "test"; async willStart() { steps.push(`${this.name}:willStart`); @@ -2952,7 +2952,7 @@ describe("random stuff/miscellaneous", () => { test("can inject values in tagged templates", async () => { const SUBTEMPLATE = xml``; - class Parent extends Component { + class Parent extends Component { static template = xml`
`; state = useState({ n: 42 }); } @@ -2966,7 +2966,7 @@ describe("random stuff/miscellaneous", () => { describe("widget and observable state", () => { test("widget is rerendered when its state is changed", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
`; state = useState({ drink: "water" }); } @@ -2984,14 +2984,14 @@ describe("widget and observable state", () => { const consoleError = console.error; console.error = jest.fn(); env.qweb.addTemplate("Parent", `
`); - class Child extends Component { + class Child extends Component { static template = xml`
`; constructor(parent, props) { super(parent, props); props.obj.coffee = 2; } } - class Parent extends Component { + class Parent extends Component { state = useState({ obj: { coffee: 1 } }); static components = { Child }; } @@ -3011,7 +3011,7 @@ describe("widget and observable state", () => { describe("can deduce template from name", () => { test("can find template if name of component", async () => { - class ABC extends Component {} + class ABC extends Component {} env.qweb.addTemplate("ABC", "Orval"); const abc = new ABC(); await abc.mount(fixture); @@ -3019,7 +3019,7 @@ describe("can deduce template from name", () => { }); test("can find template of parent component", async () => { - class ABC extends Component {} + class ABC extends Component {} class DEF extends ABC {} env.qweb.addTemplate("ABC", "Orval"); const def = new DEF(); @@ -3028,7 +3028,7 @@ describe("can deduce template from name", () => { }); test("can find template of parent component, defined by template key", async () => { - class ABC extends Component { + class ABC extends Component { static template = "Achel"; } class DEF extends ABC {} @@ -3042,7 +3042,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 Component {} + class ABC extends Component {} const abc = new ABC(); await abc.mount(fixture); expect(fixture.innerHTML).toBe("Rochefort 8"); @@ -3056,7 +3056,7 @@ describe("can deduce template from name", () => { describe("t-model directive", () => { test("basic use, on an input", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -3084,7 +3084,7 @@ describe("t-model directive", () => {
`); - class SomeComponent extends Component { + class SomeComponent extends Component { some = useState({ text: "" }); } const comp = new SomeComponent(); @@ -3110,7 +3110,7 @@ describe("t-model directive", () => {
`); - class SomeComponent extends Component { + class SomeComponent extends Component { state = useState({ flag: false }); } const comp = new SomeComponent(); @@ -3138,7 +3138,7 @@ describe("t-model directive", () => {
`); - class SomeComponent extends Component { + class SomeComponent extends Component { state = useState({ text: "" }); } const comp = new SomeComponent(); @@ -3161,7 +3161,7 @@ describe("t-model directive", () => { Choice:
`); - class SomeComponent extends Component { + class SomeComponent extends Component { state = useState({ choice: "" }); } const comp = new SomeComponent(); @@ -3201,7 +3201,7 @@ describe("t-model directive", () => { Choice:
`); - class SomeComponent extends Component { + class SomeComponent extends Component { state = useState({ color: "" }); } const comp = new SomeComponent(); @@ -3225,7 +3225,7 @@ describe("t-model directive", () => { }); test("on a select, initial state", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -3266,7 +3266,7 @@ describe("t-model directive", () => { }); test(".lazy modifier", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -3294,7 +3294,7 @@ describe("t-model directive", () => { }); test(".trim modifier", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -3313,7 +3313,7 @@ describe("t-model directive", () => { }); test(".number modifier", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -3337,7 +3337,7 @@ describe("t-model directive", () => { }); test("in a t-foreach", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -3366,7 +3366,7 @@ describe("t-model directive", () => { }); test("two inputs in a div with a t-key", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -3403,7 +3403,7 @@ describe("environment and plugins", () => { test("plugin works as expected", async () => { somePlugin(env); - class App extends Component { + class App extends Component { static template = xml`
Red @@ -3422,11 +3422,11 @@ describe("environment and plugins", () => { }); test("can define specific env for root components", async () => { - class App1 extends Component { + class App1 extends Component { static template = xml``; } App1.env = { test: 1 }; - class App2 extends Component { + class App2 extends Component { static template = xml``; } App2.env = { test: 2 }; @@ -3456,8 +3456,8 @@ describe("top level sub widgets", () => { child `); - class Child extends Component {} - class Parent extends Component { + class Child extends Component {} + class Parent extends Component { static components = { Child }; } const parent = new Parent(); @@ -3474,13 +3474,13 @@ describe("top level sub widgets", () => { child `); - class Child extends Component { + class Child extends Component { state = useState({ val: 1 }); inc() { this.state.val++; } } - class Parent extends Component { + class Parent extends Component { static components = { Child }; } const parent = new Parent(); @@ -3493,13 +3493,13 @@ describe("top level sub widgets", () => { }); test("can select a sub widget ", async () => { - class Child extends Component { + class Child extends Component { static template = xml`CHILD 1`; } - class OtherChild extends Component { + class OtherChild extends Component { static template = xml`
CHILD 2
`; } - class Parent extends Component { + class Parent extends Component { static template = xml` @@ -3522,13 +3522,13 @@ describe("top level sub widgets", () => { }); test("can select a sub widget, part 2", async () => { - class Child extends Component { + class Child extends Component { static template = xml`CHILD 1`; } - class OtherChild extends Component { + class OtherChild extends Component { static template = xml`
CHILD 2
`; } - class Parent extends Component { + class Parent extends Component { static template = xml` @@ -3547,14 +3547,14 @@ describe("top level sub widgets", () => { }); test("top level sub widget with a parent", async () => { - class ComponentC extends Component { + class ComponentC extends Component { static template = xml`Hello`; } - class ComponentB extends Component { + class ComponentB extends Component { static template = xml``; static components = { ComponentC }; } - class ComponentA extends Component { + class ComponentA extends Component { static template = xml`
`; static components = { ComponentB }; } @@ -3568,7 +3568,7 @@ describe("top level sub widgets", () => { describe("dynamic root nodes", () => { test("template with t-if, part 1", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml` hey @@ -3584,7 +3584,7 @@ describe("dynamic root nodes", () => { }); test("template with t-if, part 2", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml` hey @@ -3600,7 +3600,7 @@ describe("dynamic root nodes", () => { }); test("switching between sub branches dynamically", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml` hey @@ -3621,13 +3621,13 @@ describe("dynamic root nodes", () => { }); test("switching between sub components dynamically", async () => { - class ChildA extends Component { + class ChildA extends Component { static template = xml`hey`; } - class ChildB extends Component { + class ChildB extends Component { static template = xml`
abc
`; } - class TestWidget extends Component { + class TestWidget extends Component { static template = xml` @@ -3653,7 +3653,7 @@ describe("dynamic t-props", () => { test("basic use", async () => { expect.assertions(4); - class Child extends Component { + class Child extends Component { static template = xml` @@ -3665,7 +3665,7 @@ describe("dynamic t-props", () => { expect(props).not.toBe(widget.some.obj); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -3686,14 +3686,14 @@ describe("dynamic t-props", () => { describe("support svg components", () => { test("add proper namespace to svg", async () => { - class GComp extends Component { + class GComp extends Component { static template = xml` `; } - class Svg extends Component { + class Svg extends Component { static template = xml` @@ -3711,7 +3711,7 @@ describe("support svg components", () => { describe("t-raw in components", () => { test("update properly on state changes", async () => { - class TestW extends Component { + class TestW extends Component { static template = xml`
`; state = useState({ value: "content" }); } @@ -3726,7 +3726,7 @@ describe("t-raw in components", () => { }); test("can render list of t-raw ", async () => { - class TestW extends Component { + class TestW extends Component { static template = xml`
@@ -3749,7 +3749,7 @@ describe("t-call", () => { test("handlers are properly bound through a t-call", async () => { expect.assertions(3); env.qweb.addTemplate("sub", `

lucas

`); - class Parent extends Component { + class Parent extends Component { static template = xml`
`; update() { expect(this).toBe(parent); @@ -3766,14 +3766,14 @@ describe("t-call", () => { test("parent is set within t-call", async () => { env.qweb.addTemplate("sub", ``); let child; - class Child extends Component { + class Child extends Component { static template = xml`lucas`; constructor() { super(...arguments); child = this; } } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml`
`; } @@ -3787,10 +3787,10 @@ describe("t-call", () => { test("t-call in t-foreach and children component", async () => { env.qweb.addTemplate("sub", ``); - class Child extends Component { + class Child extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml`
@@ -3808,14 +3808,14 @@ describe("t-call", () => { test("parent is set within t-call with no parentNode", async () => { env.qweb.addTemplate("sub", ``); let child; - class Child extends Component { + class Child extends Component { constructor() { super(...arguments); child = this; } static template = xml`lucas`; } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml``; } @@ -3830,7 +3830,7 @@ describe("t-call", () => { test("handlers with arguments are properly bound through a t-call", async () => { expect.assertions(3); env.qweb.addTemplate("sub", `

lucas

`); - class Parent extends Component { + class Parent extends Component { static template = xml`
`; update(a) { expect(this).toBe(parent); @@ -3846,12 +3846,12 @@ describe("t-call", () => { }); test("sub components in two t-calls", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; } env.qweb.addTemplate("sub", ``); - class Parent extends Component { + class Parent extends Component { static template = xml`
diff --git a/tests/component/error_handling.test.ts b/tests/component/error_handling.test.ts index 9e3aac35..bfae7bf8 100644 --- a/tests/component/error_handling.test.ts +++ b/tests/component/error_handling.test.ts @@ -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 { + class ErrorComponent extends Component { static template = xml`
hey
`; } - class ErrorBoundary extends Component { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -56,7 +56,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Component { + class App extends Component { static template = xml`
@@ -83,11 +83,11 @@ describe("component error handling (catchError)", () => { const consoleError = console.error; console.error = jest.fn(); - class ErrorComponent extends Component { + class ErrorComponent extends Component { static template = xml`
hey
`; } - class App extends Component { + class App extends Component { static template = xml`
`; 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 { + class ErrorComponent extends Component { static template = xml`
hey
`; } - class ErrorBoundary extends Component { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -132,7 +132,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Component { + class App extends Component { static template = xml`
@@ -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 { + class ErrorComponent extends Component { static template = xml`
hey
`; } - class ErrorBoundary extends Component { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -168,7 +168,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Component { + class App extends Component { static template = xml`
@@ -203,20 +203,20 @@ describe("component error handling (catchError)", () => {
`); - class ErrorComponent extends Component { + class ErrorComponent extends Component { constructor(parent) { super(parent); throw new Error("NOOOOO"); } } - class ErrorBoundary extends Component { + class ErrorBoundary extends Component { state = useState({ error: false }); catchError() { this.state.error = true; } } - class App extends Component { + 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 { + class ErrorComponent extends Component { static template = xml`
Some text
`; 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 { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -251,7 +251,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { ErrorBoundary, ErrorComponent }; } @@ -277,19 +277,19 @@ describe("component error handling (catchError)", () => {
`); - class ErrorComponent extends Component { + class ErrorComponent extends Component { mounted() { throw new Error("NOOOOO"); } } - class ErrorBoundary extends Component { + class ErrorBoundary extends Component { state = useState({ error: false }); catchError() { this.state.error = true; } } - class App extends Component { + 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 { + class ErrorComponent extends Component { static template = xml`
`; willPatch() { throw new Error("NOOOOO"); } } - class ErrorBoundary extends Component { + class ErrorBoundary extends Component { static template = xml`
Error handled @@ -322,7 +322,7 @@ describe("component error handling (catchError)", () => { this.state.error = true; } } - class App extends Component { + class App extends Component { static template = xml`
@@ -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 { + class App extends Component { static template = xml`
`; } @@ -369,7 +369,7 @@ describe("component error handling (catchError)", () => { const consoleError = console.error; console.error = jest.fn(() => {}); - class App extends Component { + class App extends Component { static template = xml`
abc
`; 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 { + class App extends Component { static template = xml`
`; val = 3; willPatch() { @@ -424,7 +424,7 @@ describe("component error handling (catchError)", () => { const consoleError = console.error; console.error = jest.fn(() => {}); - class App extends Component { + class App extends Component { static template = xml`
`; 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 { + class Child extends Component { static template = xml`
`; } - class App extends Component { + class App extends Component { static template = xml`
`; 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 { + class App extends Component { static template = xml`
`; 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 { + class Child extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; } diff --git a/tests/component/props_validation.test.ts b/tests/component/props_validation.test.ts index b23a6b7c..2b9cd726 100644 --- a/tests/component/props_validation.test.ts +++ b/tests/component/props_validation.test.ts @@ -25,7 +25,7 @@ afterEach(() => { QWeb.dev = dev; }); -class Widget extends Component {} +class Widget extends Component {} //------------------------------------------------------------------------------ // Tests @@ -96,7 +96,7 @@ describe("props validation", () => { ]; let props; - class Parent extends Component { + class Parent extends Component { static template = xml`
`; get p() { return props.p; @@ -153,14 +153,14 @@ describe("props validation", () => { ]; let props; - class Parent extends Component { + class Parent extends Component { static template = xml`
`; get p() { return props.p; } } for (let test of Tests) { - let TestWidget = class extends Component { + let TestWidget = class extends Component { static props = { p: { type: test.type } }; static template = xml`
hey
`; }; @@ -200,11 +200,11 @@ describe("props validation", () => { }); test("can validate a prop with multiple types", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
hey
`; static props = { p: [String, Boolean] }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { TestWidget }; get p() { @@ -244,11 +244,11 @@ describe("props validation", () => { }); test("can validate an optional props", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { type: String, optional: true } }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { type: Array, element: String } }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { type: Array, element: [String, Boolean] } }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { type: Object, shape: { id: Number, url: String } } }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { TestWidget }; get p() { @@ -451,7 +451,7 @@ describe("props validation", () => { }); test("can validate recursively complicated prop def", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
hey
`; static props = { p: { @@ -463,7 +463,7 @@ describe("props validation", () => { } }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + 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 { + 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 { + 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 { + class TestWidget extends Component { static props = { p: { type: Number } }; static template = xml`
`; @@ -750,7 +750,7 @@ describe("props validation", () => { } } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class TestWidget extends Component { static props = { p: { type: Number } }; static template = xml`
`; static defaultProps = { p: 4 }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class TestWidget extends Component { static defaultProps = { p: 4 }; static template = xml`
`; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { TestWidget }; } diff --git a/tests/component/slots.test.ts b/tests/component/slots.test.ts index 2e4b19e8..1db57ec3 100644 --- a/tests/component/slots.test.ts +++ b/tests/component/slots.test.ts @@ -26,7 +26,7 @@ afterEach(() => { fixture.remove(); }); -function children(w: Component): Component[] { +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", () => {
`); - class Dialog extends Component {} - class Parent extends Component { + 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 { + class Dialog extends Component { static template = xml` default content `; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Dialog }; } @@ -86,13 +86,13 @@ describe("t-slot directive", () => { }); test("dafault slots can define a default content", async () => { - class Dialog extends Component { + class Dialog extends Component { static template = xml` default content `; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class Dialog extends Component { static template = xml` default content `; } - class Parent extends Component { + class Parent extends Component { static template = xml`
hey
`; 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 { + class Dialog extends Component { static template = xml` default content `; } - class Parent extends Component { + class Parent extends Component { static template = xml`
hey
`; static components = { Dialog }; } @@ -149,8 +149,8 @@ describe("t-slot directive", () => { `); - class Dialog extends Component {} - class Parent extends Component { + class Dialog extends Component {} + class Parent extends Component { static components = { Dialog }; state = useState({ val: 0 }); doSomething() { @@ -186,9 +186,9 @@ describe("t-slot directive", () => {
`); - class Link extends Component {} + class Link extends Component {} - class App extends Component { + class App extends Component { state = useState({ users: [ { id: 1, name: "Aaron" }, @@ -230,9 +230,9 @@ describe("t-slot directive", () => {
`); - class Link extends Component {} + class Link extends Component {} - class App extends Component { + class App extends Component { state = useState({ users: [ { id: 1, name: "Aaron" }, @@ -272,9 +272,9 @@ describe("t-slot directive", () => {
`); - class Link extends Component {} + class Link extends Component {} - class App extends Component { + 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 { + class Dialog extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -340,8 +340,8 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { + class Dialog extends Component {} + class Parent extends Component { static components = { Dialog }; } const parent = new Parent(); @@ -360,8 +360,8 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { + class Dialog extends Component {} + class Parent extends Component { static components = { Dialog }; } const parent = new Parent(); @@ -385,8 +385,8 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { + class Dialog extends Component {} + class Parent extends Component { static components = { Dialog }; } const parent = new Parent(); @@ -408,8 +408,8 @@ describe("t-slot directive", () => {
`); - class Dialog extends Component {} - class Parent extends Component { + class Dialog extends Component {} + class Parent extends Component { static components = { Dialog }; } const parent = new Parent(); @@ -432,8 +432,8 @@ describe("t-slot directive", () => { `); - class Dialog extends Component {} - class Parent extends Component { + class Dialog extends Component {} + class Parent extends Component { static components = { Dialog }; } const parent = new Parent(); @@ -456,8 +456,8 @@ describe("t-slot directive", () => { `); - class Dialog extends Component {} - class Parent extends Component { + class Dialog extends Component {} + class Parent extends Component { static components = { Dialog }; } const parent = new Parent(); @@ -478,9 +478,9 @@ describe("t-slot directive", () => {
Grand Child
`); - class Child extends Component {} - class GrandChild extends Component {} - class Parent extends Component { + 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 { + class Slot extends Component { static template = xml``; constructor(parent, props) { super(parent, props); slot = this; } } - class GrandChild extends Component { + class GrandChild extends Component { static template = xml`
`; } - class Child extends Component { + class Child extends Component { static components = { GrandChild }; static template = xml` `; } - class Parent extends Component { + class Parent extends Component { static components = { Child, Slot }; static template = xml``; state = useState({ val: 3 }); @@ -548,9 +548,9 @@ describe("t-slot directive", () => {
`); - class SomeComponent extends Component {} - class GenericComponent extends Component {} - class App extends Component { + 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 { + class Link extends Component { static template = xml` `; } - class A extends Component { + class A extends Component { static template = xml`hey`; static components = { Link: Link }; } @@ -587,14 +587,14 @@ describe("t-slot directive", () => { }); test("template can just return a slot", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; } - class SlotComponent extends Component { + class SlotComponent extends Component { static template = xml``; } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -614,13 +614,13 @@ describe("t-slot directive", () => { }); test("multiple slots containing components", async () => { - class C extends Component { + class C extends Component { static template = xml``; } - class B extends Component { + class B extends Component { static template = xml`
`; } - class A extends Component { + class A extends Component { static template = xml` @@ -636,14 +636,14 @@ describe("t-slot directive", () => { }); test("slots in t-foreach and re-rendering", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; state = useState({ val: "A" }); mounted() { this.state.val = "B"; } } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml`
@@ -661,7 +661,7 @@ describe("t-slot directive", () => { }); test("slots in t-foreach with t-set and re-rendering", async () => { - class Child extends Component { + class Child extends Component { static template = xml` @@ -672,7 +672,7 @@ describe("t-slot directive", () => { this.state.val = "B"; } } - class ParentWidget extends Component { + class ParentWidget extends Component { static components = { Child }; static template = xml`
@@ -693,7 +693,7 @@ describe("t-slot directive", () => { test("nested slots in same template", async () => { let child, child2, child3; - class Child extends Component { + class Child extends Component { static template = xml`
@@ -705,7 +705,7 @@ describe("t-slot directive", () => { child = this; } } - class Child2 extends Component { + class Child2 extends Component { static template = xml` @@ -715,7 +715,7 @@ describe("t-slot directive", () => { child2 = this; } } - class Child3 extends Component { + class Child3 extends Component { static template = xml` Child 3`; constructor(parent, props) { @@ -723,7 +723,7 @@ describe("t-slot directive", () => { child3 = this; } } - class Parent extends Component { + class Parent extends Component { static components = { Child, Child2, Child3 }; static template = xml` @@ -748,7 +748,7 @@ describe("t-slot directive", () => { test("t-slot nested within another slot", async () => { let portal, modal, child3; - class Child3 extends Component { + class Child3 extends Component { static template = xml` Child 3`; constructor(parent, props) { @@ -756,7 +756,7 @@ describe("t-slot directive", () => { child3 = this; } } - class Modal extends Component { + class Modal extends Component { static template = xml` @@ -766,7 +766,7 @@ describe("t-slot directive", () => { modal = this; } } - class Portal extends Component { + class Portal extends Component { static template = xml` @@ -776,7 +776,7 @@ describe("t-slot directive", () => { portal = this; } } - class Dialog extends Component { + class Dialog extends Component { static components = { Modal, Portal }; static template = xml` @@ -787,7 +787,7 @@ describe("t-slot directive", () => { `; } - class Parent extends Component { + class Parent extends Component { static components = { Child3, Dialog }; static template = xml` @@ -809,7 +809,7 @@ describe("t-slot directive", () => { test("t-slot supports many instances", async () => { let child3; - class Child3 extends Component { + class Child3 extends Component { static template = xml` Child 3`; constructor(parent, props) { @@ -817,13 +817,13 @@ describe("t-slot directive", () => { child3 = this; } } - class Dialog extends Component { + class Dialog extends Component { static template = xml` `; } - class Parent extends Component { + class Parent extends Component { static components = { Child3, Dialog }; static template = xml` @@ -845,10 +845,10 @@ describe("t-slot directive", () => { }); test("slots in slots, with vars", async () => { - class B extends Component { + class B extends Component { static template = xml``; } - class A extends Component { + class A extends Component { static template = xml`
@@ -857,7 +857,7 @@ describe("t-slot directive", () => {
`; static components = { B }; } - class Parent extends Component { + class Parent extends Component { static template = xml`
diff --git a/tests/component/styles.test.ts b/tests/component/styles.test.ts index 2b3fb860..168e47fb 100644 --- a/tests/component/styles.test.ts +++ b/tests/component/styles.test.ts @@ -32,7 +32,7 @@ afterEach(() => { describe("styles and component", () => { test("can define an inline stylesheet", async () => { - class App extends Component { + class App extends Component { static template = xml`
text
`; static style = css` .app { @@ -54,7 +54,7 @@ describe("styles and component", () => { }); test("inherited components properly apply css", async () => { - class App extends Component { + class App extends Component { static template = xml`
text
`; 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 { + class App extends Component { static template = xml`
text
`; static style = `.app {color: red;}`; } @@ -103,7 +103,7 @@ describe("styles and component", () => { }); test("inline stylesheets are processed", async () => { - class App extends Component { + class App extends Component { static template = xml`
text
`; static style = css` .app { diff --git a/tests/component/un_mounting.test.ts b/tests/component/un_mounting.test.ts index 9ac8b44d..10b91a8d 100644 --- a/tests/component/un_mounting.test.ts +++ b/tests/component/un_mounting.test.ts @@ -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 { + class App extends Component { static template = xml`
app
`; } 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 { + class App extends Component { static template = xml`app`; } 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 { + class App extends Component { static template = xml`
app
`; } 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 { + class App extends Component { static template = xml`
app
`; } const span = document.createElement("span"); @@ -81,7 +81,7 @@ describe("mount targets", () => { }); test("default mount option is 'last-child'", async () => { - class App extends Component { + class App extends Component { static template = xml`
app
`; } 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 { + class MyWidget extends Component { static template = xml`
Hey
`; 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 { + class MyWidget extends Component { static template = xml`
Hey
`; 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 { + class Child extends Component { static template = xml` `; @@ -172,7 +172,7 @@ describe("unmounting and remounting", () => { this.state.n = 3; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -193,7 +193,7 @@ describe("unmounting and remounting", () => { }); test("state changes in willUnmount will be applied on remount", async () => { - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
`; @@ -216,7 +216,7 @@ describe("unmounting and remounting", () => { }); test("sub component is still active after being unmounted and remounted", async () => { - class Child extends Component { + class Child extends Component { static template = xml`

@@ -225,7 +225,7 @@ describe("unmounting and remounting", () => { state = useState({ value: 1 }); } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml`

`; } @@ -248,7 +248,7 @@ describe("unmounting and remounting", () => { test("change state just before mounting component", async () => { const steps: number[] = []; - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
`; @@ -278,7 +278,7 @@ describe("unmounting and remounting", () => { test("change state while mounting component", async () => { const steps: number[] = []; - class TestWidget extends Component { + class TestWidget extends Component { static template = xml`
`; @@ -312,7 +312,7 @@ describe("unmounting and remounting", () => { test("change state while component is unmounted", async () => { let child; - class Child extends Component { + class Child extends Component { static template = xml``; state = useState({ val: "C1" @@ -323,7 +323,7 @@ describe("unmounting and remounting", () => { } } - class Parent extends Component { + class Parent extends Component { static components = { Child }; static template = xml`
`; 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 { + class Child extends Component { static template = xml``; willUpdateProps() { return def; @@ -353,7 +353,7 @@ describe("unmounting and remounting", () => { } Child.prototype.__render = jest.fn(Child.prototype.__render); - class Parent extends Component { + class Parent extends Component { static template = xml`
`; 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 { + class MyWidget extends Component { static template = xml`
Hey
`; async willStart() { steps.push("willstart"); diff --git a/tests/context.test.ts b/tests/context.test.ts index 52802ab1..b168e48c 100644 --- a/tests/context.test.ts +++ b/tests/context.test.ts @@ -32,7 +32,7 @@ describe("Context", () => { test("very simple use, with initial value", async () => { const testContext = new Context({ value: 123 }); - class Test extends Component { + class Test extends Component { static template = xml`
`; contextObj = useContext(testContext); } @@ -44,7 +44,7 @@ describe("Context", () => { test("useContext hook is reactive, for one component", async () => { const testContext = new Context({ value: 123 }); - class Test extends Component { + class Test extends Component { static template = xml`
`; contextObj = useContext(testContext); } @@ -59,11 +59,11 @@ describe("Context", () => { test("two components can subscribe to same context", async () => { const testContext = new Context({ value: 123 }); - class Child extends Component { + class Child extends Component { static template = xml``; contextObj = useContext(testContext); } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; } @@ -80,7 +80,7 @@ describe("Context", () => { const def = makeDeferred(); const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; contextObj = useContext(testContext); async render() { @@ -90,7 +90,7 @@ describe("Context", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; } @@ -111,13 +111,13 @@ describe("Context", () => { const def = makeDeferred(); const steps: string[] = []; - class SlowComp extends Component { + class SlowComp extends Component { static template = xml`

`; willUpdateProps() { return def; } } - class Child extends Component { + class Child extends Component { static template = xml``; static components = { SlowComp }; contextObj = useContext(testContext); @@ -128,12 +128,12 @@ describe("Context", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { Child, Parent }; } @@ -166,7 +166,7 @@ describe("Context", () => { const testContext = new Context({ a: 1, b: 2 }); const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; contextObj1 = useContext(testContext); contextObj2 = useContext(testContext); @@ -175,7 +175,7 @@ describe("Context", () => { return super.__render(fiber); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; } @@ -193,7 +193,7 @@ describe("Context", () => { const testContext = new Context({ a: 123, b: 321 }); const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; contextObj = useContext(testContext); __render(fiber) { @@ -201,7 +201,7 @@ describe("Context", () => { return super.__render(fiber); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; contextObj = useContext(testContext); @@ -227,7 +227,7 @@ describe("Context", () => { const testContext = new Context({ a: 123 }); const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; contextObj = useContext(testContext); __render(fiber) { @@ -235,7 +235,7 @@ describe("Context", () => { return super.__render(fiber); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true }); @@ -263,14 +263,14 @@ describe("Context", () => { test("destroyed component before being mounted is inactive", async () => { const testContext = new Context({ a: 123 }); - class Child extends Component { + class Child extends Component { static template = xml``; contextObj = useContext(testContext); willStart() { return makeDeferred(); } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: true }); @@ -293,7 +293,7 @@ describe("Context", () => { const testContext = new Context({ x: { n: 1 }, key: "x" }); const def = makeDeferred(); let stateC; - class ComponentC extends Component { + class ComponentC extends Component { static template = xml``; context = useContext(testContext); state = useState({ x: "a" }); @@ -303,7 +303,7 @@ describe("Context", () => { stateC = this.state; } } - class ComponentB extends Component { + class ComponentB extends Component { static components = { ComponentC }; static template = xml`

`; @@ -311,7 +311,7 @@ describe("Context", () => { return def; } } - class ComponentA extends Component { + class ComponentA extends Component { static components = { ComponentB }; static template = xml`
`; context = useContext(testContext); diff --git a/tests/hooks.test.ts b/tests/hooks.test.ts index 1d5ee44f..4094c0f5 100644 --- a/tests/hooks.test.ts +++ b/tests/hooks.test.ts @@ -42,7 +42,7 @@ afterEach(() => { describe("hooks", () => { test("can use a state hook", async () => { - class Counter extends Component { + class Counter extends Component { static template = xml`
`; counter = useState({ value: 42 }); } @@ -64,7 +64,7 @@ describe("hooks", () => { steps.push("willunmount"); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; constructor() { super(); @@ -92,7 +92,7 @@ describe("hooks", () => { steps.push("willunmount"); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; constructor(parent, props) { super(parent, props); @@ -100,7 +100,7 @@ describe("hooks", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { MyComponent }; state = useState({ flag: true }); @@ -126,7 +126,7 @@ describe("hooks", () => { steps.push("hook:willunmount"); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; constructor() { super(); @@ -157,7 +157,7 @@ describe("hooks", () => { steps.push("hook:willunmount"); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; constructor(parent, props) { super(parent, props); @@ -171,7 +171,7 @@ describe("hooks", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { MyComponent }; state = useState({ flag: true }); @@ -197,7 +197,7 @@ describe("hooks", () => { steps.push("hook:willunmount" + i); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; constructor() { super(); @@ -219,7 +219,7 @@ describe("hooks", () => { }); test("useRef hook", async () => { - class Counter extends Component { + class Counter extends Component { static template = xml`
`; button = useRef("button"); value = 0; @@ -241,7 +241,7 @@ describe("hooks", () => { test("useRef hook is null if ref is removed ", async () => { expect.assertions(4); - class TestRef extends Component { + class TestRef extends Component { static template = xml`
owl
`; spanRef = useRef("span"); state = useState({ flag: true }); @@ -261,10 +261,10 @@ describe("hooks", () => { }); test("t-refs on widget are components", async () => { - class WidgetB extends Component { + class WidgetB extends Component { static template = xml`
b
`; } - class WidgetC extends Component { + class WidgetC extends Component { static template = xml`
Hello
`; static components = { WidgetB }; ref = useRef("mywidgetb"); @@ -280,11 +280,11 @@ describe("hooks", () => { test("t-refs are bound at proper timing", async () => { expect.assertions(2); - class Widget extends Component { + class Widget extends Component { static template = xml`
widget
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
@@ -309,10 +309,10 @@ describe("hooks", () => { test("t-refs are bound at proper timing (2)", async () => { expect.assertions(10); - class Widget extends Component { + class Widget extends Component { static template = xml`
widget
`; } - class ParentWidget extends Component { + class ParentWidget extends Component { static template = xml`
@@ -369,7 +369,7 @@ describe("hooks", () => { }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; state = useState({ flag: true }); @@ -403,7 +403,7 @@ describe("hooks", () => { steps.push("hook:willPatch"); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; state = useState({ flag: true }); @@ -437,7 +437,7 @@ describe("hooks", () => { steps.push("hook:willPatch" + i); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml`
hey
`; state = useState({ value: 1 }); constructor() { @@ -473,7 +473,7 @@ describe("hooks", () => { } test("simple input", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -494,7 +494,7 @@ describe("hooks", () => { }); test("input in a t-if", async () => { - class SomeComponent extends Component { + class SomeComponent extends Component { static template = xml`
@@ -521,7 +521,7 @@ describe("hooks", () => { }); test("can use sub env", async () => { - class TestComponent extends Component { + class TestComponent extends Component { static template = xml`
`; constructor() { super(); @@ -536,7 +536,7 @@ describe("hooks", () => { }); test("parent and child env", async () => { - class Child extends Component { + class Child extends Component { static template = xml`
`; constructor(parent, props) { super(parent, props); @@ -544,7 +544,7 @@ describe("hooks", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; constructor() { @@ -568,14 +568,14 @@ describe("hooks", () => { steps.push("onWillUpdateProps"); }); } - class MyComponent extends Component { + class MyComponent extends Component { static template = xml``; constructor(parent, props) { super(parent, props); useMyHook(); } } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { MyComponent }; state = useState({ value: 1 }); @@ -597,7 +597,7 @@ describe("hooks", () => { test("useExternalListener", async () => { let n = 0; - class MyComponent extends Component { + class MyComponent extends Component { static template = xml``; constructor(parent, props) { super(parent, props); @@ -607,7 +607,7 @@ describe("hooks", () => { n++; } } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { MyComponent }; state = useState({ flag: false }); diff --git a/tests/misc/async_root.test.ts b/tests/misc/async_root.test.ts index 39adad77..16856ffa 100644 --- a/tests/misc/async_root.test.ts +++ b/tests/misc/async_root.test.ts @@ -27,7 +27,7 @@ afterEach(() => { describe("Asyncroot", () => { test("delayed component with AsyncRoot component", async () => { let def; - class Child extends Component { + class Child extends Component { static template = xml``; } class AsyncChild extends Child { @@ -35,7 +35,7 @@ describe("Asyncroot", () => { return def; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -74,7 +74,7 @@ describe("Asyncroot", () => { test("fast component with AsyncRoot", async () => { let def; - class Child extends Component { + class Child extends Component { static template = xml``; } class AsyncChild extends Child { @@ -83,7 +83,7 @@ describe("Asyncroot", () => { } } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -122,7 +122,7 @@ describe("Asyncroot", () => { test("asyncroot component: mixed re-renderings", async () => { let def; - class Child extends Component { + class Child extends Component { static template = xml` / @@ -138,7 +138,7 @@ describe("Asyncroot", () => { return def; } } - class Parent extends Component { + class Parent extends Component { static template = xml`
diff --git a/tests/misc/portal.test.ts b/tests/misc/portal.test.ts index f2d41799..ea085a44 100644 --- a/tests/misc/portal.test.ts +++ b/tests/misc/portal.test.ts @@ -36,7 +36,7 @@ describe("Portal: Props validation", () => { test("target is mandatory", async () => { const dev = QWeb.dev; QWeb.dev = true; - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -61,7 +61,7 @@ describe("Portal: Props validation", () => { test("target is not list", async () => { const dev = QWeb.dev; QWeb.dev = true; - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -88,7 +88,7 @@ describe("Portal: Basic use and DOM placement", () => { test("basic use of portal", async () => { const dev = QWeb.dev; QWeb.dev = true; - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -113,7 +113,7 @@ describe("Portal: Basic use and DOM placement", () => { }); test("conditional use of Portal", async () => { - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -148,10 +148,10 @@ describe("Portal: Basic use and DOM placement", () => { }); test("conditional use of Portal (with sub Component)", async () => { - class Child extends Component { + class Child extends Component { static template = xml`
`; } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -190,7 +190,7 @@ describe("Portal: Basic use and DOM placement", () => { }); test("with target in template (before portal)", async () => { - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -210,7 +210,7 @@ describe("Portal: Basic use and DOM placement", () => { }); test("with target in template (after portal)", async () => { - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -233,7 +233,7 @@ describe("Portal: Basic use and DOM placement", () => { const consoleError = console.error; console.error = jest.fn(() => {}); - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -260,7 +260,7 @@ describe("Portal: Basic use and DOM placement", () => { test("portal with child and props", async () => { const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; mounted() { steps.push("mounted"); @@ -271,7 +271,7 @@ describe("Portal: Basic use and DOM placement", () => { expect(outside.innerHTML).toBe("2"); } } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -298,7 +298,7 @@ describe("Portal: Basic use and DOM placement", () => { const consoleError = console.error; console.error = jest.fn(() => {}); - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -326,7 +326,7 @@ describe("Portal: Basic use and DOM placement", () => { const consoleError = console.error; console.error = jest.fn(() => {}); - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -354,7 +354,7 @@ describe("Portal: Basic use and DOM placement", () => { const consoleError = console.error; console.error = jest.fn(() => {}); - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -379,7 +379,7 @@ describe("Portal: Basic use and DOM placement", () => { }); test("portal with dynamic body", async () => { - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -405,7 +405,7 @@ describe("Portal: Basic use and DOM placement", () => { const consoleError = console.error; console.error = jest.fn(() => {}); - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -439,7 +439,7 @@ describe("Portal: Basic use and DOM placement", () => { test("lifecycle hooks of portal sub component are properly called", async () => { const steps: any[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; mounted() { steps.push("child:mounted"); @@ -454,7 +454,7 @@ describe("Portal: Basic use and DOM placement", () => { steps.push("child:willUnmount"); } } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -520,11 +520,11 @@ describe("Portal: Basic use and DOM placement", () => { }); test("portal destroys on crash", async () => { - class Child extends Component { + class Child extends Component { static template = xml``; state = {}; } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -550,7 +550,7 @@ describe("Portal: Basic use and DOM placement", () => { }); test("portal manual unmount", async () => { - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -577,7 +577,7 @@ describe("Portal: Basic use and DOM placement", () => { test("portal manual unmount with subcomponent", async () => { expect.assertions(9); - class Child extends Component { + class Child extends Component { static template = xml`gloria`; mounted() { expect(outside.contains(this.el)).toBeTruthy(); @@ -586,7 +586,7 @@ describe("Portal: Basic use and DOM placement", () => { expect(outside.contains(this.el)).toBeTruthy(); } } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -614,7 +614,7 @@ describe("Portal: Basic use and DOM placement", () => { describe("Portal: Events handling", () => { test("events triggered on movable pure node are handled", async () => { - class Parent extends Component { + class Parent extends Component { static components = { Portal }; static template = xml`
@@ -638,8 +638,8 @@ describe("Portal: Events handling", () => { }); test("events triggered on movable owl components are redirected", async () => { - let childInst: Component | null = null; - class Child extends Component { + let childInst: Component | null = null; + class Child extends Component { static template = xml` `; @@ -652,7 +652,7 @@ describe("Portal: Events handling", () => { this.trigger("custom-portal"); } } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -677,8 +677,8 @@ describe("Portal: Events handling", () => { test("events triggered on contained movable owl components are redirected", async () => { const steps: string[] = []; - let childInst: Component | null = null; - class Child extends Component { + let childInst: Component | null = null; + class Child extends Component { static template = xml` `; @@ -691,7 +691,7 @@ describe("Portal: Events handling", () => { this.trigger("custom-portal"); } } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -717,9 +717,9 @@ describe("Portal: Events handling", () => { }); test("Dom events are not mapped", async () => { - let childInst: Component | null = null; + let childInst: Component | null = null; const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml` `; @@ -728,7 +728,7 @@ describe("Portal: Events handling", () => { childInst = this; } } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -760,22 +760,22 @@ describe("Portal: Events handling", () => { fixture.appendChild(outside2); const steps: Array = []; - let childInst: Component | null = null; - class Child2 extends Component { + let childInst: Component | null = null; + class Child2 extends Component { static template = xml`
child2
`; constructor(parent, props) { super(parent, props); childInst = this; } } - class Child extends Component { + class Child extends Component { static components = { Portal, Child2 }; static template = xml` `; } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -797,11 +797,11 @@ describe("Portal: Events handling", () => { }); test("portal's parent's env is not polluted", async () => { - class Child extends Component { + class Child extends Component { static template = xml` `; } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
@@ -818,22 +818,22 @@ describe("Portal: Events handling", () => { test("Portal composed with t-slot", async () => { const steps: Array = []; - let childInst: Component | null = null; - class Child2 extends Component { + let childInst: Component | null = null; + class Child2 extends Component { static template = xml`
child2
`; constructor(parent, props) { super(parent, props); childInst = this; } } - class Child extends Component { + class Child extends Component { static components = { Portal, Child2 }; static template = xml` `; } - class Parent extends Component { + class Parent extends Component { static components = { Child, Child2 }; static template = xml`
@@ -857,11 +857,11 @@ describe("Portal: Events handling", () => { describe("Portal: UI/UX", () => { test("focus is kept across re-renders", async () => { - class Child extends Component { + class Child extends Component { static template = xml` `; } - class Parent extends Component { + class Parent extends Component { static components = { Portal, Child }; static template = xml`
diff --git a/tests/router/link.test.ts b/tests/router/link.test.ts index f8df5c53..e7d19be1 100644 --- a/tests/router/link.test.ts +++ b/tests/router/link.test.ts @@ -31,7 +31,7 @@ describe("Link component", () => {
`); - class App extends Component { + class App extends Component { static components = { Link: Link }; } @@ -65,7 +65,7 @@ describe("Link component", () => {
`); - class App extends Component { + class App extends Component { static components = { Link: Link }; } diff --git a/tests/router/route_component.test.ts b/tests/router/route_component.test.ts index 831e7149..310909c2 100644 --- a/tests/router/route_component.test.ts +++ b/tests/router/route_component.test.ts @@ -33,9 +33,9 @@ describe("RouteComponent", () => { Users `); - class About extends Component {} - class Users extends Component {} - class App extends Component { + class About extends Component {} + class Users extends Component {} + class App extends Component { static components = { RouteComponent }; } @@ -65,8 +65,8 @@ describe("RouteComponent", () => { Book `); - class Book extends Component {} - class App extends Component { + class Book extends Component {} + class App extends Component { static components = { RouteComponent }; } @@ -87,12 +87,12 @@ describe("RouteComponent", () => { Book | `); - class Book extends Component { + class Book extends Component { get incVal() { return this.props.val + 1; } } - class App extends Component { + class App extends Component { static components = { RouteComponent }; } diff --git a/tests/store_hooks.test.ts b/tests/store_hooks.test.ts index 9b117d77..3d457552 100644 --- a/tests/store_hooks.test.ts +++ b/tests/store_hooks.test.ts @@ -29,7 +29,7 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
@@ -60,7 +60,7 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
ok @@ -102,7 +102,7 @@ describe("connecting a component to store", () => { const state = { smallerArray: [1], biggerArray: [2, 3], useSmallArray: true }; const store = new Store({ state }); - class App extends Component { + class App extends Component { static template = xml`
`; storeProps = { array: useStore(state => { @@ -131,7 +131,7 @@ describe("connecting a component to store", () => { }); test("throw error if no store is found", async () => { - class App extends Component { + class App extends Component { static template = xml`
`; todos = useStore(state => state.todos); } @@ -151,7 +151,7 @@ describe("connecting a component to store", () => { const actions = {}; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
`; storeState = useStore(state => state.a); } @@ -174,7 +174,7 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
@@ -208,7 +208,7 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
@@ -245,7 +245,7 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
`; nbrTodos = useStore(state => ({ value: state.todos.length })); } @@ -273,7 +273,7 @@ describe("connecting a component to store", () => { } }; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
`; nbrTodos = useStore(state => ({ value: state.todos.length }), { isEqual: shallowEqual }); } @@ -307,7 +307,7 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions }); - class App extends Component { + class App extends Component { static template = xml`
@@ -336,7 +336,7 @@ describe("connecting a component to store", () => { }); (env).store = store; - class App extends Component { + class App extends Component { static template = xml`
@@ -365,14 +365,14 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions: {} }); - class TodoItem extends Component { + class TodoItem extends Component { static template = xml``; todo = useStore((state, props) => { return state.todos.find(t => t.id === props.todoId); }); } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { TodoItem }; state = useState({ currentId: 1 }); @@ -399,14 +399,14 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, actions }); - class TodoItem extends Component { + class TodoItem extends Component { static template = xml``; todo = useStore((state, props) => { return state.todos.find(t => t.id === props.id); }); } - class TodoList extends Component { + class TodoList extends Component { static template = xml`
@@ -444,7 +444,7 @@ describe("connecting a component to store", () => { }; const store = new Store({ state, getters }); - class TodoItem extends Component { + class TodoItem extends Component { static template = xml`
@@ -460,7 +460,7 @@ describe("connecting a component to store", () => { }); } - class TodoList extends Component { + class TodoList extends Component { static components = { TodoItem }; static template = xml`
@@ -481,12 +481,12 @@ describe("connecting a component to store", () => { }); test("connected component is updated when props are updated", async () => { - class Beer extends Component { + class Beer extends Component { static template = xml``; beer = useStore((state, props) => state.beers[props.id]); } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { Beer }; state = useState({ beerId: 1 }); @@ -506,7 +506,7 @@ describe("connecting a component to store", () => { }); test("connected component is updated when store is changed", async () => { - class App extends Component { + class App extends Component { static template = xml`
@@ -539,7 +539,7 @@ describe("connecting a component to store", () => { test("connected component is updated when mixing store and props changes", async () => { let counter = 0; - class Beer extends Component { + class Beer extends Component { static template = xml``; beer = useStore((state, props) => state.beers[props.id], { onUpdate: result => { @@ -548,7 +548,7 @@ describe("connecting a component to store", () => { }); } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { Beer }; state = useState({ beerId: 1 }); @@ -580,7 +580,7 @@ describe("connecting a component to store", () => { }); test("connected component is properly cleaned up on destroy", async () => { - class App extends Component { + class App extends Component { static template = xml`
`; state = useStore((state, props) => state); } @@ -599,7 +599,7 @@ describe("connecting a component to store", () => { }); test("connected component with undefined, null and string props", async () => { - class Beer extends Component { + class Beer extends Component { static template = xml`
taster: @@ -613,7 +613,7 @@ describe("connecting a component to store", () => { })); } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { Beer }; state = useState({ beerId: 0 }); @@ -658,7 +658,7 @@ describe("connecting a component to store", () => { }); test("connected component deeply reactive with undefined, null and string props", async () => { - class Beer extends Component { + class Beer extends Component { static template = xml`
taster: @@ -674,7 +674,7 @@ describe("connecting a component to store", () => { }); } - class App extends Component { + class App extends Component { static template = xml`
`; static components = { Beer }; state = useState({ beerId: 0 }); @@ -749,7 +749,7 @@ describe("connecting a component to store", () => { state.x.val = val; } }; - class Parent extends Component { + class Parent extends Component { static template = xml`
`; x = useStore(state => { return Object.assign({}, state.x); @@ -770,7 +770,7 @@ describe("connecting a component to store", () => { test("correct update order when parent/children are connected", async () => { const steps: string[] = []; - class Child extends Component { + class Child extends Component { static template = xml``; state = useStore((state, props) => { @@ -778,7 +778,7 @@ describe("connecting a component to store", () => { return { msg: state.msg[props.key] }; }); } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; @@ -817,7 +817,7 @@ describe("connecting a component to store", () => { let def = makeDeferred(); def.resolve(); - class Child extends Component { + class Child extends Component { static template = xml``; state = useStore((s, props) => { steps.push("child"); @@ -825,7 +825,7 @@ describe("connecting a component to store", () => { }); } - class Parent extends Component { + class Parent extends Component { static template = xml`
@@ -885,7 +885,7 @@ describe("connecting a component to store", () => { actions }); - class TodoItem extends Component { + class TodoItem extends Component { static template = xml`
@@ -906,7 +906,7 @@ describe("connecting a component to store", () => { return super.__render(f); } } - class TodoApp extends Component { + class TodoApp extends Component { static template = xml`
@@ -958,7 +958,7 @@ describe("connecting a component to store", () => { actions }); - class TodoItem extends Component { + class TodoItem extends Component { static template = xml`
@@ -980,7 +980,7 @@ describe("connecting a component to store", () => { } } - class TodoApp extends Component { + class TodoApp extends Component { static template = xml`
@@ -1024,7 +1024,7 @@ describe("connecting a component to store", () => { test("connected component willpatch/patch hooks are called on store updates", async () => { const steps: string[] = []; - class App extends Component { + class App extends Component { static template = xml`
`; store = useStore(s => ({ msg: s.msg })); @@ -1059,12 +1059,12 @@ describe("connecting a component to store", () => { test("connected child components stop listening to store when destroyed", async () => { let steps: any = []; - class Child extends Component { + class Child extends Component { static template = xml`
`; store = useStore(s => s); } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ child: true }); @@ -1097,14 +1097,14 @@ describe("connecting a component to store", () => { test("connected child component destroyed by dispatched action", async () => { let steps: any = []; - class Child extends Component { + class Child extends Component { static template = xml`
`; store = useStore(s => { steps.push("child selector"); return s; }); } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; store = useStore(s => { @@ -1135,7 +1135,7 @@ describe("connecting a component to store", () => { }); test("dispatch an action", async () => { - class App extends Component { + class App extends Component { static template = xml`
`; store = useStore(state => state); dispatch = useDispatch(); @@ -1203,7 +1203,7 @@ describe("various scenarios", () => { }; const store = new Store({ actions, state }); - class Attachment extends Component { + class Attachment extends Component { static template = xml`
Attachment @@ -1213,7 +1213,7 @@ describe("various scenarios", () => { attachment = useStore((state, props) => ({ name: state.attachments[props.id].name })); } - class Message extends Component { + class Message extends Component { static template = xml`
diff --git a/tests/tooling/debug_script_1.test.ts b/tests/tooling/debug_script_1.test.ts index e9845dc9..30202011 100644 --- a/tests/tooling/debug_script_1.test.ts +++ b/tests/tooling/debug_script_1.test.ts @@ -22,11 +22,11 @@ test("can log full lifecycle", async () => { const log = console.log; console.log = arg => steps.push(arg); - class Child extends Component { + class Child extends Component { static template = xml`
child
`; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; state = useState({ flag: false }); diff --git a/tests/tooling/debug_script_2.test.ts b/tests/tooling/debug_script_2.test.ts index d69d934f..83efcbab 100644 --- a/tests/tooling/debug_script_2.test.ts +++ b/tests/tooling/debug_script_2.test.ts @@ -21,11 +21,11 @@ test("can log scheduler start and stop", async () => { const log = console.log; console.log = arg => steps.push(arg); - class Child extends Component { + class Child extends Component { static template = xml`
child
`; } - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; } diff --git a/tests/tooling/debug_script_3.test.ts b/tests/tooling/debug_script_3.test.ts index 821f89e7..7f476c98 100644 --- a/tests/tooling/debug_script_3.test.ts +++ b/tests/tooling/debug_script_3.test.ts @@ -21,7 +21,7 @@ test("log a specific message for render method calls if component is not mounted const log = console.log; console.log = arg => steps.push(arg); - class Parent extends Component { + class Parent extends Component { static template = xml`
`; state = owl.hooks.useState({ value: 1 }); } diff --git a/tests/tooling/debug_script_4.test.ts b/tests/tooling/debug_script_4.test.ts index 6c080614..26850cc9 100644 --- a/tests/tooling/debug_script_4.test.ts +++ b/tests/tooling/debug_script_4.test.ts @@ -21,14 +21,14 @@ test("log a sub component with non stringifiable props", async () => { const log = console.log; console.log = arg => steps.push(arg); - class Child extends Component { + class Child extends Component { static template = xml``; } const circularObject: any = { val: 1 }; circularObject.circularObject = circularObject; - class Parent extends Component { + class Parent extends Component { static template = xml`
`; static components = { Child }; obj = circularObject;