rename web into demo

demo/static/tests/core/__snapshots__/component.test.ts.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`composition sub widgets with some state rendered in a loop 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    context = Object.create(context);
+    let h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    let vn1 = h('div', p1, c1);
+    c1.push({text: \`
+          \`});
+    let _2 = context['state'].numbers;
+    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
+    if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
+    let _3 = _2 instanceof Array ? _2 : Object.keys(_2);
+    let _4 = _2 instanceof Array ? _2 : Object.values(_2);
+    for (let i = 0; i < _3.length; i++) {
+        context.number_first = i === 0;
+        context.number_last = i === _3.length - 1;
+        context.number_parity = i % 2 === 0 ? 'even' : 'odd';
+        context.number_index = i;
+        context.number = _3[i];
+        context.number_value = _4[i];
+        c1.push({text: \`
+            \`});
+        //WIDGET
+        let key8 = context['number'];
+        let _5_index = c1.length;
+        c1.push(null);
+        let def6;
+        let w7 = key8 in context.__widget__.cmap ? context.__widget__.children[context.__widget__.cmap[key8]] : false;
+        let props7 = null;
+        let isNew7 = !w7;
+        if (w7 && w7.__widget__.renderPromise) {
+            if (w7.__widget__.isStarted) {
+                def6 = w7.updateProps(props7);
+            } else {
+                isNew7 = true
+                if (props7 === w7.__widget__.renderProps) {
+                    def6 = w7.__widget__.renderPromise;
+                } else {
+                    w7.destroy();
+                    w7 = false
+                }
+            }
+        }
+        if (!def6) {
+            if (w7) {
+                def6 = w7.updateProps(props7);
+            } else {
+                w7 = new context.widgets['ChildWidget'](owner, props7);
+                context.__widget__.cmap[key8] = w7.__widget__.id;
+                def6 = w7._start();
+            }
+        }
+        if (isNew7) {
+            def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: key8});c1[_5_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w7._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w7.destroy()}}; w7.__widget__.pvnode = pvnode;});
+        } else {
+            def6 = def6.then(()=>{if (w7.__widget__.isDestroyed) {return};let vnode;if (!w7.__widget__.vnode){vnode=w7.__widget__.pvnode} else { vnode=h(w7.__widget__.vnode.sel, {key: key8});vnode.elm=w7.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w7.el,a.elm);a.elm=w7.el;w7.__mount();},remove(){w7.destroy()}}}c1[_5_index]=vnode;});
+        }
+        extra.promises.push(def6);
+        c1.push({text: \`
+          \`});
+    }
+    c1.push({text: \`
+        \`});
+    return vn1;
+}"
+`;
+
+exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
+"function anonymous(context,extra
+) {
+    let owner = context;
+    let h = this.utils.h;
+    let c1 = [], p1 = {key:1};
+    let vn1 = h('div', p1, c1);
+    //WIDGET
+    let key5 = \\"somestring\\";
+    let _2_index = c1.length;
+    c1.push(null);
+    let def3;
+    let w4 = key5 in context.__widget__.cmap ? context.__widget__.children[context.__widget__.cmap[key5]] : false;
+    let props4 = {flag: context['state'].flag};
+    let isNew4 = !w4;
+    if (w4 && w4.__widget__.renderPromise) {
+        if (w4.__widget__.isStarted) {
+            def3 = w4.updateProps(props4);
+        } else {
+            isNew4 = true
+            if (props4 === w4.__widget__.renderProps) {
+                def3 = w4.__widget__.renderPromise;
+            } else {
+                w4.destroy();
+                w4 = false
+            }
+        }
+    }
+    if (!def3) {
+        if (w4) {
+            def3 = w4.updateProps(props4);
+        } else {
+            w4 = new context.widgets['child'](owner, props4);
+            context.__widget__.cmap[key5] = w4.__widget__.id;
+            def3 = w4._start();
+        }
+    }
+    if (isNew4) {
+        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: key5});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm},remove(){w4.destroy()}}; w4.__widget__.pvnode = pvnode;});
+    } else {
+        def3 = def3.then(()=>{if (w4.__widget__.isDestroyed) {return};let vnode;if (!w4.__widget__.vnode){vnode=w4.__widget__.pvnode} else { vnode=h(w4.__widget__.vnode.sel, {key: key5});vnode.elm=w4.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w4.el,a.elm);a.elm=w4.el;w4.__mount();},remove(){w4.destroy()}}}c1[_2_index]=vnode;});
+    }
+    extra.promises.push(def3);
+    return vn1;
+}"
+`;

demo/static/tests/core/event_bus.test.ts

@@ -0,0 +1,47 @@
+import { EventBus } from "../../src/ts/core/event_bus";
+
+describe("event bus behaviour", () => {
+  test("can subscribe and be notified", () => {
+    const bus = new EventBus();
+    let notified = false;
+    bus.on("event", {}, () => (notified = true));
+    expect(notified).toBe(false);
+    bus.trigger("event");
+    expect(notified).toBe(true);
+  });
+
+  test("callbacks are called with proper 'this'", () => {
+    expect.assertions(1);
+    const bus = new EventBus();
+    const owner = {};
+    bus.on("event", owner, function(this: any) {
+      expect(this).toBe(owner);
+    });
+    bus.trigger("event");
+  });
+
+  test("throw error if callback is undefined", () => {
+    expect.assertions(1);
+    const bus = new EventBus();
+    expect(() => bus.on("event", {}, <any>undefined)).toThrow(
+      `Missing callback`
+    );
+  });
+
+  test("can unsubscribe", () => {
+    const bus = new EventBus();
+    let notified = false;
+    let owner = {};
+    bus.on("event", owner, () => (notified = true));
+    bus.off("event", owner);
+    bus.trigger("event");
+    expect(notified).toBe(false);
+  });
+
+  test("arguments are properly propagated", () => {
+    expect.assertions(1);
+    const bus = new EventBus();
+    bus.on("event", {}, (arg: any) => expect(arg).toBe("hello world"));
+    bus.trigger("event", "hello world");
+  });
+});

demo/static/tests/core/qweb_vdom.test.ts

@@ -0,0 +1,829 @@
+import sdAttributes from "../../libs/snabbdom/src/modules/attributes";
+import sdListeners from "../../libs/snabbdom/src/modules/eventlisteners";
+import { init } from "../../libs/snabbdom/src/snabbdom";
+import { EvalContext, QWeb } from "../../src/ts/core/qweb_vdom";
+import { normalize } from "../helpers";
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+// We create before each test:
+// - qweb: a new QWeb instance
+
+const patch = init([sdAttributes, sdListeners]);
+
+let qweb: QWeb;
+
+beforeEach(() => {
+  qweb = new QWeb();
+});
+
+function trim(str: string): string {
+  return str.replace(/\s/g, "");
+}
+
+function renderToDOM(
+  qweb: QWeb,
+  template: string,
+  context: EvalContext = {},
+  extra?: any
+): HTMLElement | Text {
+  const vnode = qweb.render(template, context, extra);
+
+  // we snapshot here the compiled code. This is useful to prevent unwanted code
+  // change.
+  expect(qweb.templates[template].toString()).toMatchSnapshot();
+
+  if (vnode.sel === undefined) {
+    return document.createTextNode(vnode.text!);
+  }
+  const node = document.createElement(vnode.sel!);
+  const result = patch(node, vnode);
+  return result.elm as HTMLElement;
+}
+
+function renderToString(
+  qweb: QWeb,
+  t: string,
+  context: EvalContext = {}
+): string {
+  const node = renderToDOM(qweb, t, context);
+  return node instanceof Text ? node.textContent! : node.outerHTML;
+}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe("static templates", () => {
+  test("simple string", () => {
+    qweb.addTemplate("test", "<t>hello vdom</t>");
+    expect(renderToString(qweb, "test")).toBe("hello vdom");
+  });
+
+  test("empty div", () => {
+    qweb.addTemplate("test", "<div></div>");
+    expect(renderToString(qweb, "test")).toBe("<div></div>");
+  });
+
+  test("div with a text node", () => {
+    qweb.addTemplate("test", "<div>word</div>");
+    expect(renderToString(qweb, "test")).toBe("<div>word</div>");
+  });
+
+  test("div with a span child node", () => {
+    qweb.addTemplate("test", "<div><span>word</span></div>");
+    expect(renderToString(qweb, "test")).toBe("<div><span>word</span></div>");
+  });
+});
+
+describe("error handling", () => {
+  test("invalid xml", () => {
+    expect(() => qweb.addTemplate("test", "<div>")).toThrow(
+      "Invalid XML in template"
+    );
+  });
+
+  test("template with text node and tag", () => {
+    qweb.addTemplate("test", `<t>text<span>other node</span></t>`);
+
+    expect(() => renderToString(qweb, "test")).toThrow(
+      "A template should not have more than one root node"
+    );
+  });
+
+  test("nice warning if no template with given name", () => {
+    expect(() => qweb.render("invalidname")).toThrow("does not exist");
+  });
+
+  test("cannot add twice the same template", () => {
+    qweb.addTemplate("test", `<t></t>`);
+    expect(() => qweb.addTemplate("test", "<div/>")).toThrow("already defined");
+  });
+});
+
+describe("t-esc", () => {
+  test("literal", () => {
+    qweb.addTemplate("test", `<span><t t-esc="'ok'"/></span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
+  });
+
+  test("variable", () => {
+    qweb.addTemplate("test", `<span><t t-esc="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "ok" })).toBe("<span>ok</span>");
+  });
+
+  test.skip("escaping", () => {
+    qweb.addTemplate("test", `<span><t t-esc="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "<ok>" })).toBe(
+      "<span>&lt;ok&gt;</span>"
+    );
+  });
+
+  test("escaping on a node", () => {
+    qweb.addTemplate("test", `<span t-esc="'ok'"/>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
+  });
+
+  test("escaping on a node with a body", () => {
+    qweb.addTemplate("test", `<span t-esc="'ok'">nope</span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
+  });
+
+  test("escaping on a node with a body, as a default", () => {
+    qweb.addTemplate("test", `<span t-esc="var">nope</span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>nope</span>");
+  });
+});
+
+describe("t-raw", () => {
+  test("literal", () => {
+    qweb.addTemplate("test", `<span><t t-raw="'ok'"/></span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
+  });
+
+  test("variable", () => {
+    qweb.addTemplate("test", `<span><t t-raw="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "ok" })).toBe("<span>ok</span>");
+  });
+
+  test("not escaping", () => {
+    qweb.addTemplate("test", `<div><t t-raw="var"/></div>`);
+    expect(renderToString(qweb, "test", { var: "<ok></ok>" })).toBe(
+      "<div><ok></ok></div>"
+    );
+  });
+
+  test("t-raw and another sibling node", () => {
+    qweb.addTemplate("test", `<span><span>hello</span><t t-raw="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "<ok>world</ok>" })).toBe(
+      "<span><span>hello</span><ok>world</ok></span>"
+    );
+  });
+});
+
+describe("t-set", () => {
+  test("set from attribute literal", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="'ok'"/><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test")).toBe("<div>ok</div>");
+  });
+
+  test("set from body literal", () => {
+    qweb.addTemplate(
+      "test",
+      `<t><t t-set="value">ok</t><t t-esc="value"/></t>`
+    );
+    expect(renderToString(qweb, "test")).toBe("ok");
+  });
+
+  test("set from attribute lookup", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="stuff" t-value="value"/><t t-esc="stuff"/></div>`
+    );
+    expect(renderToString(qweb, "test", { value: "ok" })).toBe("<div>ok</div>");
+  });
+
+  test("set from body lookup", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="stuff"><t t-esc="value"/></t><t t-esc="stuff"/></div>`
+    );
+    expect(renderToString(qweb, "test", { value: "ok" })).toBe("<div>ok</div>");
+  });
+
+  test("set from empty body", () => {
+    qweb.addTemplate("test", `<div><t t-set="stuff"/><t t-esc="stuff"/></div>`);
+    expect(renderToString(qweb, "test")).toBe("<div></div>");
+  });
+
+  test("value priority", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="1">2</t><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test")).toBe("<div>1</div>");
+  });
+
+  test("evaluate value expression", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="1 + 2"/><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test")).toBe("<div>3</div>");
+  });
+
+  test("evaluate value expression, part 2", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="somevariable + 2"/><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test", { somevariable: 43 })).toBe(
+      "<div>45</div>"
+    );
+  });
+});
+
+describe("t-if", () => {
+  test("boolean value true condition", () => {
+    qweb.addTemplate("test", `<div><t t-if="condition">ok</t></div>`);
+    expect(renderToString(qweb, "test", { condition: true })).toBe(
+      "<div>ok</div>"
+    );
+  });
+
+  test("boolean value false condition", () => {
+    qweb.addTemplate("test", `<div><t t-if="condition">ok</t></div>`);
+    expect(renderToString(qweb, "test", { condition: false })).toBe(
+      "<div></div>"
+    );
+  });
+
+  test("boolean value condition missing", () => {
+    qweb.addTemplate("test", `<span><t t-if="condition">fail</t></span>`);
+    expect(renderToString(qweb, "test")).toBe("<span></span>");
+  });
+
+  test("boolean value condition elif", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-if="color == 'black'">black pearl</t>
+        <t t-elif="color == 'yellow'">yellow submarine</t>
+        <t t-elif="color == 'red'">red is dead</t>
+        <t t-else="">beer</t></div>
+    `
+    );
+    expect(renderToString(qweb, "test", { color: "red" })).toBe(
+      "<div>red is dead</div>"
+    );
+  });
+
+  test("boolean value condition else", () => {
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <span>begin</span>
+        <t t-if="condition">ok</t>
+        <t t-else="">ok-else</t>
+        <span>end</span>
+      </div>
+    `
+    );
+    const result = trim(renderToString(qweb, "test", { condition: true }));
+    expect(result).toBe("<div><span>begin</span>ok<span>end</span></div>");
+  });
+
+  test("boolean value condition false else", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><span>begin</span><t t-if="condition">fail</t>
+          <t t-else="">fail-else</t><span>end</span></div>
+        `
+    );
+    const result = trim(renderToString(qweb, "test", { condition: false }));
+    expect(result).toBe(
+      "<div><span>begin</span>fail-else<span>end</span></div>"
+    );
+  });
+
+  test("can use some boolean operators in expressions", () => {
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-if="cond1 and cond2">and</t>
+        <t t-if="cond1 and cond3">nope</t>
+        <t t-if="cond1 or cond3">or</t>
+        <t t-if="cond3 or cond4">nope</t>
+        <t t-if="m gt 3">mgt</t>
+        <t t-if="n gt 3">ngt</t>
+        <t t-if="m lt 3">mlt</t>
+        <t t-if="n lt 3">nlt</t>
+      </div>`
+    );
+    const context = {
+      cond1: true,
+      cond2: true,
+      cond3: false,
+      cond4: false,
+      m: 5,
+      n: 2
+    };
+    expect(normalize(renderToString(qweb, "test", context))).toBe(
+      "<div>andormgtnlt</div>"
+    );
+  });
+});
+
+describe("attributes", () => {
+  test("static attributes", () => {
+    qweb.addTemplate("test", `<div foo="a" bar="b" baz="c"/>`);
+    const result = renderToString(qweb, "test");
+    const expected = `<div foo="a" bar="b" baz="c"></div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("static attributes with dashes", () => {
+    qweb.addTemplate("test", `<div aria-label="Close"/>`);
+    const result = renderToString(qweb, "test");
+    const expected = `<div aria-label="Close"></div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("static attributes on void elements", () => {
+    qweb.addTemplate("test", `<img src="/test.jpg" alt="Test"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<img src="/test.jpg" alt="Test">`);
+  });
+
+  test("dynamic attributes", () => {
+    qweb.addTemplate("test", `<div t-att-foo="'bar'"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("dynamic attribute with a dash", () => {
+    qweb.addTemplate("test", `<div t-att-data-action-id="id"/>`);
+    const result = renderToString(qweb, "test", { id: 32 });
+    expect(result).toBe(`<div data-action-id="32"></div>`);
+  });
+
+  test("dynamic formatted attributes with a dash", () => {
+    qweb.addTemplate("test", `<div t-attf-aria-label="Some text {{id}}"/>`);
+    const result = renderToString(qweb, "test", { id: 32 });
+    expect(result).toBe(`<div aria-label="Some text 32"></div>`);
+  });
+
+  test("fixed variable", () => {
+    qweb.addTemplate("test", `<div t-att-foo="value"/>`);
+    const result = renderToString(qweb, "test", { value: "ok" });
+    expect(result).toBe(`<div foo="ok"></div>`);
+  });
+
+  test("dynamic attribute falsy variable ", () => {
+    qweb.addTemplate("test", `<div t-att-foo="value"/>`);
+    const result = renderToString(qweb, "test", { value: false });
+    expect(result).toBe(`<div></div>`);
+  });
+
+  test("tuple literal", () => {
+    qweb.addTemplate("test", `<div t-att="['foo', 'bar']"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("tuple variable", () => {
+    qweb.addTemplate("test", `<div t-att="value"/>`);
+    const result = renderToString(qweb, "test", { value: ["foo", "bar"] });
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("object", () => {
+    qweb.addTemplate("test", `<div t-att="value"/>`);
+    const result = renderToString(qweb, "test", {
+      value: { a: 1, b: 2, c: 3 }
+    });
+    expect(result).toBe(`<div a="1" b="2" c="3"></div>`);
+  });
+
+  test("format literal", () => {
+    qweb.addTemplate("test", `<div t-attf-foo="bar"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("format value", () => {
+    qweb.addTemplate("test", `<div t-attf-foo="b{{value}}r"/>`);
+    const result = renderToString(qweb, "test", { value: "a" });
+    expect(result).toBe(`<div foo="bar"></div>`);
+  });
+
+  test("from variables set previously", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="abc" t-value="'def'"/><span t-att-class="abc"/></div>`
+    );
+    const result = renderToString(qweb, "test");
+    expect(result).toBe('<div><span class="def"></span></div>');
+  });
+
+  test.skip("from object variables set previously", () => {
+    // qweb is stupid and does not support this.
+    // To do that properly, we need to extend the formatExpression method to
+    // be able to deal with objects.  I think that it is not easy:
+    // it should properly deal with stuff like {a:expr, b: {c: otherexpr}}
+    qweb.addTemplate(
+      "test",
+      `<div t-debug="1"><t t-set="o" t-value="{a:'b'}"/><span t-att-class="o.a"/></div>`
+    );
+    const result = renderToString(qweb, "test");
+    expect(result).toBe('<div><span class="b"></span></div>');
+  });
+
+  test("format expression", () => {
+    qweb.addTemplate("test", `<div t-attf-foo="{{value + 37}}"/>`);
+    const result = renderToString(qweb, "test", { value: 5 });
+    expect(result).toBe(`<div foo="42"></div>`);
+  });
+
+  test("format multiple", () => {
+    qweb.addTemplate(
+      "test",
+      `<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>`
+    );
+    const result = renderToString(qweb, "test", {
+      value1: 0,
+      value2: 1,
+      value3: 2
+    });
+    expect(result).toBe(`<div foo="a 0 is 1 of 2 ]"></div>`);
+  });
+
+  test.skip("various escapes", () => {
+    // not needed??
+    qweb.addTemplate(
+      "test",
+      `
+         <div foo="&lt;foo"
+            t-att-bar="bar"
+            t-attf-baz="&lt;{{baz}}&gt;"
+            t-att="qux"/>
+        `
+    );
+    const result = renderToString(qweb, "test", {
+      bar: 0,
+      baz: 1,
+      qux: { qux: "<>" }
+    });
+    const expected = `<div foo="&lt;foo" bar="&lt;bar&gt;" baz="&lt;&quot;&lt;baz&gt;&quot;&gt;" qux="&lt;&gt;"></div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("t-att-class and class should combine together", () => {
+    qweb.addTemplate("test", `<div class="hello" t-att-class="value"/>`);
+    const result = renderToString(qweb, "test", { value: "world" });
+    expect(result).toBe(`<div class="hello world"></div>`);
+  });
+});
+
+describe("t-call (template calling", () => {
+  test("basic caller", () => {
+    qweb.addTemplate("_basic-callee", "<div>ok</div>");
+    qweb.addTemplate("caller", '<t t-call="_basic-callee"/>');
+    const expected = "<div>ok</div>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+  });
+
+  test("t-call not allowed on a non t node", () => {
+    qweb.addTemplate("_basic-callee", "<t>ok</t>");
+    qweb.addTemplate("caller", '<div t-call="_basic-callee"/>');
+    expect(() => renderToString(qweb, "caller")).toThrow("Invalid tag");
+  });
+
+  test("with unused body", () => {
+    qweb.addTemplate("_basic-callee", "<div>ok</div>");
+    qweb.addTemplate("caller", '<t t-call="_basic-callee">WHEEE</t>');
+    const expected = "<div>ok</div>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+  });
+
+  test("with unused setbody", () => {
+    qweb.addTemplate("_basic-callee", "<div>ok</div>");
+    qweb.addTemplate(
+      "caller",
+      '<t t-call="_basic-callee"><t t-set="qux" t-value="3"/></t>'
+    );
+    const expected = "<div>ok</div>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+  });
+
+  test("with used body", () => {
+    qweb.addTemplate("_callee-printsbody", '<h1><t t-esc="0"/></h1>');
+    qweb.addTemplate("caller", '<t t-call="_callee-printsbody">ok</t>');
+    const expected = "<h1>ok</h1>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+  });
+
+  test("with used set body", () => {
+    qweb.addTemplate("_callee-uses-foo", '<t t-esc="foo"/>');
+    qweb.addTemplate(
+      "caller",
+      `
+        <span><t t-call="_callee-uses-foo"><t t-set="foo" t-value="'ok'"/></t></span>`
+    );
+    const expected = "<span>ok</span>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+  });
+
+  test("inherit context", () => {
+    qweb.addTemplate("_callee-uses-foo", '<t t-esc="foo"/>');
+    qweb.addTemplate(
+      "caller",
+      `
+        <div><t t-set="foo" t-value="1"/><t t-call="_callee-uses-foo"/></div>`
+    );
+    const expected = "<div>1</div>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
+  });
+
+  test("scoped parameters", () => {
+    qweb.addTemplate("_basic-callee", `<t>ok</t>`);
+    qweb.addTemplate(
+      "caller",
+      `
+        <div>
+            <t t-call="_basic-callee">
+                <t t-set="foo" t-value="42"/>
+            </t>
+            <t t-esc="foo"/>
+        </div>
+      `
+    );
+    const expected = "<div>ok</div>";
+    expect(trim(renderToString(qweb, "caller"))).toBe(expected);
+  });
+});
+
+describe("foreach", () => {
+  test("iterate on items", () => {
+    qweb.addTemplate(
+      "test",
+      `
+      <div>
+        <t t-foreach="[3, 2, 1]" t-as="item">
+          [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+        </t>
+    </div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
+    const expected = `<div>[0:33][1:22][2:11]</div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("iterate on items (on a element node)", () => {
+    qweb.addTemplate(
+      "test",
+      `
+      <div>
+        <span t-foreach="[1, 2]" t-as="item"><t t-esc="item"/></span>
+    </div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
+    const expected = `<div><span>1</span><span>2</span></div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("iterate, position", () => {
+    qweb.addTemplate(
+      "test",
+      `
+      <div>
+        <t t-foreach="5" t-as="elem">
+          -<t t-if="elem_first"> first</t><t t-if="elem_last"> last</t> (<t t-esc="elem_parity"/>)
+        </t>
+      </div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
+    const expected = `<div>-first(even)-(odd)-(even)-(odd)-last(even)</div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("iterate, integer param", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-foreach="3" t-as="item">
+        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+      </t></div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
+    const expected = `<div>[0:00][1:11][2:22]</div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("iterate, dict param", () => {
+    qweb.addTemplate(
+      "test",
+      `
+      <div>
+        <t t-foreach="value" t-as="item">
+          [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/> - <t t-esc="item_parity"/>]
+        </t>
+      </div>`
+    );
+    const result = trim(
+      renderToString(qweb, "test", { value: { a: 1, b: 2, c: 3 } })
+    );
+    const expected = `<div>[0:a1-even][1:b2-odd][2:c3-even]</div>`;
+    expect(result).toBe(expected);
+  });
+
+  test("does not pollute the rendering context", () => {
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-foreach="[1]" t-as="item"><t t-esc="item"/></t>
+      </div>`
+    );
+    const context = {};
+    renderToString(qweb, "test", context);
+    expect(Object.keys(context).length).toBe(0);
+  });
+
+  test("throws error if invalid loop expression", () => {
+    qweb.addTemplate(
+      "test",
+      `<div><t t-foreach="abc" t-as="item"><span/></t></div>`
+    );
+    expect(() => qweb.render("test")).toThrow("Invalid loop expression");
+  });
+});
+
+describe("misc", () => {
+  test("global", () => {
+    qweb.addTemplate("_callee-asc", `<Año t-att-falló="'agüero'" t-raw="0"/>`);
+    qweb.addTemplate(
+      "_callee-uses-foo",
+      `<span t-esc="foo">foo default</span>`
+    );
+    qweb.addTemplate(
+      "_callee-asc-toto",
+      `<div t-raw="toto">toto default</div>`
+    );
+    qweb.addTemplate(
+      "caller",
+      `
+      <div>
+        <t t-foreach="[4,5,6]" t-as="value">
+          <span t-esc="value"/>
+          <t t-call="_callee-asc">
+            <t t-call="_callee-uses-foo">
+                <t t-set="foo" t-value="'aaa'"/>
+            </t>
+            <t t-call="_callee-uses-foo"/>
+            <t t-set="foo" t-value="'bbb'"/>
+            <t t-call="_callee-uses-foo"/>
+          </t>
+        </t>
+        <t t-call="_callee-asc-toto"/>
+      </div>
+    `
+    );
+    const result = trim(renderToString(qweb, "caller"));
+    const expected = trim(`
+      <div>
+        <span>4</span>
+        <año falló="agüero">
+          <span>aaa</span>
+          <span>foo default</span>
+          <span>bbb</span>
+        </año>
+
+        <span>5</span>
+        <año falló="agüero">
+          <span>aaa</span>
+          <span>foo default</span>
+          <span>bbb</span>
+        </año>
+
+        <span>6</span>
+        <año falló="agüero">
+          <span>aaa</span>
+          <span>foo default</span>
+          <span>bbb</span>
+        </año>
+
+        <div>toto default</div>
+      </div>
+    `);
+    expect(result).toBe(expected);
+  });
+});
+
+describe("t-on", () => {
+  test("can bind event handler", () => {
+    qweb.addTemplate("test", `<button t-on-click="add">Click</button>`);
+    let a = 1;
+    const node = renderToDOM(
+      qweb,
+      "test",
+      {
+        add() {
+          a = 3;
+        }
+      },
+      { handlers: [] }
+    );
+    (<HTMLElement>node).click();
+    expect(a).toBe(3);
+  });
+
+  test("can bind two event handlers", () => {
+    qweb.addTemplate(
+      "test",
+      `<button t-on-click="handleClick" t-on-dblclick="handleDblClick">Click</button>`
+    );
+    let steps: string[] = [];
+    const node = renderToDOM(
+      qweb,
+      "test",
+      {
+        handleClick() {
+          steps.push("click");
+        },
+        handleDblClick() {
+          steps.push("dblclick");
+        }
+      },
+      { handlers: [] }
+    );
+    expect(steps).toEqual([]);
+    (<HTMLElement>node).click();
+    expect(steps).toEqual(["click"]);
+    (<HTMLElement>node).dispatchEvent(new Event("dblclick"));
+    expect(steps).toEqual(["click", "dblclick"]);
+  });
+
+  test("can bind handlers with arguments", () => {
+    qweb.addTemplate("test", `<button t-on-click="add(5)">Click</button>`);
+    let a = 1;
+    const node = renderToDOM(
+      qweb,
+      "test",
+      {
+        add(n) {
+          a = a + n;
+        }
+      },
+      { handlers: [] }
+    );
+    (<HTMLElement>node).click();
+    expect(a).toBe(6);
+  });
+
+  test("can bind handlers with loop variable as argument", () => {
+    expect.assertions(2);
+    qweb.addTemplate(
+      "test",
+      `
+      <ul>
+        <li t-foreach="['someval']" t-as="action"><a t-on-click="activate(action)">link</a></li>
+      </ul>`
+    );
+    const node = renderToDOM(
+      qweb,
+      "test",
+      {
+        activate(action) {
+          expect(action).toBe("someval");
+        }
+      },
+      { handlers: [] }
+    );
+    (<HTMLElement>node).getElementsByTagName("a")[0].click();
+  });
+
+  test("handler is bound to proper owner", () => {
+    expect.assertions(2);
+    qweb.addTemplate("test", `<button t-on-click="add">Click</button>`);
+    let owner = {
+      add() {
+        expect(this).toBe(owner);
+      }
+    };
+    const node = renderToDOM(qweb, "test", owner, { handlers: [] });
+    (<HTMLElement>node).click();
+  });
+});
+
+describe("t-ref", () => {
+  test("can get a ref on a node", () => {
+    qweb.addTemplate("test", `<div><span t-ref="myspan"/></div>`);
+    let refs: any = {};
+    renderToDOM(qweb, "test", { refs });
+    expect(refs.myspan.tagName).toBe("SPAN");
+  });
+});
+
+describe("loading templates", () => {
+  test("can load a few templates from a xml string", () => {
+    const data = `
+      <?xml version="1.0" encoding="UTF-8"?>
+      <templates id="template" xml:space="preserve">
+
+        <t t-name="items"><li>ok</li><li>foo</li></t>
+
+        <ul t-name="main"><t t-call="items"/></ul>
+      </templates>`;
+    qweb.loadTemplates(data);
+    const result = renderToString(qweb, "main");
+    expect(result).toBe("<ul><li>ok</li><li>foo</li></ul>");
+  });
+
+  test("does not crash if string does not have templates", () => {
+    const data = "";
+    qweb.loadTemplates(data);
+    expect(qweb.processedTemplates).toEqual({});
+  });
+});

demo/static/tests/core/utils.test.ts

@@ -0,0 +1,93 @@
+import {
+  escape,
+  htmlTrim,
+  idGenerator,
+  memoize,
+  debounce,
+  findInTree
+} from "../../src/ts/core/utils";
+
+describe("escape", () => {
+  test("normal strings", () => {
+    const text = "abc";
+    expect(escape(text)).toBe(text);
+  });
+
+  test("special symbols", () => {
+    const text = "<ok>";
+    expect(escape(text)).toBe("&lt;ok&gt;");
+  });
+});
+
+describe("htmlTrim", () => {
+  test("basic use", () => {
+    expect(htmlTrim("abc")).toBe("abc");
+    expect(htmlTrim("  abc")).toBe(" abc");
+    expect(htmlTrim("abc  ")).toBe("abc ");
+    expect(htmlTrim("   abc   ")).toBe(" abc ");
+    expect(htmlTrim("abc\n   ")).toBe("abc ");
+    expect(htmlTrim("\n ")).toBe(" ");
+    expect(htmlTrim(" \n ")).toBe(" ");
+    expect(htmlTrim("  ")).toBe(" ");
+    expect(htmlTrim("")).toBe("");
+  });
+});
+
+describe("idGenerator", () => {
+  test("basic use", () => {
+    let gen = idGenerator();
+    expect(gen()).toBe(1);
+    expect(gen()).toBe(2);
+    expect(gen()).toBe(3);
+  });
+});
+
+describe("memoize", () => {
+  test("return correct value", () => {
+    const f = memoize((a, b) => a + b);
+    expect(f(1, 3)).toBe(4);
+  });
+
+  test("does not recompute if not needed", () => {
+    let nCalls = 0;
+    function origFunction(a: number, b: number): number {
+      nCalls++;
+      return a + b;
+    }
+    const memoized = memoize(origFunction);
+
+    expect(memoized(1, 3)).toBe(4);
+    expect(memoized(1, 3)).toBe(4);
+    expect(nCalls).toBe(1);
+  });
+});
+
+describe("debounce", () => {
+  test("works as expected", () => {
+    jest.useFakeTimers();
+    let n = 0;
+    let f = debounce(() => n++, 100);
+    expect(n).toBe(0);
+    f();
+    expect(n).toBe(0);
+    f();
+    expect(n).toBe(0);
+    jest.advanceTimersByTime(90);
+    expect(n).toBe(0);
+    jest.advanceTimersByTime(20);
+    expect(n).toBe(1);
+  });
+});
+
+describe("findInTree", () => {
+  test("can find stuff in tree", () => {
+    let tree = {
+      id: 1,
+      children: [{ id: 2, children: [] }, { id: 3, key: "hello", children: [] }]
+    };
+    const match1 = findInTree(tree, t => t.id === 3);
+    expect((<any>match1).key).toBe("hello");
+    const match2 = findInTree(tree, t => t.id === 4);
+    expect(match2).toBe(null);
+  });
+});

demo/static/tests/helpers/index.ts

@@ -0,0 +1,11 @@
+export { MockRouter } from "./mock_router";
+export { MockServer } from "./mock_server";
+export { makeMenuInfo, makeTestData, TestData } from "./test_data";
+export { makeTestEnv, makeTestWEnv, TestEnv, TestInfo } from "./test_env";
+export {
+  makeDeferred,
+  makeTestFixture,
+  nextMicroTick,
+  nextTick,
+  normalize
+} from "./test_utils";

demo/static/tests/helpers/mock_router.ts

@@ -0,0 +1,22 @@
+import { Callback } from "../../src/ts/core/event_bus";
+import { IRouter, Query, RouterEvent } from "../../src/ts/services/router";
+
+export class MockRouter implements IRouter {
+  currentQuery: Query;
+
+  constructor(query: Query = {}) {
+    this.currentQuery = query;
+  }
+
+  navigate(query: Query) {
+    this.currentQuery = query;
+  }
+  on(event: RouterEvent, owner: any, callback: Callback) {}
+  getQuery(): Query {
+    return this.currentQuery;
+  }
+
+  formatURL(path: string, query: Query): string {
+    return "";
+  }
+}

demo/static/tests/helpers/mock_server.ts

@@ -0,0 +1,17 @@
+import { TestData } from "./test_data";
+
+export class MockServer {
+  data: TestData;
+
+  constructor(data: TestData) {
+    this.data = data;
+  }
+
+  rpc(route: string, params: any): Promise<any> {
+    if (route === "web/action/load") {
+      const action = this.data.actions.find(a => a.id === params.action_id);
+      return Promise.resolve(action);
+    }
+    return Promise.resolve(true);
+  }
+}

demo/static/tests/helpers/test_data.ts

@@ -0,0 +1,223 @@
+import { BaseMenuItem, getMenuInfo } from "../../src/ts/loaders";
+import { ActionDescription } from "../../src/ts/store/action_manager_mixin";
+import { MenuInfo } from "../../src/ts/store/store";
+
+export interface TestData {
+  menuInfo: MenuInfo;
+  actions: ActionDescription[];
+}
+
+export function makeTestData(): TestData {
+  return {
+    menuInfo: makeMenuInfo(),
+    actions: makeActionData()
+  };
+}
+
+export function makeMenuInfo(): MenuInfo {
+  const items: BaseMenuItem[] = [
+    {
+      id: 96,
+      name: "Discuss",
+      parent_id: false,
+      action: "ir.actions.client,131",
+      icon: "fa fa-comment",
+      children: []
+    },
+    {
+      id: 205,
+      name: "Notes",
+      parent_id: false,
+      action: "ir.actions.act_window,250",
+      icon: "fa fa-pen",
+      children: []
+    },
+    {
+      id: 409,
+      name: "CRM",
+      parent_id: false,
+      action: "ir.actions.act_window,597",
+      icon: "fa fa-handshake",
+      children: [
+        {
+          id: 418,
+          name: "Sales",
+          parent_id: 409,
+          action: false,
+          icon: false,
+          children: [
+            {
+              id: 423,
+              name: "My Pipeline",
+              parent_id: 418,
+              action: "ir.actions.act_window,597",
+              icon: false,
+              children: []
+            },
+            {
+              id: 812,
+              name: "My Quotations",
+              parent_id: 418,
+              action: "ir.actions.act_window,1051",
+              icon: false,
+              children: []
+            },
+            {
+              id: 419,
+              name: "Team Pipelines",
+              parent_id: 418,
+              action: "ir.actions.act_window,275",
+              icon: false,
+              children: []
+            }
+          ]
+        },
+        {
+          id: 421,
+          name: "Leads",
+          parent_id: 409,
+          action: false,
+          icon: false,
+          children: [
+            {
+              id: 422,
+              name: "Leads",
+              parent_id: 421,
+              action: "ir.actions.act_window,595",
+              icon: false,
+              children: []
+            },
+            {
+              id: 752,
+              name: "Scoring Rules",
+              parent_id: 421,
+              icon: false,
+              action: "ir.actions.act_window,1083",
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ];
+  return getMenuInfo(items);
+}
+
+function makeActionData(): ActionDescription[] {
+  return [
+    {
+      id: 131,
+      type: "ir.actions.client",
+      target: "current",
+      name: "Discuss",
+      tag: "mail.discuss"
+    },
+    {
+      id: 250,
+      type: "ir.actions.act_window",
+      name: "Notes",
+      target: "current",
+      domain: false,
+      context: "{}",
+      views: [[false, "kanban"], [false, "list"], [false, "form"]],
+      res_id: 0,
+      res_model: "note.note"
+    },
+    {
+      id: 597,
+      type: "ir.actions.act_window",
+      name: "Pipeline",
+      target: "current",
+      domain: false,
+      context: { default_team_id: 1 },
+      views: [[2103, "kanban"], [2106, "list"], [2105, "form"]],
+      res_id: 0,
+      res_model: "crm.lead"
+    },
+    {
+      id: 1051,
+      type: "ir.actions.act_window",
+      name: "Quotations",
+      target: "current",
+      domain: false,
+      context: "{'search_default_my_quotation': 1}",
+      views: [
+        [3387, "list"],
+        [3385, "kanban"],
+        [3389, "form"],
+        [3382, "calendar"],
+        [3384, "pivot"],
+        [3383, "graph"]
+      ],
+      res_id: 0,
+      res_model: "sale.order"
+    },
+    {
+      id: 275,
+      type: "ir.actions.act_window",
+      name: "Team Pipelines",
+      target: "current",
+      context: "{}",
+      domain: "[('use_opportunities', '=', True)]",
+      views: [[false, "kanban"], [false, "form"]],
+      res_id: 0,
+      res_model: "crm.team"
+    },
+    {
+      id: 595,
+      type: "ir.actions.act_window",
+      name: "Leads",
+      target: "current",
+      context:
+        "{ 'default_type':'lead', 'search_default_type': 'lead', 'search_default_to_process':1,  }",
+      domain: "['|', ('type','=','lead'), ('type','=',False)]",
+      views: [
+        [2098, "list"],
+        [2099, "kanban"],
+        [2100, "calendar"],
+        [2108, "pivot"],
+        [2107, "graph"],
+        [false, "form"]
+      ],
+      res_id: 0,
+      res_model: "crm.lead"
+    },
+    {
+      id: 1083,
+      type: "ir.actions.act_window",
+      name: "Scores",
+      target: "current",
+      context: "{}",
+      domain: false,
+      views: [[false, "list"], [false, "kanban"], [false, "form"]],
+      res_id: 0,
+      res_model: "website.crm.score"
+    }
+  ];
+}
+
+// function loadTemplates(): Promise<string> {
+//   return new Promise((resolve, reject) => {
+//     readFile("web/static/src/xml/templates.xml", "utf-8", (err, result) => {
+//       resolve(result);
+//     });
+//   });
+// }
+
+// export async function makeTestData(): Promise<TestData> {
+//   if (!templates) {
+//     templates = await loadTemplates();
+//   }
+//   const _actionRegistry: typeof actionRegistry = new Registry();
+//   (<any>_actionRegistry).map = Object.assign({}, (<any>actionRegistry).map);
+//   const _viewRegistry: typeof actionRegistry = new Registry();
+//   (<any>_viewRegistry).map = Object.assign({}, (<any>actionRegistry).map);
+
+//   return {
+//     menuInfo: makeMenuInfo(),
+//     actions: makeActionData(),
+//     actionRegistry: _actionRegistry,
+//     viewRegistry: _viewRegistry,
+//     templates
+//   };
+// }

demo/static/tests/helpers/test_env.ts

@@ -0,0 +1,85 @@
+import { readFileSync } from "fs";
+import { WEnv } from "../../src/ts/core/component";
+import { QWeb } from "../../src/ts/core/qweb_vdom";
+import { Registry } from "../../src/ts/core/registry";
+import { Env, InitData, linkStoreToEnv, makeEnv } from "../../src/ts/env";
+import {
+  actionRegistry as AR,
+  viewRegistry as VR
+} from "../../src/ts/registries";
+import { Store } from "../../src/ts/store/store";
+import { MockRouter } from "./mock_router";
+import { MockServer } from "./mock_server";
+import { makeTestData, TestData } from "./test_data";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export interface TestEnv extends Env {
+  store: Store;
+}
+
+export interface TestInfo extends Partial<InitData>, Partial<TestData> {
+  mockRPC?(this: MockServer, route: string, params: any): Promise<any>;
+}
+
+//------------------------------------------------------------------------------
+// Code
+//------------------------------------------------------------------------------
+
+const TEMPLATES = readFileSync("demo/static/src/xml/templates.xml", "utf-8");
+
+export function makeTestWEnv(): WEnv {
+  return {
+    qweb: new QWeb()
+  };
+}
+
+export function makeTestEnv(info: TestInfo = {}): TestEnv {
+  const templates = info.templates || TEMPLATES;
+  const testData: TestData = makeTestData();
+  if (info.menuInfo) {
+    testData.menuInfo = info.menuInfo;
+  }
+  if (info.actions) {
+    testData.actions = info.actions;
+  }
+
+  const actionRegistry = info.actionRegistry || cloneRegistry(AR);
+  const viewRegistry = info.viewRegistry || cloneRegistry(VR);
+
+  let rpc = info.services && info.services.rpc;
+  if (!rpc) {
+    const mockServer = new MockServer(testData);
+    rpc = function(route: string, params: any): Promise<any> {
+      if (info.mockRPC) {
+        return info.mockRPC.call(mockServer, route, params);
+      }
+      return mockServer.rpc(route, params);
+    };
+  }
+
+  const router = (info.services && info.services.router) || new MockRouter();
+  const initData: InitData = {
+    services: {
+      rpc,
+      router
+    },
+    actionRegistry,
+    viewRegistry,
+    templates
+  };
+
+  const env = makeEnv(initData);
+  const store = new Store(env, testData.menuInfo);
+  linkStoreToEnv(env, store);
+  const testEnv = Object.assign({ store }, env);
+  return testEnv;
+}
+
+function cloneRegistry<T>(registry: Registry<T>): Registry<T> {
+  const clone: Registry<T> = new Registry();
+  (<any>clone).map = Object.assign({}, (<any>registry).map);
+  return clone;
+}

demo/static/tests/helpers/test_utils.ts

@@ -0,0 +1,33 @@
+export function nextMicroTick(): Promise<void> {
+  return Promise.resolve();
+}
+
+export function nextTick(): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve));
+}
+
+export function makeTestFixture() {
+  let fixture = document.createElement("div");
+  document.body.appendChild(fixture);
+  return fixture;
+}
+
+export function normalize(str: string): string {
+  return str.replace(/\s+/g, "");
+}
+
+interface Deferred extends Promise<any> {
+  resolve(val?: any): void;
+  reject(): void;
+}
+
+export function makeDeferred(): Deferred {
+  let resolve, reject;
+  let def = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  (<Deferred>def).resolve = resolve;
+  (<Deferred>def).reject = reject;
+  return <Deferred>def;
+}

demo/static/tests/store/action_manager_mixin_test.ts

@@ -0,0 +1,46 @@
+import { Registry } from "../../src/ts/core/registry";
+import { makeTestEnv } from "../helpers";
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+test("does not reload action if already done", async () => {
+  const routes: string[] = [];
+  const testEnv = makeTestEnv({
+    mockRPC(route, params) {
+      routes.push(route);
+      return this.rpc(route, params);
+    }
+  });
+
+  expect(routes).toEqual([]);
+
+  testEnv.store.doAction(131);
+
+  expect(routes).toEqual(["web/action/load"]);
+
+  testEnv.store.doAction(131);
+
+  expect(routes).toEqual(["web/action/load"]);
+});
+
+test("display a warning if client action is not in registry", async () => {
+  const testEnv = makeTestEnv({ actionRegistry: new Registry() });
+
+  await testEnv.store.doAction(131);
+
+  const notifs = testEnv.store.state.notifications;
+  expect(notifs.length).toBe(1);
+  expect(notifs[0].type).toBe("warning");
+});
+
+test("display a warning if view is not in registry", async () => {
+  const testEnv = makeTestEnv({ viewRegistry: new Registry() });
+
+  await testEnv.store.doAction(250);
+
+  const notifs = testEnv.store.state.notifications;
+  expect(notifs.length).toBe(1);
+  expect(notifs[0].type).toBe("warning");
+});

demo/static/tests/store/store.test.ts

@@ -0,0 +1,143 @@
+import { Store } from "../../src/ts/store/store";
+import { makeTestEnv, nextMicroTick, TestInfo } from "../helpers";
+
+function makeTestStore(info?: TestInfo): Store {
+  return makeTestEnv(info).store;
+}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe("rpc", () => {
+  test("properly translate query in route", async () => {
+    expect.assertions(1);
+
+    const store = makeTestStore({
+      mockRPC(route, params) {
+        expect(route).toBe("/web/dataset/call_kw/test/hey");
+        return this.rpc(route, params);
+      }
+    });
+
+    await store.rpc({ model: "test", method: "hey" });
+  });
+
+  test("trigger proper events", async () => {
+    const store = makeTestStore();
+    const events: string[] = [];
+    store.on("rpc_status", null, s => {
+      events.push(s);
+    });
+    expect(events).toEqual([]);
+    store.rpc({ model: "test", method: "hey" });
+    expect(events).toEqual(["loading"]);
+    await nextMicroTick();
+    expect(events).toEqual(["loading", "notloading"]);
+  });
+});
+
+describe("notifications", () => {
+  test("can subscribe and add notification", () => {
+    const store = makeTestStore();
+    expect(store.state.notifications.length).toBe(0);
+    const id = store.addNotification({
+      title: "test",
+      message: "message"
+    });
+    expect(store.state.notifications.length).toBe(1);
+    expect(id).toBeDefined();
+  });
+
+  test("can close a notification", () => {
+    const store = makeTestStore();
+
+    const id = store.addNotification({
+      title: "test",
+      message: "message"
+    });
+    expect(store.state.notifications.length).toBe(1);
+
+    store.closeNotification(id);
+    expect(store.state.notifications.length).toBe(0);
+  });
+
+  test("notifications closes themselves after a while", () => {
+    jest.useFakeTimers();
+    const store = makeTestStore();
+
+    store.addNotification({ title: "test", message: "message" });
+
+    expect(setTimeout).toHaveBeenCalledTimes(1);
+    expect(store.state.notifications.length).toBe(1);
+    jest.runAllTimers();
+    expect(store.state.notifications.length).toBe(0);
+  });
+
+  test("sticky notifications do not close themselves after a while", () => {
+    jest.useFakeTimers();
+    const store = makeTestStore();
+
+    store.addNotification({
+      title: "test",
+      message: "message",
+      sticky: true
+    });
+
+    expect(setTimeout).toHaveBeenCalledTimes(0);
+    expect(store.state.notifications.length).toBe(1);
+    jest.runAllTimers();
+    expect(store.state.notifications.length).toBe(1);
+  });
+});
+
+describe("state transitions", () => {
+  test("toggle menu", async () => {
+    const env = makeTestEnv();
+    const store = env.store;
+    expect(store.state.inHome).toBe(true);
+    store.toggleHomeMenu();
+
+    // should still be in home menu since no app is currently active
+    expect(store.state.inHome).toBe(true);
+    expect(env.services.router.getQuery()).toEqual({ home: true });
+
+    const promise = store.activateMenuItem(96);
+    expect(env.services.router.getQuery()).toEqual({ home: true });
+
+    await promise;
+    store.activateController(store.lastController!);
+    expect(store.state.inHome).toBe(false);
+    expect(env.services.router.getQuery()).toEqual({
+      action_id: "131",
+      menu_id: "96"
+    });
+
+    store.toggleHomeMenu();
+    expect(store.state.inHome).toBe(true);
+    expect(env.services.router.getQuery()).toEqual({ home: true });
+    store.toggleHomeMenu();
+    expect(store.state.inHome).toBe(false);
+    expect(env.services.router.getQuery()).toEqual({
+      action_id: "131",
+      menu_id: "96"
+    });
+  });
+
+  test("document title", async () => {
+    document.title = "Odoo";
+    const store = makeTestStore();
+    expect(store.state.inHome).toBe(true);
+    expect(document.title).toBe("Odoo");
+    const promise = store.activateMenuItem(96);
+    expect(document.title).toBe("Odoo");
+    await promise;
+    store.activateController(store.lastController!);
+
+    expect(document.title).toBe("Discuss - Odoo");
+
+    store.toggleHomeMenu();
+
+    expect(document.title).toBe("Discuss - Odoo");
+  });
+});

demo/static/tests/ui/__snapshots__/home_menu.test.ts.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can be rendered 1`] = `
+"<div class=\\"o_home_menu\\">
+    <div class=\\"o_apps\\">
+      <a href=\\"#menu_id=96&amp;action_id=131\\" class=\\"o_app\\" data-menu=\\"96\\">
+        <i class=\\"fa fa-comment o_app_icon fa-3x fa-fw\\"></i>
+        <div class=\\"o_caption\\">
+          Discuss
+        </div>
+      </a><a href=\\"#menu_id=205&amp;action_id=250\\" class=\\"o_app\\" data-menu=\\"205\\">
+        <i class=\\"fa fa-pen o_app_icon fa-3x fa-fw\\"></i>
+        <div class=\\"o_caption\\">
+          Notes
+        </div>
+      </a><a href=\\"#menu_id=409&amp;action_id=597\\" class=\\"o_app\\" data-menu=\\"409\\">
+        <i class=\\"fa fa-handshake o_app_icon fa-3x fa-fw\\"></i>
+        <div class=\\"o_caption\\">
+          CRM
+        </div>
+      </a>
+    </div>
+  </div>"
+`;

demo/static/tests/ui/__snapshots__/navbar.test.ts.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can be rendered (in home menu, no app) 1`] = `
+"<div class=\\"o_navbar o_in_home\\">
+    
+    
+  </div>"
+`;
+
+exports[`can be rendered (in home menu, one active app) 1`] = `
+"<div class=\\"o_navbar o_in_home\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-chevron-left\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+  </div>"
+`;
+
+exports[`can render one menu item 1`] = `
+"<div class=\\"o_navbar\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
+        Discuss
+      </a>
+      <ul class=\\"o_menu_sections\\">
+        
+        
+      </ul>
+    
+  </div>"
+`;
+
+exports[`mobile mode: navbar is different 1`] = `
+"<div class=\\"o_navbar\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
+        Notes
+      </a>
+      <ul class=\\"o_menu_sections\\">
+        
+        <li>MOBILEMODE</li>
+      </ul>
+    
+  </div>"
+`;

demo/static/tests/ui/__snapshots__/notification.test.ts.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can be rendered (type = warning) 1`] = `
+"<div class=\\"o_notification o_error\\">
+    
+    <div class=\\"o_notification_title\\">
+      <span class=\\"o_icon fa fa-3x fa-exclamation\\" role=\\"img\\" aria-label=\\"Notification title\\" title=\\"Notification title\\"></span>
+      title
+    </div>
+    <div class=\\"o_notification_content\\">
+      message
+    </div>
+  </div>"
+`;
+
+exports[`can be rendered 1`] = `
+"<div class=\\"o_notification\\">
+    
+    <div class=\\"o_notification_title\\">
+      <span class=\\"o_icon fa fa-3x fa-lightbulb\\" role=\\"img\\" aria-label=\\"Notification title\\" title=\\"Notification title\\"></span>
+      title
+    </div>
+    <div class=\\"o_notification_content\\">
+      message
+    </div>
+  </div>"
+`;

demo/static/tests/ui/__snapshots__/root.test.ts.snap

@@ -0,0 +1,257 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can be rendered (in home menu) 1`] = `
+"<div class=\\"o_web_client\\">
+    <div class=\\"o_navbar o_in_home\\">
+    
+    
+  </div>
+    <div class=\\"o_home_menu\\">
+    <div class=\\"o_apps\\">
+      <a href=\\"#menu_id=96&amp;action_id=131\\" class=\\"o_app\\" data-menu=\\"96\\">
+        <i class=\\"fa fa-comment o_app_icon fa-3x fa-fw\\"></i>
+        <div class=\\"o_caption\\">
+          Discuss
+        </div>
+      </a><a href=\\"#menu_id=205&amp;action_id=250\\" class=\\"o_app\\" data-menu=\\"205\\">
+        <i class=\\"fa fa-pen o_app_icon fa-3x fa-fw\\"></i>
+        <div class=\\"o_caption\\">
+          Notes
+        </div>
+      </a><a href=\\"#menu_id=409&amp;action_id=597\\" class=\\"o_app\\" data-menu=\\"409\\">
+        <i class=\\"fa fa-handshake o_app_icon fa-3x fa-fw\\"></i>
+        <div class=\\"o_caption\\">
+          CRM
+        </div>
+      </a>
+    </div>
+  </div>
+    <div class=\\"o_content o_hidden\\"></div>
+    <div class=\\"o_notification_container\\">
+      
+    </div>
+    <div class=\\"o_loading d-none\\">Loading</div>
+  </div>"
+`;
+
+exports[`clicks on client action with invalid key => empty widget is rendered + warning 1`] = `
+"<div class=\\"o_web_client\\">
+    <div class=\\"o_navbar\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
+        Discuss
+      </a>
+      <ul class=\\"o_menu_sections\\">
+        
+        
+      </ul>
+    
+  </div>
+    
+    <div class=\\"o_content\\"><div class=\\"o_action_controller\\"></div></div>
+    <div class=\\"o_notification_container\\">
+      
+        <div class=\\"o_notification o_error\\">
+    
+    <div class=\\"o_notification_title\\">
+      <span class=\\"o_icon fa fa-3x fa-exclamation\\" role=\\"img\\" aria-label=\\"Notification Invalid Client Action\\" title=\\"Notification Invalid Client Action\\"></span>
+      Invalid Client Action
+    </div>
+    <div class=\\"o_notification_content\\">
+      Cannot find widget 'mail.discuss' in the action registry
+    </div>
+  </div>
+      
+    </div>
+    <div class=\\"o_loading d-none\\">Loading</div>
+  </div>"
+`;
+
+exports[`if url has action_id, will render action and navigate to proper menu_id 1`] = `
+"<div class=\\"o_web_client\\">
+    <div class=\\"o_navbar\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
+        Discuss
+      </a>
+      <ul class=\\"o_menu_sections\\">
+        
+        
+      </ul>
+    
+  </div>
+    
+    <div class=\\"o_content\\"><div class=\\"o_discuss o_action_controller\\">
+    <div class=\\"o_control_panel\\">
+    <ol class=\\"breadcrumb\\" role=\\"navigation\\">
+      <li class=\\"breadcrumb-item active\\">
+        Discuss
+      </li>
+    </ol>
+    <div class=\\"o_cp_searchview\\" role=\\"search\\">
+      <div class=\\"o_searchview\\" role=\\"search\\" aria-autocomplete=\\"list\\">
+    <span class=\\"o_searchview_more fa\\" title=\\"Advanced Search...\\" role=\\"img\\" aria-label=\\"Advanced Search...\\"></span>
+  </div>
+    </div>
+    <div class=\\"o_cp_left\\">
+      <div class=\\"o_cp_buttons\\" role=\\"toolbar\\" aria-label=\\"Control panel toolbar\\"></div>
+      <aside class=\\"o_cp_sidebar\\"></aside>
+    </div>
+    <div class=\\"o_cp_right\\">
+      <div class=\\"btn-group o_search_options\\" role=\\"search\\"></div>
+      <nav class=\\"o_cp_pager\\" role=\\"search\\" aria-label=\\"Pager\\"></nav>
+      <nav class=\\"btn-group o_cp_switch_buttons\\" role=\\"toolbar\\" aria-label=\\"View switcher\\"></nav>
+    </div>
+  </div>
+    <div class=\\"o_content\\">
+      <div class=\\"o_discuss_sidebar\\">
+        <span>DISCUSS!!</span>
+      </div>
+      <div class=\\"o_discuss_content\\">
+        <button>Reset first counter</button>
+        <button>Reset counter 2 in 3s</button>
+        <button>Toggle  Clock/counters</button>
+        <button>Toggle Color</button>
+        <button>Rerender this widget</button>
+        <input>
+        
+          <div>
+      <button>-</button>
+      <span style=\\"font-weight:bold\\">Value: 4</span>
+      <button>+</button>
+    </div>
+          <div>
+      <button>-</button>
+      <span style=\\"font-weight:bold\\">Value: 400</span>
+      <button>+</button>
+    </div>
+        
+        <div>
+      <span>Current Color: </span>
+      red
+    </div>
+        <button>Add notif</button>
+        <button>Add sticky notif</button>
+        <button>Add warning</button>
+      </div>
+    </div>
+  </div></div>
+    <div class=\\"o_notification_container\\">
+      
+    </div>
+    <div class=\\"o_loading d-none\\">Loading</div>
+  </div>"
+`;
+
+exports[`open act window action with invalid viewtype => empty widget is rendered + warning 1`] = `
+"<div class=\\"o_web_client\\">
+    <div class=\\"o_navbar\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
+        Notes
+      </a>
+      <ul class=\\"o_menu_sections\\">
+        
+        
+      </ul>
+    
+  </div>
+    
+    <div class=\\"o_content\\"><div class=\\"o_action_controller\\"></div></div>
+    <div class=\\"o_notification_container\\">
+      
+        <div class=\\"o_notification o_error\\">
+    
+    <div class=\\"o_notification_title\\">
+      <span class=\\"o_icon fa fa-3x fa-exclamation\\" role=\\"img\\" aria-label=\\"Notification Invalid View type\\" title=\\"Notification Invalid View type\\"></span>
+      Invalid View type
+    </div>
+    <div class=\\"o_notification_content\\">
+      Cannot find view of type 'kanban' in the view registry
+    </div>
+  </div>
+      
+    </div>
+    <div class=\\"o_loading d-none\\">Loading</div>
+  </div>"
+`;
+
+exports[`start with no action => clicks on client action => discuss is rendered 1`] = `
+"<div class=\\"o_web_client\\">
+    <div class=\\"o_navbar\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
+        Discuss
+      </a>
+      <ul class=\\"o_menu_sections\\">
+        
+        
+      </ul>
+    
+  </div>
+    
+    <div class=\\"o_content\\"><div class=\\"o_discuss o_action_controller\\">
+    <div class=\\"o_control_panel\\">
+    <ol class=\\"breadcrumb\\" role=\\"navigation\\">
+      <li class=\\"breadcrumb-item active\\">
+        Discuss
+      </li>
+    </ol>
+    <div class=\\"o_cp_searchview\\" role=\\"search\\">
+      <div class=\\"o_searchview\\" role=\\"search\\" aria-autocomplete=\\"list\\">
+    <span class=\\"o_searchview_more fa\\" title=\\"Advanced Search...\\" role=\\"img\\" aria-label=\\"Advanced Search...\\"></span>
+  </div>
+    </div>
+    <div class=\\"o_cp_left\\">
+      <div class=\\"o_cp_buttons\\" role=\\"toolbar\\" aria-label=\\"Control panel toolbar\\"></div>
+      <aside class=\\"o_cp_sidebar\\"></aside>
+    </div>
+    <div class=\\"o_cp_right\\">
+      <div class=\\"btn-group o_search_options\\" role=\\"search\\"></div>
+      <nav class=\\"o_cp_pager\\" role=\\"search\\" aria-label=\\"Pager\\"></nav>
+      <nav class=\\"btn-group o_cp_switch_buttons\\" role=\\"toolbar\\" aria-label=\\"View switcher\\"></nav>
+    </div>
+  </div>
+    <div class=\\"o_content\\">
+      <div class=\\"o_discuss_sidebar\\">
+        <span>DISCUSS!!</span>
+      </div>
+      <div class=\\"o_discuss_content\\">
+        <button>Reset first counter</button>
+        <button>Reset counter 2 in 3s</button>
+        <button>Toggle  Clock/counters</button>
+        <button>Toggle Color</button>
+        <button>Rerender this widget</button>
+        <input>
+        
+          <div>
+      <button>-</button>
+      <span style=\\"font-weight:bold\\">Value: 4</span>
+      <button>+</button>
+    </div>
+          <div>
+      <button>-</button>
+      <span style=\\"font-weight:bold\\">Value: 400</span>
+      <button>+</button>
+    </div>
+        
+        <div>
+      <span>Current Color: </span>
+      red
+    </div>
+        <button>Add notif</button>
+        <button>Add sticky notif</button>
+        <button>Add warning</button>
+      </div>
+    </div>
+  </div></div>
+    <div class=\\"o_notification_container\\">
+      
+    </div>
+    <div class=\\"o_loading d-none\\">Loading</div>
+  </div>"
+`;

demo/static/tests/ui/home_menu.test.ts

@@ -0,0 +1,28 @@
+import { HomeMenu } from "../../src/ts/ui/home_menu";
+import { makeTestEnv, makeTestFixture } from "../helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+test("can be rendered", async () => {
+  const testEnv = makeTestEnv();
+  const props = { menuInfo: testEnv.store.menuInfo };
+  const homeMenu = new HomeMenu(testEnv, props);
+  await homeMenu.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});

demo/static/tests/ui/navbar.test.ts

@@ -0,0 +1,66 @@
+import { MenuInfo } from "../../src/ts/store/store";
+import { Navbar, Props } from "../../src/ts/ui/navbar";
+import * as helpers from "../helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+let env: helpers.TestEnv;
+let props: Props;
+let menuInfo: MenuInfo;
+
+beforeEach(() => {
+  fixture = helpers.makeTestFixture();
+  env = helpers.makeTestEnv();
+  props = { inHome: false, app: null };
+  menuInfo = env.store.menuInfo;
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+test("can be rendered (in home menu, no app)", async () => {
+  props.inHome = true;
+  const navbar = new Navbar(env, props);
+  await navbar.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("can be rendered (in home menu, one active app)", async () => {
+  props = { inHome: true, app: menuInfo.menus[96]! };
+  const navbar = new Navbar(env, props);
+  await navbar.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("can render one menu item", async () => {
+  props.app = menuInfo.menus[96]!;
+  const navbar = new Navbar(env, props);
+  await navbar.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("mobile mode: navbar is different", async () => {
+  props.app = menuInfo.menus[205]!;
+  env.isMobile = true;
+  const navbar = new Navbar(env, props);
+  await navbar.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("clicking on left icon toggle home menu ", async () => {
+  props.app = menuInfo.menus[96]!;
+  env.store.state.inHome = false;
+  const navbar = new Navbar(env, props);
+  await navbar.mount(fixture);
+  expect(env.store.state.inHome).toBe(false);
+  (<any>fixture).getElementsByClassName("o_title")[0].click();
+  expect(env.store.state.inHome).toBe(true);
+});

demo/static/tests/ui/notification.test.ts

@@ -0,0 +1,66 @@
+import { Notification as INotification } from "../../src/ts/store/store";
+import { Notification } from "../../src/ts/ui/notification";
+import * as helpers from "../helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+let env: helpers.TestEnv;
+
+beforeEach(async () => {
+  fixture = helpers.makeTestFixture();
+  env = helpers.makeTestEnv();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+function makeNotification(notif: Partial<INotification> = {}): INotification {
+  const defaultNotif = {
+    id: 1,
+    title: "title",
+    message: "message",
+    type: "notification",
+    sticky: false
+  };
+  return Object.assign(defaultNotif, notif);
+}
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+test("can be rendered", async () => {
+  const notif = makeNotification({ title: "title", message: "message" });
+  const navbar = new Notification(env, notif);
+  await navbar.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("can be rendered (type = warning)", async () => {
+  const notif = makeNotification({
+    title: "title",
+    message: "message",
+    type: "warning"
+  });
+  const navbar = new Notification(env, notif);
+  await navbar.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("can be closed by clicking on it (if sticky)", async () => {
+  env.addNotification({
+    title: "title",
+    message: "message",
+    sticky: true
+  });
+
+  const navbar = new Notification(env, env.store.state.notifications[0]);
+  await navbar.mount(fixture);
+  expect(env.store.state.notifications.length).toBe(1);
+  (<any>fixture.getElementsByClassName("o_close")[0]).click();
+  expect(env.store.state.notifications.length).toBe(0);
+});

demo/static/tests/ui/root.test.ts

@@ -0,0 +1,85 @@
+import { Registry } from "../../src/ts/core/registry";
+import { Root } from "../../src/ts/ui/root";
+import * as helpers from "../helpers";
+import { makeTestEnv } from "../helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = helpers.makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+test("can be rendered (in home menu)", async () => {
+  const testEnv = makeTestEnv();
+  const root = new Root(testEnv, testEnv.store);
+  await root.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("if url has action_id, will render action and navigate to proper menu_id", async () => {
+  const router = new helpers.MockRouter({ action_id: "131" });
+  const testEnv = makeTestEnv({ services: <any>{ router } });
+  await helpers.nextTick();
+
+  const root = new Root(testEnv, testEnv.store);
+  await root.mount(fixture);
+  await helpers.nextTick();
+  expect(router.getQuery()).toEqual({
+    action_id: "131",
+    menu_id: "96"
+  });
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("start with no action => clicks on client action => discuss is rendered", async () => {
+  const testEnv = makeTestEnv();
+  const root = new Root(testEnv, testEnv.store);
+  await root.mount(fixture);
+
+  expect(testEnv.services.router.getQuery()).toEqual({ home: true });
+
+  // discuss menu item
+  await (<any>document.querySelector('[data-menu="96"]')).click();
+  await helpers.nextTick();
+  expect(fixture.innerHTML).toMatchSnapshot();
+  expect(testEnv.services.router.getQuery()).toEqual({
+    action_id: "131",
+    menu_id: "96"
+  });
+});
+
+test("clicks on client action with invalid key => empty widget is rendered + warning", async () => {
+  const testEnv = makeTestEnv({ actionRegistry: new Registry() });
+  const root = new Root(testEnv, testEnv.store);
+  await root.mount(fixture);
+
+  // discuss menu item
+  await (<any>document.querySelector('[data-menu="96"]')).click();
+  await helpers.nextTick();
+
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("open act window action with invalid viewtype => empty widget is rendered + warning", async () => {
+  const testEnv = makeTestEnv({ viewRegistry: new Registry() });
+  const root = new Root(testEnv, testEnv.store);
+  await root.mount(fixture);
+
+  // note menu item
+  await (<any>document.querySelector('[data-menu="205"]')).click();
+  await helpers.nextTick();
+
+  expect(fixture.innerHTML).toMatchSnapshot();
+});